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 bagaimana ekstensi dapat membantu Anda menghemat 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:

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

Yang akan Anda pelajari

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

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

Yang Anda butuhkan

• Komputer dengan browser web modern yang sudah terinstal (disarankan Chrome)
• Akun Google

2. Membuat dan menyiapkan project Firebase

Membuat project Firebase

1. Di Firebase console, klik Add project, dan beri nama project Firebase dengan FriendlyMarket.
2. Klik opsi pembuatan proyek. Setujui persyaratan Firebase. Lewati penyiapan Google Analytics, karena Anda tidak akan menggunakan Analytics di aplikasi ini.
3. Tunggu hingga project disediakan, lalu klik Continue.

Aplikasi yang akan Anda bangun 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.

Aktifkan login email

Meskipun autentikasi bukan fokus dari codelab ini, penting untuk memiliki beberapa bentuk autentikasi di aplikasi Anda, agar dapat mengidentifikasi secara unik semua 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 dalam daftar Sign-in providers, setel tombol Enable ke posisi aktif, lalu klik Save.

Mengaktifkan Realtime Database

Aplikasi ini menggunakan Firebase Realtime Database untuk menyimpan item yang akan dijual.

1. Di bagian Develop pada panel kiri Firebase console, klik Database.
2. Scroll ke bawah halaman melewati panel Cloud Firestore, lalu klik Create database di panel Realtime Database.

3. Pilih Mulai dalam mode terkunci, lalu klik Aktifkan.

Tetapkan aturan keamanan

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 aturan ini hanya mengizinkan pengguna yang login untuk melakukan pembacaan dan penulisan lainnya. Jangan khawatir tentang spesifikasi aturan ini; Anda hanya akan menyalin dan menempelkannya untuk mengaktifkan dan menjalankan aplikasi Anda.

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

2. Salin dan tempel kumpulan aturan berikut ke 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.

Mengaktifkan Cloud Storage

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

1. Di bagian Develop pada panel kiri Firebase console, klik Storage.
2. Klik Get started.

3. Setujui default untuk membuat bucket penyimpanan default (klik Next, pertahankan lokasi default, dan klik Done).

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

1. Di bagian atas dasbor Storage, klik tab Rules.

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

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

3. Klik Publikasikan.

3. Menjalankan aplikasi contoh

Fork project StackBlitz

Dalam codelab ini, Anda akan membangun dan men-deploy aplikasi menggunakan StackBlitz, editor online yang memiliki beberapa alur kerja Firebase yang terintegrasi di dalamnya. Stackblitz tidak memerlukan penginstalan perangkat lunak atau akun StackBlitz khusus.

Dengan StackBlitz, Anda dapat berbagi project dengan orang lain. Orang lain yang memiliki URL project StackBlitz Anda dapat melihat kode dan melakukan fork project, tetapi mereka tidak dapat mengedit project StackBlitz Anda.

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

Anda sekarang memiliki salinan kode awal sebagai project StackBlitz Anda sendiri. Karena Anda tidak login, "akun" Anda disebut @anonymous, tetapi tidak masalah. Project ini memiliki nama yang unik, serta 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. Di sinilah Anda akan menambahkan objek konfigurasi Firebase.
2. Kembali ke Firebase console, buka halaman ringkasan project dengan mengklik Ringkasan Project di kiri atas.
3. Di bagian tengah halaman ringkasan project, klik ikon web untuk membuat Aplikasi Web Firebase baru.
4. Daftarkan aplikasi dengan nama panggilan Codelab FriendlyMarket.
5. Untuk codelab ini, jangan mencentang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini. Anda akan menggunakan panel pratinjau StackBlitz.
6. Klik Register app.
7. Salin objek konfigurasi Firebase aplikasi Anda ke papan klip. Jangan salin tag <script>. Catatan: Jika Anda perlu menemukan konfigurasi tersebut nanti, ikuti petunjuk di sini.

8. Klik Lanjutkan ke konsol.

Tambahkan konfigurasi project Anda ke aplikasi:

1. Kembali ke StackBlitz, buka file src/firebase-config.js.
2. Tempel cuplikan konfigurasi Anda di file. Setelah melakukannya, kode akan terlihat 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 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, dia 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 Permintaan Harga, masukkan 50.
5. Untuk Deskripsi Item, masukkan: 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 mengisi semua kolom dan mengupload gambar, klik Posting.
8. Cari 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 sekarang akan melihat entri untuk item yang Anda posting di node forsale. Di dasbor Penyimpanan, Anda juga akan menemukan gambar yang diupload di jalur friendlymarket.

4. Mencari dan menginstal ekstensi

Permasalahan

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

Kami ingin tahu, Anda menguji situs dengan kecepatan koneksi seluler. (Pelajari cara melakukannya di sini.) Anda mendapati bahwa gambar membutuhkan waktu yang sangat lama untuk dimuat dan sama sekali tidak di-cache di browser. Waktu muat yang lama tersebut terjadi pada setiap kunjungan halaman!

Solusi

Setelah membaca tentang 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 dari yang diperlukan untuk kebutuhan aplikasi ini. Mengurangi ukuran file akan mempercepat waktu pemuatan tanpa penurunan resolusi yang signifikan dalam aplikasi.
• Pembuatan cache. 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 {i>header<i} ini untuk mengizinkan penyimpanan dalam cache. Cloud Storage SDK sisi klien dan Firebase Admin SDK dapat Anda gunakan untuk menetapkan header ini.

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

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

Sepertinya sisi server adalah pilihan yang tepat. Namun, ide ini masih melibatkan cloning contoh, mengikuti petunjuk penyiapan, dan kemudian men-deploy fungsi dengan Firebase CLI. Mengubah ukuran gambar terdengar seperti kasus penggunaan umum. Ada solusi yang lebih mudah?

Solusi yang lebih mudah

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

Lihat itu! Ada ekstensi yang disebut "Ubah Ukuran Gambar". Kelihatannya menjanjikan.

Mari kita gunakan ekstensi ini di aplikasi Anda.

Menginstal ekstensi

1. Klik Lihat detail untuk melihat informasi selengkapnya tentang ekstensi ini. Pada bagian Yang dapat Anda konfigurasi, ekstensi ini memungkinkan Anda menetapkan dimensi yang ingin diubah ukurannya, dan Anda bahkan dapat menyetel header cache. Sempurna!
2. Klik tombol Instal di konsol 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. Petunjuknya akan menampilkan ringkasan dasar ekstensi, serta resource apa pun yang akan dibuat dan mengakses peran yang diperlukan.
5. Pada kolom **Cache-Control**header untuk gambar yang diubah ukurannya, masukkan:

public, max-age=31536000

6. Biarkan parameter lain tetap pada nilai defaultnya.
7. Klik Instal ekstensi.

Selagi menunggu penginstalan selesai...

Menginstal dengan antarmuka command line Firebase

Jika Anda lebih terbiasa menggunakan 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 header Cache-Control lebih lanjut

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

Memperbarui kode klien

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

Mari kita update aplikasi agar dapat 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 guna membuat ref untuk 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 ada tidak akan diubah ukurannya.

Buat postingan baru untuk melihat cara kerja ekstensi:

1. Klik Friendly Market di panel atas aplikasi untuk membuka layar utama.
2. Klik tombol Jual sesuatu di pojok kanan bawah aplikasi untuk membuat listingan.
3. Untuk Judul, masukkan Coffee
4. Untuk Permintaan Harga, masukkan 1
5. Untuk Item Description, masukkan nilai 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 mengisi semua kolom dan mengupload gambar, klik Posting. Anda akan melihat daftar kopi muncul di bawah Xilofon!
8. Di dasbor Functions di Firebase console, klik tab Logs. Anda akan melihat log dari fungsi yang menunjukkan bahwa fungsi tersebut dijalankan.

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 saat pemuatan halaman pertama karena lebih kecil, dan pada halaman berikutnya dimuat ulang dari cache browser, bukan memicu permintaan jaringan.

5. Mengonfigurasi ulang ekstensi

Permasalahan

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

Solusi

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

Ingat katalog Firebase Extensions itu? Mungkin sudah ada solusi untuk situasi ini. Mari kita instal ekstensi Limit Turunan Nodes untuk secara otomatis mempertahankan jumlah draf tersimpan lima atau kurang secara otomatis. Ekstensi akan menghapus draf yang paling lama setiap kali draf baru ditambahkan.

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

Selagi menunggu penginstalan selesai...

Ekstensi pemantauan

Saat Anda menginstal ekstensi, proses akan membuat beberapa fungsi. Sebaiknya periksa seberapa sering fungsi ini berjalan atau lihat log dan tingkat error. Untuk informasi selengkapnya 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 setiap fungsi yang dibuat ekstensi, tetapi ini dapat menyebabkan perilaku yang tidak diharapkan, karena satu ekstensi dapat membuat beberapa fungsi. Pelajari cara meng-uninstal ekstensi di dokumentasi.

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

Menginstal beberapa salinan ekstensi dalam satu project

Anda tidak dibatasi untuk hanya menginstal satu instance ekstensi tertentu dalam sebuah 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 sekali.

Lihat cara kerjanya

1. Pastikan Anda login dengan akun yang digunakan untuk memposting xilofon 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 PASAR YANG TEMAN di panel aplikasi atas. Dengan cara ini, Anda akan memiliki draf yang tersimpan, tetapi tidak perlu mempostingnya.
7. Ulangi untuk "Draf 2", "Draf 3", dan seterusnya ke "Draf 6".
8. Saat membuat "Draf 6", perhatikan bahwa "Draf 1 akan hilang dari bagian Draf Anda.
9. Seperti yang Anda lakukan dengan ekstensi Ubah Ukuran Gambar, Anda dapat memeriksa log fungsi untuk melihat fungsi apa yang dipicu.

Maaf, batas draf yang dapat disimpan terlalu kecil

Tim dukungan pelanggan Anda menghubungi dan memberi tahu bahwa beberapa penjual Anda yang paling produktif mengeluhkan bahwa draf mereka dihapus sebelum mereka dapat mempostingnya. Anda memeriksa perhitungan matematika Anda dengan rekan satu tim Anda, dan Anda menyadari bahwa perhitungan Anda berkurang dengan faktor 10.000!

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

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 node maksimum yang akan dipertahankan menjadi 50000.
5. Klik Save.

Hanya itu yang perlu Anda lakukan. Saat ekstensi memerlukan waktu update, Anda dapat menghubungi tim dukungan dan memberi tahu mereka bahwa perbaikan sedang di-deploy.

6. Hapus data pengguna secara otomatis

Permasalahan

Tim dukungan pelanggan telah menghubungi Anda lagi. Penjual yang menghapus akunnya masih menerima email dari pengguna lain, dan dengan 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 pasti ada cara yang lebih baik! Anda memikirkannya, dan Anda mempertimbangkan untuk menulis tugas batch Anda sendiri yang berjalan secara berkala dan membersihkan alamat email dari akun yang dihapus. Tetapi menghapus data pengguna sepertinya adalah masalah yang cukup umum. Mungkin Firebase Extensions juga dapat membantu mengatasi 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 digunakan untuk aplikasi web marketplace Anda.
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.

Selagi menunggu penginstalan selesai...

Mari kita bahas kemampuan penyesuaian

Dalam codelab ini, Anda telah melihat bahwa Firebase Extensions dapat membantu menyelesaikan kasus penggunaan umum dan bahwa 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 dari masalah tersebut. Meskipun ekstensi Hapus Data Pengguna mengatasi keluhan saat ini bahwa email masih ditampilkan setelah pengguna menghapus akunnya, ekstensi ini tidak akan menghapus semuanya. Misalnya, listingan item masih tersedia, dan gambar apa pun di Cloud Storage juga akan tetap ada. Ekstensi Hapus Data Pengguna memungkinkan kami mengonfigurasi jalur Cloud Storage yang akan dihapus, tetapi karena pengguna dapat mengupload banyak file yang berbeda dengan banyak nama yang 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 spesifik untuk model data aplikasi Anda.

Ekstensi dan penagihan

Ekstensi Firebase itu sendiri tidak dikenai biaya (Anda hanya dikenai biaya 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, menyiapkan paket Flame atau Blaze akan membuka banyak ekstensi Firebase yang sangat menarik.

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

Jika ada ekstensi yang ingin Anda miliki, tetapi saat ini tidak tersedia, beri tahu kami. Ajukan permintaan fitur ke Dukungan Firebase untuk menyarankan ekstensi baru.

Lihat cara kerjanya

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

1. Di Firebase console, buka dasbor Realtime Database.
2. Luaskan node sellers.
3. Informasi setiap penjual disertakan pada UID pengguna mereka. Pilih UID pengguna.
4. Di Firebase console, buka dasbor Authentication, dan temukan UID pengguna tersebut.
5. Luaskan menu di sebelah kanan UID, lalu pilih Delete Account.

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

7. Selamat!

Meskipun Anda 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 terinstal dan cara meng-uninstal-nya, jika perlu.

Apa selanjutnya?

Lihat beberapa ekstensi lain berikut:

• Menerjemahkan string teks di Cloud Firestore (diperlukan akun penagihan)
• Tambahkan pengguna baru ke daftar email Mailchimp (perlu akun penagihan)
• Persingkat URL (diperlukan akun penagihan)

Perlu lebih banyak kode sisi server khusus?

• Pelajari codelab Cloud Functions for Firebase

Dokumen bermanfaat lainnya

Mengelola ekstensi:

• Mencoba mengelola 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 lebih lanjut tentang ekstensi:

• Lihat kode sumber dan dokumen untuk setiap ekstensi di GitHub
• Pelajari izin dan akses yang diberikan ke ekstensi