Buat form login di sketchware

Sebagian besar aplikasi saat ini memiliki sistem otorisasi dalam bentuk login Facebook, login Google, login email lama biasa, dan banyak lagi. Bahkan, Sketchware menggunakan Login Google dalam aplikasi juga. Memiliki sistem otorisasi adalah cara terbaik untuk membuat pengguna tetap terorganisir. Hari ini, kita akan belajar cara membuat sistem login nama pengguna / sandi dasar di Sketchware.

berikut ini sedikit penampakan tentang apa yang akan kami buat:

sign In

sign Up

Apa yang Anda butuhkan
Sketchware - IDE ponsel di ponsel cerdas Anda

Semaangat untuk belajar!
Apa yang akan Anda pelajari
Cara membuat sistem login sederhana
Memahami menulis dan mengambil data dari komponen File
Aplikasi login yang kami buat akan multi-paged. Ini adalah beberapa kegiatan yang Anda perlukan:

Halaman Login (Kegiatan Utama)
Daftar Laman
Halaman Masuk
Aktifitas utama
Saat kami memulai aplikasi, kami ingin menyapa pengguna dengan halaman login. Pada layar ini, pengguna akan dapat melakukan dua tindakan: masuk dan mendaftar. Ini adalah bagaimana saya mendesain halaman login saya:

Karena pengguna harus melalui proses pendaftaran, mari hadapi logika pendaftaran terlebih dahulu. Pada tombol Daftar yang diklik, kami cukup menavigasi pengguna ke signupActivity.

Add caption

Logic for signup_button onClick event

Sign Up Aktivity
Mengeklik tombol Daftar akan mengarahkan kita ke SignupActivity, yang terlihat seperti ini. Halaman ini memiliki satu tujuan - mendaftar pengguna dengan informasi yang disediakan.

Banyak pengguna bertanya, "Bagaimana cara kami menyimpan informasi pengguna secara lokal sehingga informasi tetap ada bahkan setelah aplikasi ditutup?" Jawabannya adalah File. Menggunakan komponen File, kita dapat menyimpan data secara lokal, dan mengambilnya saat aplikasi dimulai.

Mulai dengan menambahkan komponen File baru di SignupActivity.java:

Aturan dasar berjalan seperti ini:

1. Pengguna memasukkan nama pengguna / kata sandi dan klik pada tombol pendaftaran
2. Validasi input pengguna. Jika valid, daftar, yang lain menunjukkan pesan kesalahan.
3. Beri tahu pengguna dan selesaikan aktivitas jika pendaftaran sudah selesai.

Cukup! Mari kita hadapi logika login sekarang.

Kembali ke Aktivitas Utama
Sebelum kita melakukan apa pun, mari kita mengatur logika.

1. Saat pengguna memasukkan nama pengguna / kata sandi, validasikan panjangnya.
2. Jika keduanya lebih besar dari 0, kami ingin mengambil informasi dari data yang sebelumnya kami simpan.
3. Karena data disimpan dalam map, kami memvalidasi jika nama pengguna yang diberikan sesuai dengan kata sandi.
4. Jika valid, masukkan pengguna ke dalam, jika tidak tampilkan pesan kesalahan.
Hal lain yang patut diperhatikan adalah bahwa kita juga perlu menambahkan Komponen File di dalam MainActivity.java. Saat Anda melakukannya, PASTIKAN nama file sama dengan yang sebelumnya Anda nyatakan. Saya menyebutnya "userInformation", jadi saya akan memasukkan "userInformation" lagi.

Berikut adalah logika untuk peristiwa yang diklik login_button:

Logged in Activity
Last but not least, ini adalah layar yang muncul ketika proses masuk selesai. Sangat sederhana bukan? Meskipun saya tidak menerapkan konsep ini, Anda dapat meneruskan nama pengguna melalui Intent jika Anda ingin dan menyambut pengguna dengan pesan "Nama pengguna selamat datang!". Hanya pemikiran saja

Kesimpulan
Hari ini, kami belajar tentang cara membuat sistem masuk di Aplikasi Android menggunakan Sketchware. Konsep dasar dan aliran berjalan seperti ini:

1. Pengguna mendaftar ke aplikasi, dan kami hanya mengizinkan pendaftaran terjadi jika input pengguna divalidasi. Kami menyimpan informasi secara lokal dengan menggunakan sistem File dan menjaga hubungan username-password 1-ke-1.
2. Pengguna login ke halaman dengan informasi. Kami memvalidasi input pengguna dan mencatat pengguna jika nama pengguna / kata sandi cocok.
Setelah Anda menyelesaikan sistem login, berikut ini beberapa fitur yang mungkin ingin saya tantang untuk Anda tambahkan:

1. Amankan masukan kata sandi. Ini berarti, ketika pengguna memasukkan kata sandi, kata sandi akan diganti dengan interpunct: "·"
2. Buat kotak centang dengan tombol “Ingat saya”. Jika kotak centang dicentang, ingat pengguna dan login pengguna secara otomatis saat pengguna memulai aplikasi.
Saya membagikan Contoh Login ini di bawah Sketchware sebagai "Contoh Login". Jangan ragu untuk merobeknya dan belajar darinya.

Itu dia! Jika Anda memiliki pertanyaan, silakan bergabung dengan komunitas Sketchware aktif kami di Slack! Selamat coding!