Kenali Firebase untuk web

1. Ringkasan

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

Yang akan Anda pelajari

• Melakukan autentikasi pengguna dengan Firebase Authentication dan FirebaseUI.
• Menyinkronkan data menggunakan Cloud Firestore.
• Tulis Aturan Keamanan Firebase untuk mengamankan database.

Yang Anda butuhkan

• Browser pilihan Anda, seperti Chrome.
• Akses ke stackblitz.com (tidak perlu akun atau login).
• Akun Google, seperti akun Gmail. Sebaiknya gunakan akun email yang sudah digunakan untuk akun GitHub Anda. Ini memungkinkan Anda menggunakan fitur lanjutan di StackBlitz.
• Kode contoh codelab. Lihat langkah berikutnya untuk mengetahui cara mendapatkan kode.

2. Mendapatkan kode awal

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

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

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

Anda sekarang memiliki salinan kode awal sebagai project StackBlitz Anda sendiri, yang memiliki nama unik, bersama dengan URL unik. Semua file dan perubahan Anda disimpan dalam project StackBlitz ini.

Untuk berjaga-jaga jika Anda keluar jalur, ada link StackBlitz di berbagai checkpoint dalam codelab ini, yang diperbarui dengan semua kode yang ditambahkan hingga titik tersebut.

Pastikan Anda melakukan dua hal di checkpoint ini:

1. Lakukan fork project sehingga itu milik Anda sendiri.
2. Tambahkan objek konfigurasi project Firebase dari Firebase console (hal ini akan dibahas lebih lanjut nanti di codelab).

3. Edit informasi acara

Materi awal untuk codelab ini menyediakan beberapa struktur untuk aplikasi web, termasuk beberapa stylesheet dan beberapa penampung HTML untuk aplikasi. Nanti dalam codelab ini, Anda akan mengaitkan penampung ini ke Firebase.

Untuk memulai, mari kita lebih mengenal antarmuka StackBlitz.

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

Saat Anda mengedit teks, pemuatan ulang halaman otomatis di StackBlitz akan menampilkan detail peristiwa 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

4. Membuat dan menyiapkan project Firebase

Menampilkan informasi acara adalah hal yang baik bagi tamu, tetapi hanya menampilkan acara saja tidak terlalu berguna bagi siapa pun. Mari tambahkan beberapa fungsi dinamis ke aplikasi ini. Untuk melakukannya, Anda harus menghubungkan Firebase ke aplikasi Anda. Untuk memulai Firebase, Anda harus membuat dan menyiapkan project Firebase.

Membuat project Firebase

1. Login ke Firebase.
2. Di Firebase console, klik Tambahkan Project (atau Buat project), lalu beri nama project Firebase Anda Firebase-Web-Codelab.
   
   
   
   
3. Klik opsi pembuatan project. Setujui persyaratan Firebase jika diminta. Di layar Google Analytics, klik "Jangan Aktifkan", karena Anda tidak akan menggunakan Analytics untuk aplikasi ini.

Untuk mempelajari project Firebase lebih lanjut, lihat Memahami project Firebase.

Mengaktifkan dan menyiapkan produk Firebase di konsol

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

• Firebase Authentication dan UI Firebase 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.

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

Mengaktifkan login dengan email untuk Firebase Authentication

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

1. Di panel sebelah kiri Firebase console, klik Build > Authentication. Kemudian, klik Mulai. Anda sekarang berada di dasbor Authentication, tempat Anda dapat melihat pengguna yang mendaftar, mengonfigurasi penyedia login, dan mengelola setelan.
   
   
   
   
2. Pilih tab Metode login (atau klik di sini untuk langsung membuka tab tersebut).
   
   
   
   
3. Klik Email/Sandi dari opsi penyedia, alihkan tombol ke Aktifkan, lalu klik Simpan.
   
   
   
   

Siapkan Cloud Firestore

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

Berikut cara menyiapkan Cloud Firestore:

1. Di panel sebelah kiri Firebase console, klik Build > Firestore Database. Kemudian klik Create database.
2. Klik Create database.
   
   
   
   
3. Pilih opsi Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan. Mode pengujian memastikan bahwa Anda dapat menulis ke database dengan bebas selama pengembangan. Klik Berikutnya.
   
   
   
   

   Perhatian: Pada tahap pertama codelab ini, Anda menggunakan mode pengujian. Namun, selanjutnya di codelab, Anda akan menulis Aturan Keamanan Firebase untuk mengamankan database.

   Untuk aplikasi Anda, terutama aplikasi produksi, Anda harus mengamankan database menggunakan aturan keamanan. Pelajari aturan keamanan lebih lanjut di dokumentasi Firebase.

4. Pilih lokasi untuk database Anda (Anda cukup menggunakan default). Namun, perhatikan bahwa lokasi ini tidak dapat diubah nanti.
   
   
   
   
5. Klik Done.

5. Menambahkan dan mengonfigurasi Firebase

Setelah project Firebase dibuat dan beberapa layanan diaktifkan, Anda harus memberi tahu kode bahwa Anda ingin menggunakan Firebase, serta project Firebase mana yang akan digunakan.

Menambahkan library Firebase

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

StackBlitz menyediakan pemaketan otomatis, sehingga Anda dapat menambahkan library Firebase menggunakan pernyataan impor. Anda akan menggunakan library versi modular (v9), yang membantu mengurangi ukuran halaman web secara keseluruhan melalui proses yang disebut "tree shaking". Anda dapat mempelajari lebih lanjut SDK modular di dokumen.

Untuk membangun aplikasi ini, gunakan library Firebase Authentication, FirebaseUI, dan Cloud Firestore. Untuk codelab ini, pernyataan impor berikut sudah disertakan di bagian atas file index.js, dan kita akan mengimpor lebih banyak metode dari setiap library Firebase seiring berjalannya waktu:

// 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';

Menambahkan aplikasi web Firebase ke project Firebase

1. Kembali ke Firebase console, buka halaman ringkasan project dengan mengklik Ringkasan Project di kiri atas.
2. Di bagian tengah halaman ringkasan project, klik ikon web untuk membuat aplikasi web Firebase baru.
   
   
   
   
3. Daftarkan aplikasi dengan nama panggilan Aplikasi Web.
4. Untuk codelab ini, JANGAN centang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini. Untuk saat ini, Anda akan menggunakan panel pratinjau StackBlitz.
5. Klik Register app.

   Stackblitz mengelola dependensi untuk Anda sehingga Anda dapat melewati langkah npm install firebase yang ditampilkan di konsol.

   
   
   
   
   
6. Salin objek konfigurasi Firebase ke papan klip Anda.
   
   
   
   
7. Klik Continue to console.Tambahkan objek konfigurasi Firebase ke aplikasi Anda:
8. Kembali ke StackBlitz, buka file index.js.
9. Temukan baris komentar Add Firebase project configuration object here, lalu tempel cuplikan konfigurasi Anda tepat di bawah komentar.
10. Tambahkan panggilan fungsi initializeApp untuk menyiapkan Firebase menggunakan konfigurasi project 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);
    

Jika Anda melewatkan cuplikan firebaseConfig (atau memerlukannya di pos pemeriksaan)...

Anda bisa mendapatkan objek konfigurasi project Firebase dari Firebase console.

1. Di Firebase console, klik ikon setelan di pojok kiri atas, lalu pilih Setelan project.
2. Di tab Umum, scroll ke bawah ke kartu Aplikasi Anda.
3. Klik aplikasi web, lalu pilih opsi Config untuk cuplikan Firebase SDK.
4. Salin seluruh cuplikan konfigurasi ke papan klip Anda.

6. Tambahkan login pengguna (RSVP)

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

Mengautentikasi pengguna dengan Login dengan Email dan FirebaseUI

Anda memerlukan tombol RSVP yang meminta pengguna untuk login dengan alamat email mereka. Anda dapat melakukannya dengan menghubungkan FirebaseUI ke tombol RSVP.FirebaseUI adalah library yang menyediakan UI bawaan di atas Firebase Auth.

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

• Memberi tahu FirebaseUI bahwa Anda ingin menggunakan metode login Email/Sandi.
• Menangani callback untuk proses login yang berhasil dan menampilkan nilai salah untuk menghindari pengalihan. Anda tidak ingin halaman dimuat ulang karena sedang membangun aplikasi web satu halaman.

Menambahkan kode untuk menginisialisasi FirebaseUI Auth

1. Di StackBlitz, buka file index.js.
2. Di bagian atas, cari pernyataan impor firebase/auth, lalu tambahkan getAuth dan EmailAuthProvider, seperti ini:

   // ...
   // 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 autentikasi tepat setelah initializeApp, seperti berikut:

   initializeApp(firebaseConfig);
   auth = getAuth();
   

4. Perhatikan bahwa konfigurasi FirebaseUI sudah disediakan di kode awal. Penyedia autentikasi email sudah diatur untuk menggunakannya.
5. Di bagian bawah fungsi main() di index.js, tambahkan pernyataan inisialisasi FirebaseUI, seperti berikut:

   async function main() {
     // ...
   
     // Initialize the FirebaseUI widget using Firebase
     const ui = new firebaseui.auth.AuthUI(auth);
   }
   main();
   
   

Menambahkan 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.
   
   Berhati-hatilah untuk menggunakan nilai id yang sama seperti yang ditunjukkan di bawah ini karena untuk codelab ini, sudah ada hook untuk ID khusus ini dalam file index.js.
   
   Perhatikan bahwa di file index.html, ada penampung dengan ID firebaseui-auth-container. Ini adalah ID yang akan Anda teruskan ke FirebaseUI untuk menahan login.

   <!-- ... -->
   
   <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
   
   
   
   
3. Siapkan pemroses pada tombol RSVP dan panggil fungsi mulai FirebaseUI. Ini akan memberi tahu FirebaseUI bahwa Anda ingin melihat jendela login.
   
   Tambahkan kode berikut ke bagian bawah fungsi main() di index.js:

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

Menguji login 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 error yang menyatakan auth/operation-not-allowed atau The given sign-in provider is disabled for this Firebase project, periksa untuk memastikan bahwa Anda telah mengaktifkan Email/Sandi sebagai penyedia login di Firebase console.
   Pratinjau aplikasi
   
   
   
   
2. Buka dasbor Authentication di Firebase console. Di tab Pengguna, Anda akan melihat informasi akun yang telah dimasukkan untuk login ke aplikasi.
   
   
   
   

Tips: Baca dokumentasi Firebase untuk mempelajari cara menggunakan FirebaseUI dan Firebase Authentication untuk menambahkan penyedia login sosial (seperti GitHub, Google, dan Facebook) ke aplikasi Anda.

Menambahkan status autentikasi ke UI

Selanjutnya, pastikan UI mencerminkan fakta bahwa Anda sudah login.

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

1. Di StackBlitz, buka file index.js.
2. Di bagian atas, cari pernyataan impor firebase/auth, lalu tambahkan signOut dan onAuthStateChanged, seperti ini:

   // ...
   // 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 di bagian bawah fungsi main():

   async function main() {
     // ...
   
     // Listen to the current Auth state
     onAuthStateChanged(auth, user => {
       if (user) {
         startRsvpButton.textContent = 'LOGOUT';
       } else {
         startRsvpButton.textContent = 'RSVP';
       }
     });
   }
   main();
   

4. Di pemroses tombol, periksa apakah ada pengguna saat ini dan keluarkan mereka. Untuk melakukannya, ganti startRsvpButton.addEventListener saat ini dengan kode 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 akan menampilkan LOGOUT, dan tombol tersebut akan beralih kembali ke RSVP saat diklik.

Pratinjau aplikasi

Anda merasa buntu atau Anda merasa mungkin melenceng? Berikut adalah link StackBlitz yang diperbarui dengan semua kode ditambahkan ke titik codelab ini: https://stackblitz.com/edit/firebase-gtk-web-checkpoint1

Pastikan Anda melakukan dua hal di checkpoint ini:

1. Lakukan fork project sehingga itu milik Anda sendiri.
2. Tambahkan objek konfigurasi project Firebase Anda dari Firebase console.

7. Menulis pesan ke Cloud Firestore

Mengetahui bahwa pengguna akan datang adalah hal yang bagus, tetapi mari kita berikan hal lain kepada tamu di aplikasi. Bagaimana jika mereka dapat meninggalkan pesan di buku tamu? Mereka dapat menyampaikan alasan mengapa mereka ingin 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 koleksi, dokumen, kolom, dan subkoleksi. Anda akan menyimpan setiap pesan chat sebagai dokumen dalam koleksi level teratas yang disebut guestbook.

Tips: Untuk mempelajari model data Cloud Firestore lebih lanjut, baca dokumen dan koleksi di dokumentasi Cloud Firestore. Anda juga dapat menonton serangkaian video keren yang menjelaskan model data NoSQL Cloud Firestore, kueri, dan hal-hal menarik lainnya yang dapat Anda lakukan dengan Cloud Firestore.

Menambahkan pesan ke Firestore

Di bagian ini, Anda akan menambahkan fungsi bagi pengguna untuk menulis pesan baru ke database. Pertama, Anda menambahkan HTML untuk elemen UI (kolom pesan dan tombol kirim). Kemudian, Anda menambahkan kode yang mengaitkan elemen-elemen ini ke database.

Untuk menambahkan elemen UI kolom pesan dan tombol kirim:

1. Di StackBlitz, buka file index.html.
2. Temukan guestbook-container, lalu tambahkan HTML berikut untuk membuat formulir dengan kolom 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

Pengguna yang mengklik tombol SEND akan memicu cuplikan kode di bawah. Fungsi ini menambahkan konten kolom input pesan ke koleksi guestbook database. Secara khusus, metode addDoc menambahkan konten pesan ke dokumen baru (dengan ID yang dibuat secara otomatis) ke koleksi guestbook.

1. Di StackBlitz, buka file index.js.
2. Di bagian atas, temukan pernyataan impor firebase/firestore, lalu tambahkan getFirestore, addDoc, dan collection, seperti ini:

   // ...
   
   // 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 objek db Firestore tepat setelah initializeApp:

   initializeApp(firebaseConfig);
   auth = getAuth();
   db = getFirestore();
   

4. Di bagian bawah fungsi main(), tambahkan kode berikut.
   
   Perhatikan bahwa auth.currentUser.uid adalah referensi ke ID unik yang dibuat secara otomatis yang diberikan Firebase Authentication kepada semua pengguna yang login.

   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();
   

Menampilkan buku tamu hanya kepada pengguna yang login

Anda tentu tidak ingin siapa pun melihat chat tamu. Satu hal yang dapat Anda lakukan untuk mengamankan chat adalah dengan hanya mengizinkan pengguna yang telah masuk untuk melihat buku tamu. Meskipun demikian, untuk aplikasi Anda sendiri, Anda juga perlu mengamankan database dengan Aturan Keamanan Firebase. (Ada informasi selengkapnya tentang aturan keamanan nanti di codelab ini.)

1. Di StackBlitz, buka file index.js.
2. Edit pemroses onAuthStateChanged untuk menyembunyikan dan menampilkan 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';
     }
   });
   

Menguji pengiriman pesan

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

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

Namun, Anda dapat melihat pesan yang baru ditambahkan di Firebase console.

Di Firebase console, di dasbor Database Firestore, Anda akan melihat koleksi guestbook dengan pesan yang baru ditambahkan. Jika Anda terus mengirim pesan, koleksi buku tamu akan berisi banyak dokumen, seperti ini:

Firebase console

Anda merasa buntu atau Anda merasa mungkin melenceng? Berikut adalah link StackBlitz yang diperbarui dengan semua kode ditambahkan hingga titik codelab ini: https://stackblitz.com/edit/firebase-gtk-web-checkpoint2

Pastikan Anda melakukan dua hal di checkpoint ini:

1. Lakukan fork project sehingga itu milik Anda sendiri.
2. Tambahkan objek konfigurasi project Firebase Anda dari Firebase console.

8. Membaca pesan

Menyinkronkan pesan

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

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

Anda akan menambahkan kode yang memproses 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 pemroses yang memproses perubahan yang dilakukan pada data:

1. Di StackBlitz, buka file index.js.
2. Di bagian atas, temukan pernyataan impor firebase/firestore, lalu tambahkan query, orderBy, dan onSnapshot, seperti ini:

   // ...
   import {
     getFirestore,
     addDoc,
     collection,
     query,
     orderBy,
     onSnapshot
   } from 'firebase/firestore';
   

3. Di bagian bawah fungsi main(), tambahkan kode berikut untuk melakukan loop semua dokumen (pesan buku tamu) dalam database. Untuk mempelajari lebih lanjut 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 memproses pesan dalam database, Anda telah membuat kueri pada koleksi tertentu menggunakan fungsi collection. Kode di atas memproses perubahan dalam koleksi guestbook, yang merupakan tempat penyimpanan pesan chat. Pesan juga akan diurutkan menurut tanggal, menggunakan orderBy('timestamp', 'desc') untuk menampilkan pesan terbaru di bagian atas.

Fungsi onSnapshot mengambil dua parameter: kueri yang akan digunakan dan fungsi callback. Fungsi callback dipicu jika ada perubahan pada dokumen yang cocok dengan kueri. Hal ini dapat terjadi jika pesan dihapus, diubah, atau ditambahkan. Untuk mengetahui informasi selengkapnya, lihat dokumentasi Cloud Firestore.

Tips: Untuk pemuatan ulang yang lebih cepat, Anda hanya dapat memperbarui dokumen yang diubah, bukan seluruh daftar. Pelajari lebih lanjut di dokumentasi Cloud Firestore.

Menguji sinkronisasi pesan

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

• Pesan yang telah dibuat sebelumnya dalam database akan ditampilkan di aplikasi. Anda dapat menulis pesan baru; pesan akan langsung muncul.
• Jika Anda membuka ruang kerja di beberapa jendela atau tab, pesan akan disinkronkan secara real time di seluruh tab.
• (Opsional) Anda dapat mencoba menghapus, mengubah, atau menambahkan pesan baru secara manual langsung di bagian Database pada Firebase console; setiap perubahan akan muncul di UI.

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

Pratinjau aplikasi

Anda merasa buntu atau Anda merasa mungkin melenceng? Berikut adalah link StackBlitz yang diperbarui dengan semua kode ditambahkan ke titik codelab ini: https://stackblitz.com/edit/firebase-gtk-web-checkpoint3

Pastikan Anda melakukan dua hal di checkpoint ini:

1. Lakukan fork project sehingga itu milik Anda sendiri.
2. Tambahkan objek konfigurasi project Firebase Anda dari Firebase console.

9. Menyiapkan aturan keamanan dasar

Awalnya Anda menyiapkan Cloud Firestore untuk menggunakan mode pengujian, yang berarti database Anda terbuka untuk pembacaan dan penulisan. Namun, Anda hanya boleh menggunakan mode pengujian selama tahap awal pengembangan. Sebagai praktik terbaik, Anda harus menyiapkan aturan keamanan untuk database saat mengembangkan aplikasi. Keamanan harus menjadi bagian tak terpisahkan dari struktur dan perilaku aplikasi Anda.

Dengan Aturan Keamanan, Anda dapat mengontrol akses ke dokumen dan koleksi di database Anda. Sintaksis aturan yang fleksibel memungkinkan Anda membuat aturan yang cocok dengan apa pun, 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 Build Firebase console, klik Firestore Database, lalu pilih tab Rules (atau klik di sini untuk langsung membuka tab Rules).
2. Anda akan melihat aturan keamanan default berikut, dengan batas waktu akses publik beberapa minggu dari sekarang.

Baca dokumentasi Aturan Keamanan Firebase atau playlist YouTube ini untuk mempelajari aturan keamanan lebih lanjut.

Mengidentifikasi koleksi

Pertama, identifikasi kumpulan tempat aplikasi menulis data.

1. Hapus klausa match /{document=**} yang ada, sehingga aturan Anda terlihat seperti ini:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
     }
   }
   

2. 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 menggunakan UID Authentication sebagai kolom dalam setiap dokumen buku tamu, Anda bisa mendapatkan UID Authentication dan memverifikasi bahwa siapa pun yang mencoba menulis ke dokumen tersebut memiliki UID Authentication yang cocok.

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

   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;
       }
     }
   }
   

2. Klik Publikasikan untuk men-deploy aturan baru.Sekarang, untuk buku tamu, hanya pengguna yang login 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.

Menambahkan aturan validasi

1. Tambahkan validasi data untuk memastikan bahwa semua kolom 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;
       }
     }
   }
   

2. Klik Publikasikan untuk men-deploy aturan baru.

Mereset pemroses

Karena aplikasi Anda sekarang hanya mengizinkan pengguna terautentikasi untuk login, Anda harus memindahkan kueri firestore buku tamu di dalam pemroses Authentication. Jika tidak, error izin akan terjadi dan aplikasi akan terputus saat pengguna logout.

1. Di StackBlitz, buka file index.js.
2. Tarik pemroses onSnapshot koleksi buku tamu ke fungsi baru bernama subscribeGuestbook. Selain itu, tetapkan hasil fungsi onSnapshot ke variabel guestbookListener.
   
   Pemroses onSnapshot Firestore menampilkan fungsi berhenti berlangganan yang dapat Anda gunakan untuk membatalkan pemroses snapshot nanti.

   // ...
   // 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);
       });
     });
   }
   

3. Tambahkan fungsi baru di bawah yang disebut unsubscribeGuestbook. Periksa apakah variabel guestbookListener bukan null, lalu panggil fungsi tersebut untuk membatalkan pemroses.

   // ...
   // Unsubscribe from guestbook updates
   function unsubscribeGuestbook() {
     if (guestbookListener != null) {
       guestbookListener();
       guestbookListener = null;
     }
   }
   

Terakhir, tambahkan fungsi baru ke callback onAuthStateChanged.

4. Tambahkan subscribeGuestbook() di bagian bawah if (user).
5. Tambahkan unsubscribeGuestbook() di bagian bawah pernyataan else.

   // ...
   // 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();
     }
   });
   

Anda merasa buntu atau Anda merasa mungkin melenceng? Berikut adalah link StackBlitz yang diperbarui dengan semua kode ditambahkan ke titik codelab ini: https://stackblitz.com/edit/firebase-gtk-web-checkpoint4

Pastikan Anda melakukan dua hal di checkpoint ini:

1. Lakukan fork project sehingga itu milik Anda sendiri.
2. Tambahkan objek konfigurasi project Firebase Anda dari Firebase console.

10. Langkah bonus: Praktikkan apa yang telah Anda pelajari

Merekam status RSVP tamu

Saat ini, aplikasi Anda hanya memungkinkan orang-orang untuk mulai melakukan chat jika mereka tertarik dengan acara tersebut. Selain itu, satu-satunya cara untuk mengetahui apakah seseorang akan datang adalah dengan mempostingnya di chat. Ayo mari kita mengatur dan memberi tahu orang-orang berapa banyak orang yang akan datang.

Anda akan menambahkan tombol untuk mendaftarkan orang yang ingin menghadiri acara, lalu mengumpulkan jumlah orang yang akan hadir.

1. Di StackBlitz, buka file index.html.
2. Di guestbook-container, tambahkan sekumpulan tombol YES dan NO, seperti berikut:

   <!-- ... -->
     <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

Selanjutnya, daftarkan pemroses untuk klik tombol. Jika pengguna mengklik YA, gunakan UID Autentikasi mereka untuk menyimpan respons ke database.

1. Di StackBlitz, buka file index.js.
2. Di bagian atas, temukan pernyataan impor firebase/firestore, lalu tambahkan doc, setDoc, dan where, seperti ini:

   // ...
   // 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. Di bagian bawah fungsi main(), tambahkan kode berikut untuk memantau status RSVP:

   async function main() {
     // ...
   
     // Listen to RSVP responses
     rsvpYes.onclick = async () => {
     };
     rsvpNo.onclick = async () => {
     };
   }
   main();
   
   

4. Selanjutnya, buat koleksi baru bernama attendees, lalu daftarkan referensi dokumen jika salah satu tombol RSVP diklik. Setel referensi tersebut ke true atau false bergantung pada tombol mana yang 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, 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);
     }
   };
   

Memperbarui Aturan Keamanan

Karena Anda sudah menyiapkan beberapa aturan, data baru yang ditambahkan dengan tombol akan ditolak.

Mengizinkan penambahan ke koleksi attendees

Anda harus memperbarui aturan untuk mengizinkan penambahan item ke koleksi attendees.

1. Untuk koleksi attendees, karena Anda menggunakan UID Autentikasi sebagai nama dokumen, Anda dapat mengambilnya dan memverifikasi bahwa uid pengirim sama dengan dokumen yang mereka tulis. Anda mengizinkan semua orang untuk membaca daftar peserta (karena tidak ada data pribadi di sana), tetapi hanya kreator 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;
       }
     }
   }
   

2. Klik Publikasikan untuk men-deploy aturan baru.

Menambahkan aturan validasi

1. Tambahkan beberapa aturan validasi data untuk memastikan semua kolom 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;
   
       }
     }
   }
   

2. Jangan lupa mengklik Publikasikan untuk men-deploy aturan Anda.
   

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

Membaca status RSVP

Setelah Anda merekam respons, mari kita lihat siapa yang akan datang dan mencerminkannya di UI.

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

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

Selanjutnya, daftarkan pemroses untuk koleksi attendees dan hitung jumlah respons YES:

3. Di StackBlitz, buka file index.js.
4. Di bagian bawah fungsi main(), tambahkan kode berikut untuk memantau status RSVP dan menghitung YA klik.

   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.

5. Buat fungsi yang memeriksa apakah UID Autentikasi saat ini memiliki entri di koleksi attendees, lalu setel class tombol ke 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';
         }
       }
     });
   }
   

6. Selain itu, mari kita buat fungsi untuk berhenti berlangganan. Kunci ini akan digunakan saat pengguna logout.

   // ...
   function unsubscribeCurrentRSVP() {
     if (rsvpListener != null) {
       rsvpListener();
       rsvpListener = null;
     }
     rsvpYes.className = '';
     rsvpNo.className = '';
   }
   

7. Panggil fungsi dari pemroses Authentication.

   // ...
   // 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();
         // Subscribe 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();
       }
     });
   

8. Coba login sebagai beberapa pengguna dan lihat peningkatan jumlah dengan setiap tambahan klik tombol YA.

Pratinjau aplikasi

Anda merasa buntu atau Anda merasa mungkin melenceng? Berikut adalah link StackBlitz yang diperbarui dengan semua kode ditambahkan ke titik codelab ini: https://stackblitz.com/edit/firebase-gtk-web-checkpoint5

Pastikan Anda melakukan dua hal di checkpoint ini:

1. Lakukan fork project sehingga itu milik Anda sendiri.
2. Tambahkan objek konfigurasi project Firebase Anda dari Firebase console.

11. Selamat!

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

Yang telah kita bahas

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

Langkah berikutnya

• Ingin mempelajari Alur Kerja Firebase Developer lebih lanjut? Lihat codelab emulator Firebase untuk mempelajari cara menguji dan menjalankan aplikasi Anda sepenuhnya secara lokal.
• Ingin mempelajari produk Firebase lainnya lebih lanjut? Mungkin Anda ingin menyimpan file gambar yang diupload pengguna? Atau mengirim notifikasi ke pengguna? Baca codelab web Firebase untuk mengetahui codelab yang membahas lebih dalam tentang berbagai produk Firebase untuk web.
• Ingin mempelajari Cloud Firestore lebih lanjut? Mungkin Anda ingin mempelajari subkoleksi dan transaksi? Buka codelab web Cloud Firestore untuk codelab yang membahas Cloud Firestore secara lebih mendalam. Atau lihat serial YouTube ini untuk memahami Cloud Firestore.

Pelajari lebih lanjut

• Situs Firebase: firebase.google.com
• Channel YouTube Firebase

Bagaimana pengalaman Anda?

Kami menantikan masukan Anda. Harap isi formulir yang (yang sangat singkat) di sini.