Advertisement
  1. Code
  2. Android SDK

Cara Membuat Aplikasi Chat Android Menggunakan Firebase

by
Read Time:13 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Dengan Firebase, membuat aplikasi sosial real-time adalah semudah berjalan-jalan di taman. Dan hal terbaik tentang itu: Anda tidak perlu menulis satu baris kode sisi server.

Dalam tutorial ini, saya akan menunjukkan cara memanfaatkan Firebase UI untuk membuat aplikasi obrolan grup yang dapat Anda bagikan dengan teman Anda. Ini akan menjadi aplikasi yang sangat sederhana dengan hanya satu ruang obrolan, yang terbuka untuk semua pengguna.

Seperti dugaan Anda, aplikasi akan bergantung pada Firebase Auth untuk mengelola pendaftaran pengguna dan sign in. Ini juga akan menggunakan basis data real-time Firebase untuk menyimpan pesan obrolan grup.

Prasyarat

Untuk dapat mengikuti tutorial langkah-demi-langkah ini, Anda memerlukan yang berikut ini:

Untuk petunjuk tentang cara menyiapkan akun Firebase dan bersiap untuk pengembangan Firebase di Android Studio, lihat tutorial saya Memulai dengan Firebase untuk Android di sini di Envato Tuts+.

1. Buatlah Sebuah Proyek Android Studio

Jalankan Android Studio dan buat proyek baru dengan activity kosong yang disebut MainActivity.

Add empty activityAdd empty activityAdd empty activity

Tambahkan activity kosongUntuk mengkonfigurasi proyek untuk menggunakan platform Firebase, buka jendela Firebase Assistant dengan mengklik Tools > Firebase.

Saat menggunakan platform Firebase, biasanya sebaiknya tambahkan Firebase Analytics ke proyeknya. Oleh karena itu, di dalam jendela Asisten Firebase, buka bagian Analytics dan tekan Log an Analytics event.

Firebase AssistantFirebase AssistantFirebase Assistant

Selanjutnya, tekan tombol Connect to Firebase dan pastikan opsi Create new Firebase project dipilih. Setelah sambungan dibuat, tekan tombol Add Analytics to your app.

Press Add analytics to your appPress Add analytics to your appPress Add analytics to your app

Tekan Add analytics ke aplikasi AndaPada titik ini, proyek Android Studio tidak hanya terintegrasi dengan Firebase Analytics, namun juga siap untuk menggunakan semua layanan Firebase lainnya.

2. Tambahkan Dependensi

Kita akan menggunakan dua perpustakaan dalam proyek ini: Firebase UI, dan perpustakaan dukungan desain Android. Oleh karena itu, buka file build.gradle dari modul app dan tambahkan dependensi compile berikut ini:

Tekan tombol Sync Now untuk memperbarui proyek.

3. Menentukan Layout

File activity_main.xml, yang sudah terikat pada MainActivity, mendefinisikan isi layar awal aplikasi. Dengan kata lain, itu akan mewakili ruang obrolan.

Seperti kebanyakan aplikasi obrolan grup lainnya yang tersedia saat ini, aplikasi kita akan memiliki elemen UI berikut:

  • Sebuah daftar yang menampilkan semua pesan obrolan grup dalam urutan kronologis
  • Field masukan dimana pengguna dapat mengetikkan pesan baru
  • Tombol yang bisa ditekan pengguna untuk mengirim pesannya

Oleh karena itu, activity_main.xml harus memiliki ListView, EditText, dan FloatingActionButton. Setelah menempatkan semuanya di dalam widget RelativeLayout, XML layout Anda akan terlihat seperti ini:

Perhatikan bahwa saya telah menempatkan widget EditText di dalam widget TextInputLayout. Melakukannya menambahkan label mengambang ke EditText, yang penting jika Anda ingin mematuhi pedoman material design.

Setelah layout layar beranda sudah siap, kita dapat beralih ke pembuatan layout untuk pesan obrolan, yang akan menjadi item di dalam ListView. Mulailah dengan membuat file XML layout baru yang disebut message.xml, yang elemen root-nya adalah RelativeLayout.

Layout-nya harus memiliki widget TextView untuk menampilkan teks pesan obrolan, waktu pengirimannya, dan pengarangnya. Anda bebas menempatkannya dalam urutan apapun. Inilah layout yang akan saya gunakan:

4. Menangani Otentikasi Pengguna

Mengizinkan pengguna untuk secara anonim mengeposkan pesan ke ruang obrolan akan menjadi ide yang sangat buruk. Hal ini dapat menyebabkan spam, masalah keamanan, dan pengalaman obrolan yang kurang ideal bagi pengguna. Karena itu, mari kita konfigurasikan aplikasi kita sehingga hanya pengguna terdaftar yang bisa membaca dan memposting pesan.

Mulailah dengan membuka bagian Auth dari Konsol Firebase dan mengaktifkan Email/Password sebagai penyedia sign-in.

Jangan ragu untuk mengaktifkan penyedia sign-in OAuth 2.0 juga. Namun, FirebaseUI v0.6.0 mendukung Google Sign-In dan Facebook Login dengan mudah.

Langkah 1: Menangani Sign-In Pengguna

Segera setelah aplikasi dijalankan, aplikasi harus memeriksa apakah pengguna sudah sign-in. Jika demikian, aplikasi harus terus maju dan menampilkan isi ruang obrolan. Jika tidak, ia harus mengalihkan pengguna ke sign-in, atau layar pendaftaran. Dengan FirebaseUI, membuat layar tersebut membutuhkan kode yang jauh lebih sedikit daripada yang Anda bayangkan.

Di dalam metode onCreate() dari MainActivity, periksa apakah pengguna sudah sign-in dengan memeriksa apakah objek FirebaseUser saat ini bukan null. Jika null, Anda harus membuat dan mengkonfigurasi objek Intent yang membuka aktivitas sign-in. Untuk melakukannya, gunakan kelas SignInIntentBuilder. Setelah intent siap, Anda harus meluncurkan aktivitas sign-in menggunakan metode startActivityForResult().

Perhatikan bahwa aktivitas sign-in juga memungkinkan pengguna baru mendaftar. Oleh karena itu, Anda tidak memiliki kode tambahan untuk menangani pendaftaran pengguna.

Tambahkan kode berikut ke metode onCreate():

Seperti yang dapat Anda lihat dalam kode di atas, jika pengguna sudah sign-in, pertama-tama kita menampilkan Toast untuk menyambut pengguna, lalu memanggil metode bernama displayChatMessages. Untuk saat ini, buat saja stub untuk itu. Kita akan menambahkan kode untuknya nanti.

Begitu pengguna sign-in, MainActivity akan menerima hasilnya dalam bentuk Intent. Untuk mengatasinya, Anda harus menimpa metode onActivityResult().

Jika hasil kodenya adalah RESULT_OK, itu berarti pengguna telah sign-in dengan sukses. Jika demikian, Anda harus memanggil metode displayChatMessages() lagi. Jika tidak, panggil finish() untuk menutup aplikasi.

Pada tahap ini, Anda dapat menjalankan aplikasi dan melihat layar sign-in dan pendaftaran.

Sign up screen for new usersSign up screen for new usersSign up screen for new users

Langkah 2: Menangani Sign-Out Pengguna

Secara default, FirebaseUI menggunakan Smart Lock for Passwords. Oleh karena itu, setelah pengguna sign in, mereka akan tetap sign in meskipun aplikasi dimulai ulang. Agar pengguna dapat sign out, sekarang kita akan menambahkan opsi sign-out ke menu overflow dari MainActivity.

Buat file sumber menu baru yang disebut main_menu.xml dan tambahkan satu item ke padanya, atribut title-nya disetel ke Sign out. Isi file akan terlihat seperti ini:

Untuk instansiasi sumber menu di dalam MainActivity, timpa metode onCreateOptionsMenu() dan panggil metode inflate() dari objek MenuInflater.

Selanjutnya, timpa metode onOptionsItemSelected() untuk menangani event klik pada item menu. Di dalam metode ini, Anda dapat memanggil metode signOut() dari kelas AuthUI untuk sign out pengguna. Karena operasi sign-out dilakukan secara asinkron, kita juga akan menambahkan OnCompleteListener ke dalamnya.

Setelah pengguna sign out, aplikasi harus ditutup secara otomatis. Itulah alasan mengapa Anda melihat panggilan ke metode finish() pada kode di atas.

5. Membuat Model

Untuk menyimpan pesan obrolan di database real-time Firebase, Anda harus membuat model untuk mereka. Layout pesan obrolan, yang telah kita buat sebelumnya dalam tutorial ini, memiliki tiga view. Untuk dapat mengisi view-view tersebut, model juga harus memiliki setidaknya tiga field.

Buat kelas Java baru yang disebut ChatMessage.java dan tambahkan tiga variabel anggota ke dalamnya: messageText, messageUser, and messageTime. Juga tambahkan constructor untuk menginisialisasi variabel-variabel tersebut.

Untuk membuat model yang kompatibel dengan FirebaseUI, Anda juga harus menambahkan constructor default ke dalamnya, bersama dengan getter dan setter untuk semua variabel anggota.

Pada titik ini, kelas ChatMessage akan terlihat seperti ini:

6. Memposting Pesan Obrolan

Setelah modelnya siap, kita dapat dengan mudah menambahkan pesan obrolan baru ke database real-time Firebase.

Untuk mengirim pesan baru, pengguna akan menekan tombol FloatingActionButton. Karena itu, Anda harus menambahkan OnClickListener untuknya.

Di dalam listener, Anda harus terlebih dahulu mendapatkan objek DatabaseReference menggunakan metode getReference() dari kelas FirebaseDatabase. Anda kemudian dapat memanggil metode push() dan setValue() untuk menambahkan instance baru dari kelas ChatMessage ke database real-time.

Instances ChatMessage harus, tentu saja, diinisialisasi dengan menggunakan konten EditText dan nama tampilan pengguna yang saat ini sign in.

Dengan demikian, tambahkan kode berikut ke metode onCreate():

Data dalam database real-time Firebase selalu disimpan sebagai pasangan kunci-nilai. Namun, jika Anda mengamati kode di atas, Anda akan melihat bahwa kita memanggil setValue() tanpa menentukan kunci apa pun. Itu hanya diperbolehkan karena panggilan ke metode setValue() didahului dengan panggilan ke metode push(), yang secara otomatis menghasilkan kunci baru.

7. Menampilkan Pesan Obrolan

FirebaseUI memiliki kelas yang sangat berguna yang disebut FirebaseListAdapter, yang secara dramatis mengurangi upaya yang dibutuhkan untuk mengisi ListView menggunakan data yang ada di database real-time Firebase. Kita akan menggunakannya sekarang untuk mengambil dan menampilkan semua objek ChatMessage yang ada dalam database.

Tambahkan objek FirebaseListAdapter sebagai variabel anggota baru dari kelas MainActivity.

Di dalam metode displayChatMessages(), menginisialisasi adaptor menggunakan constructor-nya, yang mengharapkan argumen berikut:

  • Referensi ke Activity
  • class dari objek yang Anda minati
  • Layout dari item-item daftar
  • Objek DatabaseReference

FirebaseListAdapter adalah kelas abstrak dan memiliki metode abstrak populateView(), yang harus ditimpa.

Seperti namanya, populateView() digunakan untuk mengisi view setiap item daftar. Jika Anda terbiasa dengan kelas ArrayAdapter, Anda bisa memikirkan populateView() sebagai alternatif metode getView().

Di dalam metode ini, Anda harus terlebih dahulu menggunakan findViewById() untuk mendapatkan referensi ke setiap TextView yang ada di file layout message.xml. Anda kemudian dapat memanggil metode setText() mereka dan mengisi mereka menggunakan getter dari kelas ChatMessage.

Pada titik ini, konten metode displayChatMessages() seharusnya seperti ini:

Aplikasi obrolan grup sudah siap. Jalankan dan posting pesan baru untuk melihat mereka muncul segera di ListView. Jika Anda berbagi aplikasi dengan teman Anda, Anda juga akan bisa melihat pesan mereka begitu mereka mengeposkannya.

Kesimpulan

Dalam tutorial ini, Anda belajar menggunakan Firebase dan FirebaseUI untuk membuat aplikasi obrolan grup yang sangat sederhana. Anda juga melihat betapa mudahnya bekerja dengan kelas yang tersedia di FirebaseUI untuk dengan segera membuat layar baru dan menerapkan fungsionalitas yang rumit.

Untuk mempelajari lebih lanjut tentang Firebase dan FirebaseUI, lihat dokumentasi resminya. Atau lihat beberapa tutorial Firebase kami yang lain di sini di Envato Tuts+!


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.