Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Membuat Pelacak Berat Badan dengan Cloud Firestore

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Akhir-akhir ini menyimpan data aplikasi Anda di cloud sangat penting karena pengguna cenderung memiliki banyak perangkat dan ingin agar aplikasinya disinkronkan pada semua perangkat. Dengan Cloud Firestore, database NoSQL yang secara real-time tersedia pada platform Firebase, melakukannya lebih mudah dan lebih aman daripada sebelumnya.

Dalam tutorial sebelumnya, Saya memperkenalkan kepada Anda semua fitur hebat yang ditawarkan oleh Cloud Firestore. Hari ini, Saya akan menunjukkan kepada Anda cara menggunakannya bersama produk Firebase lainnya, seperti FirebaseUI Auth dan Firebase Analytics, untuk membuat aplikasi pelacak berat badan yang sederhana namun sangat skalabel.

Syarat yang diperlukan

Untuk mengikuti tutorial ini langkah demi langkah, Anda akan membutuhkan:

  • Versi terbaru dari Android Studio
  • Akun Firebase
  • dan perangkat atau emulator yang menjalankan Android 5.0 atau lebih tinggi

1. Setup Proyek

Agar dapat menggunakan produk Firebase dalam proyek Android Studio, Anda memerlukan plugin Gradle Google Services, konfigurasi file Firebase, dan beberapa penerapan dependensi implementation. Dengan Firebase Assistant, Anda bisa mendapatkannya dengan sangat mudah.

Buka assistant dengan membuka Tools > Firebase. Selanjutnya, pilih opsi Analytics dan klik tautan Log an Event Analytics.

Fierbase Assistant panel

Anda sekarang dapat menekan tombol Connect to Firebase untuk menghubungkan proyek Android Studio ke proyek baru Firebase Anda.

Connect to Firebase dialog

Namun, untuk benar-benar menambahkan plugin dan dependensi implementation, Anda juga harus menekan tombol Add Analytics to your app.

Aplikasi pelacak berat badan yang kami buat saat ini hanya akan memiliki dua fitur: menyimpan bobot berat badan dan menampilkannya sebagai daftar yang disortir dalam urutan kronologis yang terbalik. Kami tentu saja akan menggunakan Firestore untuk menyimpan bobot berat badan. Untuk menampilkannya sebagai daftar, kami akan menggunakan komponen yang terkait dengan Firestore yang tersedia di library FirebaseUI. Oleh karena itu, tambahkan dependensi implementation berikut ke modul app pada file build.gradle:

Pengguna hanya harus dapat melihat bobot berat badan mereka sendiri, bukan bobot dari semua orang yang menggunakan aplikasi. Oleh karena itu, aplikasi kami harus memiliki kemampuan untuk mengidentifikasi penggunanya secara unik. FirebaseUI Auth menawarkan kemampuan tersebut, jadi tambahkan dependensi berikut ini:

Kami juga akan membutuhkan beberapa Material Desain Widget untuk memberikan aplikasi kami tampilan yang menyenangkan. Jadi, pastikan Anda menambahkan dukungan library Desain dan library Material Dialog sebagai dependensi.

Untuk menyelesaikannya, tekan tombol Sync Now untuk memperbarui proyek.

2. Mengkonfigurasi Autentifikasi Firebase

Autentifikasi Firebase mendukung berbagai identity-providers. Namun, semuanya dinonaktifkan secara default. Untuk mengaktifkan satu atau beberapa di antaranya, Anda harus mengunjungi console Firebase.

Pada console, pilih proyek Firebase yang Anda buat pada langkah sebelumnya, buka bagian Authentication, dan tekan tombol Set up sign-in method.

Firebase Authentication home screen

Untuk memungkinkan pengguna masuk ke aplikasi kami menggunakan akun Google, aktifkan Google sebagai penyedia, berikan nama umum yang berarti bagi proyek Anda, dan tekan tombol Save.

Google identity provider configuration

Google adalah identity-provider termudah yang dapat Anda gunakan. Tidak perlu konfigurasi, dan proyek Android Studio Anda tidak memerlukan dependensi tambahan untuk itu.

3. Melakukan Konfigurasi Cloud Firestore

Anda harus mengaktifkan Firestore di console Firebase sebelum Anda mulai menggunakannya. Untuk melakukannya, buka bagian Database dan tekan tombol Get Started yang ada pada Cloud Firestore Beta card.

Cloud Firestore card

Anda sekarang akan diminta untuk memilih mode keamanan untuk database. Pastikan Anda memilih opsi Start in locked mode dan tekan tombol Enable.

Security mode selection screen

Dalam mode terkunci, secara default, tidak seorang pun akan dapat mengakses atau memodifikasi isi dari database. Oleh karena itu, Anda sekarang harus membuat aturan keamanan yang memungkinkan pengguna untuk membaca dan menulis hanya dokumen-dokumen yang menjadi milik mereka. Mulailah dengan membuka tab Rules.

Sebelum kami membuat aturan keamanan untuk database, kami harus menyelesaikan bagaimana cara menyimpan data di dalamnya. Jadi, katakanlah kita akan memiliki collection tingkat atas bernama users yang berisi dokumen yang mewakili para pengguna kami. Dokumen dapat memiliki ID unik yang identik dengan ID yang diberikan layanan Firebase Authentication untuk pengguna.

Karena pengguna akan menambahkan beberapa entri dari bobot berat badan ke dokumen mereka, menggunakan sub-collection untuk menyimpan entri-entri tersebut sangatlah ideal. Mari kita sebut sub-collection dengan weights.

Firestore database structure

Berdasarkan skema di atas, kita sekarang dapat membuat aturan untuk path users/{user_id}/weights/{weight}. Aturannya adalah bahwa pengguna diizinkan untuk membaca dari dan menulis ke Path tersebut hanya jika variabel {user_id} sama dengan ID Autentikasi Firebase pengguna.

Dengan demikian, perbarui isi dari rules editor.

Untuk menyelesaikannya, tekan tombol Publish untuk mengaktifkan aturan.

4. Mengautentikasi Pengguna

Aplikasi kami hanya dapat digunakan jika pengguna masuk menggunakan akun Google. Oleh karena itu, segera setelah terbuka, ia harus memeriksa apakah pengguna memiliki ID Autentikasi Firebase yang valid. Jika pengguna memang memiliki ID, itu seharusnya melanjutkan dan membuat antarmuka pengguna. Jika tidak, seharusnya menampilkan tampilan sign-in pada layar.

Untuk memeriksa apakah pengguna memiliki ID, kami cukup memeriksa apakah properti currentUser dari class FirebaseAuth tidak berisi null. Jika berisi null, kita dapat membuat intent sign-in dengan memanggil method createSignInIntentBuilder() dari class AuthUI.

Kode berikut menunjukkan kepada Anda cara melakukannya untuk Google sebagai identity-provider:

Perhatikan bahwa kita memanggil method bernama showUI() jika ID yang valid sudah ada. Method ini belumlah tersedia, jadi buatlah dan biarkan bagian body kosong untuk saat ini.

Untuk menangkap hasil dari intent sign-in, kita melakukan override pada method activity onActivityResult(). Dalam method, jika nilai argumen resultCode adalah RESULT_OK dan properti currentUser tidak lagi null, itu berarti bahwa pengguna berhasil masuk. Dalam hal ini, kita harus memanggil kembali method showUI() untuk merender antarmuka pengguna.

Jika pengguna gagal melakukan proses sign-in, kita dapat menampilkan "toast" dan menutup aplikasi dengan memanggil method finish().

Dengan demikian, tambahkan kode berikut ke activity:

Pada tahap ini, jika Anda menjalankan aplikasi untuk pertama kalinya, Anda seharusnya dapat melihat tampilan sign-in pada layar yang terlihat seperti ini:

Account selection dialog

Pada proses selanjutnya — berkat Google Smart Lock, yang diaktifkan secara default — Anda akan masuk secara otomatis.

5. Mendefinisikan Layout

Aplikasi kami membutuhkan dua layout: satu untuk main activity dan satu lagi untuk entri bobot berat badan yang akan ditampilkan sebagai daftar item urutan kronologis secara terbalik.

Layout dari main activity harus memiliki widget RecyclerView, yang akan bertindak sebagai List, dan widget FloatingActionButton, yang dapat ditekan oleh pengguna untuk membuat entri bobot berat badan baru. Setelah menempatkan keduanya dalam widget RelativeLayout, file layout dari activity XML seharusnya akan terlihat seperti ini:

Kami telah menghubungkan event handler on-click bernama addWeight() dengan widget FloatingActionButton. Untuk handler belumlah tersedia, jadi buatlah potongan tersebut dalam activity.

Untuk menjaga layout entri bobot berat badam tetap sederhana, kita hanya akan memiliki dua widget TextView di dalamnya: satu untuk menampilkan bobot berat badan dan yang lainnya untuk menampilkan waktu di mana entri tersebut dibuat. Cukuplah menggunakan widget LinearLayout sebagai container untuk mereka.

Dengan demikian, buatlah file XML untuk layout baru bernama weight_entry.xml dan tambahkan kode berikut ini:

6. Membuat Model

Pada langkah sebelumnya, Anda melihat bahwa setiap entri bobot berat badan memiliki bobot berat dan waktu yang terkait dengannya. Agar Firestore tahu tentang ini, kita harus membuat model untuk entri bobot berat badan.

Model Firestore biasanya merupakan class data sederhana dengan variabel anggota yang diperlukan.

Sekarang juga adalah waktu yang tepat untuk menangani tampilan untuk setiap entri bobot berat badan. Penanganan tampilan, seperti yang telah Anda duga, akan digunakan oleh widget RecyclerView untuk merender daftar item. Jadi buat class baru bernama WeightEntryVH, yang melakukan proses extend class RecyclerView.ViewHolder, dan buat variabel anggota untuk kedua widget TextView. Jangan lupa untuk menginisialisasi mereka menggunakan method findViewById(). Kode berikut menunjukkan kepada Anda cara melakukannya dengan tepat:

7. Membuat Dokumen Unik Pengguna

Ketika pengguna mencoba membuat entri bobot berat badan untuk pertama kalinya, aplikasi kami harus membuat dokumen terpisah untuk pengguna di dalam collection users pada Firestore. Seperti yang kami putuskan sebelumnya, ID dokumen tidak akan menjadi apa pun kecuali ID Autentikasi Firebase pengguna, yang dapat diperoleh menggunakan properti uid dari objek currentUser.

Untuk mendapatkan referensi ke users collection, kita harus menggunakan method collection() dari class FirebaseFirestore. Kami kemudian dapat memanggil method document() dan melewati uid sebagai argumen untuk membuat dokumen pengguna.

Kami akan perlu mengakses dokumen khusus pengguna baik saat melakukan proses pembacaan dan proses membuat entri bobot berat badan. Untuk menghindari pengkodean logika di atas dua kali, saya sarankan Anda membuat method terpisah untuk itu.

Perhatikan bahwa dokumen hanya akan dibuat satu kali per pengguna. Dengan kata lain, beberapa panggilan ke method di atas akan selalu mengembalikan dokumen yang sama, selama pengguna menggunakan akun Google yang sama.

8. Menambah Entri Bobot Berat Badan

Ketika pengguna menekan tombol aksi yang mengambang dari aplikasi, mereka harus dapat membuat entri dari bobot berat badan yang baru. Agar mereka dapat mengetikkan bobotnya, mari kita buat dialog yang berisi widget EditText. Membuatnya dengan Library Material Dialog sangatlah intuitif.

Di dalam method addWeight(), yang berfungsi sebagai pengendali tombol event on-click, buatlah instance MaterialDialog.Builder dan panggil method title() dan content() untuk memberikan dialog Anda sebuah judul dan pesan yang bermakna. Demikian juga, memanggil method inputType() dan lewati TYPE_CLASS_NUMBER sebagai argumen untuk memastikan bahwa pengguna hanya dapat mengetikkan angka dalam dialog.

Selanjutnya, panggil method input() untuk menentukan petunjuk dan mengaitkan event handler dengan dialog. Handler akan menerima bobot yang diketik pengguna sebagai argumen.

Untuk menyelesaikannya, pastikan Anda memanggil method show() untuk menampilkan dialog.

Dalam event handler, kita sekarang harus menambahkan kode agar benar-benar membuat dan mengisi dokumen entri bobot berat badan yang baru. Karena dokumen harus termasuk dalam collection weights dokumen unik pengguna, untuk mengakses collection, Anda harus memanggil method collection() dari dokumen yang dikembalikan oleh method getUserDocument().

Setelah Anda memiliki collection, Anda bisa memanggil method add() dan meneruskan instance baru dari class WeightEntry ke dalamnya untuk menyimpan entri.

Pada kode diatas, Anda dapat melihat bahwa kita menggunakan properti time dari class Date untuk mengasosiasikan timestamp dengan entri.

Jika Anda menjalankan aplikasi sekarang, Anda harus dapat menambahkan entri bobot berat badan yang baru ke Firestore. Anda tidak akan melihatnya dulu di aplikasi, tetapi mereka akan terlihat di console Firebase.

Add weight dialog

9. Menampilkan Entri Bobot

Sekarang saatnya untuk mengisi widget RecyclerView dari layout kami. Jadi, mulailah dengan membuat referensi untuk itu menggunakan method findViewById() dan menetapkan instance baru dari class LinearLayoutManager untuk itu. Ini harus dilakukan di dalam method showUI() yang kita buat sebelumnya.

Widget RecyclerView harus menampilkan semua dokumen yang ada di dalam collection weights dokumen pengguna. Selanjutnya, dokumen-dokumen terbaru harus muncul lebih dulu. Untuk memenuhi persyaratan ini, kita sekarang harus membuat query dengan memanggil method collection() dan orderBy().

Demi efisiensi, Anda dapat membatasi jumlah nilai yang dikembalikan oleh query dengan memanggil method limit().

Kode berikut membuat query yang mengembalikan 90 entri bobot terakhir yang dibuat oleh pengguna:

Menggunakan query, kita sekarang harus membuat objek FirestoreRecyclerOptions, yang akan kita gunakan nanti untuk melakukan konfigurasi adapter dari widget RecyclerView. Ketika Anda melewati instance query ke method setQuery() untuk membangunnya, pastikan Anda menetapkan bahwa hasil yang dikembalikan dalam bentuk objek WeightEntry. Kode berikut menunjukkan cara melakukannya:

Anda mungkin telah memperhatikan bahwa kami sedang membuat activity saat ini sebagai pemilik lifecycle dari objek FirestoreRecyclerOptions. Melakukan hal ini penting karena kami ingin adapter merespon dengan tepat ke lifecycle event secara umum, seperti pengguna membuka atau menutup aplikasi.

Pada tahap ini kita bisa membuat objek FirestoreRecyclerAdapter, yang menggunakan objek FirestoreRecyclerOptions untuk melakukan konfigurasi pada dirinya sendiri. Karena class FirestoreRecyclerAdapter bersifat abstrak, Android Studio harus secara otomatis melakukan override method tersebut untuk menghasilkan kode yang terlihat seperti ini:

Seperti yang Anda lihat, class FirestoreRecyclerAdapter sangat mirip dengan kelas RecyclerView.Adapter. Sebenarnya FirestoreRecylerAdapter berasal dari RecylerView.Adapter. Itu berarti Anda dapat menggunakannya dengan cara yang sama seperti Anda menggunakan class RecyclerView.Adapter.

Dalam method onCreateViewHolder(), semua yang perlu Anda lakukan adalah menambahkan file layout weight_entry.xml dan mengembalikan objek view holder berdasarkan WeightEntryVH.

Dan di dalam method onBindViewHolder(), Anda harus menggunakan argumen model untuk memperbarui konten dari widget TextView yang ada di dalam view holder.

Sangatlah mudah saat memperbarui widget weightView, memperbarui widget TimeView sedikit rumit karena kami tidak ingin menampilkan timestamp, yang dalam satuan milidetik, ke pengguna secara langsung.

Cara termudah untuk melakukan konversi timestamp menjadi tanggal dan waktu yang dapat dibaca adalah menggunakan method formatDateTime() dari class DateUtils. Selain timestamp, method dapat menerima beberapa flag yang berbeda, yang akan digunakan untuk memformat tanggal dan waktu. Anda bebas menggunakan flag yang sesuai dengan preferensi Anda.

Akhirnya, jangan lupa untuk mengarahkan widget RecyclerView ke adapter yang baru kita buat.

Aplikasi sudah siap. Sekarang seharusnya Anda dapat menambahkan entri baru dan melihatnya segera muncul dalam daftar. Jika Anda menjalankan aplikasi di perangkat lain yang memiliki akun Google yang sama, Anda akan melihat entri bobot berat badan yang sama muncul di atasnya juga.

Weight entries shown as a list

Kesimpulan

Dalam tutorial ini, Anda melihat betapa cepat dan mudahnya membuat aplikasi pelacak berat badan yang berfungsi penuh untuk Android menggunakan Cloud Firestore sebagai database. Jangan ragu untuk menambahkan lebih banyak fungsi untuk itu! Saya juga menyarankan Anda mencoba memublikasikannya di Google Play. Dengan paket Firebase Spark, yang saat ini menawarkan penyimpanan data 1 GB secara gratis, Anda tidak akan memiliki masalah melayani setidaknya beberapa ribu pengguna.

Dan ketika Anda berada pada tahap ini, periksalah beberapa posting kami yang lain tentang pengembangan aplikasi Android!

Advertisement
Advertisement
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.