Test dan Debug Firebase Extension Event dengan Firebase Emulator Suite

Firebase benar — benar telah memudahkan pembangunan solusi teknologi yang akan kita ciptakan, terdapat banyak sekali fitur — fitur Firebase yang dapat kita gunakan, salah satunya adalah Firebase Extension dan Firebase Emulator Suite.

Firebase Extension adalah suatu fitur dimana kita bisa menambahkan suatu fitur yang sudah disiapkan oleh Firebase ke dalam project kita dengan sangat mudah dan cepat, sedangkan Firebase Extension Event adalah event atau suatu kejadian saat extension itu sedang digunakan, dimana kita bisa menambahkan logika — logika tambahan ketika kejadian tersebut aktif sesuai kebutuhan bisnis kita.

Pada Firebase Extension terdapat banyak sekali fitur — fitur yang ada mulai dari fitur dari yang disiapkan oleh Firebase dan juga fitur dari produk — produk lain, seperti :

• Fitur untuk melakukan translasi bahasa
• Fitur untuk melakukan pembayaran
• Fitur untuk membuat ruang obrolan (chat)
• Fitur untuk secara otomatis merubah ukuran dan format gambar
• Dan masih banyak lagi.

Firebase Emulator Suite adalah suatu platform dimana kita bisa melakukan suatu test dan debug firebase project kita tanpa melibatkan arsitektur yang sebenarnya, sehingga tidak akan mengganggu yang ada di staging atau production yang sedang banyak diakses oleh banyak pengguna, kita bisa melakukan dan menguji semua fitur — fitur firebase project kita hanya di lokal perangkat kita!
Dan bahkan kita juga bisa menggunakan Firebase Emulator Suite ini untuk melakukan suatu pengujian secara otomatis untuk semua code kita yang akan di gabungkan ke branch lain untuk memastikan semua fitur masih berfungsi, terkait ini akan dibahas di artikel lain yakk.
Jika penasaran apa aja fitur — fitur yang ada di Firebase Extension, bisa di cek disini!

Jadi, disini kita akan belajar mengenai cara melakukan suatu testing dan debugging atau uji coba atas Firebase Extension Event yang telah kita bangun pada platform Firebase Emulator Suite.

Dimana hal ini juga mencakup :

• Inisiasi Firebase project (Functions, Storage dan Emulator Suite)
• Integrasi Firebase Extension (Resize Image) dengan project
• Integrasi Firebase Extension (Resize Image) dengan Local Emulator Suite
• Membuat suatu function yang dapat dijalankan ketika suatu event telah aktif
• Melakukan pengunggahan gambar ke Local Emulator Suite untuk melakukan test dan debug atas extension event yang telah kita buat

Let’s do it!

1. Buat Firebase Project baru / pakai project yang udah ada (2 mins)
   https://medium.com/@retzd/firebase-snack-kick-start-your-very-first-firebase-project-725c20f53145
2. Aktifkan firebase storage pada firebase console (2 mins)
   https://medium.com/@retzd/firebase-snack-setting-up-your-firebase-cloud-storage-bb4bbc00d537
3. Integrasi Firebase Extension dan pengaktifan Firebase Extension Event (2 mins)
   https://medium.com/@retzd/firebase-snack-setup-and-integrate-firebase-extension-and-firebase-extension-event-with-your-7dd89177d7f2
4. Sekarang, muai dengan buat folder baru dan lakukan inisiasi Firebase project

Disini kita hanya akan mengaktifkan 3 fitur Firebase utama yaitu :

• Firebase Functions
  Untuk menjalankan code ketika suatu kejadian pada extension aktif
• Firebase Storage
  Untuk menggunakan media penyimpanan pada Firebase
• Firebase Emulators
  Untuk dapat menggunakan platform lokal untuk uji coba fitur — fitur firebase kita

Untuk pengaturan Emulator, kita akan mengaktifkan 2 fitur Firebase yaitu :

• Storage Emulator
  Untuk dapat menggunakan fitur firebase media penyimpanan yang hanya akan aktif pada perangkat kita.
• Functions Emulator
  Untuk dapat menggunakan fitur cloud functions yang hanya akan aktif pada perangkat kita.

Kalian juga bisa melakukan suatu pengaturan untuk port — port atas masing — masing fitur Firebase yang akan kalian gunakan, untuk sekarang kita akan menggunakan port — port secara default.

Setelah inisiasi project Firebase selesai, kita bisa buka folder tersebut dengan IDE kita dan that’s it! persiapan telah selesai.

Untuk memastikan kita pada persiapan yang sama, struktur foldernya itu sebagai berikut ya.

Untuk dapat mengintegrasi Firebase Extension yang telah kita install pada Firebase Console di Step 3, ke Firebase Emulator Suite kita sehingga kita bisa menjalankan extension kita hanya pada perangkat lokal kita, kita perlu melakukan export extension kita dengan command :

$ firebase ext:export

Setelah proses export selesai, pada root project folder kita, akan muncul folder “extensions” dimana pada folder tersebut memuat nama extensions kita dan pengaturan — pengaturan yang telah kita terapkan sebelumnya / default.

Sekarang, kita jalankan platform Firebase Emulator Suite kita dengan

$ firebase emulators:start — — only functions,storage,extensions

Setelah proses inisiasi emulator selesai, maka fitur- fitur firebase yang kita atur yaitu Functions, Storage dan Extensions akan berjalan secara lokal dengan port — port yang sudah kita atur sebelumnya atau akan menggunakan default.

Lalu kita coba cek bagian tab “Extensions”, maka akan muncul extensions yang sedang berjalan secara lokal pada Firebase Emulator Suite kita, yaitu “Resize Image”

Kita juga bisa periksa detail dari extension tersebut, bagaimana extension tersebut akan bekerja, akses dan role dan melakukan pengaturan — pengaturan lainya, pada akhirnya semua pengaturan tersebut akan merubah file .env yang ada pada folder extension kita.

Sekarang, kita akan mencoba menguji firebase extension resize image yang telah kita integrasi dengan firebase project kita, karena extension resize image kita bekerja dengan cara memodifikasi ukuran dimensi gambar, maka kita bisa mendemonstrasikan ini dengan cara mengupload suatu gambar ke firebase storage local emulator kita.

Setelah selesai melakukan upload, kita bisa menuju tab “Logs” untuk melihat log dari firebase cloud function kita, dan kita akan melihat function kita yaitu “onimageresized” telah berhasil di trigger, dimana function tersebut di trigger ketika extension resize image telah selesai berhasil melakukan modifikasi ukuran dimensi gambar yang telah diupload

Lalu kita coba cek di bagian Tab Storage, maka extension telah membuatkan folder untuk kita yaitu “thumbnails”

Dimana pada folder tersebut berisi gambar hasil modifikasi yaitu gambar dengan ukuran dimensi yang baru, hal ini tergantung pengaturan yang kita terapkan ketika inisiasi extension atau bahkan dapat dirubah ketika sudah terinstall pun.

That’s it!
Semoga dapat membantu ya guys, kalau ada pertanyaan feel free untuk komentar, dan jangan lupa“clap” nya ya! :D