Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Kenali Firebase untuk web

Dalam codelab ini, Anda akan mempelajari beberapa dasar Firebase untuk membuat aplikasi web interaktif. Anda akan membangun dan menerapkan RSVP peristiwa dan aplikasi chat buku tamu menggunakan beberapa produk Firebase.

59abdefbcc23bbbe.png

Apa yang akan Anda pelajari

  • Mengautentikasi pengguna dengan Firebase Authentication dan FirebaseUI.
  • Sinkronkan data menggunakan Cloud Firestore.
  • Tulis Aturan Keamanan Firebase untuk mengamankan database.
  • Terapkan aplikasi web di Firebase Hosting.

Yang Anda butuhkan

  • Browser pilihan Anda, seperti Chrome.
  • Akses ke stackblitz.com (tidak perlu akun atau masuk).
  • Akun Google, seperti akun gmail. Kami merekomendasikan akun email yang sudah Anda gunakan untuk akun GitHub Anda. Ini memungkinkan Anda untuk menggunakan fitur-fitur lanjutan di StackBlitz.
  • Kode contoh codelab. Lihat langkah selanjutnya untuk mengetahui cara mendapatkan kode.

Dalam codelab ini, Anda membuat dan menerapkan aplikasi menggunakan StackBlitz , editor online yang memiliki beberapa alur kerja Firebase yang terintegrasi di dalamnya. Stackblitz tidak memerlukan instalasi perangkat lunak atau akun StackBlitz khusus.

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

  1. Buka URL ini untuk kode awal: ** https: //stackblitz.com/edit/firebase-gtk-web-** start
  2. Di bagian atas halaman StackBlitz, klik Fork : f5135360aef481cc.png

Anda sekarang memiliki salinan kode awal sebagai proyek StackBlitz Anda sendiri. Karena Anda tidak masuk, akun Anda disebut @anonymous , tetapi proyek tersebut memiliki nama unik, bersama dengan URL unik. Semua file dan perubahan Anda disimpan dalam proyek StackBlitz ini.

Materi awal untuk codelab ini menyediakan beberapa struktur untuk aplikasi web, termasuk beberapa lembar gaya dan beberapa wadah HTML untuk aplikasi. Nanti di codelab ini, Anda akan menghubungkan kontainer ini ke Firebase.

Untuk memulai, mari kita sedikit lebih mengenal antarmuka StackBlitz.

  1. Di StackBlitz, buka file index.html .
  2. Temukan event-details-container dan description-container , dan coba edit beberapa detail acara.

Saat Anda mengedit teks, halaman otomatis yang dimuat ulang di StackBlitz menampilkan detail acara baru. Keren, ya?

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>



<!-- ... -->

Pratinjau aplikasi Anda akan terlihat seperti ini:

Pratinjau aplikasi

908cc57ce3a5b5fe.png

Menampilkan informasi acara sangat bagus untuk tamu Anda, tetapi hanya menampilkan acara tidak terlalu berguna bagi siapa pun. Mari tambahkan beberapa fungsi dinamis ke aplikasi ini. Untuk ini, Anda harus menghubungkan Firebase ke aplikasi Anda. Untuk memulai dengan Firebase, Anda perlu membuat dan menyiapkan proyek Firebase.

Buat proyek Firebase

  1. Masuk ke Firebase .
  2. Di Firebase console, klik Tambahkan Proyek (atau Buat proyek ), dan beri nama proyek Firebase Anda Firebase-Web-Codelab .

a67c239f8cc7f4b5.png

  1. Klik melalui opsi pembuatan proyek. Terima persyaratan Firebase jika diminta. Lewati penyiapan Google Analytics, karena Anda tidak akan menggunakan Analytics untuk aplikasi ini.

Untuk mempelajari lebih lanjut tentang proyek Firebase, lihat Memahami proyek Firebase .

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

  • Firebase Authentication dan Firebase UI untuk memudahkan pengguna login ke aplikasi Anda.
  • Cloud Firestore untuk menyimpan data terstruktur di cloud dan mendapatkan notifikasi instan saat data berubah.
  • Aturan Keamanan Firebase untuk mengamankan database Anda.
  • Firebase Hosting untuk menghosting dan melayani aset Anda.

Beberapa dari produk ini memerlukan konfigurasi khusus atau perlu diaktifkan menggunakan konsol Firebase.

Aktifkan login email untuk Firebase Authentication

Untuk mengizinkan pengguna masuk ke aplikasi web, Anda akan menggunakan metode masuk Email / Sandi untuk codelab ini:

  1. Di Firebase console, klik Kembangkan di panel kiri.
  2. Klik Otentikasi , lalu klik tab Metode masuk (atau klik di sini untuk langsung membuka tab Metode masuk ).
  3. Klik Email / Kata Sandi dalam daftar Penyedia masuk, setel sakelar Aktifkan ke posisi aktif, lalu klik Simpan . 4c88427cfd869bee.png

Aktifkan Cloud Firestore

Aplikasi web menggunakan Cloud Firestore untuk menyimpan pesan obrolan dan menerima pesan obrolan baru.

Aktifkan Cloud Firestore:

  1. Di bagian Develop Firebase console, klik Database .
  2. Di bawah Cloud Firestore , klik Buat database . 3ce19fd6467e51c5.png
  1. Pilih opsi Mulai dalam mode pengujian . Baca penafian tentang aturan keamanan. Mode uji memastikan bahwa Anda dapat dengan bebas menulis ke database selama pengembangan. Klik Next . 56369cebb9300eb.png
  1. Pilih lokasi untuk database Anda (Anda bisa menggunakan default). Perhatikan bahwa lokasi ini tidak dapat diubah nanti. 32f815f4648c3174.png
  2. Klik Selesai .

Sekarang setelah proyek Firebase Anda dibuat dan beberapa layanan diaktifkan, Anda perlu memberi tahu kode yang ingin Anda gunakan Firebase, serta proyek Firebase mana yang akan digunakan.

Tambahkan pustaka Firebase

Agar aplikasi Anda dapat menggunakan Firebase, Anda perlu menambahkan pustaka Firebase ke aplikasi. Ada beberapa cara untuk melakukannya, seperti yang dijelaskan dalam dokumentasi Firebase . Misalnya, Anda dapat menambahkan pustaka dari CDN Google, atau Anda dapat menginstalnya secara lokal menggunakan npm lalu mengemasnya di aplikasi Anda jika Anda menggunakan Browserify.

StackBlitz menyediakan bundling otomatis, sehingga Anda dapat menambahkan pustaka Firebase menggunakan pernyataan import.

Untuk membangun aplikasi ini, Anda menggunakan pustaka Firebase Authentication, FirebaseUI, dan Cloud Firestore. Untuk codelab ini, baris berikut sudah disertakan di bagian atas file index.js :

// Import stylesheets
import "./style.css";

// Firebase App (the core Firebase SDK) is always required
// and must be listed first
import * as firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

import * as firebaseui from "firebaseui";

Tambahkan aplikasi web Firebase ke proyek

  1. Kembali ke Firebase console, buka halaman ringkasan project Anda dengan mengklik Project Overview di kiri atas.
  2. Di tengah halaman ikhtisar proyek Anda, klik ikon web b286f3d215e1f578.png untuk membuat aplikasi web Firebase baru. c167e9526fad2825.png
  3. Daftarkan aplikasi dengan Aplikasi Web nama panggilan.
  4. Untuk codelab ini, jangan centang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini . Anda akan menggunakan panel pratinjau StackBlitz untuk saat ini.
  5. Klik Daftarkan aplikasi . c85ac8aa351e2560.png
  6. Salinobjek konfigurasi Firebase ke clipboard. ed1e598c6132f734.png
  7. Klik Lanjutkan ke konsol .

Tambahkan objek konfigurasi Firebase ke aplikasi Anda:

  1. Kembali ke StackBlitz, buka file index.js .
  2. Temukan objek Add Firebase project configuration object here baris komentar, dan tempel cuplikan konfigurasi Anda tepat di bawah komentar.
  3. Tambahkan panggilan fungsi initializeApp untuk menyiapkan Firebase menggunakan konfigurasi proyek Firebase unik Anda.
// ...

// Add Firebase project configuration object here
var firebaseConfig = {
  apiKey: "random-unique-string",
  authDomain: "your-projectId.firebaseapp.com",
  databaseURL: "https://your-projectId.firebaseio.com",
  projectId: "your-projectId",
  storageBucket: "your-projectId.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Sekarang setelah Anda menambahkan Firebase ke aplikasi, Anda dapat menyiapkan tombol RSVP yang mendaftarkan orang menggunakan Firebase Authentication .

Otentikasi pengguna Anda dengan Masuk dengan Email dan FirebaseUI

Anda memerlukan tombol RSVP yang meminta pengguna untuk masuk dengan alamat email mereka. Anda dapat melakukan ini dengan menghubungkan FirebaseUI ke tombol RSVP. FirebaseUI adalah pustaka yang memberi Anda UI yang sudah dibuat sebelumnya di atas Firebase Auth.

FirebaseUI membutuhkan konfigurasi (lihat opsi dalam dokumentasi ) yang melakukan dua hal:

  1. Memberi tahu FirebaseUI bahwa Anda ingin menggunakan metode masuk Email / Kata Sandi .
  2. Menangani callback untuk login yang berhasil dan menampilkan false untuk menghindari pengalihan. Anda tidak ingin halaman disegarkan, karena Anda sedang membuat aplikasi web satu halaman.

Pertama, tambahkan kode untuk menginisialisasi FirebaseUI:

  1. Di StackBlitz, buka file index.js . Perhatikan bahwa konfigurasi FirebaseUI sudah disediakan.
  2. Di bagian bawah index.js, tambahkan pernyataan inisialisasi FirebaseUI, seperti ini:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

Selanjutnya, tambahkan tombol RSVP ke HTML:

  1. Di StackBlitz, buka file index.html .
  2. Tambahkan HTML untuk tombol RSVP di dalam event-details-container seperti yang ditunjukkan pada contoh di bawah ini.

Berhati-hatilah untuk menggunakan nilai id sama seperti yang ditunjukkan di bawah ini karena, untuk codelab ini, sudah ada pengait untuk ID spesifik ini di file index.js .

Perhatikan bahwa di file index.html , ada container dengan ID firebaseui-auth-container . Ini adalah ID yang akan Anda berikan ke FirebaseUI untuk menahan login Anda.

<!-- ... -->

<section id="event-details-container">
    <!-- ... -->
    <!-- ADD THE RSVP BUTTON HERE -->
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<!-- ... -->

Pratinjau aplikasi

ab9ad7d61bb7b28c.png

  1. Siapkan listener pada tombol RSVP dan panggil fungsi start FirebaseUI. Ini memberi tahu FirebaseUI bahwa Anda ingin melihat jendela masuk. Tambahkan kode berikut ke bagian bawah index.js :
// ... 
// At the bottom

// Listen to RSVP button clicks
startRsvpButton.addEventListener("click",
 () => {
      ui.start("#firebaseui-auth-container", uiConfig);
});

Uji masuk ke aplikasi

  1. Di jendela pratinjau StackBlitz, klik tombol RSVP untuk masuk ke aplikasi.
  • Untuk codelab ini, Anda dapat menggunakan alamat email apa pun, bahkan alamat email palsu, karena Anda tidak menyiapkan langkah verifikasi email untuk codelab ini.
  • Jika Anda melihat pesan kesalahan yang menyatakan auth/operation-not-allowed atau The given sign-in provider is disabled for this Firebase project , periksa untuk memastikan bahwa Anda mengaktifkan Email / Password sebagai penyedia login di Firebase console.
  1. Buka dasbor Authentication di konsol Firebase. Di tab Pengguna , Anda akan melihat informasi akun yang Anda masukkan untuk masuk ke aplikasi.

Pratinjau aplikasi

3024f90b52ad55fe.png

682fc0eca86a99fc.png

Tambahkan status otentikasi ke UI

Sekarang pastikan bahwa UI mencerminkan fakta bahwa Anda sudah masuk.

Anda akan menggunakan callback pemroses status Firebase Authentication, yang akan diberi tahu setiap kali status login pengguna berubah. Jika saat ini ada pengguna, Anda akan mengalihkan tombol RSVP ke tombol logout.

  1. Di StackBlitz, buka file index.js .
  2. Tambahkan kode berikut di bagian bawah:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. Di pemroses tombol, periksa apakah ada pengguna saat ini dan keluarkan mereka. Untuk melakukannya, ganti startRsvpButton.addEventListener saat ini dengan yang berikut:
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener("click",
 () => {
    if (firebase.auth().currentUser) {
      // User is signed in; allows user to sign out
      firebase.auth().signOut();
    } else {
      // No user is signed in; allows user to sign in
      ui.start("#firebaseui-auth-container", uiConfig);
    }
});

Sekarang tombol tersebut akan menampilkan LOGOUT , dan beralih kembali ke RSVP saat diklik.

Pratinjau aplikasi

4c540450924f1607.png

Mengetahui bahwa pengguna akan datang itu bagus, tapi mari beri tamu hal lain untuk dilakukan di aplikasi. Bagaimana jika mereka bisa meninggalkan pesan di buku tamu? Mereka dapat berbagi mengapa mereka bersemangat untuk datang atau siapa yang ingin mereka temui.

Untuk menyimpan pesan chat yang ditulis pengguna di aplikasi, Anda akan menggunakan Cloud Firestore .

Model data

Cloud Firestore adalah database NoSQL, dan data yang disimpan dalam database dibagi menjadi beberapa koleksi, dokumen, kolom, dan subkoleksi. Anda akan menyimpan setiap pesan obrolan sebagai dokumen dalam koleksi tingkat atas yang disebut guestbook .

b447950f9f993789.png

Tambahkan pesan ke Firestore

Di bagian ini, Anda akan menambahkan fungsionalitas bagi pengguna untuk menulis pesan baru ke database. Pertama, Anda menambahkan HTML untuk elemen UI (bidang pesan dan tombol kirim), lalu Anda menambahkan kode yang menghubungkan elemen-elemen ini ke database.

Untuk menambahkan elemen UI bidang pesan dan tombol kirim, lakukan hal berikut:

  1. Di StackBlitz, buka file index.html .
  2. Temukan guestbook-container , dan tambahkan HTML berikut untuk membuat formulir dengan bidang masukan pesan dan tombol kirim.
<!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

Pratinjau aplikasi

4a892284443cf73d.png

Seorang pengguna yang mengklik tombol KIRIM akan memicu potongan kode di bawah ini. Ini menambahkan konten bidang input pesan ke koleksi guestbook dari database. Secara khusus, add metode menambah isi pesan ke dokumen baru (dengan ID secara otomatis) ke guestbook koleksi.

  1. Di StackBlitz, buka file index.js .
  2. Di bagian bawah file, tambahkan kode berikut.

Perhatikan bahwa firebase.auth().currentUser.uid adalah referensi ke ID unik yang dibuat secara otomatis yang diberikan Firebase Authentication untuk semua pengguna yang masuk.

// ..
// Listen to the form submission
form.addEventListener("submit", (e) => {
 // Prevent the default form redirect
 e.preventDefault();
 // Write a new message to the database collection "guestbook"
 firebase.firestore().collection("guestbook").add({
   text: input.value,
   timestamp: Date.now(),
   name: firebase.auth().currentUser.displayName,
   userId: firebase.auth().currentUser.uid
 })
 // clear message input field
 input.value = ""; 
 // Return false to avoid redirect
 return false;
});

Tampilkan buku tamu hanya untuk pengguna yang masuk

Anda tidak ingin sembarang orang melihat obrolan para tamu. Satu hal yang dapat Anda lakukan untuk mengamankan obrolan adalah dengan mengizinkan hanya pengguna yang masuk untuk melihat buku tamu. Karena itu, untuk aplikasi Anda sendiri, Anda juga ingin mengamankan database Anda dengan Aturan Keamanan Firebase . (Ada lebih banyak informasi tentang aturan keamanan nanti di codelab.)

  1. Di StackBlitz, buka file index.js .
  2. Edit pendengar onAuthStateChanged untuk menyembunyikan dan menampilkan buku tamu.
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
 if (user){
   startRsvpButton.textContent = "LOGOUT";
   // Show guestbook to logged-in users
   guestbookContainer.style.display = "block";
 }
 else{
   startRsvpButton.textContent = "RSVP";
   // Hide guestbook for non-logged-in users
   guestbookContainer.style.display = "none";
 }
});

Uji pengiriman pesan

  1. Pastikan Anda masuk ke aplikasi.
  2. Masukkan pesan seperti "Halo!", Lalu klik KIRIM .

Tindakan ini menulis pesan ke database Cloud Firestore Anda. Namun, Anda belum melihat pesan tersebut di aplikasi web Anda yang sebenarnya karena Anda masih perlu menerapkan pengambilan data. Anda akan melakukannya selanjutnya.

Tapi Anda bisa melihat pesan yang baru ditambahkan di konsol Firebase.

Di konsol Firebase, di dasbor Database , Anda akan melihat koleksi guestbook dengan pesan yang baru Anda tambahkan. Jika Anda terus mengirimkan pesan, koleksi buku tamu Anda akan berisi banyak dokumen, seperti ini:

Konsol Firebase

713870af0b3b63c.png

Sinkronkan pesan

Sangat menyenangkan bahwa para tamu dapat menulis pesan ke database, tetapi mereka belum dapat melihatnya di aplikasi.

Untuk menampilkan pesan, Anda harus menambahkan listener yang terpicu saat data berubah, lalu membuat elemen UI yang menampilkan pesan baru.

Anda akan menambahkan kode yang mendengarkan pesan yang baru ditambahkan dari aplikasi. Pertama, tambahkan bagian di HTML untuk menampilkan pesan:

  1. Di StackBlitz, buka file index.html .
  2. Di guestbook-container , tambahkan bagian baru dengan ID guestbook .
<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

Selanjutnya, daftarkan pendengar yang mendengarkan perubahan yang dilakukan pada data:

  1. Di StackBlitz, buka file index.js .
  2. Di bagian bawah file, tambahkan kode berikut untuk mengulang semua dokumen (pesan buku tamu) dalam database:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((snaps) => {
 // Reset page
 guestbook.innerHTML = "";
 // Loop through documents in database
 snaps.forEach((doc) => {
   // Create an HTML entry for each document and add it to the chat
   const entry = document.createElement("p");
   entry.textContent = doc.data().name + ": " + doc.data().text;
   guestbook.appendChild(entry);
 });
});

Untuk mendengarkan pesan dalam database, buat kueri pada koleksi tertentu dengan menggunakan fungsi .collection . Kode di atas mendengarkan perubahan dalam koleksi guestbook , di mana pesan obrolan disimpan. Pesan juga diurutkan berdasarkan tanggal, menggunakan .orderBy('timestamp', 'desc') untuk menampilkan pesan terbaru di bagian atas.

Fungsi .onSnapshot mengambil satu parameter: fungsi callback. Fungsi panggilan balik dipicu ketika ada perubahan pada dokumen yang cocok dengan kueri. Ini bisa terjadi jika pesan dihapus, diubah, atau ditambahkan. Untuk informasi lebih lanjut, lihat dokumentasi Cloud Firestore .

Uji sinkronisasi pesan

Cloud Firestore secara otomatis dan instan menyinkronkan data dengan klien yang berlangganan database.

  1. Pesan yang Anda buat sebelumnya di database harus ditampilkan di aplikasi. Jangan ragu untuk menulis pesan baru; mereka akan muncul secara instan.
  2. Jika Anda membuka ruang kerja di banyak jendela atau tab, pesan akan disinkronkan secara real time di seluruh tab.
  3. (Opsional) Anda dapat mencoba menghapus, mengubah, atau menambahkan pesan baru secara manual di bagian Database di Firebase console; perubahan apa pun akan muncul di UI.

Selamat! Anda membaca dokumen Cloud Firestore di aplikasi Anda!

Review aplikasi p

e30df0a9614bae7d.png

Anda awalnya menyiapkan Cloud Firestore untuk menggunakan mode pengujian, artinya database Anda terbuka untuk baca dan tulis. Namun, Anda sebaiknya hanya menggunakan mode pengujian selama tahap pengembangan yang paling awal. Sebagai praktik terbaik, Anda harus menyiapkan aturan keamanan untuk database saat Anda mengembangkan aplikasi. Keamanan harus menjadi bagian integral dari struktur dan perilaku aplikasi Anda.

Aturan Keamanan memungkinkan Anda mengontrol akses ke dokumen dan koleksi di database Anda. Sintaks aturan fleksibel memungkinkan Anda membuat aturan yang cocok dengan apa pun, mulai dari semua penulisan ke seluruh database hingga operasi pada dokumen tertentu.

Anda dapat menulis aturan keamanan untuk Cloud Firestore di Firebase console:

  1. Di bagian Develop Firebase console, klik Database , lalu pilih tab Aturan (atau klik di sini untuk langsung membuka tab Aturan ).
  2. Anda akan melihat aturan keamanan default berikut, bersama dengan peringatan tentang aturan yang bersifat publik.

7767a2d2e64e7275.png

Identifikasi koleksi

Pertama, identifikasi koleksi tempat aplikasi menulis datanya.

Di match /databases/{database}/documents , identifikasi koleksi yang ingin Anda amankan:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

Tambahkan aturan keamanan

Karena Anda menggunakan UID Otentikasi sebagai bidang di setiap dokumen buku tamu, Anda bisa mendapatkan UID Otentikasi dan memverifikasi bahwa siapa pun yang mencoba untuk menulis ke dokumen memiliki UID Otentikasi yang cocok.

Tambahkan aturan baca dan tulis ke kumpulan aturan Anda seperti yang ditunjukkan di bawah ini:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

Sekarang, untuk buku tamu, hanya pengguna yang masuk yang bisa membaca pesan (pesan apapun!), Tapi Anda hanya bisa membuat pesan menggunakan ID pengguna Anda. Kami juga tidak mengizinkan pesan untuk diedit atau dihapus.

Tambahkan aturan validasi

Tambahkan validasi data untuk memastikan bahwa semua bidang yang diharapkan ada di dokumen:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

Setel ulang pendengar

Karena aplikasi Anda sekarang hanya mengizinkan pengguna yang diautentikasi untuk masuk, Anda harus memindahkan kueri firestore buku tamu di dalam pendengar Authentication. Jika tidak, kesalahan izin akan terjadi dan aplikasi akan diputus sambungannya saat pengguna keluar.

  1. Tarik koleksi buku tamu onSnapshot listener ke dalam fungsi baru yang disebut subscribeGuestbook . Juga, tetapkan hasil fungsi onSnapshot ke variabel guestbookListener .

onSnapshot Firestore mengembalikan fungsi berhenti berlangganan yang dapat Anda gunakan untuk membatalkan onSnapshot snapshot nanti.

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((snaps) => {
   // Reset page
   guestbook.innerHTML = "";
   // Loop through documents in database
   snaps.forEach((doc) => {
     // Create an HTML entry for each document and add it to the chat
     const entry = document.createElement("p");
     entry.textContent = doc.data().name + ": " + doc.data().text;
     guestbook.appendChild(entry);
   });
 });
};
  1. Tambahkan fungsi baru di bawahnya yang disebut unsubscribeGuestbook . Periksa apakah variabel guestbookListener bukan null, lalu panggil fungsi untuk membatalkan listener.
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. Terakhir, tambahkan fungsi baru ke callback onAuthStateChanged (gunakan dua langkah berikut).
  2. Tambahkan subscribeGuestbook() di bagian bawah if (user) .
  3. Tambahkan unsubscribeGuestbook() di bagian bawah pernyataan else .
// ...
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

  // Subscribe to the guestbook collection
  subscribeGuestbook();
}
else{
  startRsvpButton.textContent = "RSVP";
  // Hide guestbook for non-logged-in users
  guestbookContainer.style.display = "none";

  // Unsubscribe from the guestbook collection
  unsubscribeGuestbook();
}
});

Firebase menawarkan layanan hosting untuk menyajikan aset aplikasi web Anda. Anda dapat menerapkan file dan konfigurasi hosting ke Firebase Hosting menggunakan antarmuka baris perintah (CLI) Firebase. Tetapi untuk codelab ini, Anda menggunakan StackBlitz , yang telah mengintegrasikan Firebase CLI ke dalam ruang kerjanya!

Anda dapat menggunakan integrasi Firebase StackBlitz untuk memberi tahu StackBlitz ke proyek Firebase mana Anda ingin menerapkan aset:

  1. Jika Anda belum masuk dengan GitHub di StackBlitz, klik Masuk di kanan atas, lalu masukkan kredensial akun GitHub Anda.

99a41778bb3c194c.png

  • Jika Anda sudah memiliki akun GitHub, masuklah menggunakan akun GitHub Anda.
  • Jika Anda belum memiliki akun GitHub, buat akun GitHub menggunakan alamat email yang sama dengan yang Anda gunakan untuk masuk ke Firebase.
  1. Sekarang seharusnya ada ikon Firebase di panel kiri.

2981c2e3ad13c2c1.png 3. Klik Masuk ke Google . Masuk menggunakan alamat email yang sama dengan yang Anda gunakan untuk masuk ke Firebase. 4. Dari daftar proyek Firebase, pilih proyek Firebase-Web-Codelab Anda .

Menerapkan ke Firebase Hosting dengan StackBlitz secara harfiah adalah operasi sekali klik:

  1. Di ruang kerja StackBlitz, klik Deploy di sisi kiri halaman. Ya, itu dia. Satu langkah! 8fe6c0bfc04c8935.png

Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang cara kerja Firebase Hosting .

Buka bagian Hosting Firebase console proyek Anda untuk melihat informasi dan fitur hosting yang berguna, termasuk riwayat penerapan Anda, fungsi untuk memutar kembali ke versi aplikasi Anda sebelumnya, dan alur kerja untuk menyiapkan domain khusus.

Catat status RSVP peserta

Saat ini, aplikasi Anda hanya memungkinkan orang untuk mulai mengobrol jika mereka tertarik dengan acara tersebut. Selain itu, satu-satunya cara untuk mengetahui apakah seseorang akan datang adalah jika mereka mempostingnya di obrolan. Mari kita atur dan beri tahu orang-orang berapa banyak orang yang akan datang.

Anda akan menambahkan sakelar untuk mendaftarkan orang yang ingin menghadiri acara tersebut, lalu mengumpulkan hitungan berapa banyak orang yang datang.

  1. Di StackBlitz, buka file index.html .
  2. Dalam guestbook-container , tambahkan satu set tombol YES dan NO , seperti:
<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

 </section>
<!-- ... -->

Pratinjau aplikasi

73ca99ca35c13ee7.png

Selanjutnya, daftarkan pendengar untuk klik tombol. Jika pengguna mengklik YA , maka gunakan UID Otentikasi mereka untuk menyimpan respons ke database.

  1. Di StackBlitz, buka file index.js .
  2. Di bagian bawah file, tambahkan kode berikut untuk mendengarkan status RSVP:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. Buat koleksi baru yang disebut attendees , lalu daftarkan referensi dokumen jika salah satu tombol RSVP diklik.
  2. Setel referensi itu ke true atau false tergantung pada tombol mana yang diklik.

Pertama, untuk rsvpYes :

// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd yes, save a document with attending: true
 userDoc.set({
   attending: true
 }).catch(console.error)
}

Kemudian, hal yang sama untuk rsvpNo , tetapi dengan nilai false :

rsvpNo.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd no, save a document with attending: false
 userDoc.set({
   attending: false
 }).catch(console.error)
}

Tambahkan aturan

Karena Anda sudah menyiapkan beberapa aturan, data baru yang Anda tambahkan dengan tombol akan ditolak. Anda harus memperbarui aturan untuk mengizinkan penambahan ke koleksi attendees .

Untuk koleksi attendees , karena Anda menggunakan Authentication UID sebagai nama dokumen, Anda dapat mengambilnya dan memverifikasi bahwa uid pengirim sama dengan dokumen yang mereka tulis. Anda akan mengizinkan semua orang untuk membaca daftar peserta (karena tidak ada data pribadi di sana), tetapi hanya pembuatnya yang dapat memperbaruinya.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

Tambahkan aturan validasi

Tambahkan validasi data untuk memastikan bahwa semua bidang yang diharapkan ada di dokumen:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

(Opsional) Sekarang Anda dapat melihat hasil dari mengklik tombol. Buka dasbor Cloud Firestore Anda di Firebase console.

Baca status RSVP

Sekarang setelah Anda merekam tanggapannya, mari kita lihat siapa yang datang dan mencerminkannya di UI.

  1. Di StackBlitz, buka file index.html .
  2. Dalam description-container , tambahkan elemen baru dengan ID number-attending .
<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

Selanjutnya, daftarkan pendengar untuk koleksi attendees dan hitung jumlah tanggapan YA :

  1. Di StackBlitz, buka file index.js .
  2. Di bagian bawah file, tambahkan kode berikut untuk mendengarkan status RSVP dan menghitung klik YA .
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. Terakhir, mari kita sorot tombol yang sesuai dengan status saat ini. Periksa apakah UID Otentikasi saat ini memiliki entri dalam koleksi attendees , lalu setel kelas untuk clicked .
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((doc) => {
   if (doc && doc.data()){
     const attendingResponse = doc.data().attending;

     // Update css classes for buttons
     if (attendingResponse){
       rsvpYes.className="clicked";
       rsvpNo.className="";
     }
     else{
       rsvpYes.className="";
       rsvpNo.className="clicked";
     }
   }
 });
}
  1. Juga, mari kita buat fungsi untuk berhenti berlangganan. Ini akan digunakan saat pengguna keluar.
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. Panggil fungsi dari pendengar Otentikasi.
// ...

// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

  // Subscribe to the guestbook collection
  subscribeGuestbook();
  // Subscribe to the guestbook collection
  subscribeCurrentRSVP(user);
}
else{
  startRsvpButton.textContent = "RSVP";
  // Hide guestbook for non-logged-in users
  guestbookContainer.style.display = "none";

  // Unsubscribe from the guestbook collection
  unsubscribeGuestbook();
  // Unsubscribe from the guestbook collection
  unsubscribeCurrentRSVP();

}
});
  1. Cobalah masuk sebagai beberapa pengguna dan lihat jumlah bertambah dengan setiap klik tombol YA tambahan.

Pratinjau aplikasi

3df607d3e0b3c35.png

Anda telah menggunakan Firebase untuk membangun aplikasi web real-time yang interaktif!

Apa yang telah kami bahas

  • Firebase Authentication
  • FirebaseUI
  • Cloud Firestore
  • Aturan Keamanan Firebase
  • Firebase Hosting

Langkah selanjutnya

  • Ingin mempelajari lebih lanjut tentang produk Firebase lainnya? Mungkin Anda ingin menyimpan file gambar yang diunggah pengguna? Atau mengirim pemberitahuan ke pengguna Anda? Lihat codelab web Firebase untuk codelab yang lebih mendalam tentang lebih banyak produk Firebase untuk web.
  • Ingin mempelajari lebih lanjut tentang Cloud Firestore? Mungkin Anda ingin belajar tentang subkoleksi dan transaksi? Buka codelab web Cloud Firestore untuk codelab yang lebih mendalam di Cloud Firestore. Atau lihat serial YouTube ini untuk mengenal Cloud Firestore !

Belajarlah lagi

Bagaimana hasilnya?

Kami akan sangat senang dengan tanggapan Anda! Silakan isi formulir (sangat) singkat di sini .