Kenali Firebase untuk web

1. Tinjauan

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

tangkapan layar dari langkah ini

Apa yang akan Anda pelajari

  • Autentikasi pengguna dengan Firebase Authentication dan FirebaseUI.
  • Sinkronkan data menggunakan Cloud Firestore.
  • Tulis Aturan Keamanan Firebase untuk mengamankan database.

Apa 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 lanjutan di StackBlitz.
  • Kode contoh codelab. Lihat langkah selanjutnya untuk cara mendapatkan kode.

2. Dapatkan kode awal

Dalam codelab ini, Anda membuat aplikasi menggunakan StackBlitz , editor online yang memiliki beberapa alur kerja Firebase yang 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 mem-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 :

tangkapan layar dari langkah ini

Anda sekarang memiliki salinan kode awal sebagai proyek StackBlitz Anda sendiri, yang memiliki nama 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 stylesheet dan beberapa penampung HTML untuk aplikasi. Nanti di codelab ini, Anda akan menghubungkan container ini ke Firebase.

Untuk memulai, mari sedikit lebih mengenal antarmuka StackBlitz.

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

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

tangkapan layar dari langkah ini

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. Di Firebase console, klik Add Project (atau Create a project ), lalu beri nama proyek Firebase Anda Firebase-Web-Codelab .

    tangkapan layar dari langkah ini

  3. Klik opsi pembuatan proyek. Terima persyaratan Firebase jika diminta. Di layar Google Analytics, klik "Jangan Aktifkan", karena Anda tidak akan menggunakan Analytics untuk aplikasi ini.

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

Aktifkan dan siapkan produk Firebase di konsol

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

  • Firebase Authentication dan UI Firebase untuk memungkinkan pengguna masuk ke aplikasi Anda dengan mudah.
  • Cloud Firestore untuk menyimpan data terstruktur di cloud dan mendapatkan notifikasi instan saat data berubah.
  • Aturan Keamanan Firebase untuk mengamankan database Anda.

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

Aktifkan login email untuk Firebase Authentication

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

  1. Di panel sisi kiri Firebase console, klik Build > Authentication . Kemudian klik Mulai . Anda sekarang berada di dasbor Autentikasi, tempat Anda dapat melihat pengguna yang mendaftar, mengonfigurasi penyedia masuk, dan mengelola setelan.

    tangkapan layar dari langkah ini

  2. Pilih tab Metode masuk (atau klik di sini untuk langsung ke tab).

    tangkapan layar dari langkah ini

  3. Klik Email/Kata Sandi dari opsi penyedia, alihkan sakelar ke Aktifkan , lalu klik Simpan .

    tangkapan layar dari langkah ini

Siapkan Cloud Firestore

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

Berikut cara menyiapkan Cloud Firestore:

  1. Di panel sisi kiri Firebase console, klik Build > Firestore Database . Kemudian klik Buat basis data .
  2. Klik Buat basis data .

    tangkapan layar dari langkah ini

  3. 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 Berikutnya .

    tangkapan layar dari langkah ini

  4. Pilih lokasi untuk database Anda (Anda bisa menggunakan default). Perhatikan, bagaimanapun, bahwa lokasi ini tidak dapat diubah nanti.

    tangkapan layar dari langkah ini

  5. Klik Selesai .

5. Tambahkan dan konfigurasikan Firebase

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 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 memasangnya secara lokal menggunakan npm lalu memaketkannya di aplikasi Anda jika Anda menggunakan Browserify.

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

Untuk membangun aplikasi ini, Anda menggunakan pustaka Firebase Authentication, FirebaseUI, dan Cloud Firestore. Untuk codelab ini, pernyataan import 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';

Tambahkan aplikasi web Firebase ke proyek Firebase Anda

  1. Kembali ke Firebase console, arahkan ke halaman ikhtisar proyek Anda dengan mengeklik Ikhtisar Proyek di kiri atas.
  2. Di tengah halaman ikhtisar proyek Anda, klik ikon web ikon aplikasi web untuk membuat aplikasi web Firebase baru.

    tangkapan layar dari langkah ini

  3. Daftarkan aplikasi dengan nama panggilan Aplikasi Web .
  4. Untuk codelab ini, JANGAN centang kotak di sebelah Juga siapkan Firebase Hosting untuk aplikasi ini . Anda akan menggunakan panel pratinjau StackBlitz untuk saat ini.
  5. Klik Daftarkan aplikasi .

    tangkapan layar dari langkah ini

  6. Salin objek konfigurasi Firebase ke papan klip Anda.

    tangkapan layar dari langkah ini

  7. Klik Continue to console .Tambahkan objek konfigurasi Firebase ke aplikasi Anda:
  8. Kembali ke StackBlitz, buka file index.js .
  9. Cari 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 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)

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

Autentikasi pengguna Anda dengan Login Email dan FirebaseUI

Anda memerlukan tombol RSVP yang meminta pengguna untuk masuk dengan alamat email mereka. Anda bisa melakukannya dengan menghubungkan FirebaseUI ke tombol RSVP.FirebaseUI adalah pustaka yang memberi Anda UI bawaan di atas Firebase Auth.

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

  • Memberi tahu FirebaseUI bahwa Anda ingin menggunakan metode masuk Email/Sandi .
  • Menangani panggilan balik untuk proses masuk yang berhasil dan mengembalikan salah untuk menghindari pengalihan. Anda tidak ingin halaman disegarkan karena Anda sedang membuat aplikasi web satu halaman.

Tambahkan kode untuk menginisialisasi FirebaseUI Auth

  1. Di StackBlitz, buka file index.js .
  2. Di bagian atas, temukan pernyataan impor firebase/auth , lalu 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 autentikasi email.
  5. Di bagian bawah fungsi main() di index.js , tambahkan 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. 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 yang sama seperti yang ditampilkan di bawah karena, untuk codelab ini, sudah ada kaitan 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 teruskan ke FirebaseUI untuk menahan login Anda. Pratinjau aplikasi
    <!-- ... -->

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


    tangkapan layar dari langkah ini

  3. Siapkan pemroses pada tombol RSVP dan panggil fungsi mulai FirebaseUI. Ini memberi tahu FirebaseUI bahwa Anda ingin melihat jendela masuk.

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

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 telah mengaktifkan Email/Password sebagai penyedia login di Firebase console.
    Pratinjau aplikasi

     tangkapan layar dari langkah ini

  2. Buka dasbor Autentikasi di konsol Firebase. Di tab Pengguna , Anda akan melihat informasi akun yang Anda masukkan untuk masuk ke aplikasi.

    tangkapan layar dari langkah ini

Tambahkan status autentikasi 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" ke tombol "keluar".

  1. Di StackBlitz, buka file index.js .
  2. Di bagian atas, temukan pernyataan impor firebase/auth , lalu 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 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 pendengar tombol, periksa apakah ada pengguna saat ini dan logout. Untuk melakukannya, ganti startRsvpButton.addEventListener saat ini dengan yang 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 harus beralih kembali ke RSVP saat diklik.

Pratinjau aplikasi

tangkapan layar dari langkah ini

7. Tulis pesan ke Cloud Firestore

Mengetahui bahwa pengguna akan datang memang bagus, tetapi 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 obrolan 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 obrolan sebagai dokumen dalam koleksi tingkat atas yang disebut guestbook .

Grafik model data Firestore menampilkan koleksi buku tamu dengan beberapa dokumen pesan

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 menghubungkan elemen-elemen ini ke database.

Untuk menambahkan elemen UI bidang 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

tangkapan layar dari langkah ini

Pengguna yang mengeklik tombol KIRIM akan memicu cuplikan kode di bawah ini. Itu menambahkan konten bidang input pesan ke koleksi guestbook database. Secara khusus, metode addDoc menambahkan konten pesan ke dokumen baru (dengan ID yang dihasilkan 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:
    // ...

// 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 Firestore db 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 oleh Firebase Authentication untuk semua pengguna yang masuk.
    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 untuk pengguna yang masuk

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

  1. Di StackBlitz, buka file index.js .
  2. Edit listener 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';
  }
});

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 akan melihat pesan tersebut di aplikasi web Anda yang sebenarnya karena Anda masih perlu mengimplementasikan pengambilan data. Anda akan melakukannya selanjutnya.

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

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

Konsol Firebase

tangkapan layar dari langkah ini

8. Baca pesan

Sinkronkan 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 memicu 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 dalam 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 atas, temukan pernyataan impor firebase/firestore , lalu tambahkan query , orderBy , dan onSnapshot , seperti:
    // ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
  3. Di bagian bawah fungsi main() , tambahkan kode berikut untuk mengulangi semua dokumen (pesan buku tamu) di 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 kueri pada koleksi tertentu dengan menggunakan fungsi collection . Kode di atas mendengarkan perubahan pada koleksi guestbook , tempat pesan obrolan disimpan. Pesan juga diurutkan berdasarkan 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 panggilan balik dipicu saat ada perubahan pada dokumen yang cocok dengan kueri. Ini bisa jadi jika pesan dihapus, dimodifikasi, atau ditambahkan. Untuk informasi selengkapnya, lihat dokumentasi Cloud Firestore .

Uji sinkronisasi pesan

Cloud Firestore secara otomatis dan langsung 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 seketika.
  • 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 di Firebase console; setiap perubahan akan muncul di UI.

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

Pratinjau aplikasi

tangkapan layar dari langkah ini

9. Siapkan aturan keamanan dasar

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 awal pengembangan. Sebagai praktik terbaik, Anda harus menyiapkan aturan keamanan untuk database saat mengembangkan aplikasi. Keamanan harus terintegrasi dengan 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 Build Firebase console, klik Firestore Database , lalu pilih tab Aturan (atau klik di sini untuk langsung ke tab Aturan ).
  2. Anda akan melihat aturan keamanan default berikut, dengan batas waktu akses publik beberapa minggu dari hari ini.

tangkapan layar dari langkah ini

Mengidentifikasi koleksi

Pertama, identifikasi koleksi tempat aplikasi menulis data.

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

  1. Tambahkan aturan baca dan tulis ke set 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;
    }
  }
}
  2. Klik Terbitkan untuk menerapkan aturan baru Anda. Sekarang, untuk buku tamu, hanya pengguna yang masuk yang dapat membaca pesan (pesan apa saja!), tetapi Anda hanya dapat membuat pesan menggunakan ID pengguna Anda. Kami juga tidak mengizinkan pesan untuk diedit atau dihapus.

Tambahkan aturan validasi

  1. 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;
    }
  }
}
  2. Klik Terbitkan untuk menerapkan aturan baru Anda.

Setel ulang pendengar

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

  1. Di StackBlitz, buka file index.js .
  2. Tarik koleksi buku tamu di pendengar onSnapshot ke dalam fungsi baru bernama subscribeGuestbook . Juga, tetapkan hasil fungsi onSnapshot ke variabel guestbookListener .

    Pemroses Firestore onSnapshot mengembalikan fungsi berhenti berlangganan yang nantinya dapat Anda gunakan untuk membatalkan pemroses snapshot.
    // ...
// 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 bawahnya bernama unsubscribeGuestbook . Periksa apakah variabel guestbookListener bukan null, lalu panggil fungsi untuk membatalkan pendengar.
    // ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}

Terakhir, tambahkan fungsi baru ke callback onAuthStateChanged .

  1. Tambahkan subscribeGuestbook() di bagian bawah if (user) .
  2. 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();
  }
});

10. Langkah bonus: Latih apa yang telah Anda pelajari

Rekam status RSVP peserta

Saat ini, aplikasi Anda hanya mengizinkan 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 teratur dan beri tahu orang-orang berapa banyak orang yang akan datang.

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

  1. Di StackBlitz, buka file index.html .
  2. Di 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

tangkapan layar dari langkah ini

Selanjutnya, daftarkan pendengar untuk klik tombol. Jika pengguna mengklik YES , gunakan UID Otentikasi 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:
    // ...
// 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 mendengarkan status RSVP:
    async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();
  4. Selanjutnya, buat koleksi baru yang disebut attendees , lalu daftarkan referensi dokumen jika salah satu tombol RSVP diklik. Tetapkan referensi itu ke true atau false tergantung 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);
  }
};
    Lalu, 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);
  }
};

Perbarui Aturan Keamanan Anda

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

Izinkan penambahan ke koleksi attendees

Anda harus memperbarui aturan untuk mengizinkan penambahan ke koleksi attendees .

  1. Untuk koleksi attendees , karena Anda menggunakan UID Otentikasi 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 pembuat 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 Terbitkan untuk menerapkan aturan baru Anda.

Tambahkan aturan validasi

  1. Tambahkan beberapa aturan 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;

    }
  }
}
  2. Jangan lupa klik Publikasikan untuk menerapkan aturan Anda!

(Opsional) Sekarang Anda dapat melihat hasil klik tombol. Buka dasbor Cloud Firestore Anda di konsol Firebase.

Baca status RSVP

Sekarang setelah Anda mencatat tanggapannya, mari kita lihat siapa yang datang dan merefleksikannya 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 pendengar untuk koleksi attendees dan hitung jumlah respons YA :

  1. Di StackBlitz, buka file index.js .
  2. Di bagian bawah fungsi main() , tambahkan kode berikut untuk mendengarkan status RSVP dan menghitung klik YA .
    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 sorot tombol yang sesuai dengan status saat ini.

  1. Buat fungsi yang memeriksa apakah UID Otentikasi saat ini memiliki entri di koleksi attendees , lalu setel kelas 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';
      }
    }
  });
}
  2. Juga, mari buat fungsi untuk berhenti berlangganan. Ini akan digunakan saat 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. Coba masuk sebagai banyak pengguna dan lihat peningkatan jumlah dengan setiap klik tombol YA tambahan.

Pratinjau aplikasi

tangkapan layar dari langkah ini

11. Selamat!

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

Apa yang telah kita bahas

  • Otentikasi Firebase
  • FirebaseUI
  • Toko Api Awan
  • Aturan Keamanan Firebase

Langkah selanjutnya

  • Ingin mempelajari lebih lanjut Alur Kerja Pengembang Firebase? Lihat codelab emulator Firebase untuk mempelajari cara menguji dan menjalankan aplikasi Anda sepenuhnya secara lokal.
  • Ingin mempelajari lebih lanjut tentang produk Firebase lainnya? Mungkin Anda ingin menyimpan file gambar yang diunggah pengguna? Atau kirim notifikasi ke pengguna Anda? Lihat codelab web Firebase untuk mengetahui codelab yang membahas lebih dalam 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 membahas lebih mendalam tentang Cloud Firestore. Atau lihat serial YouTube ini untuk mengenal Cloud Firestore !

Belajarlah lagi

Bagaimana hasilnya?

Kami akan senang umpan balik Anda! Harap isi formulir (sangat) singkat di sini .