Aplikasi Pesan Singkat Sederhana Menggunakan Rainbow SDK – Menerima dan Membalas Pesan

Aplikasi Pesan Singkat Sederhana Menggunakan Rainbow SDK – Menerima dan Membalas Pesan

Halo teman-teman,

Pada tutorial sebelumnya kita telah berhasil melakukan inisialisasi Rainbow SDK pada project kita.

Selanjutnya, kita akan membuat aplikasi kita dapat menerima dan membalas pesan singkat antar kontak secara realtime. Jika belum menginisialisasi Rainbow SDK pada project, silakan cek tutorial sebelumnya yaitu Aplikasi Pesan Singkat Sederhana Menggunakan Rainbow SDK – Inisialisasi Komponen Rainbow API.

Rainbow SDK

Komponen Adapter

Pertama kita membutuhkan sebuah adapter untuk menampilkan data tiap kontak, untuk itu kita akan membuat sebuah layout terlebih dahulu seperti berikut:

Pada berkas layout di atas memiliki beberapa view yaitu CircleImageView untuk menampilkan gambar pengguna dan status pengguna, dan juga TextView untuk menampilkan nama pengguna dan status pengguna.

Selanjutnya kita membuat kelas Adapter yang di dalamnya terdapat kelas holder yang akan digunakan untuk me-render tampilan aplikasi menjadi seperti berikut: 

Fungsi switch statement di atas adalah untuk mengecek status kontak apakah sedang online, offline atau yang lainya.

Kelas adapter sendiri akan digunakan untuk menjembatani data yang akan ditampilkan dengan antarmuka aplikasi.

 

Halaman List Kontak 

Pada halaman kontak hanya terdapat satu buah widget, yaitu widget RecyclerView dan akan digunakan untuk menampilkan daftar kontak seperti berikut :

Kemudian pada kelas ContactListActivity terdapat inisialisasi ContactListAdapter, RecyclerView dan pemanggilan beberapa static method dari kelas RainbowConnection yang sebelumnya sudah dibuat seperti berikut :

Setelah selesai kamu bisa langsung mencobanya. Jika tidak terjadi eror maka hasilnya adalah seperti berikut :

Oke sekarang kita akan melanjutkan project  dengan membuat kelas ChatRoomActivity, di mana pada kelas ini kita akan menampilkan daftar pesan antara kita dan pengguna lain yang akan kita hubungi. Pada kelas ini akan menerima JID dari kontak yang kita pilih dari daftar kontak dan kemudian menampilkan semua daftar pesan antara kontak tersebut dan pengguna yang sedang terhubung ke aplikasi. Kelas ChatRoomActivity akan mengimplementasi IItemChaneListener agar jika terjadi perubahan pada daftar pesan akan langsung diperbaharui secara real time. Kelas ChatRoomActivity akan seperti berikut:

Fungsi Rainbow SDK di dalam Kelas ChatRoomActivity

Di dalam kelas ChatRoomActivity terdapat beberapa fungsi dari Rainbow SDK yang memiliki kegunaan sebagai berikut :

  • getConversationFromContact(contactJId)
    Fungsi ini digunakan untuk mendapatkan data percakapan berdasarkan JID kontak yang telah kita berikan.
  • getMessagesFromConversation(conversation)
    Fungsi ini digunkaan untuk mendapatkan daftar pesan yang ada pada data percakapan yang telah kita ambil sebelumnya.
  • sendMessageToConversation(conversation, message)
    Fungsi ini digunakan untuk mengirimkan pesan baru ke data percakapan.

Untuk layout halaman chat room kita membutuhkan RecyclerView, EditText dan sebuah Button yang akan digunakan untuk menampilkan daftar kontak dan mengirim pesan seperti berikut :

Tahap selanjutnya adalah kita perlu membuat berkas layout dengan nama item_chat_received dan item_chat_send untuk menampilkan setiap item pesan sebagai berikut:

Berikut merupakan kode pada berkas item_chat_send.xml.

Layout item_chat_received akan digunakan untuk menampilkan pesan yang kita terima dari pengguna lain dan layout item_chat_send akan digunakan untuk menampilkan pesan yang kita kirimkan. Selanjutnya kita memerlukan kelas Adapter yang akan kita beri nama ChatListAdapter yang berguna untuk menampilkan setiap item menjadi list. Kelas ChatListAdapter akan seperti berikut:

 

Pada kelas Adapter ini kita akan menampilkan pesan menjadi dua tipe yang berbeda, yaitu pesan yang kita terima dan pesan yang kita kirimkan. Untuk itu, kita membuat 2 variable konstan sebagai tipe dari tampilan yang akan kita gunakan. Kita juga perlu melakukkan override pada fungsi getItemViewType dan memberikan kondisi jenis pesan tersebut dan mengembalikan nilai yang sesuai, sehingga adapter mengetahui dan menggunakan layout yang diperlukan pada fungsi onCreateViewHolder.

Setelah selesai, jalankan project Anda. Jika tidak terjadi eror maka tampilan aplikasi akan seperti berikut:

Rainbow SDK

Sekian tutorial mengirimkan pesan antar pengguna melalui kontak secara real time. Semoga artikel ini bermanfaat buatmu.

Jika ada pertanyaan, silakan tinggalkan komentar di halaman blog ini ya. Kami akan coba membantumu!

Aplikasi Pesan Singkat Sederhana Menggunakan Rainbow SDK – Menerima dan Membalas Pesan-end

Simak artikel terkait:

  1. Aplikasi Pesan Singkat Sederhana Menggunakan Rainbow SDK – Inisialisasi Komponen Rainbow API
  2. Menampilkan dan Membuat Channel dengan Menggunakan Rainbow SDK

Belajar mengembangkan aplikasi atau game dengan kurikulum yang telah divalidasi langsung oleh industri dengan Dicoding Academy.

Belajar di Dicoding Sekarang →
Share this: