Menambahkan fungsi baru ke aplikasi web dengan cepat menggunakan Firebase Extensions

1. Pengantar

Sasaran

Dalam codelab ini, Anda akan menambahkan fungsi ke aplikasi marketplace online dengan bantuan Firebase Extensions. Melalui codelab ini, Anda akan memahami cara ekstensi dapat membantu Anda menghabiskan lebih sedikit waktu untuk tugas pengembangan dan pengelolaan aplikasi.

Hal yang akan Anda build

Dalam codelab ini, Anda akan menambahkan fitur berikut ke aplikasi web marketplace online:

• Memuat gambar lebih cepat untuk meningkatkan retensi pengguna
• Membatasi entri di database untuk meningkatkan performa dan menurunkan tagihan
• Menerapkan penghapusan otomatis data pengguna lama untuk meningkatkan perlindungan data pengguna

Hal yang akan Anda pelajari

• Cara menemukan ekstensi untuk kasus penggunaan umum
• Cara menginstal dan mengonfigurasi ekstensi di project Anda
• Cara mempertahankan (memantau, mengupdate, dan meng-uninstal) ekstensi di project Anda

Codelab ini berfokus pada Ekstensi Firebase. Untuk mengetahui informasi mendetail tentang produk Firebase lainnya yang disebutkan dalam codelab ini, lihat dokumentasi Firebase dan codelab lainnya.

Yang Anda butuhkan

• Komputer yang telah menginstal browser web modern (Chrome direkomendasikan)
• Akun Google

2. Membuat dan menyiapkan project Firebase

Membuat project Firebase

1. Login ke Firebase console menggunakan Akun Google Anda.
2. Klik tombol untuk membuat project baru, lalu masukkan nama project (misalnya, FriendlyMarket).
   
3. Klik Lanjutkan.
4. Jika diminta, tinjau dan setujui persyaratan Firebase, lalu klik Continue.
5. (Opsional) Aktifkan bantuan AI di Firebase console (disebut "Gemini di Firebase").
6. Untuk codelab ini, Anda tidak memerlukan Google Analytics, jadi nonaktifkan opsi Google Analytics.
7. Klik Buat project, tunggu hingga project Anda disediakan, lalu klik Lanjutkan.

Aplikasi yang akan Anda buat menggunakan beberapa produk Firebase yang tersedia untuk aplikasi web:

• Firebase Authentication untuk mengidentifikasi pengguna dengan mudah
• Firebase Realtime Database untuk menyimpan data terstruktur di cloud dan mendapatkan notifikasi instan saat data diperbarui
• Cloud Storage for Firebase untuk menyimpan gambar di cloud

Sekarang Anda akan mengaktifkan dan mengonfigurasi produk Firebase tersebut menggunakan Firebase console.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Firebase Extensions dan layanan cloud yang mendasarinya serta Cloud Storage for Firebase, project Firebase Anda harus menggunakan paket harga bayar sesuai penggunaan (Blaze), yang berarti project tersebut ditautkan ke akun Penagihan Cloud.

• Akun Penagihan Cloud memerlukan metode pembayaran, seperti kartu kredit.
• Jika Anda baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit sebesar$300 dan akun Penagihan Cloud Uji Coba Gratis.
• Jika Anda melakukan codelab ini sebagai bagian dari acara, tanyakan kepada penyelenggara apakah ada kredit Cloud yang tersedia.

Untuk mengupgrade project Anda ke paket Blaze, ikuti langkah-langkah berikut:

1. Di Firebase console, pilih upgrade your plan.
2. Pilih paket Blaze. Ikuti petunjuk di layar untuk menautkan akun Penagihan Cloud ke project Anda.
   Jika perlu membuat akun Penagihan Cloud sebagai bagian dari upgrade ini, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

Mengaktifkan login email

Meskipun autentikasi bukanlah fokus dalam codelab ini, memiliki bentuk autentikasi di aplikasi merupakan hal yang penting, untuk mengidentifikasi secara unik setiap orang yang menggunakannya. Anda akan menggunakan login email.

1. Di Firebase console, klik Develop di panel kiri.
2. Klik Authentication, lalu klik tab Sign-in method (atau klik di sini untuk langsung membuka tab Sign-in method).
3. Klik Email/Password di daftar Sign-in providers, setel tombol akses Enable ke posisi aktif, lalu klik Save.

Mengaktifkan Realtime Database

Aplikasi menggunakan Firebase Realtime Database untuk menyimpan item yang dijual.

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Realtime Database.
2. Klik Create database.
3. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
4. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Pada langkah berikutnya di codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
5. Klik Buat.

Menetapkan aturan keamanan untuk database Anda

Sekarang, Anda akan menetapkan aturan keamanan yang diperlukan untuk aplikasi ini. Berikut beberapa contoh aturan dasar untuk membantu mengamankan aplikasi Anda. Aturan ini memungkinkan siapa saja melihat item yang dijual, tetapi hanya pengguna yang login yang dapat melakukan pembacaan dan penulisan lainnya. Jangan khawatir tentang spesifikasi aturan ini; Anda hanya akan menyalin dan menempelkannya untuk mengaktifkan dan menjalankan aplikasi.

1. Di bagian atas dasbor Realtime Database, klik tab Rules.

2. Salin dan tempel set aturan berikut ke dalam kolom aturan di tab Aturan:

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. Klik Publikasikan.

Menyiapkan Cloud Storage for Firebase

Aplikasi menggunakan Cloud Storage for Firebase untuk menyimpan gambar item yang dijual.

Berikut cara menyiapkan Cloud Storage for Firebase di project Firebase Anda:

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Storage.
2. Klik Get started.
3. Pilih lokasi untuk bucket Storage default Anda.
   Bucket di US-WEST1, US-CENTRAL1, dan US-EAST1 dapat memanfaatkan paket"Selalu Gratis" untuk Google Cloud Storage. Bucket di semua lokasi lainnya mengikuti harga dan penggunaan Google Cloud Storage.
4. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Pada langkah berikutnya di codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk bucket Storage Anda.
5. Klik Buat.

Menyiapkan aturan keamanan untuk bucket Storage Anda

Sekarang, Anda akan menetapkan aturan keamanan yang diperlukan untuk aplikasi ini. Aturan ini hanya mengizinkan pengguna yang diautentikasi untuk memposting gambar baru, tetapi mengizinkan siapa pun untuk melihat gambar item yang tercantum.

1. Di bagian atas dasbor Penyimpanan, klik tab Aturan.

2. Salin dan tempel set aturan berikut ke dalam kolom aturan di tab Aturan:

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. Klik Publikasikan.

3. Menjalankan aplikasi contoh

Buat fork project StackBlitz

Dalam codelab ini, Anda akan mem-build dan men-deploy aplikasi menggunakan StackBlitz, editor online yang mengintegrasikan beberapa alur kerja Firebase. Stackblitz tidak memerlukan penginstalan software atau akun StackBlitz khusus.

StackBlitz memungkinkan Anda membagikan project kepada orang lain. Orang lain yang memiliki URL project StackBlitz Anda dapat melihat kode dan membuat fork project Anda, tetapi mereka tidak dapat mengedit project StackBlitz Anda.

1. Buka URL ini untuk kode awal: https://stackblitz.com/edit/friendlymarket-codelab.
2. Di bagian atas halaman StackBlitz, klik Fork.

Sekarang Anda memiliki salinan kode awal sebagai project StackBlitz Anda sendiri. Karena Anda tidak login, "akun" Anda disebut @anonymous, tetapi tidak apa-apa. Project memiliki nama yang unik, beserta URL yang unik. Semua file dan perubahan Anda disimpan dalam project StackBlitz ini.

Menambahkan Aplikasi Web Firebase ke project

1. Di StackBlitz, lihat file src/firebase-config.js Anda. Di sinilah Anda akan menambahkan objek konfigurasi Firebase.
2. Kembali di Firebase console, buka halaman ringkasan project Anda dengan mengklik Project Overview di kiri atas.
3. Di tengah halaman ringkasan project Anda, klik ikon web untuk membuat Aplikasi Web Firebase baru.
4. Daftarkan aplikasi dengan nama panggilan FriendlyMarket Codelab.
5. Untuk codelab ini, jangan centang kotak di samping Also set up Firebase Hosting for this app. Anda akan menggunakan panel pratinjau StackBlitz.
6. Klik Daftarkan aplikasi.
7. Salin objek konfigurasi Firebase aplikasi Anda ke papan klip. Jangan salin tag <script>. Catatan: Jika Anda perlu menemukan konfigurasi nanti, ikuti petunjuk di sini.

8. Klik Lanjutkan ke konsol.

Tambahkan konfigurasi project Anda ke aplikasi Anda:

1. Kembali di StackBlitz, buka file src/firebase-config.js.
2. Tempel cuplikan konfigurasi Anda di file. Setelah Anda melakukannya, tampilannya akan seperti ini (tetapi dengan nilai project Anda sendiri dalam objek konfigurasi):

Apa titik awal untuk aplikasi ini?

Lihat pratinjau interaktif di sisi kanan layar StackBlitz:

Codelab ini akan memulai Anda dengan kode untuk aplikasi marketplace dasar. Setiap pengguna dapat melihat daftar item yang dijual dan mengklik link untuk melihat halaman detail item. Jika pengguna login, mereka akan melihat informasi kontak penjual sehingga mereka dapat menegosiasikan harga dan membeli item.

Coba aplikasi:

1. Login dengan tombol di bagian atas layar utama. Anda dapat menggunakan alamat email, nama, dan sandi palsu.
2. Klik tombol Jual sesuatu di sudut kanan bawah untuk membuat listingan.
3. Untuk Title, masukkan Xylophone.
4. Untuk Harga Penawaran, masukkan 50.
5. Untuk Deskripsi Item, masukkan yang berikut: This high quality xylophone can be used to play music.
6. Download gambar xilofon ini ke komputer Anda, lalu upload dengan tombol GAMBAR ITEM ANDA.

file_downloadDownload Gambar

7. Setelah Anda mengisi semua kolom dan mengupload gambar, klik Posting.
8. Temukan listingan baru Anda. Klik item Anda untuk melihat layar detailnya, lalu luaskan panel Informasi kontak penjual.
9. Kembali ke Firebase console. Di dasbor Database, Anda akan melihat entri untuk item yang Anda posting di bawah node forsale. Di dasbor Penyimpanan, Anda juga akan menemukan gambar yang Anda upload di jalur friendlymarket.

4. Menemukan dan menginstal ekstensi

Masalahnya

Setelah melakukan riset pengguna untuk aplikasi, Anda mengetahui bahwa sebagian besar pengguna mengunjungi situs Anda dari smartphone, bukan desktop. Namun, statistik Anda juga menunjukkan bahwa pengguna seluler cenderung meninggalkan situs Anda ("churn") setelah beberapa detik.

Karena penasaran, Anda menguji situs dengan kecepatan koneksi seluler. (Pelajari cara melakukannya di sini.) Anda mendapati bahwa gambar memerlukan waktu yang sangat lama untuk dimuat dan tidak di-cache di browser sama sekali. Waktu pemuatan yang lama tersebut terjadi pada setiap tayangan halaman.

Solusi

Setelah membaca cara mengoptimalkan gambar, Anda memutuskan untuk melakukan dua langkah untuk meningkatkan performa pemuatan gambar:

• Kompresi gambar. Bahkan ponsel mengambil gambar dengan resolusi yang jauh lebih tinggi daripada yang diperlukan untuk kebutuhan aplikasi ini. Mengurangi ukuran file akan mempercepat waktu pemuatan tanpa penurunan resolusi yang terlihat di aplikasi.
• Caching. Secara default, objek Cloud Storage memiliki header yang memberi tahu browser untuk tidak menyimpan gambar dalam cache, yang berarti browser pengguna akan mendownload ulang gambar yang sama berulang kali. Untungnya, Anda dapat mengubah header ini untuk mengizinkan penyimpanan dalam cache. Cloud Storage SDK sisi klien dan Firebase Admin SDK memungkinkan Anda menetapkan header ini.

Untuk mengompresi gambar, Anda harus membatasi kualitas upload atau memiliki proses sisi server yang mengubah ukuran gambar. Mari kita pertimbangkan konsekuensinya:

• Sisi klien. Untuk proses sisi klien, Anda cukup membatasi ukuran file untuk gambar yang diupload. Artinya, Anda tidak perlu menulis atau memelihara logika server baru. Namun, hal ini juga berarti penjual Anda harus mencari tahu cara mengubah ukuran gambar mereka sendiri, yang merupakan hambatan yang menyulitkan dan tidak intuitif untuk membuat listingan baru.
• Sisi server. Jika menggunakan Cloud Functions for Firebase, Anda dapat memicu fungsi yang otomatis mengubah ukuran gambar saat diupload. Artinya, penjual dapat mengupload gambar dengan ukuran apa pun yang mereka inginkan (tanpa perlu melakukan pekerjaan tambahan), dan fungsi backend Anda dapat mengubah ukuran gambar dengan lancar. Bahkan ada contoh yang tersedia untuk fungsi ini.

Sepertinya sisi server adalah cara yang tepat. Namun, ide ini tetap melibatkan pengkloningan sample, mengikuti petunjuk penyiapannya, lalu men-deploy fungsi dengan Firebase CLI. Mengubah ukuran gambar tampaknya merupakan kasus penggunaan yang umum. Bukankah ada solusi yang lebih mudah?

Solusi yang lebih mudah

Anda beruntung. Ada solusi yang lebih mudah: Firebase Extensions! Mari kita periksa katalog ekstensi yang tersedia di situs Firebase.

Lihat itu. Ada ekstensi bernama "Resize Images". Sepertinya menjanjikan.

Mari gunakan ekstensi ini di aplikasi Anda.

Menginstal ekstensi

1. Klik Lihat detail untuk melihat informasi selengkapnya tentang ekstensi ini. Di bagian Yang dapat Anda konfigurasi, ekstensi ini memungkinkan Anda menetapkan dimensi yang ingin diubah ukurannya, dan Anda bahkan dapat menetapkan header cache. Sempurna!
2. Klik tombol Install in console di halaman detail ekstensi. Anda akan diarahkan ke halaman Firebase console yang mencantumkan semua project Anda.
3. Pilih project FriendlyMarket yang Anda buat untuk codelab ini.
4. Ikuti petunjuk di layar hingga Anda mencapai langkah Konfigurasi ekstensi. Petunjuk akan menampilkan ringkasan dasar ekstensi, serta resource yang akan dibuat dan peran akses yang diperlukan.
5. Di kolom **Cache-Control** header untuk gambar yang diubah ukurannya, masukkan kode berikut:

public, max-age=31536000

6. Biarkan parameter lainnya pada nilai defaultnya.
7. Klik Instal ekstensi.

Saat Anda menunggu penginstalan selesai...

Menginstal dengan antarmuka command line Firebase

Jika Anda lebih terbiasa dengan alat command line, ekstensi juga dapat diinstal dan dikelola menggunakan Firebase CLI. Cukup gunakan perintah firebase ext, yang tersedia di CLI versi terbaru. Informasi selengkapnya dapat ditemukan di sini.

(Opsional) Pelajari lebih lanjut header Cache-Control

Nilai header Cache-Control public, max-age=31536000 berarti gambar akan di-cache hingga 1 tahun. Untuk mempelajari header Cache-Control lebih lanjut, lihat dokumentasi ini.

Perbarui kode klien

Ekstensi yang Anda instal menulis gambar yang diubah ukurannya ke bucket yang sama dengan gambar asli. Gambar yang diubah ukurannya memiliki dimensi yang dikonfigurasi yang ditambahkan ke nama filenya. Jadi, jika jalur file asli terlihat seperti friendlymarket/user1234-car.png, jalur file gambar yang diubah ukurannya akan terlihat seperti friendlymarket/user1234-car_200x200.png.

Mari kita perbarui aplikasi sehingga mengambil gambar yang diubah ukurannya, bukan gambar berukuran penuh.

1. Di StackBlitz, buka file src/firebase-refs.js.
2. Ganti fungsi getImageRef yang ada dengan kode berikut untuk membuat ref bagi gambar yang diubah ukurannya:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Melakukan pengujian

Karena ekstensi ini memantau upload gambar baru, gambar yang sudah ada tidak akan diubah ukurannya.

Buat postingan baru untuk melihat cara kerja ekstensi:

1. Klik Friendly Market di panel atas aplikasi Anda untuk membuka layar utama.
2. Klik tombol Jual sesuatu di sudut kanan bawah aplikasi untuk membuat listingan.
3. Untuk Title, masukkan Coffee
4. Untuk Harga Penawaran, masukkan 1
5. Untuk Deskripsi Item, masukkan yang berikut: Selling one cafe latte. It has foam art in the shape of a bear.
6. Download gambar secangkir kopi ini ke komputer Anda, lalu upload dengan tombol GAMBAR ITEM ANDA. file_downloadDownload Gambar
7. Setelah Anda mengisi semua kolom dan mengupload gambar, klik Posting. Anda akan melihat listingan kopi muncul di bawah Xylophone.
8. Di dasbor Functions di Firebase console, klik tab Logs. Anda akan melihat log dari fungsi yang menunjukkan bahwa fungsi tersebut telah dieksekusi.

9. Buka dasbor Storage untuk melihat gambar kopi asli dan versi yang diubah ukurannya di jalur friendlymarket.
10. Di panel pratinjau StackBlitz, muat ulang layar utama aplikasi Anda beberapa kali. Anda akan melihat gambar kopi dimuat jauh lebih cepat daripada gambar xilofon.

Gambar dimuat lebih cepat pada pemuatan halaman pertama karena ukurannya lebih kecil, dan pada pemuatan ulang halaman berikutnya, gambar dimuat dari cache browser, bukan memicu permintaan jaringan.

5. Mengonfigurasi ulang ekstensi

Masalahnya

Aplikasi Anda otomatis menyimpan versi draf listingan penjual. Pengguna Anda menyukai fitur ini, tetapi statistik Anda agak mengkhawatirkan. Laporan Anda mengatakan bahwa hanya sekitar 10% draf yang benar-benar diposting, dan 90% lainnya hanya menghabiskan ruang di database Anda.

Solusi

Setelah melakukan beberapa perhitungan kasar, Anda menyadari bahwa Anda hanya perlu menyimpan sekitar lima draf pada waktu tertentu.

Ingat katalog Firebase Extensions? Mungkin sudah ada solusi yang dibuat untuk situasi ini. Mari kita instal ekstensi Batasi Turunan Node untuk otomatis menjaga jumlah draf tersimpan menjadi lima atau kurang. Ekstensi akan menghapus draf terlama setiap kali draf baru ditambahkan.

1. Klik tombol Instal di halaman detail ekstensi.
2. Pilih project Firebase yang Anda gunakan untuk aplikasi web marketplace.
3. Ikuti petunjuk di layar hingga Anda mencapai langkah Konfigurasi ekstensi.
4. Untuk Jalur Realtime Database, masukkan drafts. Ini adalah jalur di database tempat draf disimpan.
5. Untuk Jumlah maksimum node yang akan disimpan, masukkan 5. Artinya, lima draf untuk setiap listingan item akan disimpan, dan jika draf lain ditambahkan, draf terlama akan otomatis dihapus.
6. Klik Instal ekstensi.

Saat Anda menunggu penginstalan selesai...

Memantau ekstensi

Saat Anda menginstal ekstensi, proses ini akan membuat beberapa fungsi. Anda mungkin ingin memeriksa seberapa sering fungsi ini berjalan atau melihat log dan tingkat error. Untuk mengetahui informasi mendetail tentang cara memantau ekstensi, lihat Mengelola ekstensi yang diinstal. Ikuti petunjuk dalam dokumentasi untuk melihat fungsi yang dibuat oleh ekstensi Ubah Ukuran Gambar di langkah sebelumnya.

Meng-uninstal ekstensi

Untuk menghapus ekstensi dari project, Anda mungkin tergoda untuk menghapus fungsi individual yang dibuat ekstensi, tetapi hal ini dapat menyebabkan perilaku yang tidak terduga, karena satu ekstensi dapat membuat beberapa fungsi. Pelajari cara meng-uninstal ekstensi dalam dokumentasi.

Jika di-uninstal, semua resource (seperti fungsi untuk ekstensi) dan akun layanan yang dibuat untuk instance ekstensi tersebut akan dihapus. Namun, semua artefak yang dibuat oleh ekstensi (seperti gambar yang diubah ukurannya) akan tetap berada di project Anda setelah meng-uninstal ekstensi.

Menginstal beberapa salinan ekstensi dalam satu project

Anda tidak terbatas pada penginstalan satu instance ekstensi tertentu dalam project. Jika ingin membatasi entri di jalur lain, Anda dapat menginstal instance lain dari ekstensi ini. Namun, untuk tujuan codelab ini, Anda hanya akan menginstal ekstensi satu kali.

Lihat penerapannya

1. Pastikan Anda login dengan akun yang Anda gunakan untuk memposting gambar gambang atau latte
2. Buat beberapa draf:
3. Klik tombol Jual sesuatu di pojok kanan bawah aplikasi
4. Edit Judul menjadi "Draf 1".
5. Scroll ke bawah ke bagian Draf dan lihat jumlah draf. Setidaknya harus ada dua.
6. Klik tombol FRIENDLY MARKET di panel aplikasi atas. Dengan begitu, Anda akan memiliki draf tersimpan, tetapi tidak perlu mempostingnya.
7. Ulangi untuk "Draf 2", "Draf 3", dan seterusnya hingga "Draf 6".
8. Saat Anda membuat "Draf 6", perhatikan bahwa "Draf 1" menghilang dari bagian Draf.
9. Seperti yang Anda lakukan dengan ekstensi Ubah Ukuran Gambar, Anda dapat memeriksa log fungsi untuk melihat fungsi yang dipicu.

Ups, batas draf yang akan disimpan terlalu kecil

Tim dukungan pelanggan Anda menghubungi Anda dan memberi tahu bahwa beberapa penjual yang paling produktif mengeluh bahwa draf mereka dihapus sebelum mereka dapat mempostingnya. Anda memeriksa perhitungan Anda dengan rekan tim, dan Anda menyadari bahwa perhitungan Anda salah sebesar 10.000 kali lipat.

Bagaimana cara mengatasi masalah ini? Mari kita konfigurasi ulang ekstensi yang diinstal.

1. Di panel kiri Firebase console, klik Extensions.
2. Pada kartu ekstensi yang diinstal, klik Kelola.
3. Di sudut kanan atas, klik Konfigurasi ulang ekstensi.
4. Ubah Jumlah maksimum node yang akan disimpan menjadi 50000.
5. Klik Save.

Dan hanya itu yang perlu Anda lakukan. Selama waktu yang diperlukan ekstensi untuk diupdate, Anda dapat berbicara dengan tim dukungan dan memberi tahu mereka bahwa perbaikan sudah di-deploy.

6. Menghapus data pengguna secara otomatis

Masalahnya

Tim dukungan pelanggan kami telah menghubungi Anda lagi. Penjual yang menghapus akunnya masih menerima email dari pengguna lain, dan mereka marah. Penjual ini berharap alamat email mereka akan dihapus dari sistem Anda saat mereka menghapus akun mereka.

Untuk saat ini, dukungan telah menghapus data setiap pengguna secara manual, tetapi harus ada cara yang lebih baik. Anda memikirkannya, dan mempertimbangkan untuk menulis tugas batch Anda sendiri yang berjalan secara berkala dan menghapus alamat email dari akun yang dihapus. Namun, menghapus data pengguna tampaknya merupakan masalah yang cukup umum. Mungkin Ekstensi Firebase juga dapat membantu memecahkan masalah ini.

Solusi

Anda akan mengonfigurasi ekstensi Hapus Data Pengguna untuk menghapus node users/uid secara otomatis di database saat pengguna menghapus akunnya.

1. Klik tombol Instal di halaman detail ekstensi.
2. Pilih project Firebase yang Anda gunakan untuk aplikasi web marketplace.
3. Ikuti petunjuk di layar hingga Anda mencapai langkah Konfigurasi ekstensi.
4. Untuk jalur Realtime Database, masukkan sellers/{UID}. Bagian sellers adalah node yang turunannya berisi alamat email pengguna, dan {UID} adalah karakter pengganti. Dengan konfigurasi ini, ekstensi akan mengetahui bahwa saat pengguna dengan UID 1234 menghapus akunnya, ekstensi harus menghapus sellers/1234 dari database.
5. Klik Instal ekstensi.

Saat Anda menunggu penginstalan selesai...

Mari kita bahas kemampuan penyesuaian

Dalam codelab ini, Anda telah melihat bahwa Firebase Extensions dapat membantu menyelesaikan kasus penggunaan umum dan ekstensi dapat dikonfigurasi agar sesuai dengan kebutuhan aplikasi Anda.

Namun, ekstensi tidak dapat menyelesaikan setiap masalah, dan masalah penghapusan data pengguna adalah contoh yang baik untuk hal tersebut. Meskipun ekstensi Hapus Data Pengguna mengatasi keluhan saat ini bahwa email masih terekspos setelah pengguna menghapus akunnya, ekstensi ini tidak akan menghapus semuanya. Misalnya, listingan item masih tersedia, dan semua gambar di Cloud Storage juga akan tetap ada. Ekstensi Hapus Data Pengguna memungkinkan kita mengonfigurasi jalur Cloud Storage yang akan dihapus, tetapi karena pengguna dapat mengupload banyak file berbeda dengan banyak nama berbeda, Anda tidak akan dapat mengonfigurasi ekstensi ini untuk menghapus artefak ini secara otomatis. Untuk situasi seperti ini, Cloud Functions for Firebase mungkin lebih cocok sehingga Anda dapat menulis kode yang khusus untuk model data aplikasi Anda.

Ekstensi dan penagihan

Firebase Extensions sendiri tidak dikenai biaya untuk digunakan (Anda hanya ditagih untuk resource pokok yang Anda gunakan), tetapi beberapa resource pokok yang diperlukan oleh ekstensi mungkin memerlukan penagihan. Codelab ini dirancang untuk diselesaikan tanpa akun penagihan. Namun, penyiapan paket Flame atau Blaze akan membuka banyak ekstensi Firebase yang sangat menarik.

Misalnya, Anda dapat memperpendek URL, memicu email, mengekspor koleksi ke BigQuery, dan banyak lagi. Lihat katalog lengkap ekstensi di sini.

Jika ada ekstensi yang Anda inginkan, tetapi belum tersedia saat ini, beri tahu kami. Ajukan permintaan fitur dengan Dukungan Firebase untuk menyarankan ekstensi baru.

Lihat penerapannya

Setelah penginstalan ekstensi Anda selesai, hapus pengguna dan lihat apa yang terjadi:

1. Di Firebase console, buka dasbor Realtime Database.
2. Luaskan node sellers.
3. Informasi setiap penjual dikaitkan dengan UID pengguna mereka. Pilih UID pengguna.
4. Di Firebase console, buka dasbor Authentication, lalu temukan UID pengguna tersebut.
5. Perluas menu di sebelah kanan UID, lalu pilih Hapus Akun.

6. Kembali ke dasbor Realtime Database. Informasi penjual akan hilang.

7. Selamat!

Meskipun tidak menulis banyak kode dalam codelab ini, Anda telah menambahkan fitur penting ke aplikasi marketplace.

Anda telah mempelajari cara menemukan, mengonfigurasi, menginstal, dan mengonfigurasi ulang ekstensi. Selain itu, Anda telah mempelajari cara memantau ekstensi yang diinstal dan cara meng-uninstalnya jika perlu.

Apa selanjutnya?

Lihat beberapa ekstensi lainnya berikut:

• Menerjemahkan string teks di Cloud Firestore (akun penagihan diperlukan)
• Menambahkan pengguna baru ke milis Mailchimp (akun penagihan diperlukan)
• Mempersingkat URL (akun penagihan diperlukan)

Perlu kode sisi server kustom lainnya?

• Lihat codelab Cloud Functions for Firebase

Dokumen bermanfaat lainnya

Mengelola ekstensi:

• Coba kelola ekstensi dengan Firebase CLI
• Menetapkan pemberitahuan anggaran
• Memeriksa seberapa sering ekstensi yang diinstal berjalan
• Mengupdate ekstensi yang diinstal ke versi baru
• Meng-uninstal ekstensi

Mempelajari detail penting tentang ekstensi:

• Lihat kode sumber dan dokumentasi untuk setiap ekstensi di GitHub
• Mempelajari izin dan akses yang diberikan ke ekstensi