Light My Fire: Kesan pertama berkenalan dengan Firebase untuk pengembangan web tingkat pemula

Entah dari mana asalnya, tiba-tiba aku mendapat ilham untuk membuat sebuah produk dalam format web app. Bukan produknya yang akan dibahas di sini (karena memang belum dibuat), melainkan salah satu bagian dari stack yang kupilih, yaitu Firebase.

Kendala utama yang menghalangiku mewujudkan ide tersebut adalah backend dan devops. Jujur, kemampuanku di dua bidang itu sangat kurang. Aku bisa bekerja dengan API yang sudah ada, paham dasar-dasar model data dan relasinya, tapi kalau harus membuat sendiri database untuk web app yang (inginnya) digunakan banyak user, belum lagi harus mengatur hosting dan deployment… nyerah. 😬

Akhirnya aku memberanikan diri untuk bertanya di DEV.to.

Nggak disangka, banyak yang memberi masukan, lengkap dengan alasan dan referensi 👍🏽. Dari berbagai jawaban, pilihanku jatuh pada Firebase.

Mumpung akhir pekan, aku berusaha mempelajari Firebase dan mencoba mengintegrasikan ke stack frontend pilihanku, yaitu Svelte + Sapper. Sebelum masuk ke sisi yang lebih teknis di post-post selanjutnya (kalau ingat nulis), di post ini aku akan menceritakan empat hal yang menarik untukku saat ngulik Firebase untuk pembuatan aplikasi web. Semoga berguna untuk teman-teman yang punya kebutuhan serupa.

1) Firebase adalah suite yang berisi macam-macam produk

Sebetulnya cukup jelas, sih. Halaman landing Firebase pun mencantumkan daftar produk/layanan yang mereka sediakan. Seperti halnya Google productivity suite yang terdiri dari Gmail, Drive, Sheets, Slides dan sebagainya, dengan satu akun, kita bisa menggunakan salah satu atau beberapa produk sesuai kebutuhan masing-masing.

Tapiiii, kalau belum hafal benar dengan nama-nama produknya, apalagi kalau melakukan pencarian dengan frasa generik seperti “svelte firebase tutorial”, hasilnya bisa jadi kurang sesuai kebutuhanmu. Ini yang sempat membuatku bingung waktu pertama kali cari tutorial dan contoh kode. Yang dicari layanan database, yang dibuka tutorial Firebase functions untuk hosting. 🤦🏽‍♀️

Biar nggak “zonk” seperti aku, ini dia ringkasan produk-produk Firebase yang umum dipakai dalam pembuatan web app:

• Cloud Firestore dan Realtime Database (database) (iya, ada 2 produk database)
• Authentication (sistem login user melalui Google, Facebook, Twitter, GitHub, SMS; bisa dikombinasikan dengan produk database)
• Cloud Functions (host/server yang menjalankan fungsi untuk berinteraksi dengan database)
• Cloud Storage (CDN untuk file-file aset seperti image, audio, video yang diunggah user)
• Hosting (yha… hosting)

Masih banyak produk-produk lain untuk monitoring, analytics, push notification, dan sebagainya. Selengkapnya bisa dibaca sendiri di halaman Firebase Products.

Selain itu, saat melihat contoh kode di repository Github, kamu bisa cek isi file-file ini untuk mendapat gambaran produk Firebase apa saja yang digunakan:

• package.json
• firebase.json
• functions/package.json (jika ada)

Misalnya, kita bisa bandingkan repo-repo berikut ini:

• Repo 1: https://github.com/mightyjol/sapper-firebase-template
  • package.json berisi dependency:
    • firebase-admin (untuk mengamankan Firestore)
    • firebase-auth (Authentication)
  • firebase.json berisi setting untuk:
    • Cloud Functions
    • Firestore
    • Hosting
    • Storage
  • functions/package.json berisi dependency:
    • firebase-admin
    • firebase-functions
• Repo 2: https://github.com/mortscode/sapper-firebase
  • firebase.json berisi setting untuk:
    • Hosting
  • functions/package.json berisi dependency:
    • firebase-admin
    • firebase-functions

Kalau kamu mencari contoh kode untuk berinteraksi dengan database Firestore, gunakanlah repo pertama sebagai referensi.

2) Plan gratisan yang (lebih dari) lumayan

“Biar miskin asal sombong,” begitu kata Elvy Sukaesih di lagu keren ini. Semangat yang sama berlaku untuk penggunaan Firebase. Dengan plan Spark yang gratis, kamu bisa mengakses semua layanan! Satu-satunya yang nggak ada di plan gratisan cuma authentication SMS. Jika kebutuhanmu melebihi kuota gratisan, tersedia plan Blaze dengan biaya sesuai penggunaan. Detailnya bisa dilihat di halaman Pricing.

Menurutku, secara umum plan Spark ini sih sudah sangat cukup untuk project pribadi atau produk di tahap prototyping/MVP/beta.

• Untuk Hosting, penyimpanan maksimal 1GB dengan batas transfer 10GB per bulan. Sudah dapat SSL dan custom domain kalau kamu ingin menggunakan domain sendiri (misal ekakeren.com) alih-alih subdomain default ekakeren.web.app dan ekakeren.firebaseapp.com.

• Untuk Storage, total penyimpanan maksimal 5GB, download 1GB per hari, sedangkan operasi upload 20ribu per hari dan download 50ribu per hari.

• Untuk Database… nah, ini dia. Kalau kamu berencana menggunakan layanan database, simak poin berikutnya biar nggak boncos akibat salah pilih database.

3) Realtime Database atau Cloud Firestore? Pilih mana?

Firebase menawarkan dua macam database, Realtime Database dan Firestore. Realtime Database adalah produk pertama Firebase yang diluncurkan tahun 2012 sebelum diakuisisi oleh Google. Sedangkan Firestore produk yang lebih baru (2017), dengan kapabilitas dan fitur-fitur sesuai perkembangan kebutuhan app modern.

Tampilan record Realtime Database di konsol Firebase berbentuk tree data structure seperti ini. Mau modifikasi data (add record, edit value dsb)? Cukup arahkan kursor ke properti yang ingin diubah. Kita juga bisa mengimpor file JSON dengan mengunggah file dan mengekspor data ke file JSON. Minusnya: nggak bisa search/filter data dari konsol. 😱

Data dari Star Wars API

Cloud Firestore tampilannya cenderung lebih “ramah”. Kita bisa mensortir dan filter record langsung dari sini. Canggih juga filternya; selain operator-operator standar seperti “equal”, “greater/less than”, juga ada “array contain”. Dengan contoh SW API ini, kita bisa dengan mudah memfilter karakter yang hanya muncul di film ”The Empire Strikes Back”, misalnya. Sayang nggak ada fitur ekspor dan impor ke/dari file JSON seperti Realtime Database.

Kita dapat dua database terpisah untuk masing-masing produk, jadi bisa coba Realtime Database tanpa mempengaruhi data di Firestore (dan sebaliknya).

Untuk persamaan dan perbedaan lengkapnya, silakan baca:

• https://firebase.google.com/docs/firestore/rtdb-vs-firestore?hl=id
• https://savvyapps.com/blog/firebase-realtime-database-vs-cloud-firestore-for-your-app
• https://medium.com/datadriveninvestor/realtime-database-vs-cloud-firestore-which-database-is-suitable-for-your-mobile-app-87e11b56f50f

Oh ya, satu lagi yang perlu jadi pertimbangan: Kedua database ini punya sistem perhitungan biaya yang berbeda.

• Realtime Database menghitung besar data yang dikirim melalui operasi read/write, tidak peduli berapa jumlah API call-nya. Untuk plan Spark (plan gratis), batas maksimalnya adalah:

  • Total data yang disimpan: 1 GB (sama untuk kedua database)
  • Data yang didownload: 10 GB per bulan
  • Maksimal 100 device yang mengakses database secara bersamaan
  • Detail hitungan biaya Realtime Database

• Sebaliknya, Cloud Firestore nggak peduli besar/kecil data yang dikirim, tapi menghitung jumlah operasi yang kamu lakukan. Untuk plan Spark, batas maksimalnya:

  • Total data yang disimpan: 1 GB (sama untuk kedua database)
  • Jumlah write: 20 ribu per hari
  • Jumlah read: 50 ribu per hari
  • Jumlah delete: 20 ribu per hari
  • Detail hitungan biaya Cloud Firestore

Bayangkan kalau kamu bikin fitur chat yang payload-nya cuma berisi id, created, userId, dan message. Atau kalau aplikasimu ada fitur “like” yang kemungkinan akan banyak diklik, dan setiap klik mengirim request ke API. Ukuran data transaksi kecil, tapi frekuensi tinggi. Kalau pakai Firestore, bisa bangkrut karena yang dihitung adalah jumlah transaksi (read, write, bahkan delete). Jadi sebaiknya pakai Realtime Database saja.

Sebaliknya, kalau misalnya kamu bikin web app dokumentasi atau ensiklopedia (dan semua data untuk suatu entry dimasukkan dalam payload entry tersebut), apalagi kalau datanya cenderung jarang diedit, sebaiknya pakai Firestore.

Apapun database pilihanmu, pintar-pintar aja mengatur alur data dan minimalisir transaksi data yang tidak perlu. Jangan sampai seperti masnya ini yang tiba-tiba dapat tagihan seribu Euro akibat salah strategi sinkronisasi data. 🙀💸

4) Dapat digunakan di berbagai platform, bahasa, library, atau framework

Di luar beberapa produk yang khusus dibuat untuk native iOS dan Android, sebagian besar produk Firebase tersedia untuk berbagai platform: Web, iOS, Android, C++, dan Unity.

Untuk web, kita bisa me-load library Firebase ke project kita dari:

• CDN dengan <script> tag, atau…
• NPM package (npm install --save firebase atau yarn add firebase) lalu import modul yang dibutuhkan

Jadi, dengan satu halaman HTML statis dan vanilla JavaScript, kita sudah bisa menggunakan Firebase. Instruksi lengkapnya bisa dibaca di https://firebase.google.com/docs/web/setup.

Gimana kalau pakai framework? Nggak masalah, tinggal install dan import/load aja. Malah, kemungkinan besaaar sekali, sudah banyak starter site dan tutorial untuk framework/library pilihanmu, baik itu React, Vue, Svelte, dan library turunannya seperti Gatsby, Next, Nuxt, dll.

Web app yang ingin kubuat rencananya menggunakan Sapper, framework untuk Svelte. Bahkan untuk stack yang relatif baru ini, sudah ada beberapa walkthrough dan starter/contoh kode. Memang, masih belum lengkap, jadi harus sedikit utak-atik sendiri, intip berbagai thread diskusi, dan tanya sana-sini. Yang membawa kita ke poin berikutnya…

5) Dokumentasi, referensi, dan komunitas

Menurutku ini faktor yang penting, khususnya untuk pemula. Firebase punya platform konten resmi yang lengkap, yaitu:

• Dokumentasi — Ini lengkap banget, dari A sampai Z ada. Kita tinggal copas pelajari dengan seksama aja.
• Codelab — Belajar dari paaaaling dasar dengan cara praktik langsung. Aku nyesel sok-sokan langsung “loncat” cari-cari starter site yang ada Firebase-nya. Padahal aku belum paham prinsip-prinsip dasarnya, jadi bolak-balik berhenti untuk search bagian yang aku nggak ngerti. Sama aja buang waktu. Tau gitu mulai dari sini dulu 😤.
• Channel Youtube — Channel ini aktif banget. Selain conference talks dan ulasan/demo fitur-fitur baru, ada seri video singkat “Ask Firebase” yang membahas hal-hal yang sering ditanyakan. Kalau kamu jenis orang yang lebih mudah belajar dengan penjelasan lisan + demo, bisa mulai dari sini.
• Slack — Forum komunitas Firebase di Slack. Ada channel untuk masing-masing produk (Analytics, Firestore, dsb), juga channel umum seperti #random dan #releases. Rata-rata jumlah member belasan sampai puluhan ribu. Aku udah nge-post pertanyaan level pemula di channel Firestore, dan dijawab dengan baik dan jelas. 👍🏽

Karena popularitas Firebase, selain media/platform resmi di atas, tentu masih banyak materi lain (tutorial, artikel, dsb) yang bisa dipakai sebagai rujukan. Juga lebih besar kemungkinan ada orang yang punya use case sama/mirip denganmu, atau punya pertanyaan yang sama denganmu.

Ini yang akhirnya membuatku mantap ingin (belajar) menggunakan Firebase.

Kesimpulan

Kita baru saja mengintip layanan Firebase, yang umumnya disebut sebagai “(mobile) backend as a service”. Kita tinggal buat frontend dengan stack, bahasa, dan framework apapun pilihan kita; lalu ”tempel” saja ke Firebase. Firebase yang menangani segala urusan database, hosting, server, dengan tambahan tools yang menunjang kebutuhan aplikasi kita.

Kemudahan ini jelas ada harganya; baik harga harfiah (jika melebihi kuota gratisan) maupun “harga” konsekuensi layanan cloud computing secara umum: kita mempercayakan sebagian besar aplikasi kita—data dan logika—di tangan satu perusahaan. Tentu ini pilihan yang sifatnya subyektif.

Kalau memang kamu merasa itu sebanding dengan manfaatnya, Firebase bisa jadi pilihan yang menarik; nggak cuma untuk programmer kawakan yang membuat aplikasi-aplikasi “serius”, tapi juga untuk pemula yang ingin membuat produk atau project perdana.

Yuk, kita coba!