131 2. Evaluasi dan Kunci Jawaban Untuk memantapkan pemahaman anda, silahkan kerjakan tugas berikut: a. APP DeretGanjilGenap Terdapat input dua buah textbox untuk bilangan awal dan bilangan akhir. Terdapat pula input combo box (spinner) untuk pilihan ganjil atau genap. Kemudian tombol proses dan tombol reset. Jika spinner yang dipilih adalah bilangan ganjil, maka APP akan menampilkan output berupa bilangan-bilangan ganjil diantara bilangan awal hingga bilangan akhir. Sedangkan Jika spinner yang dipilih adalah bilangan genap, APP juga hanya akan menampilkan bilangan genap saja. b. APP menentukan bilangan prima atau bukan 3. Tindak lanjut Bila sudah mampu menerapkan logika perulangan untuk menyelesaikan kasus permasalahan yang diberikan maka anda sudah memahami materi ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
132 BAB 10 Penanganan List A. Pendahuluan 1. Deskripsi singkat cakupan materi Bab ini berisi materi, penjelasan dan latihan soal dengan pokok bahasan List (atau senarai). Pemahaman mengenai List cukup penting karena List adalah jenis data yang terstruktur dan bersifat dinamis. List adalah contoh database yang paling sederhana. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu membuat program sederhana dengan penanganan struktur data yang dapat menyimpan data secara dinamis. B. Penyajian List (atau senarai dalam istilah baku bahasa Indonesia) merupakan struktur data yang terdiri atas rangkaian elemen sejenis yang saling berhubungan, bersifat berurutan (sequence) dan juga bersifat dinamis. Gambar 131 memperlihatkan contoh list yang berisi lima data. Pada setiap item data memiliki id unik/ index untuk keperluan akses data. Sedangkan Tabel 9 menampilkan codeblock yang tersedia pada APP Inventor untuk penanganan List. Index ------> 1 2 3 4 5 list ------> Paris Roma Wina Turin Seoul Gambar 131. Contoh List Tabel 9. codeblock untuk menangani list Blok Kode Fungsi Codeblock untuk membuat list kosong.
133 Blok Kode Fungsi Membuat list. Menambahkan elemen pada list. Memeriksa apakah ada elemen tertentu pada list. Return value berupa nilai true/ false Memeriksa banyaknya elemen pada list. Memeriksa apakah list kosong atau tidak. Mengambil elemen dari suatu list. Menghapus elemen dari suatu list. Menyisipkan item/ elemen pada list pada posisi index yang disebutkan Mengganti item/ elemen list pada index yang disebutkan. Elemen pengganti berupa block yang dipasangkan pada bagian replacement 1. Menampilkan Isi Data List Bagian ini menjelaskan bagaimana APP Inventor membantu kita dalam membuat sebuah App yang mampu menangani operasi dasar List. Deskripsi permasalahan adalah sebagai berikut: Inisiasi sebuah list berupa daftar nama sepuluh kota besar di dunia. Kemudian ketika tombol Lihat List di-klik, maka list tampil di bawah tombol. Gambar 132 memperlihatkan rancangan UI yang ditambahkan pada layar viewer di APP Inventor.
134 Gambar 132. Rancangan UI App List Kemudian pengaturan properties setiap komponen diperlihatkan pada Tabel 10. Tabel 10. Pengaturan properties komponen APP List Komponen Properties Nilai diinputkan Screen1 AppName List Title List/ Senarai ButtonList Text Tampilkan LabelHasil Text Hasil: Setelah rancangan User Interface pada halaman viewer selesai dibuat, Gambar 133 memperlihatkan rancangan codeblock untuk penanganan List sesuai dengan deskripsi permasalahan. Gambar 133. Codeblock App List
135 Pada Gambar 133, terlihat bahwa perancangan codeblock diawali dengan inisialisasi variable global, yaitu variable daftarKota. Variable daftarKota diidentifikasikan sebagai List yang berisi nama-nama kota besar di dunia. Kemudian perancangan dilanjutkan dengan penanganan program ketika tombol Tampilkan di-klik. Ketika tombol di-klik, maka program akan reset LabelHasil (label hasil diberi text kosong), kemudian seluruh daftar kota yang ada pada list ditampilkan pada LabelHasil. Untuk menampilkan seluruh isi list manfaatkan codeblock for each … in list …. Gambar 134. Tampilan homepage App List Gambar 135. Tampilan App List ketika tombol tampilkan di-klik
136 Gambar 134 dan Gambar 135 memperlihatkan hasil simulasi dan uji coba App List. Terlihat pada Gambar 135 App yang dirancang mampu menampilkan seluruh daftar kota besar yang didaftarkan pada List. Tugas Mahasiswa Disebutkan pada bagian terdahulu bahwa aplikasi/ software dapat dikategorikan menjadi aplikasi dinamis dan aplikasi statis. App List termasuk kategori aplikasi apa? Berikan penjelasan! Jika anda diberi order untuk menambah jumlah kota, strategi apa yang akan anda lakukan? Diskusikan juga, apabila anda diberi order untuk menambah fasilitas pencarian kota pada App List, strategi apa yang akan anda lakukan? 2. Pencarian Isi Data List Sub-bagian ini akan membahas bagaimana membuat modul pencarian (search) pada data List. Modul search ini akan ditambahkan pada project List.aia yang menjadi studi kasus di atas. Deskripsi perancangan adalah sebagai berikut: Tambahkan komponen textbox dan tombol cari untuk input kata kunci. Ketika tombol cari di-klik, maka App akan melakukan pencarian data pada List. Jika data tidak ditemukan --> LabelHasil menampilkan pesan “Data tidak ditemukan”. Sedangkan jika data ditemukan --> LabelHasil menampilkan pesan “Data ditemukan pada index (tampilkan index-nya)”. Bentuk rancangan tampilan user interface aplikasi diperlihatkan pada Gambar 136, sedangkan pengaturan properties setiap komponen yang digunakan ditunjukkan pada Tabel 11.
137 Gambar 136. Antarmuka penambahan fasilitas search pada App List Tabel 11. Pengaturan properties komponen APP List Komponen Properties Nilai diinputkan Screen1 AppName List Title List/ Senarai ButtonList Text Tampilkan Width Fill Parent HorizontalArrangement1 Width Fill Parent TextBoxCari Width Fill Parent Hint Masukkan kata pencarian ButtonCari Text Cari.. LabelHasil Text Hasil: Selanjutnya, beralih pada rancangan codeblock, yang secara keseluruhan seperti yang ditampilkan pada Gambar 138 dan Gambar 138. Gambar 137. Rancangan codeblock pencarian data
138 Gambar 138. Rancangan codeblock pencarian data Sesuai dengan deskripsi permasalahan, ketika tombol buttonCari di-klik, aksi yang dilakukan oleh App adalah memeriksa kata kunci yang diinputkan oleh user pada textbox dan aksi ketika kondisi IF True. Gambar 139 memperlihatkan potongan codeblock untuk penanganan hal tersebut. Sedangkan Gambar 140 memperlihatkan potongan codeblock untuk penanganan aksi ketika kondisi IF False. Gambar 139. Potongan codeblock pemeriksaan kata kunci pencarian dan action ketika kondisi if true
139 Gambar 140. Potongan codeblock aksi ketika kondisi IF False Gambar 141 dan Gambar 142 memperlihatkan hasil akhir App List yang sudah dilengkapi fasilitas pencarian data. Gambar 141. Tampilan ketika data ditemukan Gambar 142. Tampilan ketika data tidak ditemukan
140 3. Penambahan dan Penghapusan Isi Data List Sub-bagian ini akan membahas bagaimana membuat modul untuk fasilitas operasi tambah dan hapus isi data List. Dengan penambahan modul ini, maka App List kita menjadi sebuah aplikasi yang bersifat dinamis. Tugas Mahasiswa Lakukan undian. Mahasiswa yang beruntung memimpin pembuatan algoritma tambah data List dan algoritma hapus data List. Lakukan diskusi kelas ketika melakukan perancangan algoritma. Gambar 143. Rancangan antarmuka tambah dan hapus data App List Rancangan tampilan user interface (UI) aplikasi diperlihatkan pada Gambar 143, sedangkan pengaturan properties setiap komponen yang digunakan ditunjukkan pada Tabel 12. Tabel 12. Pengaturan properties komponen APP List Komponen Properties Nilai diinputkan Screen1 AppName List Title List/ Senarai ButtonList Text Tampilkan Width Fill Parent HorizontalArrangement1 Width Fill Parent
141 Komponen Properties Nilai diinputkan TextBoxCari Width Fill Parent Hint Masukkan kata pencarian ButtonCari Text Cari.. HorizontalArrangement2 Width Fill Parent ButtonTambah Text Tambah data Width 50 % ButtonHapus Text Hapus data Width 50% LabelHasil Text Hasil: LabelHasil Text Visible uncheck Gambar 144. Rancangan codeblock ButtonTambah data List Rancangan codeblock untuk tambah data dan hapus data List diperlihatkan pada Gambar 144 dan Gambar 147. Sesuai dengan rancangan algoritma, ketika ButtonTambah di-klik maka App akan melakukan pengecekan terhadap yang diinputkan user pada kolom textbox. Jika yang diinputkan tersebut tidak ada pada List maka tambahkan apa yang ada pada textbox ke dalam list. Narasi algoritma ini
142 diimplementasikan menjadi codeblock seperti yang ditampilkan pada Gambar 145. Gambar 145. Potongan codeblock untuk pengecekan yang diinput terhadap data List dan dilanjutkan aksi jika kondisi IF True Sedangkan jika apa yang diinputkan pada textbox ternyata ada pada data List maka tampilkan peringatan. Pernyataan ini diimplementasikan menjadi codeblock seperti yang ditampilkan pada Gambar 146. Gambar 146. Potongan codeblock penanganan aksi jika kondisi IF False Gambar 147. Rancangan codeblock ButtonHapus data List Kemudian ketika ButtonHapus di-klik (Gambar 147), sesuai dengan algoritma, maka hal pertama yang App lakukan adalah melakukan pengecekan terhadap yang diinputkan user pada kolom textbox. Jika yang
143 diinputkan tersebut tidak ada pada List maka tampilkan peringatan data tidak ada pada daftar List. Sedangkan jika yang diinputkan user pada kolom textbox ada pada daftar List maka lakukan penghapusan pada data tersebut. Pernyataan ini diimplementasikan menjadi codeblock seperti yang ditampilkan pada Gambar 148 Gambar 148. Potongan codeblock yang menangani aksi remove ketika kondisi IF False Sampai pada tahap ini, modul tampil data List, modul cari data List, modul tambah dan hapus data List telah selesai perancangannya. Tahap selanjutnya adalah simulasi dan ujicoba. Gambar 149 memperlihatkan tampilan App ketika tombol Tampilkan di-klik. Gambar 149. Tampilan ketika tombol Tampilkan di-klik
144 Kemudian App diujicoba dengan menghapus kota “Jakarta” dari data List (Gambar 150). Selanjutnya pasca data “Jakarta” dihapus, kita lakukan pencarian kota “Jakarta” dengan mengetik “Jakarta” pada textbox dan klik tombol Cari (Gambar 151). Hasilnya, App memberikan notifikasi bahwa “Jakarta” tidak ditemukan. Hal ini menunjukkan bahwa algoritma dan codeblock yang dirancang telah sesuai dengan proses business. Gambar 150. Data “Jakarta” dihapus Gambar 151. Data “Jakarta” dicari pada data List Ujicoba selanjutnya, Gambar 152 memperlihatkan kota “Jakarta” ditambahkan kembali pada List dan Gambar 153 memperlihatkan kota “Surakarta” juga ditambahkan pada List. Kemudian Gambar 154 memperlihatkan ketika tombol Tampilkan di-klik. Terlihat bahwa App telah menyimpan kota “Jakarta” dan “Surakarta” pada data List.
145 Gambar 152. Data “Jakarta” ditambahkan kembali pada List Gambar 153. Data “Surakarta” ditambahkan pada List Gambar 154. Tombol Tampilkan di-klik
146 C. Penutup 1. Rangkuman List adalah bentuk database paling sederhana. Dengan memahami konsep list, mahasiswa mulai belajar konsep CRUD atau Create, Read, Update, Delete sebuah data. Dengan memahami konsep CRUD diharapkan mahasiswa lebih mudah dalam mempelajari database pada bab selanjutnya. 2. Evaluasi dan Kunci Jawaban Untuk memantapkan pemahaman anda, silahkan kerjakan tugas perancangan berikut: Anda diminta membuat sebuah APP Quis berjenis pilihan ganda. Quis terdiri dari 5 buah pertanyaan. Pertanyaan dan pilihan jawaban dari setiap pertanyaan disimpan pada List. Output dari App diharapkan sama atau mendekati seperti yang ditampilkan pada Gambar 155. Gambar 155. Output APP Quis yang diharapkan
147 Jelaskan apa kelemahan dari penggunaan List sebagai media penyimpanan data ! 3. Tindak lanjut Bila sudah mampu menerapkan konsep list sebagai database sederhana maka anda sudah memahami materi ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
148 BAB 11 Pengantar Database pada APP Inventor A. Pendahuluan 1. Deskripsi singkat cakupan materi Bab ini berisi materi pengenalan macam-macam database yang didukung oleh APP Inventor. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu menjelaskan variasi database yang didukung oleh APP disertai dengan pemahaman keunggulan dan kelemahan masingmasing jenis database. B. Penyajian Database adalah sekumpulan data yang sudah disusun sedemikan rupa dengan ketentuan atau aturan tertentu yang saling berelasi sehingga memudahkan pengguna dalam mengelolanya juga memudahkan memperoleh informasi (Kadir, 2018b). Pada Palette kategori Storage memperlihatkan komponenkomponen APP Inventor yang dapat digunakan untuk penanganan database (lihat Gambar 156), yaitu File, FusiontablesControl, TinyDB dan TinyWebDB. Selain itu, pada kategori Experimental juga terdapat komponen lain yang juga dapat digunakan untuk penanganan database, yaitu CloudDB dan FirebaseDB.
149 Gambar 156. Fasilitas database yang didukung oleh APP Inventor 1. File File adalah komponen APP Inventor yang bersifat non-visible. Artinya komponen ini ketika ditambahkan (digunakan), akan terdata pada halaman Components namun tidak akan terlihat pada halaman viewer. Komponen File dapat digunakan untuk penanganan storing dan retrieving data pada sebuah file text, yaitu file txt. File ini ditempatkan pada device. The Companion menempatkan file ini pada /sdcard/AppInventor/data. 3. FusionTableControl Adalah komponen non-visible yang menggunakan Google Fusion Tables, untuk melakukan operasi store, share, query dan visualize data tables. Komponen ini (Fusion Tables) menggunakan Fusion Tables API V2.0. yang juga mengijinkan operasi lain seperti query, create, dan modify tables. Aplikasi yang menggunakan Google Fusion Tables harus terautentifikasi dengan Google servers. Ada dua cara untuk autentifikasi, yaitu menggunakan API Key dan menggunakan Service Authentication.
150 4. TinyDB TinyDB merupakan komponen yang berguna untuk menyimpan data dalam bentuk database. TinyDB disimpan pada memory internal perangkat smartphone Android anda. Sama halnya dengan komponen File, TinyDB dalam suatu aplikasi tidak dapat diakses oleh aplikasi lain. Berbeda dengan file, struktur data TinyDB dikemas dalam bentuk dua komponen, yaitu TAG dan VALUE. Tag adalah kata kunci (unik) yang tidak bisa sama satu dengan yang lainnya, sedangkan Value merupakan isi dari data di dalam TAG tadi Gambar 157). Penggunaan tag ini memudahkan dalam mengakses. Gambar 157. TinyDB (tag dan value) 5. TinyWebDB TinyWebDB sama seperti TinyDB. Perbedaannya terletak pada lokasi penyimpanan database. Pada TinyDB, data disimpan pada perangkat smartphone Android. Sedangkan, TinyWebDB menyimpan data pada sebuah server. Selain itu, data TinyWebDB dapat dipakai oleh sejumlah aplikasi.
151 6. CloudDB CloudDB adalah komponen APP Inventor yang bersifat non-visible. Penggunaan CloudDB memungkinkan App untuk melakukan penyimpanan (store) data pada Internet connected database server (menggunakan Redis software). Karena database server terkoneksi dengan internet, hal ini memungkinkan App bisa saling berbagi data. Secara default, data disimpan pada server yang di-maintenance oleh MIT, namun kita bisa saja mengubah setingan dan menempatkan data pada server lain, bahkan server pribadi. Set properties "RedisServer" dan "RedisPort" untuk akses database server lain (selain database server yang dikelola MIT). 7. FirebaseDB Firebase adalah cloud service provider dan backend as a service, yang dikembangkan dan dimiliki oleh Google. Firebase ini menyediakan layanan cloud berupa backend seperti database, API, dsb. dengan tujuan mempermudah dalam pengembangan aplikasi mobile maupun web. Salah satu fitur yang menarik pada layanan Firebase adalah Firebase Realtime Database atau FirebaseDB yang merupakan cloud-hosted database. FirebaseDB menyediakan Application Programming Interface (API) yang melakukan sinkronisasi data secara realtime untuk setiap client yang terhubung dan disimpan pada cloud Firebase. FirebaseDB memiliki banyak library yang memungkinkan untuk mengintegrasikan layanan ini dengan Android, iOS, Javascript, Java, dll. Apa keunggulan FirebaseDB? FirebaseDB akan sangat cocok digunakan pada pengembangan aplikasi yang menampilkan data, yang dikirim secara realtime, seperti chat, social todo list, dll. Berikut beberapa poin kelebihan dan kekurangan Firebase (Aziz, 2017). Kelebihan memanfaatkan Firebase: a. Tersedia versi Free, sehingga para developer dapat mencoba layanan Firebase tanpa batasan waktu. b. Cepat dan responsif
152 c. Tanpa SQL, Firebase menggunakan JSON d. SDK tersedia untuk Android, iOS, JavaScript, Java, Objective-C, swift dan Node.js e. User friendly f. Event-oriented g. Build-in graphic editor h. Powerful API untuk menyimpan dan sinkronasi i. API relatif mudah dimengerti j. Realtime backend Sedangkan kekurangan Firebase, adalah: a. Jumlah koneksi node tak ditampilkan (yang mana pada versi Free dibatasi 100) b. Versi Free hanya memberikan 100 koneksi dan 1 GB storage, yang mana kita perlu melakukan upgrade jika pengguna kita bertambah c. Kita tak tahu dimana lokasi host data kita d. You don’t own your data. Karena data kita berada dalam host bukan milik kita, akan menjadi mustahil untuk merecovery akun user Untuk mencoba fitur Firebase lebih jauh, yang pertama yang harus dilakukan adalah membuat akun Firebase, atau bisa Sign Up menggunakan Google Account yang sudah ada. C. Penutup 1. Rangkuman Terdapat empat jenis database yang didukung stable oleh APP Inventor, dan dua jenis database yang masih terus dikembangkan compatibilitas-nya. Masing-masing database akan sangat cocok untuk satu jenis kasus, namun belum tentu sesuai untuk permasalahan kasus yang lain. Oleh karena itu, mahasiswa harus memahami karakteristik kasus dan juga karakteristik database sebelum memutuskan akan menyelesaikan permasalahan dengan jenis database yang mana.
153 2. Evaluasi dan Kunci Jawaban 3. Tindak lanjut Bila sudah mampu menjelaskan penggunaan tipe database yang tepat sesuai permasalahan maka anda sudah memahami materi ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
154 BAB 12 Perancangan Database File dengan APP Inventor A. Pendahuluan 1. Deskripsi singkat cakupan materi Bab ini berisi studi kasus penanganan database sederhana menggunakan komponen File pada APP Inventor. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu membuat database sederhana jenis File. B. Penyajian File yang dimaksud adalah komponen storage pada APP Inventor. File merupakan jenis non-visible komponen untuk storing (write) dan retrieving (read) data. The Companion akan menempatkan File pada /sdcard/AppInventor/data, namun apabila kita membuat alamat File /myFile.txt maka file akan ditempatkan pada /myFile.txt. Selanjutnya diberikan studi kasus store and retrieve File dengan deskripsi permasalahan sebagai berikut: “Sediakan satu buah textbox dan satu buah tombol (tombol Store) untuk menyimpan apa yang diketikkan user ke file text.txt. Kemudian sediakan satu buah tombol (tombol Retrieve) dan labelOutput untuk membaca (retrieve) apa yang tersimpan pada file text.txt kemudian tampilkan pada labelOutput.” Gambar 158 memperlihatkan rancangan user interface untuk APP FileDB. Sedangkan pengaturan properties setiap komponen diperlihatkan pada Tabel 13.
155 Gambar 158. Rancangan User Interface APP FileDB Tabel 13. Pengaturan properties komponen APP FileDB Komponen Properties Nilai diinputkan Screen1 AppName FileDB Title FileDB HorizontalArrangement1 Width Fill Parent Label1 Text Enter your text TextBox1 Width Fill Parent ButtonSave Text Store LabelOutput Visible unchecked ButtonRetrieve Text Retrieve Gambar 159. Rancangan codeblock keseluruhan
156 Gambar 159 memperlihatkan rancangan codeblock keseluruhan. Konsep yang menjadi dasar perancangan codeblock adalah: a. Ketika tombol ButtonSave di-klik maka apa yang diketikkan user pada textbox disimpan ke File. b. Ketika tombol ButtonRetrieve di-klik maka tampilkan apa yang tersimpan pada File ke labelOutput Gambar 160. Tampilan ketika APP FileDB diujicoba Gambar 160 memperlihatkan tampilan saat APP diujicoba. Pertama kali pada kolom textbox diketikkan kata “hai” kemudian klik tombol Store. Berikutnya klik tombol Retrieve dan APP merespon dengan menampilkan kata “hai” pada labelOutput. Ujicoba dilanjutkan dengan mengetikkan
157 kata “Guys” pada textbox dan klik tombol Store. Kemudian ketika tombol Retrieve di-klik, APP merespon dengan menampilkan kata “haiGuys” pada labelOutput. Gambar 161 memperlihatkan bahwa file text.txt memang benar di-create pada internal storage di smartphone. Hal ini memperlihatkan bahwa respon APP telah sesuai dengan deskripsi permasalahan yang diinginkan. Gambar 161. File text.txt di internal storage smartphone C. Penutup 1. Rangkuman Pada studi kasus yang menjadi pembahasan, file (yaitu file text.txt) dapat dijadikan sebagai media penyimpanan database sederhana. File text.txt dibuat dan disimpan di-internal storage pada smartphone.
158 2. Evaluasi dan Kunci Jawaban 3. Tindak lanjut Bila sudah mampu menerapkan perancangan database file pada permasalahan yang diberikan maka anda sudah memahami materi ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
159 BAB 13 Perancangan Database Firebase dengan APP Inventor A. Pendahuluan 1. Deskripsi singkat cakupan materi Bab ini berisi studi kasus perancangan aplikasi database sederhana dengan Firebase pada APP Inventor. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu merancang aplikasi dengan database sederhana menggunakan Firebase. B. Penyajian Firebase adalah suatu layanan dari Google yang digunakan untuk mempermudah para pengembang aplikasi dalam manajemen database (Ilhami, 2018). Pada bulan Oktober 2014, Firebase diakuisisi oleh Google dan semenjak itu Firebase terus berkembang dan memperluas layanan untuk menjadi platform terpadu bagi pengembang aplikasi (Tamplin, 2014). Firebase sekarang terintegrasi dengan berbagai layanan Google lainnya, salah satunya adalah Cloud Firestore, sebuah database dokumen. Layanan Firebase tidak seperti dulu ketika masih bersifat layanan percobaan, sekarang Firebase dapat dimanfaatkan secara gratis. Tentunya dengan batasan tertentu. Firebase tersedia dalam tiga opsi, yaitu: SPARK (Gratis), FLAME ($25 per bulan), dan BLAZE (bayar sesuai pemakaian). Fitur Firebase antara lain: Firebase Cloud Messaging, Firebase Authentication, Firebase Remote Config, Firebase Realtime Database, Firebase Storage, Firebase Hosting. Buku ini akan memfokuskan pada pembahasan Firebase Realtime Database. Fitur realtime database dan backend tersedia sebagai salah satu fasilitas layanan pada Firebase. Layanan ini memungkinkan pengembang
160 antarmuka pemrograman aplikasi untuk menyinkronkan database dengan seluruh klien dan menyimpannya di layanan Firebase cloud. Data disimpan sebagai JSON dan disinkronkan secara realtime ke setiap klien yang terhubung. 1. Mendaftar akun Firebase Untuk dapat menggunakan layanan Firebase berikut adalah url untuk mengaksesnya: https://console.firebase.google.com/?pli=1. Jika kita menggunakan browser Chrome atau Mozilla dan browser tersebut sudah ter-sinkron dengan akun google, maka browser akan secara otomatis redirect ke halaman My Projects (lihat Gambar 162). Gambar 162. Halaman My Projects Firebase 2. Seting Firebase dan APP Inventor Pada halaman My Projects Firebase atau seperti pada Gambar 162, Firebase menampilkan project-project yang telah dibuat sebelumnya, atau kita bisa menambah project baru melalui icon Add Project. Selanjutnya kita akan eksplorasi bagaimana langkah membuat project Firebase baru.
161 Pertama, klik icon Add Project dari halaman My Project, maka Firebase akan menampilkan wizard seperti terlihat pada Gambar 163 sampai dengan Gambar 165. Gambar 163. Wizard create a project (beri nama project) Gambar 164. Wizard create a project (Informasi fasilitas google analytics)
162 Ketika Firebase menampilkan wizard atau jendela panduan untuk create new project, maka yang harus dilakukan adalah mengisi nama project (Gambar 163). Kemudian setelah klik tombol Next, maka Firebase akan lanjut menampilkan wizard ke-2 (Gambar 164). Pada langkah ke-2 ini, firebase memberikan informasi dan tawaran kepada user, apakah akan menambahkan fasilitas Google Analytics pada project yang akan dibuat. Terakhir, pada step 3, Firebase meminta user untuk memberikan tanda centang pada setingan Google Analytics untuk selanjutnya meminta user klik tombol Create Project (Gambar 165). Gambar 165. Wizard create a project (Lanjutan google analytics)
163 Tunggu beberapa saat hingga firebase menampilkan Gambar 166 sebagai tanda bahwa project telah berhasil dibuat dan siap untuk digunakan. Gambar 166. Informasi project telah berhasil dibuat Setelah klik tombol Continue, maka Firebase akan menampilkan halaman console seperti yang diperlihatkan pada Gambar 167. Gambar 167. Halaman console pada Firebase project
164 Pada halaman console tersebut, yang perlu dilakukan oleh user adalah mencatat beberapa kode setting Firebase. Kode tersebut bisa diakses dari menu Project Overview > Project settings (Gambar 168). Gambar 168. Menu Project settings Setelah menu project settings di klik, Gambar 169 memperlihatkan halaman settings pada console project Firebase yang aktif. Pada halaman ini, yang perlu dicatat adalah : Web API Key. Web API Key diperlukan untuk koneksi database Firebase dengan APP yang dibangun pada APP Inventor. Gambar 169. Halaman setting pada Firebase console project
165 Web API Key yang perlu dicatat ketika berada di halaman setting (Gambar 169) harus dipasangkan pada menu properties Firebase seperti yang ditunjukkan pada Gambar 170. Setting properties pada Gambar 170 tersebut harus diisi dan disesuaikan dengan setting pada console project Firebase agar terjadi koneksi antara APP dengan database Firebase. Gambar 170. Menu properties pada komponen Firebase pada APP Inventor Untuk melengkapi isian pada menu properties pada Gambar 170, kita perlu kembali ke halaman console seperti yang ditunjukkan pada Gambar 167. Klik menu Database pada halaman console (Gambar 167) tersebut. Gambar 171. Halaman pengaturan database Web API Key di paste disini
166 Pada Gambar 171, jangan memilih cloud firestore, tetapi scroll ke bawah lalu pilih Realtime Database lalu klik Create database. Selanjutnya Firebase akan menampilkan halaman setting mode security untuk Realtime Database yang akan dibuat (lihat Gambar 172). Pada pengaturan ini, pilih opsi Start in test mode, agar APP bisa read dan write ke database Firebase. Gambar 172. Plihan mode security untuk Realtime Database yang akan dibuat Selanjutnya, Firebase akan menampilkan halaman Realtime database (lihat Gambar 173). Perhatikan url yang ditandai pada Gambar 173. Url tersebut diperlukan untuk setting properties Firebase pada APP Inventor. Copy url tersebut dan kemudian paste di menu properties Firebase pada APP Inventor seperti yang ditunjukkan pada Gambar 174.
167 Gambar 173. Halaman Realtime database Gambar 174. Menu properties pada komponen Firebase pada APP Inventor Apabila diperhatikan pada isian properties yang ditunjukkan pada Gambar 174, ada satu isian yang tidak diisi, yaitu ProjectBucket. Apakah properties ini tidak berguna? Web API Key di paste disini url Firebase di paste disini
168 Gambar 175. Properties project bucket Dengan memperhatikan Gambar 175, anda bisa memperhatikan apa fungsi isian properties project bucket. Jadi, project bucket berfungsi untuk membuat nama folder pada database firebase. Gambar 176. Atur project bucket melalui codeblock Untuk memberi nama project bucket database Firebase, selain dengan teknik seperti yang telah dibahas di atas (lihat Gambar 175), bisa juga kita atur melalui codeblock, seperti yang ditunjukkan pada Gambar 176. 3. Operasi CRUD CRUD adalah akronim untuk create, read, update dan delete. Operasi CRUD adalah manipulasi data dasar untuk operasional database.
169 Sub-bab ini akan mengkhususkan membahas materi bagaimana membuat app untuk operasi create dan read dengan database firebase. a. Latihan C, R dengan perancangan App homepage_login_firebase Kasus yang akan dirancang adalah app homepage_login_firebase yang akan dibuat adalah sebagai berikut: Sebuah app yang terdiri dari dua buah modul, yaitu modul registrasi dan modul login. Pada modul registrasi user dapat mendaftar username dan password. Ketika tombol create diklik, maka username dan password disimpan pada database firebase. Pada modul login, terdapat textbox untuk input username dan password. Ketika tombol login diklik, maka app akan melakukan pengecekan pada firebase. Jika username dan password yang diketikkan ditemukan di firebase maka app akan menampilkan notifikasi login sukses, username dan password dikenali. Jika username ditemukan namun password salah, maka app akan menampilkan notifikasi password salah, silahkan anda ulangi. Namun, username dan password tidak ditemukan, maka app akan menampilkan notifikasi merah. Login gagal, anda tidak berhak akses app ini. Kemudian close app. Tugas Mahasiswa Sebelum mulai melakukan perancangan pada APP Inventor, tugas anda adalah melakukan perancangan algoritma berdasarkan deskripsi permasalahan yang telah diberikan.
170 Penjelasan berikut, untuk merancang modul registrasi seperti yang telah dideskripsikan di atas: a. Buat project baru pada APP Inventor. Beri nama: register-loginfirebase. b. Screen1 untuk desain halaman login, sedangkan untuk halaman registrasi, tambah screen baru. Klik tombol Add Screen beri nama “ScreenRegister”. c. Selanjutnya, mari rancang user interface untuk modul registrasi. Gambar 177 memperlihatkan desain tampilan untuk mendaftarkan username dan password ke database Firebase. Sesuai deskripsi permasalahan, maka dibutuhkan dua buah textbox untuk menerima input username dan password. Satu buah tombol daftar sebagai trigger untuk aksi save ke Firebase, satu buah tombol kembali ke home. Satu notifikasi untuk mengetahui respon app ketika tombol daftar diklik. Dan komponen Firebase untuk setting koneksi app dengan Firebase. Gambar 177. Desain user interface untuk registrasi user c. Tabel 14 memperlihatkan properties apa saja yang perlu diatur pada setiap komponen yang ditambahkan ke halaman viewer. Tabel 14. Pengaturan properties komponen APP homepage_login_firebase modul registrasi Komponen Properties Nilai diinputkan ScreenRegister Title Registrasi User
171 Komponen Properties Nilai diinputkan TitleVisible Checked Username (textbox) Width Fill parent Hint Username Password (passwordTextbox) Hint Password BtnDaftar Width 30 percent Text Daftar BtnHome Text Kembali ke home Labelnotif TextColor None FirebaseDB1 FirebaseToken AIzaSyCLiXWOKS8XtjdUpPD72J4l7nJLmteVNK0 FirebaseURL https://database-ujicoba.firebaseio.com/ ProjectBucket homepage_login_firebase Yang perlu diperhatikan dan dipahami dari Tabel 14 adalah pada pengaturan setting FirebaseDB1. Bagaimana isian setting FirebaseToken, FirebaseURL dan ProjectBucket, silahkan diingat kembali materi sub-bab B.2 pada Bab 13. Setelah rancangan desain antarmuka untuk modul registrasi selesai dilakukan, berikutnya kita rancang codeblock agar modul registrasi ini bisa berjalan sesuai dengan fungsi yang diharapkan. d. Klik tombol Blocks untuk berpindah dari layar viewer ke layar block. Gambar 178 memperlihatkan keseluruhan rancangan codeblock untuk mengatur bagaimana program run.
172 Gambar 178. Rancangan codeblock modul registrasi Pada deskripsi permasalahan telah dikemukakan bahwa ketika user klik tombol daftar maka app akan menyimpan username dan password yang telah diinput ke database Firebase. Pada Gambar 178, terlihat codeblock when BtnDaftar.Click. Pada codeblock tersebut ditambahkan codeblock logika IF untuk mengatur aksi app ketika user klik tombol Daftar sementara textbox username dan password masih kosong. App akan memberikan notif peringatan “Kolom username dan password tidak boleh kosong” jika memang user melakukan hal tersebut. Namun, apabila textbox username dan password terisi kemudian tombol Daftar diklik maka app akan menyimpan username sebagai komponen Firebase tag dan password disimpan sebagai komponen Firebase value. Kemudian app juga memberikan notif berwarna hijau sebagai informasi bahwa database berhasil disimpan.
173 Gambar 179. Tampilan user interface modul registrasi e. Gambar 179 dan Gambar 180 memperlihatkan ketika app homepage_login_firebase diujicoba pada layar smartphone. Gambar 179 memperlihatkan tampilan atau user interface modul registrasi. Terlihat tampilan pada layar smartphone sesuai seperti hasil rancangan. Sedangkan Gambar 180 memperlihatkan respon app ketika textbox username dan password telah menerima input dan tombol Daftar diklik.
174 Gambar 180. Respon app ketika tombol Daftar diklik Gambar 181. Respon app ketika tombol Daftar diklik sementara kolom username dan password kosong. f. Ketika app menampilkan notifikasi sukses melakukan penyimpanan database (seperti terlihat pada Gambar 180), secara realtime database Firebase juga ter-update. Gambar 182 memperlihatkan tampilan database Firebase ketika username: adhie dan password: test didaftarkan oleh app.
175 Gambar 182. Tampilan layar Database Firebase ketika tombol Daftar pada app diklik Sampai dengan langkah (f) di atas, perancangan modul registrasi sudah selesai. Penjelasan berikutnya, adalah membahas perancangan modul login berdasarkan deskripsi di atas. Gambar 183 memperlihatkan desain tampilan untuk halaman login app homepage_login_firebase. Sesuai deskripsi permasalahan yang disampaikan sebelumnya, halaman login membutuhkan dua buah textbox untuk menerima input username dan password, satu buah tombol Login, komponen notifier untuk mengetahui respon dan reaksi app serta komponen FirebaseDB1 untuk mengatur koneksi dengan database Firebase.
176 Gambar 183. Desain user interface untuk login user Tabel 15 memperlihatkan properties apa saja yang perlu diatur pada setiap komponen yang ditambahkan ke halaman viewer. Tabel 15. Pengaturan properties halaman login APP homepage_login_firebase Komponen Properties Nilai diinputkan Screen1 Title Login page Image1 Height 13 percent Width 70 percent Picture Upload* Label1 Text Username Username (textbox) Width Fill parent Label2 Text Password Password (passwordTextbox) Width Fill parent Login (button) Width 200 pixels Label4 Text Anda belum punya akun? Daftar disini TextColor red Register (button) Text Register
177 Komponen Properties Nilai diinputkan Notifier1 FirebaseDB1 FirebaseToken AIzaSyCLiXWOKS8XtjdUpPD72J4l7nJLmteVNK0 FirebaseURL https://database-ujicoba.firebaseio.com/ ProjectBucket homepage_login_firebase Yang perlu dijelaskan lebih lanjut dari pengaturan properties Tabel 15 adalah pengaturan setting FirebaseDB1. Selain perlu mengingat kembali materi sub-bab B.2 pada Bab 13, anda juga bisa memperhatikan Gambar 184. Gambar 184. Halaman setting firebase untuk project database ujicoba Pada Gambar 184 terdapat informasi Web API Key yang perlu dicopas ke properties FirebaseDB1 seperti yang ditunjukkan pada Tabel 15.
178 Gambar 185. Halaman menu realtime database untuk project database ujicoba Pada Gambar 185 terdapat informasi firebase-url yang juga perlu di-copas ke properties FirebaseDB1 seperti yang ditunjukkan pada Tabel 15. Sedangkan kolom ProjectBucket pada properties FirebaseDB1 di APP Inventor jika diisi oleh user akan menjadi foldername (perhatikan antara isian Tabel 15 dengan Gambar 185). Hal berikutnya yang perlu dijelaskan lebih lanjut dari pengaturan properties Tabel 15 adalah komponen Image1. Image tersebut sebagai bagian dari desain estetika program. Cari gambar yang bersesuaian kemudian upload melalui menu Media yang disediakan (lihat Gambar 186). Gambar 186. Menu Media untuk upload image Langkah selanjutnya adalah merancang codeblock sesuai dengan deskripsi permasalahan yang telah disebutkan di atas. Gambar 187 memperlihatkan keseluruhan codeblock untuk modul login. Sesuai deskripsi, textbox username dan password tidak boleh kosong ketika tombol login diklik. Jadi, pada codeblock When login.Click (lihat Gambar 187) dipasangkan codeblock logika If then Else untuk melakukan pengecekan seperti yang diminta pada deskripsi.
179 Jika kondisi IF = False (atau artinya semua textbox terisi) maka app mengambil komponen value database Firebase untuk tag yang dengan yang username yang diinput oleh user. Setelah app mendapatkan komponen value yang sesuai (codeblock When FirebaseDB1.GotValue), maka lakukan pengecekan autentifikasi. Jika password yang diketikkan user pada textbox berbeda dengan komponen value database Firebase maka munculkan notikasi “Password salah. Silahkan ulangi kembali”. Sedangkan jika kebalikannya, munculkan notifikasi “Login sukses. Username dan password dikenali”. Gambar 187. Rancangan codeblock modul login Sampai pada tahap ini, perancangan desain dan codeblock modul login telah selesai. Selanjutnya lakukan ujicoba pada perangkat smartphone dengan bantuan tools AI Companion. Gambar 188 memperlihatkan tampilan app homepage_login_firebase pada layar smartphone. Sedangkan Gambar
180 189 sampai dengan Gambar 191 memperlihatkan respon app ketika tombol login diklik. Gambar 189 memperlihatkan reaksi app ketika textbox belum diisi oleh user dan tombol login diklik. Gambar 190 memperlihatkan respon app ketika username dan password yang diinputkan dikenali dan sesuai dengan database Firebsase. Sedangkan Gambar 191 memperlihatkan respon app ketika password yang diinputkan tidak dikenali. Gambar 188. User Interface halaman login