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

Pemrograman Reaktif Kotlin untuk Layar Sign-Up Android

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

RxJava 2.0 adalah pustaka pemrograman reaktif populer yang membantu banyak pengembang Android membuat aplikasi yang sangat responsif, menggunakan lebih sedikit kode dan lebih sedikit kerumitan, terutama ketika mengelola beberapa untaian.

Jika Anda adalah salah satu dari banyak pengembang yang beralih ke Kotlin, maka itu tidak berarti Anda harus menyerah pada RxJava!

Pada bagian pertama dari seri ini, saya menunjukkan kepada Anda bagaimana untuk berpindah dari pemrograman dengan RxJava 2.0 di Java untuk pemrograman dengan RxJava di Kotlin. Kami juga melihat cara membuang boilerplate dari proyek Anda dengan memanfaatkan fungsi ekstensi RxKotlin, dan rahasia untuk menghindari masalah konversi SAM yang banyak ditemukan oleh pengembang ketika mereka pertama kali menggunakan RxJava 2.0 dengan Kotlin.

Dalam edisi kedua ini, kami akan berkonsentrasi pada bagaimana RxJava dapat membantu menyelesaikan masalah yang akan Anda hadapi dalam proyek Android di kehidupan nyata, dengan membuat aplikasi Android yang reaktif menggunakan RxJava 2.0, RxAndroid, dan RxBinding.

Bagaimana Saya Bisa Menggunakan RxJava dalam Proyek Dunia Nyata?

Dalam artikel kami Pemrograman Reaktif dengan RxJava dan RxKotlin, kami membuat beberapa Observables dan Observers sederhana yang mencetak data ke Logcat Android Studio—tetapi ini bukan cara Anda akan menggunakan RxJava di dunia nyata.

Dalam artikel ini, saya akan menunjukkan cara menggunakan RxJava untuk membuat layar yang digunakan di banyak aplikasi Android: layar Sign Up klasik.

A typical Sign Up screen that youll find in countless Android applications

Jika aplikasi Anda memiliki pengalaman mendaftar apa pun, maka biasanya akan memiliki aturan ketat tentang jenis informasi yang diterima. Misalnya, mungkin kata sandi perlu melebihi sejumlah karakter tertentu, atau alamat email harus dalam format email yang valid.

Meskipun Anda dapat memeriksa masukan pengguna begitu mereka menekan tombol Sign Up, ini bukan pengalaman pengguna terbaik, karena membuat mereka terbuka untuk mengirimkan informasi yang jelas tidak akan pernah diterima oleh aplikasi Anda.

Jauh lebih baik untuk memantau pengguna saat mereka mengetik, dan kemudian memberi mereka peringatan segera setelah jelas mereka memasukkan informasi yang tidak memenuhi persyaratan aplikasi Anda. Dengan memberikan umpan balik langsung dan berkelanjutan ini, Anda memberi pengguna kesempatan untuk memperbaiki kesalahan mereka sebelum menekan tombol Sign Up itu.

Meskipun Anda dapat memantau aktivitas pengguna menggunakan vanilla Kotlin, kami dapat mengirimkan fungsi ini dengan menggunakan lebih sedikit kode dengan meminta bantuan RxJava, plus beberapa pustaka terkait lainnya.

Membuat Antarmuka Pengguna

Mari mulai dengan membangun antarmuka pengguna kami. Saya akan menambahkan yang berikut:

  • Dua EditTexts, di mana pengguna dapat memasukkan alamat email (enterEmail) dan kata sandi (enterPassword).
  • Dua pembungkus TextInputLayout, yang akan mengelilingi enterEmail dan enterPassword EditTexts. Pembungkus ini akan menampilkan peringatan setiap kali pengguna memasukkan alamat email atau kata sandi yang tidak memenuhi persyaratan aplikasi kami.
  • Tombol visibilitas kata sandi, yang memungkinkan pengguna untuk beralih antara menyisipkan kata sandi dan melihatnya sebagai teks biasa.
  • Tombol Sign up. Untuk membantu agar contoh ini tetap fokus pada RxJava, saya tidak akan menerapkan bagian pengalaman mendaftar ini, jadi saya akan menandai tombol ini sebagai dinonaktifkan.

Inilah tata letak akhir saya:

Anda dapat menyalin/menempel ini ke aplikasi Anda jika Anda mau, atau Anda dapat mengunduh kode sumber proyek dari repo GitHub kami.

Menciptakan Pengalaman Sign-in Reaktif dengan Kotlin

Sekarang mari kita lihat cara menggunakan RxJava, plus beberapa pustaka terkait, untuk memantau masukan pengguna dan memberikan umpan balik secara waktu nyata.

Saya akan menangani layar Sign Up dalam dua bagian. Di bagian pertama, saya akan menunjukkan kepada Anda cara menggunakan pustaka RxBinding untuk mendaftar dan menanggapi peristiwa perubahan teks. Di bagian kedua, kami akan membuat beberapa fungsi transformasi yang memvalidasi masukan pengguna, dan kemudian menampilkan pesan kesalahan yang sesuai.

Buat proyek baru dengan pengaturan pilihan Anda, tetapi ketika diminta, pastikan Anda memilih kotak centang Sertakan Dukungan Kotlin.

Menanggapi Peristiwa Perubahan Teks

Di bagian ini, kami akan menerapkan fungsi berikut:

  • Deteksi saat pengguna mengetik di bidang enterEmail.
  • Abaikan semua peristiwa perubahan teks yang terjadi dalam waktu singkat, karena ini menunjukkan bahwa pengguna masih mengetik.
  • Lakukan tindakan saat pengguna berhenti mengetik. Di aplikasi kami yang sudah selesai, ini adalah tempat kami akan memvalidasi masukan pengguna, tetapi di bagian ini saya hanya akan menampilkan sebuah Toast.

1. RxBinding

RxBinding adalah pustaka yang membuatnya lebih mudah untuk mengonversi berbagai acara UI ke Observables, pada titik mana Anda dapat memperlakukannya sama seperti aliran data RxJava lainnya.

Kami akan memantau peristiwa perubahan teks, dengan menggabungkan RxBinding widget.RxTextView dengan metode afterTextChangeEvents, misalnya:

Masalah dengan memperlakukan peristiwa perubahan teks sebagai aliran data adalah bahwa pada mulanya enterEmail dan enterPassword EditTexts akan kosong, dan kami tidak ingin aplikasi kami bereaksi terhadap keadaan kosong ini seolah-olah itu adalah emisi data pertama dalam aliran. RxBinding menyelesaikan masalah ini dengan menyediakan metode skipInitialValue(), yang akan kita gunakan untuk menginstruksikan setiap Pengamat untuk mengabaikan nilai awal streaming mereka.

Saya melihat pustaka RxBinding dengan lebih detail di artikel saya RxJava 2 untuk Aplikasi Android.

2. Operator RxJava .debounce()

Untuk memberikan pengalaman pengguna terbaik, kami perlu menampilkan kata sandi atau peringatan email yang relevan setelah pengguna selesai mengetik, tetapi sebelum menekan tombol Sign Up.

Tanpa RxJava, mengidentifikasi jendela waktu sempit ini biasanya mengharuskan kita untuk mengimplementasikan Timer, tetapi di RxJava kita hanya perlu menerapkan operator debounce() ke aliran data kita.

Saya akan menggunakan operator debounce() untuk memfilter semua peristiwa perubahan teks yang terjadi secara berurutan, yaitu ketika pengguna masih mengetik. Di sini, kami mengabaikan semua peristiwa perubahan teks yang terjadi dalam jendela 400 milidetik yang sama:

3. RxAndroid AndroidSchedulers.mainThread()

AndroidSchedulers.mainThread perpustakaan RxAndroid memberi kami cara mudah untuk beralih ke utas UI utama Android yang terpenting.

Karena hanya mungkin untuk memperbarui UI Android dari utas UI utama, kami harus memastikan bahwa kami ada di utas ini sebelum kami mencoba untuk menampilkan peringatan email atau kata sandi apa pun, dan sebelum kami menampilkan Toast kami.

4. Berlangganan

Untuk menerima data yang dipancarkan oleh enterEmail, kita perlu berlangganan untuk itu:

5. Tampilkan Toast

Pada akhirnya, kami ingin aplikasi kami menanggapi peristiwa perubahan teks dengan memvalidasi masukan pengguna, tetapi untuk membantu menjaga semuanya tetap jelas, pada titik ini saya hanya akan menampilkan Toast.

Kode Anda akan terlihat seperti ini:

6. Perbarui Dependensi Anda

Karena kami menggunakan beberapa pustaka yang berbeda, kami perlu membuka file build.gradle proyek kami dan menambahkan RxJava, RxBinding dan RxAndroid sebagai dependensi proyek:

Anda dapat menguji bagian ini dari proyek Anda dengan menginstalnya di ponsel pintar atau tablet Android fisik Anda, atau Android Virtual Device (AVD). Pilih enterEmail EditText dan mulailah mengetik; sebuah Toast akan muncul ketika Anda berhenti mengetik.

Test your projects enterEmail EditText

Memvalidasi Masukan Pengguna dengan Fungsi Transformasi

Selanjutnya, kita perlu menetapkan beberapa aturan dasar tentang jenis masukan yang akan diterima aplikasi kita, lalu memeriksa masukan pengguna terhadap kriteria ini dan menampilkan pesan kesalahan yang sesuai.

Memeriksa email atau kata sandi pengguna adalah proses multi-langkah, jadi untuk membuat kode kami lebih mudah dibaca, saya akan menggabungkan semua langkah ini ke dalam fungsi transformasi mereka sendiri.

Berikut awal dari fungsi transformasi validateEmail:

Pada kode di atas, kami menggunakan operator filter() untuk memfilter keluaran Observable berdasarkan pada apakah pola Patterns.EMAIL_ADDRESS Android cocok.

Di bagian selanjutnya dari fungsi transformasi, kita perlu menentukan apa yang terjadi jika input tidak cocok dengan pola EMAIL_ADDRESS. Secara default, setiap kesalahan yang tidak dapat diperbaiki akan memicu panggilan ke onError(), yang menghentikan aliran data. Daripada mengakhiri streaming, kami ingin aplikasi kami menampilkan pesan kesalahan, jadi saya akan menggunakan onErrorResumeNext, yang menginstruksikan Observable untuk menanggapi kesalahan dengan mengalihkan kontrol ke Observable baru, daripada memohon onError(). Ini memungkinkan kami untuk menampilkan pesan kesalahan khusus kami.

Langkah terakhir adalah menerapkan fungsi transformasi ini ke aliran data email, menggunakan operator .compose(). Pada titik ini, MainActivity.kt Anda seharusnya terlihat seperti ini:

Instal proyek ini di perangkat Android atau AVD Anda, dan Anda akan menemukan bahwa bagian email dari layar Sign Up sekarang memeriksa masukan Anda dengan sukses. Coba masukkan apa pun selain alamat email, dan aplikasi akan memperingatkan Anda bahwa ini bukan input yang valid.

Enter anything other than a valid email address and the app will display a warning message

Bilas dan Ulangi: Memeriksa Kata Sandi Pengguna

Pada titik ini, kami memiliki bidang enterEmail yang berfungsi penuh—dan menerapkan enterPassword sebagian besar hanyalah kasus mengulang langkah yang sama.

Bahkan, satu-satunya perbedaan utama adalah fungsi transformasi validatePassword kami perlu memeriksa kriteria yang berbeda. Saya akan menentukan bahwa masukan kata sandi pengguna harus setidaknya 7 karakter:

Setelah mengulangi semua langkah sebelumnya, MainActivity.kt yang sudah selesai akan terlihat seperti ini:

Instal proyek ini di perangkat Android atau AVD Anda, dan bereksperimen dengan mengetikkan bidang enterEmail dan enterPassword. Jika Anda memasukkan nilai yang tidak memenuhi persyaratan aplikasi, maka itu akan menampilkan pesan peringatan yang sesuai, tanpa Anda harus mengetuk tombol Sign Up.

Anda dapat mengunduh proyek lengkap ini dari GitHub.

Kesimpulan

Dalam artikel ini, kami melihat bagaimana RxJava dapat membantu memecahkan masalah dunia nyata yang akan Anda hadapi ketika mengembangkan aplikasi Android Anda sendiri, dengan menggunakan RxJava 2.0, RxBinding dan RxAndroid untuk membuat layar Sign Up.

Untuk informasi latar belakang lebih lanjut tentang pustaka RxJava, pastikan untuk memeriksa artikel kami Memulai Dengan RxJava 2.0.

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.