Membuat Login Dengan TinyDB Di MIT App Inventor 2

Saya akan menjelaskan cara membuat aplikasi login android menggunakan MIT App Inventor 2 lengkap dengan TinyDB, TinyDB merupakan storage yang disediakan App Inventor. Yang harus kamu pahami dalam menggunakan database TinyDB adalah isi database TinyDB tidak seperti halnya database mysql atau semacamnya.

TinyDB terdiri dari key tag dan value, jadi yang menjadi kunci dari sebuah record adalah key tag. Value dari sebuah record dapat dijadikan sebuah kolom (field), contohnya dalam sebuah record yang memiliki key tag berupa Admin1 dan valuenya username=Admin1|nama=Admin. Maka jika digambarkan dalam sebuah List akan menjadi Admin1 : username=Admin1|nama=Admin.

Baca Juga : Membuat Multiple Login dengan TinyDB di MIT App Inventor 2

Pada database TinyDB kamu dapat menyimpan data, mengambil data, menghapus data, dan mengubah data dengan fungsi yang telah disediakan berbentuk block programming.

Aplikasi login memiliki cara kerja yaitu daftar akun (menyimpan data ke TinyDB), kemudian melakukan login dengan menginput username dan password, kedua inputan tersebut akan dicocokkan dengan data yang ada di database TinyDB.

Baca Juga : Cara Membuat CRUD di MIT App Inventor 2

Berikut langkah-langkah membuat aplikasi login dengan mit app inventor 2.

1. Membuat Desain Screen1

Seperti biasa buat dahulu project dengan nama login, kemudian desain seperti gambar diatas. Drag dan drop komponen pada layar android dengan komponen berupa item-item sebagai berikut.

Atur properti Tabel_Login dengan Row = 1 dan Col = 4 dan atur properti Screen1 agar item-item  yang ada di dalam Screen1 menjadi di Tengah sbb .

Setelah item-item komponen sesuai lanjut ke membuat block program.

2. Membuat Block Program Screen1

Sesuaikan block menjadi seperti diatas, jika bingung cara membuat fungsi_utama diatas, fungsi_utama dibuat menggunakan block prosedur. Kemudian dipanggil dimana fungsi prosedur tersebut akan dijalan. Pada block diatas prosedur fungsi_utama berfungsi untuk memvalidasi inputan dengan data yang ada di TinyDB. Jika benar maka halaman akan dialihkan ke screen home. Sedikit pintasan agar mempermudah kamu dalam mencari block dengan cara SHIFT + HURUF APA SAJA secara bersamaan, akan muncul kolom input pencarian block. Untuk menggunakan prosedur yang telah dibuat dengan cara buka blocks, kemudian Procedures.

3. Membuat Desain Screen Daftar

Buatlah screen baru dengan nama daftar, kemudian desain seperti pada gambar diatas dengan komponen berupa item-item sebagai berikut.

Atur properti Tabel_Daftar dengan Row = 3 dan Col = 3 dan atur properti screen daftar dengan AlignHorizontal = Center dan AlignVertical = Top. Setelah itu lanjut ke block program screen daftar.

4. Membuat Block Program Screen Daftar

Sesuaikan block menjadi seperti diatas.

Penjelasan singkat fungsi-fungsi block diatas :

1. Tiga prosedur diatas akan dipanggil dimana fungsi prosedur tersebut akan dijalankan.

2. Prosedur fungsi_utama berfungsi mengecek apakah username telah digunakan, jika tidak makan data inputan akan disimpan ke database.

5. Membuat Desain Screen Home

Buatlah screen baru dengan nama home, screen ini dapat di akses setelah berhasil login. Desain seperti gambar diatas dengan komponen item-item sebagai berikut.

Atur properti screen home dengan AlignHorizontal = Center dan AlignVertical = Center, atur properti Tabel_Label dengan Row = 2 dan Col = 2. Letakkan ListView di bawah btn_logout.

Setelah itu buat block program screen home.

6. Membuat Block Program Screen Home

Sesuaikan block seperti pada gambar diatas.

Penjelasan singkat block-block diatas :

1. Ketika screen home dibuka maka akan menjalankan prosedur Set_textbox dan Tampilkan_to_listview.

2. Prosedur Set_textbox berfungsi untuk menampilkan data dari screen sebelumnya ke label.

3. Prosedur Tampilkan_to_listview berfungsi untuk menampilkan seluruh data dari database TinyDB ke ListView.

Download File Login.aia dan Login.apk

Dikarenakan banyak yang kesulitan mengikuti tutorialnya sehingga saya akan lampirkan bentuk jadi dari aplikasi login ini.

Nama               loginProject

---

Ukuran             .aia 13 KB | .apk 2.6 MB

---

Download        loginProject.aia | loginProject.apk

Demikian tutorial cara membuat aplikasi login android menggunakan database TinyDB di MIT App Inventor 2. Jika ada pertanyaan tuliskan di komentar.