Kenali Firebase untuk web

1. Ikhtisar

Dalam codelab ini, Anda akan belajar beberapa dasar-dasar Firebase untuk membuat aplikasi web interaktif. Anda akan membuat aplikasi obrolan RSVP dan buku tamu acara 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.

Apa yang Anda butuhkan?

  • Peramban pilihan Anda, seperti Chrome.
  • Akses ke stackblitz.com (tidak ada akun atau sign-in diperlukan).
  • Akun Google, seperti akun gmail. Kami merekomendasikan akun email yang sudah Anda gunakan untuk akun GitHub Anda. Ini memungkinkan Anda untuk menggunakan fitur lanjutan di StackBlitz.
  • Kode sampel codelab. Lihat langkah selanjutnya untuk cara mendapatkan kodenya.

2. Dapatkan kode awal

Dalam codelab ini, Anda membangun sebuah aplikasi menggunakan StackBlitz , editor online yang memiliki beberapa Firebase alur kerja terintegrasi ke 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 Anda dan memotong proyek Anda, tetapi mereka tidak dapat mengedit proyek StackBlitz Anda.

  1. Pergi ke 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 memiliki nama yang unik, bersama dengan URL unik. Semua file dan perubahan Anda disimpan dalam proyek StackBlitz ini.

3. Edit informasi acara

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 container ini ke Firebase.

Untuk memulai, mari kita lebih mengenal antarmuka StackBlitz.

  1. Dalam StackBlitz, buka index.html berkas.
  2. Cari event-details-container dan description-container , kemudian mencoba mengedit beberapa detail acara.

Saat Anda mengedit teks, halaman otomatis 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

4. Buat dan siapkan proyek Firebase

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 Firebase, Anda harus membuat dan menyiapkan proyek Firebase.

Buat proyek Firebase

  1. Masuk ke Firebase .
  2. Dalam Firebase konsol, klik Add Project (atau Buat proyek), kemudian nama Anda Firebase proyek Firebase-Web-Codelab.
    a67c239f8cc7f4b5.png
  3. 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 .

Aktifkan produk Firebase di konsol

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

  • Firebase Otentikasi dan Firebase UI dengan mudah memungkinkan pengguna untuk masuk ke aplikasi Anda.
  • Cloud Firestore untuk menyimpan data terstruktur di atas awan dan mendapatkan pemberitahuan instan ketika data perubahan.
  • Firebase Aturan Keamanan untuk mengamankan database Anda.

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

Aktifkan login email untuk Firebase Authentication

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

  1. Dalam Firebase konsol, klik Build di panel sebelah kiri.
  2. Klik Authentication, kemudian klik Sign-in tab metode (atau klik disini untuk langsung ke Sign-in tab metode).
  3. Klik Email / Password di Sign-in penyedia daftar, mengatur Aktifkan saklar ke posisi, kemudian klik Simpan.
    4c88427cfd869bee.png

Aktifkan Cloud Firestore

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

Aktifkan Cloud Firestore:

  1. Pada bagian Build Firebase konsol, klik Firestore Database.
  2. Klik Membuat database.
    3ce19fd6467e51c5.png
  3. Pilih Mulai dalam pilihan mode uji. Baca penafian tentang aturan keamanan. Mode uji memastikan bahwa Anda dapat dengan bebas menulis ke database selama pengembangan. Klik Next.
    56369cebb9300eb.png
  4. Pilih lokasi untuk database Anda (Anda bisa menggunakan default). Namun, perhatikan bahwa lokasi ini tidak dapat diubah nanti.
    32f815f4648c3174.png
  5. Klik Selesai.

5. Tambahkan dan konfigurasikan Firebase

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

Tambahkan pustaka Firebase

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

StackBlitz menyediakan bundling otomatis, sehingga Anda dapat menambahkan library Firebase menggunakan pernyataan impor. Anda akan menggunakan pustaka versi modular (v9), yang membantu mengurangi ukuran keseluruhan halaman web melalui proses yang disebut "pengguncangan pohon". Anda dapat mempelajari lebih lanjut tentang SDK modular dalam dokumen .

Untuk membuat aplikasi ini, Anda menggunakan library Firebase Authentication, FirebaseUI, dan Cloud Firestore. Untuk codelab ini, laporan impor berikut sudah disertakan di bagian atas index.js file, dan kita akan mengimpor metode yang lebih dari masing-masing perpustakaan Firebase seperti yang kita pergi:

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

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

Tambahkan aplikasi web Firebase ke proyek

  1. Kembali di Firebase konsol, menavigasi ke halaman ikhtisar proyek Anda dengan mengklik Proyek Ikhtisar di kiri atas.
  2. Di tengah halaman ikhtisar proyek Anda, klik ikon web b286f3d215e1f578.png untuk membuat aplikasi web Firebase baru.
    c167e9526fad2825.png
  3. Mendaftarkan aplikasi dengan julukan Web App.
  4. Untuk codelab ini, jangan centang kotak di samping juga mengatur Firebase Hosting untuk aplikasi ini. Anda akan menggunakan panel pratinjau StackBlitz untuk saat ini.
  5. Klik Register aplikasi.
    c85ac8aa351e2560.png
  6. Salin Firebase konfigurasi objek ke clipboard Anda.
    ed1e598c6132f734.png
  7. Klik Lanjutkan untuk menghibur.

Tambahkan objek konfigurasi Firebase ke aplikasi Anda:

  1. Kembali StackBlitz, pergi ke index.js berkas.
  2. Cari Add Firebase project configuration object here baris komentar, kemudian paste potongan konfigurasi Anda tepat di bawah komentar.
  3. Tambahkan initializeApp fungsi panggilan untuk mengatur Firebase menggunakan konfigurasi proyek Firebase unik Anda.
    // ...
    // Add Firebase project configuration object here
    const 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
    initializeApp(firebaseConfig);
    

6. Tambahkan login pengguna (RSVP)

Sekarang bahwa Anda telah menambahkan Firebase untuk aplikasi, Anda dapat mengatur tombol RSVP yang register orang yang menggunakan Firebase Authentication .

Otentikasi pengguna Anda dengan Login Email dan FirebaseUI

Anda memerlukan tombol RSVP yang meminta pengguna untuk masuk dengan alamat email mereka. Anda dapat melakukan ini dengan mengaitkan FirebaseUI ke RSVP button.FirebaseUI adalah perpustakaan yang memberi Anda UI pra-dibangun di atas Firebase Tupoksi.

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

  • Memberitahukan FirebaseUI bahwa Anda ingin menggunakan Email / Password masuk metode.
  • Menangani panggilan balik untuk masuk yang berhasil dan mengembalikan false untuk menghindari pengalihan. Anda tidak ingin halaman disegarkan karena Anda sedang membangun aplikasi web satu halaman.

Tambahkan kode untuk menginisialisasi FirebaseUI Auth

  1. Dalam StackBlitz, pergi ke index.js berkas.
  2. Di bagian atas, cari firebase/auth pernyataan impor, kemudian tambahkan getAuth dan EmailAuthProvider , seperti:
    // ...
    // Add the Firebase products and methods that you want to use
    import { getAuth, EmailAuthProvider } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Simpan referensi ke objek auth tepat setelah initializeApp , seperti:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. Perhatikan bahwa konfigurasi FirebaseUI sudah disediakan di kode awal. Sudah diatur untuk menggunakan penyedia auth email.
  5. Pada bagian bawah main() fungsi dalam index.js , menambahkan pernyataan inisialisasi FirebaseUI, seperti:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

Tambahkan tombol RSVP ke HTML

  1. Dalam StackBlitz, pergi ke index.html berkas.
  2. Menambahkan HTML untuk tombol RSVP dalam event-details-container seperti yang ditunjukkan pada contoh di bawah.

    Hati-hati untuk menggunakan yang sama id nilai seperti yang ditunjukkan di bawah ini karena, untuk codelab ini, sudah ada kait untuk ID khusus ini dalam index.js berkas.

    Perhatikan bahwa dalam index.html berkas, ada wadah 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>
    <!-- ... -->
    
    App pratinjau
    ab9ad7d61bb7b28c.png
  3. Siapkan listener pada tombol RSVP dan panggil fungsi awal FirebaseUI. Ini memberi tahu FirebaseUI bahwa Anda ingin melihat jendela masuk.

    Tambahkan kode berikut ke bawah main() fungsi dalam index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

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 diaktifkan Email / Password sebagai tanda-in penyedia di konsol Firebase.
    Pratinjau aplikasi
    3024f90b52ad55fe.png
  2. Pergi ke dashboard Authentication di konsol Firebase. Pada tab Pengguna, Anda akan melihat informasi akun yang Anda masukkan ke masuk ke app. 682fc0eca86a99fc.png

Tambahkan status otentikasi ke UI

Selanjutnya, pastikan UI mencerminkan fakta bahwa Anda masuk.

Anda akan menggunakan callback pemroses status Firebase Authentication, yang akan diberi tahu setiap kali status login pengguna berubah. Jika saat ini ada pengguna yang masuk, aplikasi Anda akan mengalihkan tombol "RSVP" menjadi tombol "keluar".

  1. Dalam StackBlitz, pergi ke index.js berkas.
  2. Di bagian atas, cari firebase/auth pernyataan impor, kemudian tambahkan signOut dan onAuthStateChanged , seperti:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Tambahkan kode berikut pada bagian bawah main() fungsi:
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. Di pendengar tombol, periksa apakah ada pengguna saat ini dan keluarkan. Untuk melakukan hal ini, menggantikan arus startRsvpButton.addEventListener dengan berikut:
    // ...
    // Called when the user clicks the RSVP button
    startRsvpButton.addEventListener('click', () => {
      if (auth.currentUser) {
        // User is signed in; allows user to sign out
        signOut(auth);
      } else {
        // No user is signed in; allows user to sign in
        ui.start('#firebaseui-auth-container', uiConfig);
      }
    });
    

Sekarang, tombol di aplikasi Anda harus menunjukkan LOGOUT, dan harus beralih kembali ke RSVP bila diklik.

Pratinjau aplikasi

4c540450924f1607.png

7. Tulis pesan ke Cloud Firestore

Mengetahui bahwa pengguna akan datang adalah hal yang bagus, tetapi mari berikan 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 pengguna menulis dalam aplikasi, Anda akan menggunakan Cloud Firestore .

Model data

Cloud Firestore adalah database NoSQL, dan data yang disimpan dalam database dibagi menjadi koleksi, dokumen, kolom, dan subkoleksi. Anda akan menyimpan setiap pesan chat sebagai dokumen dalam koleksi tingkat atas 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). Kemudian, Anda menambahkan kode yang mengaitkan elemen-elemen ini ke database.

Untuk menambahkan elemen UI bidang pesan dan tombol kirim:

  1. Dalam StackBlitz, pergi ke index.html berkas.
  2. Cari guestbook-container , kemudian tambahkan HTML berikut untuk membuat formulir dengan field input 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 mengklik tombol SEND akan memicu potongan kode di bawah. Ia menambahkan isi dari field input pesan ke guestbook koleksi database. Secara khusus, addDoc metode menambah isi pesan ke dokumen baru (dengan ID secara otomatis) ke guestbook koleksi.

  1. Dalam StackBlitz, pergi ke index.js berkas.
  2. Di bagian atas, cari firebase/firestore pernyataan impor, kemudian tambahkan getFirestore , addDoc , dan collection , seperti:
    // ...
    
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {
      getFirestore,
      addDoc,
      collection
    } from 'firebase/firestore';
    
  3. Sekarang kita akan menyimpan referensi ke Firestore db objek yang tepat setelah initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. Pada bagian bawah main() fungsi, tambahkan kode berikut.

    Perhatikan bahwa auth.currentUser.uid adalah referensi ke auto-generated ID unik yang Firebase Authentication memberikan untuk semua log-in pengguna.
    async function main() {
      // ...
    
      // Listen to the form submission
      form.addEventListener('submit', async e => {
        // Prevent the default form redirect
        e.preventDefault();
        // Write a new message to the database collection "guestbook"
        addDoc(collection(db, 'guestbook'), {
          text: input.value,
          timestamp: Date.now(),
          name: auth.currentUser.displayName,
          userId: auth.currentUser.uid
        });
        // clear message input field
        input.value = '';
        // Return false to avoid redirect
        return false;
      });
    }
    main();
    

Tampilkan buku tamu hanya kepada 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. Yang mengatakan, untuk aplikasi Anda sendiri, Anda akan ingin juga mengamankan database Anda dengan Firebase Aturan Keamanan . (Ada informasi lebih lanjut tentang aturan keamanan nanti di codelab.)

  1. Dalam StackBlitz, pergi ke index.js berkas.
  2. Edit onAuthStateChanged pendengar untuk menyembunyikan dan menunjukkan buku tamu.
    // ...
    
    // Listen to the current Auth state
    onAuthStateChanged(auth, 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 "Hei!", Kemudian klik KIRIM.

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

Tetapi Anda dapat melihat pesan yang baru ditambahkan di konsol Firebase.

Dalam Firebase konsol, di database dashboard , Anda harus melihat guestbook koleksi dengan pesan Anda baru ditambahkan. Jika Anda terus mengirim pesan, koleksi buku tamu Anda akan berisi banyak dokumen, seperti ini:

Konsol Firebase

713870af0b3b63c.png

8. Baca pesan

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 memicu 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. Dalam StackBlitz, pergi ke index.html berkas.
  2. Dalam guestbook-container , tambahkan bagian baru dengan ID dari guestbook .
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

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

  1. Dalam StackBlitz, pergi ke index.js berkas.
  2. Di bagian atas, cari firebase/firestore pernyataan impor, kemudian menambahkan query , orderBy , dan onSnapshot , seperti:
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. Pada bagian bawah main() fungsi, tambahkan kode berikut untuk loop melalui semua dokumen (pesan buku tamu) dalam database. Untuk mempelajari lebih lanjut tentang apa yang terjadi dalam kode ini, baca informasi di bawah cuplikan.
    async function main() {
      // ...
    
      // Create query for messages
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      onSnapshot(q, 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);
        });
      });
    }
    main();
    

Untuk mendengarkan pesan dalam database, Anda telah membuat query pada koleksi tertentu dengan menggunakan collection fungsi. Kode di atas mendengarkan dengan perubahan di guestbook koleksi, yang mana pesan chat disimpan. Pesan tersebut juga diperintahkan oleh tanggal, menggunakan orderBy('timestamp', 'desc') untuk menampilkan pesan terbaru di bagian atas.

The onSnapshot fungsi mengambil dua parameter: query untuk penggunaan dan 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.

  • Pesan yang Anda buat sebelumnya di database harus ditampilkan di aplikasi. Jangan ragu untuk menulis pesan baru; mereka akan muncul secara instan.
  • Jika Anda membuka ruang kerja di beberapa jendela atau tab, pesan akan disinkronkan secara waktu nyata di seluruh tab.
  • (Opsional) Anda dapat mencoba secara manual menghapus, memodifikasi, atau menambahkan pesan baru secara langsung di bagian Database konsol Firebase; perubahan apa pun akan muncul di UI.

Selamat! Anda sedang membaca dokumen Cloud Firestore di aplikasi Anda!

Pratinjau aplikasi

e30df0a9614bae7d.png

9. Siapkan aturan keamanan dasar

Anda awalnya menyiapkan Cloud Firestore untuk menggunakan mode pengujian, artinya database Anda terbuka untuk membaca dan menulis. Namun, Anda hanya boleh menggunakan mode uji selama tahap pengembangan yang sangat awal. Sebagai praktik terbaik, Anda harus menyiapkan aturan keamanan untuk database saat 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 yang 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. Pada bagian Build Firebase konsol, klik Firestore Database, kemudian pilih tab Aturan (atau klik disini untuk langsung ke 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 data.

Dalam match /databases/{database}/documents , mengidentifikasi koleksi yang Anda ingin mengamankan:

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 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 dapat membaca pesan (pesan apa pun!), tetapi Anda hanya dapat 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 dalam 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 pengguna hanya memungkinkan dikonfirmasi untuk login, Anda harus memindahkan buku tamu firestore permintaan dalam pendengar Authentication. Jika tidak, kesalahan izin akan terjadi dan aplikasi akan terputus saat pengguna logout.

  1. Tarik koleksi buku tamu onSnapshot pendengar menjadi fungsi baru yang disebut subscribeGuestbook . Juga, menetapkan hasil onSnapshot fungsi ke guestbookListener variabel.

    The Firestore onSnapshot pendengar mengembalikan fungsi unsubscribe bahwa Anda akan dapat menggunakan untuk membatalkan pendengar snapshot kemudian.
    // ...
    // Listen to guestbook updates
    // Listen to guestbook updates
    function subscribeGuestbook() {
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      guestbookListener = onSnapshot(q, 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);
        });
      });
    }
    
  2. Menambahkan fungsi baru yang disebut bawah unsubscribeGuestbook . Periksa apakah guestbookListener variabel tidak null, kemudian memanggil fungsi untuk membatalkan pendengar.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

Akhirnya, menambahkan fungsi-fungsi baru ke onAuthStateChanged callback.

  1. Menambahkan subscribeGuestbook() di bagian bawah if (user) .
  2. Menambahkan unsubscribeGuestbook() di bagian bawah else pernyataan.
    // ...
    // Listen to the current Auth state
    onAuthStateChanged(auth, 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();
      }
    });
    

10. Langkah bonus: Latih apa yang telah Anda pelajari

Catat status RSVP peserta

Saat ini, aplikasi Anda hanya memungkinkan orang untuk mulai mengobrol jika mereka tertarik dengan acara tersebut. Juga, satu-satunya cara Anda tahu jika seseorang datang adalah jika mereka mempostingnya di obrolan. Mari kita mengatur dan memberi tahu orang-orang berapa banyak orang yang datang.

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

  1. Dalam StackBlitz, pergi ke index.html berkas.
  2. Dalam guestbook-container , tambahkan satu set YES dan NO tombol, 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 YES, kemudian menggunakan mereka Authentication UID untuk menyimpan respon ke database.

  1. Dalam StackBlitz, pergi ke index.js berkas.
  2. Di bagian atas, cari firebase/firestore pernyataan impor, kemudian tambahkan doc , setDoc , dan where , seperti:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot,
      doc,
      setDoc,
      where
    } from 'firebase/firestore';
    
  3. Pada bagian bawah main() fungsi, tambahkan kode berikut untuk mendengarkan status RSVP:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. Buat koleksi baru yang disebut attendees , kemudian mendaftar referensi dokumen jika salah satu tombol RSVP diklik.
  5. Mengatur bahwa referensi true atau false tergantung pada tombol diklik.

    Pertama, untuk rsvpYes :
    // ...
    // Listen to RSVP responses
    rsvpYes.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attendi()ng: true
      try {
        await setDoc(userRef, {
          attending: true
        });
      } catch (e) {
        console.error(e);
      }
    };
    
    Kemudian, hal yang sama untuk rsvpNo , tetapi dengan nilai false :
    rsvpNo.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attending: true
      try {
        await setDoc(userRef, {
          attending: false
        });
      } catch (e) {
        console.error(e);
      }
    };
    

Tambahkan aturan

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

Untuk attendees koleksi, karena Anda menggunakan Authentication UID sebagai nama dokumen, Anda bisa ambil dan memverifikasi bahwa submitter ini uid adalah sama dengan dokumen yang mereka tulis. Anda akan mengizinkan semua orang 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 dalam 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) Anda sekarang dapat melihat hasil mengklik tombol. Buka dasbor Cloud Firestore Anda di Firebase console.

Baca status RSVP

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

  1. Dalam StackBlitz, pergi ke index.html berkas.
  2. Dalam description-container , menambahkan elemen baru dengan ID dari number-attending .
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

Berikutnya, daftar pendengar untuk attendees pengumpulan dan menghitung jumlah tanggapan YES:

  1. Dalam StackBlitz, pergi ke index.js berkas.
  2. Pada bagian bawah main() fungsi, tambahkan kode berikut untuk mendengarkan status RSVP dan menghitung klik YES.
    async function main() {
      // ...
    
      // Listen for attendee list
      const attendingQuery = query(
        collection(db, 'attendees'),
        where('attending', '==', true)
      );
      const unsubscribe = onSnapshot(attendingQuery, snap => {
        const newAttendeeCount = snap.docs.length;
        numberAttending.innerHTML = newAttendeeCount + ' people going';
      });
    }
    main();
    

Terakhir, mari kita sorot tombol yang sesuai dengan status saat ini.

  1. Membuat fungsi yang memeriksa apakah saat ini Authentication UID memiliki entri dalam attendees koleksi, kemudian mengatur kelas tombol untuk clicked .
    // ...
    // Listen for attendee list
    function subscribeCurrentRSVP(user) {
      const ref = doc(db, 'attendees', user.uid);
      rsvpListener = onSnapshot(ref, 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';
          }
        }
      });
    }
    
  2. Juga, mari kita buat fungsi untuk berhenti berlangganan. Ini akan digunakan ketika pengguna logout.
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. Panggil fungsi dari pendengar Otentikasi.
    // ...
    // Listen to the current Auth state
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
          // Show guestbook to logged-in users
          guestbookContainer.style.display = 'block';
    
          // Subscribe to the guestbook collection
          subscribeGuestbook();
          // Subcribe to the user's RSVP
          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();
        }
      });
    
  4. Cobalah logging sebagai beberapa pengguna dan melihat peningkatan jumlah dengan masing-masing tambahan tombol YES klik.

Pratinjau aplikasi

3df607d3e0b3c35.png

11. Selamat!

Anda telah menggunakan Firebase untuk membuat aplikasi web waktu nyata yang interaktif!

Apa yang telah kita bahas

  • Otentikasi Firebase
  • FirebaseUI
  • Cloud Firestore
  • Aturan Keamanan Firebase

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? Check out web codelab Firebase untuk codelab yang masuk ke lebih mendalam pada banyak produk yang lebih Firebase untuk web.
  • Ingin mempelajari lebih lanjut tentang Cloud Firestore? Mungkin Anda ingin belajar tentang subkoleksi dan transaksi? Kepala ke codelab web Cloud Firestore untuk codelab yang masuk ke lebih mendalam tentang Cloud Firestore. Atau periksa ini seri YouTube untuk mengenal Cloud Firestore !

Belajarlah lagi

Bagaimana hasilnya?

Kami akan menyukai tanggapan Anda! Silahkan isi (sangat) bentuk pendek di sini .