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


Alhamdulillah tahap pertama tutorial To Do List Online sudah selesai dan bagi rekan-rekan yang masih kurang paham bisa tanyakan di kolom komentar.

Subscribe to receive free email updates:

0 Response to "To Do List Online with Firebase : set up firebase in Sketchware Part #1"

Post a Comment