Menampilkan dan Membuat Channel dengan Menggunakan Rainbow SDK

Menampilkan dan Membuat Channel dengan Menggunakan Rainbow SDK

Halo, apa kabar teman-teman developer?

Pada tutorial kali ini kita akan membuat sebuah aplikasi yang dapat menampilkan dan membuat Channel dengan menggunakan Rainbow SDK. Nantinya aplikasi yang akan kita buat akan seperti di bawah ini:

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Pembuatan Project 

Dalam project kali ini kita akan menulis kode dengan menggunakan bahasa pemrograman Kotlin. Pertama, buat project baru di Android Studio, lalu buka berkas (file) build.gradle (Project) dan tambahkan beberapa baris kode sehingga menjadi seperti berikut:


Kemudian ubah baris kode pada berkas build.gradle (App) menjadi seperti berikut:


Jika semua sudah disesuaikan dengan project-mu, lakukan sinkronisasi project dengan menekan tombol Sync Now di pojok kanan atas. Kita telah berhasil melakukan import library yang kita butuhkan. Setelah selesai buatlah kelas baru dengan nama App yang akan digunakan untuk inisialisasi Rainbow seperti berikut:


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


Untuk struktur kelas dan package dari project kali ini, akan menjadi seperti berikut :

Komponen Rainbow

Pertama kita akan membuat beberapa kelas yang berguna untuk berinteraksi dengan library Rainbow SDK. Kelas yang pertama kita buat adalah RainbowConnectionListener. Kode pada kelas RainbowConnectionListener akan 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.
  • getAllChannels()
    Mendapatkan daftar semua channel.
  • registerChannelChangeListener()
    Mendaftarkan listener untuk mengetahui perubahan yang terjadi pada channel secara real time.
  • unregisterChannelChangeListener()
    Menghapus listener yang telah didaftarkan.
  • registerAllChannel()
    Mendaftarkan semua listener dari setiap data channel yang telah didapatkan.
  • unregisterAllChannel()
    Menghapus semua listener yang telah didaftarkan.

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 data channel kita menggunakan module pada Rainbow SDK yang detailnya bisa dibaca pada tautan berikut:

https://hub.openrainbow.com/#/documentation/doc/sdk/android/modules/Channels 
https://hub.openrainbow.com/#/documentation/doc/sdk/android/objects/Channel 

Komponen Adapter

Pertama kita membutuhkan sebuah pager adapter  untuk menampilkan setiap halaman. Untuk itu kita akan membuat  layout untuk setiap halaman terlebih dahulu seperti berikut:

Halaman all channel:


Halaman subcribed channel:


Halaman owned channel:


Ketiga berkas layout membutuhkan widget RecyclerView untuk menampilkan data daftar channel sesuai dengan yang dibutuhkan.

Selanjutnya kita membuat kelas Adapter yang di dalamnya terdapat judul setiap halaman, kelas adapter akan menjadi seperti berikut:


 

Kedua kita akan 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 ImageView untuk menampilkan gambar channel dan juga TextView untuk menampilkan nama channel dan deskripsi channel.

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


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

 

Halaman List Channel

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

activity_channel_list.xml:


content_main.xml:


Kemudian pada kelas ChannelListActivity terdapat inisialisasi ChannelListPagerAdapter dan pemanggilan beberapa static method dari kelas RainbowConnection yang sebelumnya sudah dibuat seperti berikut :


Pada kelas ChannelListActivity kita juga memiliki fungsi untuk membuat channel baru dengan memanggul fungsi createPublicChannel() untuk membuat channel public. Untuk fungsi-fungsi lainnya dalam membuat channel, silakan pelajari lebih lanjut pada tautan berikut:

https://hub.openrainbow.com/#/documentation/doc/sdk/android/modules/Channels

Berkutnya kita juga perlu membuat beberapa Fragment untuk menampilkan halaman yang sesuai. Kita akan membuat 3 buah fragment yaitu AllChannelFragment, OwnedChannelFragment dan SubscribeChannelFragment. Kode pada masing-masing kelas akan menjadi sebagai berikut:

kelas AllChannelFragment:


Pada kelas AllChannelFragment kita akan mengambil data theBestChannel sebagai contoh yang akan menampilkan 10 data channel terpopuler.

Kelas OwnedChannelFragment:


Pada kelas OwnedChannelFragment diatas akan mengambil data daftar channel yang kita miliki.

kelas SubscribedChannelFragment:


Terakhir pada kelas SubscribedChannelFragment akan menampilkan semua channel yang telah kita subscribe.

Setelah selesai, jalankan project kamu. Jika semua berjalan sempurna, tampilan aplikasi akan seperti berikut:

Sekian tutorial menampilkan dan membuat Channel dengan menggunakan Rainbow SDK. Semoga artikel ini bermanfaat buatmu.

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

Menampilkan dan Membuat Channel dengan Menggunakan Rainbow SDK- end

Simak artikel terkait:

  1. Aplikasi Pesan Singkat Sederhana Menggunakan Rainbow SDK – Menerima dan Membalas Pesan
  2. Aplikasi Pesan Singkat Sederhana Menggunakan Rainbow SDK – Inisialisasi Komponen Rainbow API

Belajar Pemrograman Gratis
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.