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 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:

• Memuat gambar lebih cepat untuk meningkatkan retensi pengguna
• Membatasi entri di database untuk meningkatkan performa dan menurunkan tagihan
• Mengimplementasikan 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 mengelola (memantau, mengupdate, dan meng-uninstal) ekstensi di project Anda

Codelab ini berfokus pada Firebase Extensions. Untuk 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. Di Firebase console, klik Tambahkan project, lalu beri nama project Firebase dengan FriendlyMarket.
2. Klik opsi pembuatan project. 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 build 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 pemakaian (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 dengan email

Meskipun autentikasi bukanlah fokus dalam codelab ini, memiliki bentuk autentikasi di aplikasi merupakan hal yang penting, untuk mengidentifikasi setiap orang yang menggunakannya secara unik. 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.
   Di langkah berikutnya dalam 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 adalah 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 operasi baca dan tulis lainnya. Jangan khawatir dengan detail aturan ini; Anda hanya perlu menyalin dan menempelkannya untuk mengaktifkan dan menjalankan aplikasi.

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

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

   {
     "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 adalah cara menyiapkan Cloud Storage for Firebase di project Firebase Anda:

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Storage.
2. Klik Mulai.
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.
   Di langkah berikutnya dalam 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

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 saja untuk melihat gambar item yang tercantum.

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

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

   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

Membuat fork project StackBlitz

Dalam codelab ini, Anda akan mem-build dan men-deploy aplikasi menggunakan StackBlitz, editor online yang memiliki beberapa alur kerja Firebase yang terintegrasi. 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 melakukan 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 unik, beserta URL unik. Semua file dan perubahan Anda disimpan di 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, 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. Sebagai gantinya, Anda akan menggunakan panel pratinjau StackBlitz.
6. Klik Daftarkan aplikasi.
7. Salin objek konfigurasi Firebase aplikasi Anda ke papan klip. Jangan menyalin tag <script>. Catatan: Jika Anda perlu menemukan konfigurasi nanti, ikuti petunjuk di sini.

8. Klik Lanjutkan ke konsol.

Tambahkan konfigurasi project ke aplikasi Anda:

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

Apa titik awal untuk aplikasi ini?

Lihat pratinjau interaktif di sisi kanan layar StackBlitz:

Codelab ini 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 login, pengguna 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 Permintaan, masukkan 50.
5. Untuk Item Description, masukkan hal berikut: This high quality xylophone can be used to play music.
6. Download gambar xilofon ini ke komputer Anda, lalu upload dengan tombol GAMBAR BARANG 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 kini akan melihat entri untuk item yang Anda posting di bagian node forsale. Di dasbor Penyimpanan, Anda juga akan menemukan gambar yang diupload di jalur friendlymarket.

4. Menemukan dan menginstal ekstensi

Masalah

Setelah melakukan beberapa riset pengguna untuk aplikasi Anda, Anda mendapati bahwa sebagian besar pengguna mengunjungi situs Anda dari smartphone, bukan desktop. Namun, statistik Anda juga menunjukkan bahwa pengguna seluler cenderung meninggalkan situs Anda ("churn") hanya dalam 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 kunjungan halaman.

Solusi

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

• Mengompresi 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 signifikan di aplikasi.
• Menyimpan ke 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 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 bahwa penjual Anda perlu mencari tahu cara mengubah ukuran gambar mereka sendiri, yang merupakan hambatan yang merepotkan 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 ukuran gambar apa pun yang mereka sukai (tanpa 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 masih melibatkan cloning contoh, mengikuti petunjuk penyiapannya, lalu men-deploy fungsi dengan Firebase CLI. Mengubah ukuran gambar terdengar seperti 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 lihat katalog ekstensi yang tersedia di situs Firebase.

Lihat itu! Ada ekstensi bernama "Ubah Ukuran Gambar". Tampaknya menjanjikan.

Mari kita 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 header for resized images **Cache-Control**, masukkan kode berikut:

public, max-age=31536000

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

Saat Anda menunggu penginstalan selesai...

Menginstal dengan antarmuka command line Firebase

Jika Anda lebih nyaman 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 di-cache hingga 1 tahun. Untuk mempelajari header Cache-Control lebih lanjut, lihat dokumentasi ini.

Memperbarui kode klien

Ekstensi yang Anda instal akan 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 update aplikasi agar mengambil gambar yang diubah ukurannya, bukan gambar ukuran penuh.

1. Di StackBlitz, buka file src/firebase-refs.js.
2. Ganti fungsi getImageRef yang ada dengan kode berikut untuk membuat referensi 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 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 Permintaan, masukkan 1
5. Untuk Deskripsi Item, masukkan hal berikut: Selling one cafe latte. It has foam art in the shape of a bear.
6. Download gambar secangkir kopi ini ke komputer, lalu upload dengan tombol GAMBAR BARANG 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 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 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

Masalah

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

Solusi

Setelah melakukan beberapa perhitungan sederhana, 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 Node Turunan untuk secara otomatis mempertahankan jumlah draf tersimpan sebanyak lima atau kurang. Ekstensi ini 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 Maximum count of nodes to keep, 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.

Sembari menunggu penginstalan selesai...

Memantau ekstensi

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

Meng-uninstal ekstensi

Untuk menghapus ekstensi dari project, Anda mungkin tergoda untuk menghapus setiap fungsi yang dibuat oleh 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, artefak apa pun yang dibuat oleh ekstensi (seperti gambar yang diubah ukurannya) akan tetap ada di project Anda setelah meng-uninstal ekstensi.

Menginstal beberapa salinan ekstensi dalam satu project

Anda tidak terbatas untuk menginstal 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 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 FRIENDLY MARKET di panel aplikasi atas. Dengan demikian, 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 menghubungi Anda dan memberi tahu bahwa beberapa penjual Anda yang paling produktif mengeluh bahwa draf mereka dihapus sebelum mereka dapat mempostingnya. Anda memeriksa perhitungan Anda dengan rekan tim, dan 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 Maximum count of nodes to keep menjadi 50000.
5. Klik Save.

Dan itu saja yang perlu Anda lakukan. Selama waktu yang diperlukan ekstensi untuk diupdate, Anda dapat menghubungi tim dukungan dan memberi tahu mereka bahwa perbaikan telah di-deploy.

6. Menghapus data pengguna secara otomatis

Masalah

Tim dukungan pelanggan Anda 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, tim dukungan telah menghapus data setiap pengguna secara manual, tetapi pasti 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 Firebase Extensions juga dapat membantu menyelesaikan masalah ini.

Solusi

Anda akan mengonfigurasi ekstensi Hapus Data Pengguna untuk otomatis menghapus node users/uid 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.

Sembari 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 semua masalah, dan masalah penghapusan data pengguna adalah contoh yang bagus. 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 gambar apa pun 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 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 khusus untuk model data aplikasi Anda.

Ekstensi dan penagihan

Firebase Extensions sendiri dapat digunakan tanpa biaya (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, 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 dan lihat apa yang terjadi:

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

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

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 daftar email 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:

• 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 yang lebih mendetail tentang ekstensi:

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