Menampilkan List Kontak Rainbow Pada Android Apps

Pada tutorial kali ini kita akan belajar bagaimana cara menampilkan list kontak Rainbow pada Android Apps. Tapi sebelum lanjut ke tutorial pastikan kamu sudah membaca tutorial sebelumnya tentang bagaimana Cara Integrasi Rainbow API pada Android Apps.

Di tutorial ini kita akan menggunakan Rainbow SDK untuk menampilkan list kontak Rainbow. Kenapa? Dengan Rainbow SDK, kita bisa melihat langsung perubahan pada kontak secara real time seperti berikut :

Pembuatan Project

Buatlah project baru di Android Studio, lalu buka berkas (file) build.gradle dan ubah menjadi seperti berikut :

Untuk menampilkan list kontak kita akan menggunakan RecyclerView. Next, lakukan sinkronisasi project dengan menekan tombol Sync Now. Setelah selesai, buatlah kelas baru yang akan digunakan untuk inisialisasi Rainbow seperti berikut :

Jangan lupa untuk mendaftarkan kelas tersebut dan menambahkan beberapa permission kedalam berkas (file) AndroidManifest.xml seperti berikut :

Struktur kelas dan package dari project kali ini akan seperti berikut :

Komponen Rainbow

Yang pertama kita buat adalah kelas untuk komponen Rainbow, pada komponen Rainbow akan ada dua kelas yang dibuat. Kelas pertama yaitu kelas RainbowConnectionListener seperti berikut :

Pada kelas RainbowConnectionListener di atas terdapat beberapa interfaces yang akan digunakan sebagai Callback Listener dari kelas berikutnya yaitu RainbowConnection. Isi dari kelas RainbowConnection adalah seperti berikut :

Di dalam kelas RainbowConnection terdapat beberapa static method dengan detail fungsi sebagai berikut :

  • startConnection()
    Menjalankan service Rainbow agar fungsi seperti Sign In bisa digunakan.
  • startSignIn()
    Masuk / Sign In (masuk) ke platform Rainbow.
  • registerAllContact()
    Mendaftarkan semua kontak ke dalam listener agar jika terjadi perubahan dapat langsung ditampilkan secara realtime.
  • unregisterAllContact()
    Menghapus kontak yang terdaftar pada listener agar tidak terjadi Leaks (kebocoran) pada memory.
  • getRainbowContacts()
    Mendapatkan seluruh kontak pengguna yang telah melakukan Sign In.
  • getUserLoginInCache()
    Mendapatkan email pengguna yang tersimpan di dalam cache.
  • getUserPasswordInCache()
    Mendapatkan password pengguna yang tersimpan di dalam cache.

Penggunaan komponen Handler pada fungsi start() dan fungsi sign() bertujuan agar komponen yang berjalan pada UI Thread bisa dipanggil dan dijalankan. Sebabnya, Callback Listener dari beberapa fungsi Rainbow SDK masih berada pada Background Thread.

Untuk mendapatkan list kontak kita menggunakan module Contacts pada SDK yang detailnya bisa dibaca pada tautan berikut https://hub.openrainbow.com/#/documentation/doc/sdk/android/modules/Contacts.

Komponen Common

Pada komponen common hanya terdapat satu kelas, yaitu kelas Utils yang hanya memiliki satu static method seperti berikut :

Komponen Adapter

Pada komponen adapter yang pertama dibuat adalah sebuah layout. Ini akan digunakan untuk menampilkan data tiap kontak seperti berikut :

Layout di atas memiliki beberapa widget TextView, satu widget ImageView dan satu widget Custom ImageView.

Selanjutnya kita akan membuat kelas holder yang akan digunakan untuk merender tampilan ke aplikasi seperti berikut :

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

Terakhir adalah pembuatan kelas adapter. Kelas adapter sendiri akan digunakan untuk menjembatani data yang akan ditampilkan dengan antarmuka aplikasi. Kode dari kelas adapter adalah seperti berikut :

Halaman Login

Pada halaman login terdapat dua widget EditText, satu widget ProgressBar dan satu widget Button pada layout activity_main.xml seperti berikut :

Kemudian pada kelas LoginActivity terdapat pemanggilan static method dari kelas RainbowConnection seperti startConnection() dan startSignIn() yang sebelumnya sudah dibuat. Kodenya dari LoginActivity adalah seperti berikut :

Halaman List Kontak

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

Kemudian pada kelas ContactsActivity terdapat inisialisasi ContactsAdapter, 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 :

Jika gagal saat mencoba Sign In, pastikan akun Sandboxed Rainbow yang kamu gunakan untuk Sign In sudah aktif seperti berikut :

Hal tersebut diperlukan karena pada tutorial ini kita menggunakan host sandboxed.openrainbow.com. Jika berhasil login tapi kontak kamu kosong, pastikan kamu memiliki kontak saat Sign In (masuk) menggunakan tautan web-sandbox.openrainbow.com.

Membuat Test Account

Jika tak mau repot membuat akun baru untuk menambah kontak, gunakanlah Rainbow-CLI untuk membuat sebuah test account yang berada di dalam Rainbow Sandbox platform.

Pertama, instal Rainbow-CLI dengan perintah npm install -g rainbow-cli seperti berikut :

Sebelum menambahkan sebuah test account, Sign In (masuk) dengan menggunakan akun Developer Sandbox yang telah aktif dengan perintah rbw login ‘email’ ‘password’ tanpa tanda petik seperti berikut :

Setelah selesai, barulah kita bisa menambahkan sebuah test account dengan perintah rbw create user ‘user@email.com’ ‘password’ ‘first name’ ‘last name’ tanpa tanda petik seperti berikut :

Jika berhasil kita bisa langsung menambahkan kontak dari test account yang sudah dibuat. Jika dijalankan kembali maka hasilnya seperti berikut :

Tutorial ini berhubungan juga dengan tutorial Membuat Halaman Login dan Update User Info Rainbow Pada Android Apps. Jika kita mengupdate kontak dari project tutorial tersebut, kita bisa langsung melihat perubahannya seperti berikut :

Sekian tutorial Menampilkan List Kontak Rainbow Pada Android Apps. Semoga artikel ini bermanfaat buatmu.

Semoga artikel ini dapat membantu anda. Jika ada pertanyaan, silakan tinggalkan komentar di halaman blog ini dan kami akan membantu anda.

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

Belajar di Dicoding Sekarang →
Share this:

Leave a comment