To Do List Online with Firebase : set up firebase in Sketchware Part #1

Pada tutorial sebelumnya kita sudah belajar membuat simple To Do List menambah (add), menampilkan (read) dan menghapus (delete) data, akan tetapi data yang sudah ditambahkan itu sebetulnya belum tersimpan baik di local memory atau di online, sehingga tiap kali kita meng close aplikasi dan membuka lagi data tersebut tidak tersimpan. Bagaimana caranya agar kita bisa menyimpan data tersebut, sebetulnya ada dua cara bisa disimpan di local memory hp dengan bantuan component SharedPreferences dan juga bisa di simpan secara online menggunakan Firebase. Tapi sebelum ke pokok bahasan bagi rekan-rekan yang belum tahu bagaimana cara membuat simple to do list silahkan baca artikel saya sebelumnya Simple To Do List - read, delete in Sketchware Part #1.

Apa itu Firebase Realtime Database?

Firebase Realtime Database adalah database yang di-host di cloud. Data disimpan sebagai JSON dan disinkronkan secara realtime ke setiap klien yang terhubung. Ketika Anda membuat aplikasi lintas-platform dengan SDK Android, iOS, dan JavaScript, semua klien akan berbagi sebuah instance Realtime Database dan menerima update data terbaru secara otomatis.

untuk lebih jelasnya tentang Firebase bisa cek di link berikut ini Firebase Realtime Database

Cara Setting Firebase Database?

Untuk dapat menggunakan Firebase terlebih dahulu kita harus menset upnya, yang perlu di set up yaitu ( authentication, Database, Storage). Ikuti langkah-langkah berikut ini;

A. Buat Project Baru

Klik tombol +
Ketik Application name (1) "To Do List"
Klik Advanced Settings dan atur
Ketik Package name (2) "com.gurukomline.todolist" untuk gurukomline bisa diganti dengan nama yang lainnya
Ketik Project Name (3) "ToDoList"
Klik tombol SAVE untuk mengakhiri

B. Menambahkan component firebase

Klik tombol titik 3
klik Library
klik firebase, kemudian isikan konfigurasi firebasenya
Project ID, App ID, dan API Key datanya diambil dari Firebase Console

C. Mendapatkan Project ID, App ID, dan API Key

Sebelum masuk ke Firebase console, rekan-rekan harus sudah memiliki akun gmail dan sudah login dengan akun gmail rekan-rekan. kemudian ikuti langkah-langkah berikut ini

klik go To Firebase Console (4), kemudian akan dibawah ke halaman firebase console. Untuk mempermudah set up, rubah tampilan browser ke versi desktop ( caranya klik menu tiga titik di kanan atas dan centang Situs desktop)

a) Membuat project firebase baru

klik tombol Tambahkan project (untuk membuat project baru)
Ketikan nama projectnya, misal "To Do List"
klik tombol Lanjutkan
untuk tahap awal non aktifkan "aktifkan Google analytics untuk project ini"
klik Buat Project, dan tunggu sampai proses membuat selesai
klik tombol Lanjutkan

b) Menambahkan firebase ke aplikasi android

klik icon Android

1) Daftarkan aplikasi

Isikan Nama Paket Android dengan package name apk android yang sudah kita buat sebelumnya "com.gurukomline.todolist"
Nama aplikasi "To Do List"
Sertifikat penandtanganan ... di kosongkan untuk tahap belajar
klik tombol Daftarkan aplikasi
klik tombol Berikutnya
klik tombol Lanjutkan ke console

2) Setting project yang baru di buat

klik tombol gear , pilih Setelah proyek
di Setelah publik, edit Nama di hadapan publik dengan cara klik tombol icon pencil dan ketikan "To Do List Online"
klik tombol Simpan
klik Email dukungan dan pilih email yang aktif

3) Setting Authentication

Authentication untuk halaman login

klik Authentication
klik tombol Siapkan Metode masuk
kita aktifkan metode yang gratis yaitu Email/Sandi dan Anonim
caranya klik baris yang akan di aktifkan misal Email/Sandi
kemudian geser tombol Aktifkan
Klik tombol Simpan

Atur template

Klik tab Template
klik Verifikasi alamat email
klik edit/ icon pencil
isikan Nama pengirim : "namaaplikasi"
dari : admin
klik tombol simpan

dengan cara yang sama atur juga untuk Penyetelan ulang sandi (untuk mereset sandi)

4) Setting Database

klik database
klik tombol Buat database
pilih Mulai dalam mode produksi
klik tombol Berikutnya
klik tombol Selesai
klik tab aturan (untuk cloud Firestore)
pada baris allow read, write: if false ganti ke true
klik tombol Publikasikan

klik Realtime database
klik tab aturan
pada baris ".read": false, ganti true
pada baris ".write": false ganti true
klik tombol Publikasikan

5) Setting Storage

klik Storage
klik tombol mulai
klik tombol Berikutnya
klik tombol Selesai
klik tab Aturan
ganti baris ini allow read, write: if request.auth != null; menjadi allow read, write: if true;
klik tombol Publikasikan

D. Memasukan Project ID, App ID, API Key dan Link Storage

Pada halaman firebase console klik tombol gear , pilih Setelah proyek
Copy Project ID
Buka project sketchware
Klik tombol titik 3
klik Library
klik firebase, kemudian paste di form Project ID
dengan langkah yang sama copy App ID dan API key
kemudian klik NEXT pindah ke halaman Storage URL Settings
Di Firebase Console klik Storage
copy link storage dan kemudian paste ke form Storage Bucket URL, url asli : gs://to-do-list-76f93.appspot.com ganti menjadi to-do-list-76f93.appspot.com
klik tombol NEXT
klik tombol SAVE