หน้านี้ได้รับการแปลโดย Cloud Translation API

ทำความรู้จักกับ Firebase สำหรับเว็บ

1. ภาพรวม

ใน Codelab นี้ คุณจะได้เรียนรู้พื้นฐานบางอย่างของ Firebase เพื่อสร้างเว็บแอปพลิเคชันแบบโต้ตอบ คุณจะสร้างการตอบกลับกิจกรรมและแอปแชทสมุดเยี่ยมโดยใช้ผลิตภัณฑ์ Firebase หลายอย่าง

สกรีนช็อตของขั้นตอนนี้

สิ่งที่คุณจะได้เรียนรู้

ตรวจสอบผู้ใช้ด้วย Firebase Authentication และ FirebaseUI
ซิงค์ข้อมูลโดยใช้ Cloud Firestore
เขียนกฎความปลอดภัยของ Firebase เพื่อรักษาความปลอดภัยฐานข้อมูล

สิ่งที่คุณต้องการ

เบราว์เซอร์ที่คุณเลือก เช่น Chrome
เข้าถึง stackblitz.com (ไม่จำเป็นต้องมีบัญชีหรือลงชื่อเข้าใช้)
บัญชี Google เช่น บัญชี Gmail เราขอแนะนำบัญชีอีเมลที่คุณใช้อยู่แล้วสำหรับบัญชี GitHub ของคุณ สิ่งนี้ทำให้คุณสามารถใช้คุณสมบัติขั้นสูงใน StackBlitz
โค้ดตัวอย่างของ Codelab ดูขั้นตอนถัดไปสำหรับวิธีรับรหัส

2. รับรหัสเริ่มต้น

ใน Codelab นี้ คุณสร้างแอปโดยใช้ StackBlitz ซึ่งเป็นโปรแกรมแก้ไขออนไลน์ที่มีเวิร์กโฟลว์ Firebase หลายรายการรวมอยู่ด้วย Stackblitz ไม่ต้องการการติดตั้งซอฟต์แวร์หรือบัญชี StackBlitz พิเศษ

StackBlitz ช่วยให้คุณแบ่งปันโครงการกับผู้อื่น คนอื่นๆ ที่มี URL โปรเจ็กต์ StackBlitz ของคุณสามารถเห็นโค้ดของคุณและแยกโปรเจ็กต์ของคุณ แต่ไม่สามารถแก้ไขโปรเจ็กต์ StackBlitz ของคุณได้

ไปที่ URL นี้สำหรับรหัสเริ่มต้น: https://stackblitz.com/edit/firebase-gtk-web-start
ที่ด้านบนของหน้า StackBlitz ให้คลิก Fork :

สกรีนช็อตของขั้นตอนนี้

ตอนนี้คุณมีสำเนาของโค้ดเริ่มต้นเป็นโปรเจ็กต์ StackBlitz ของคุณเองแล้ว ซึ่งมีชื่อไม่ซ้ำกัน พร้อมด้วย URL ที่ไม่ซ้ำกัน ไฟล์และการเปลี่ยนแปลงทั้งหมดของคุณจะถูกบันทึกไว้ในโปรเจ็กต์ StackBlitz นี้

3. แก้ไขข้อมูลกิจกรรม

เอกสารเริ่มต้นสำหรับ Codelab นี้มีโครงสร้างบางอย่างสำหรับเว็บแอป รวมถึงสไตล์ชีตและคอนเทนเนอร์ HTML สองสามรายการสำหรับแอป ต่อมาใน Codelab นี้ คุณจะเชื่อมต่อคอนเทนเนอร์เหล่านี้กับ Firebase

ในการเริ่มต้น มาทำความคุ้นเคยกับอินเทอร์เฟซ StackBlitz กันสักหน่อย

ใน StackBlitz ให้เปิดไฟล์ index.html
ค้นหา event-details-container และ description-container จากนั้นลองแก้ไขรายละเอียดกิจกรรมบางอย่าง

เมื่อคุณแก้ไขข้อความ การโหลดหน้าซ้ำอัตโนมัติใน StackBlitz จะแสดงรายละเอียดกิจกรรมใหม่ เจ๋งใช่มั้ย

<!-- ... -->

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

<!-- ... -->

ตัวอย่างแอปของคุณควรมีลักษณะดังนี้:

ตัวอย่างแอป

สกรีนช็อตของขั้นตอนนี้

4. สร้างและตั้งค่าโปรเจ็กต์ Firebase

การแสดงข้อมูลกิจกรรมเป็นสิ่งที่ดีสำหรับแขกของคุณ แต่การแสดงกิจกรรมเพียงอย่างเดียวไม่เป็นประโยชน์สำหรับทุกคน มาเพิ่มฟังก์ชันการทำงานแบบไดนามิกให้กับแอปนี้กันเถอะ สำหรับสิ่งนี้ คุณจะต้องเชื่อมต่อ Firebase กับแอปของคุณ ในการเริ่มต้นใช้งาน Firebase คุณจะต้องสร้างและตั้งค่าโปรเจ็กต์ Firebase

สร้างโปรเจ็กต์ Firebase

ลงชื่อเข้าใช้ Firebase
ในคอนโซล Firebase ให้คลิก เพิ่มโปรเจ็ กต์ (หรือ สร้างโปรเจ็ กต์ ) จากนั้นตั้งชื่อโปรเจ็ กต์ Firebase Firebase-Web-Codelab
คลิกผ่านตัวเลือกการสร้างโครงการ ยอมรับข้อกำหนดของ Firebase หากได้รับแจ้ง ในหน้าจอ Google Analytics ให้คลิก "ไม่เปิดใช้งาน" เนื่องจากคุณจะไม่ได้ใช้ Analytics สำหรับแอปนี้

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโปรเจ็กต์ Firebase โปรดดู ทำความเข้าใจโปรเจ็กต์ Firebase

เปิดใช้งานและตั้งค่าผลิตภัณฑ์ Firebase ในคอนโซล

แอปที่คุณกำลังสร้างใช้ผลิตภัณฑ์ Firebase หลายอย่างที่พร้อมใช้งานสำหรับเว็บแอป:

การ ตรวจสอบสิทธิ์ Firebase และ UI ของ Firebase เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณได้อย่างง่ายดาย
Cloud Firestore เพื่อบันทึกข้อมูลที่มีโครงสร้างบนคลาวด์และรับการแจ้งเตือนทันทีเมื่อข้อมูลเปลี่ยนแปลง
กฎความปลอดภัยของ Firebase เพื่อรักษาความปลอดภัยฐานข้อมูลของคุณ

ผลิตภัณฑ์เหล่านี้บางส่วนต้องมีการกำหนดค่าพิเศษหรือต้องเปิดใช้งานโดยใช้คอนโซล Firebase

ในการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้เว็บแอป คุณจะต้องใช้วิธีลงชื่อเข้าใช้ อีเมล/รหัสผ่าน สำหรับ Codelab นี้:

ในแผงด้านซ้ายของคอนโซล Firebase คลิก Build > Authentication จากนั้นคลิก เริ่มต้น ใช้งาน ตอนนี้คุณอยู่ในแดชบอร์ดการตรวจสอบสิทธิ์ ซึ่งคุณสามารถดูผู้ใช้ที่ลงทะเบียน กำหนดค่าผู้ให้บริการลงชื่อเข้าใช้ และจัดการการตั้งค่า
เลือกแท็บ วิธีการลงชื่อเข้าใช้ (หรือ คลิกที่นี่ เพื่อไปที่แท็บโดยตรง)
คลิก อีเมล/รหัสผ่าน จากตัวเลือกผู้ให้บริการ สลับสวิตช์ไปที่ เปิดใช้งาน จากนั้นคลิก บันทึก

ตั้งค่า Cloud Firestore

เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่

วิธีตั้งค่า Cloud Firestore มีดังนี้

ในแผงด้านซ้ายของคอนโซล Firebase คลิก Build > Firestore Database จากนั้นคลิก สร้างฐานข้อมูล
คลิก สร้างฐานข้อมูล
เลือกตัวเลือก เริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย โหมดทดสอบช่วยให้แน่ใจว่าคุณสามารถเขียนฐานข้อมูลได้อย่างอิสระในระหว่างการพัฒนา คลิก ถัดไป

ข้อควรระวัง: ในขั้นตอนแรกของ Codelab นี้ คุณใช้โหมดทดสอบ ต่อมาใน Codelab คุณจะต้องเขียนกฎความปลอดภัยของ Firebase เพื่อรักษาความปลอดภัยฐานข้อมูลของคุณ
สำหรับแอปของคุณ โดยเฉพาะแอปที่ใช้งานจริง คุณจำเป็นต้องรักษาความปลอดภัยฐานข้อมูลโดยใช้กฎความปลอดภัย เรียนรู้เพิ่มเติมเกี่ยวกับกฎความปลอดภัยใน เอกสารประกอบ Firebase
เลือกตำแหน่งสำหรับฐานข้อมูลของคุณ (คุณสามารถใช้ค่าเริ่มต้นได้) อย่างไรก็ตาม โปรดทราบว่าสถานที่นี้ไม่สามารถเปลี่ยนแปลงได้ในภายหลัง
คลิก เสร็จสิ้น

5. เพิ่มและกำหนดค่า Firebase

เมื่อคุณสร้างโปรเจ็กต์ Firebase และเปิดใช้งานบริการบางอย่างแล้ว คุณต้องบอกรหัสว่าคุณต้องการใช้ Firebase รวมถึงโปรเจ็กต์ Firebase ที่จะใช้

เพิ่มไลบรารี Firebase

เพื่อให้แอปของคุณใช้ Firebase คุณต้องเพิ่มไลบรารี Firebase ลงในแอป มีหลายวิธีในการทำเช่นนี้ ตามที่ อธิบายไว้ในเอกสารประกอบ Firebase ตัวอย่างเช่น คุณสามารถเพิ่มไลบรารีจาก CDN ของ Google หรือคุณสามารถติดตั้งไลบรารี่ในเครื่องโดยใช้ npm แล้วจัดแพ็คเกจในแอปของคุณหากคุณใช้ Browserify

StackBlitz มีการรวมกลุ่มอัตโนมัติ ดังนั้นคุณสามารถเพิ่มไลบรารี Firebase โดยใช้คำสั่งนำเข้า คุณจะใช้ไลบรารีเวอร์ชันโมดูลาร์ (v9) ซึ่งช่วยลดขนาดโดยรวมของหน้าเว็บ แม้ว่ากระบวนการที่เรียกว่า "การเขย่าต้นไม้" คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับโมดูลาร์ SDK ได้ใน เอกสาร

ในการสร้างแอปนี้ คุณต้องใช้ไลบรารี Firebase Authentication, FirebaseUI และ Cloud Firestore สำหรับ Codelab นี้ คำสั่งการนำเข้าต่อไปนี้จะรวมอยู่ที่ด้านบนสุดของไฟล์ index.js แล้ว และเราจะนำเข้าวิธีการเพิ่มเติมจากไลบรารี Firebase แต่ละรายการต่อไป:

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

เพิ่มเว็บแอป Firebase ให้กับโปรเจ็กต์ Firebase

กลับไปที่คอนโซล Firebase ไปที่หน้าภาพรวมของโปรเจ็กต์โดยคลิก ภาพรวมโปรเจ็ กต์ที่ด้านซ้ายบน
ที่ตรงกลางหน้าภาพรวมของโปรเจ็กต์ของคุณ ให้คลิกไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
ลงทะเบียนแอพด้วยชื่อเล่น Web App
สำหรับ Codelab นี้ อย่าทำเครื่องหมายที่ช่องถัดจาก Also set up Firebase Hosting for this app คุณจะใช้บานหน้าต่างแสดงตัวอย่างของ StackBlitz ในตอนนี้
คลิก ลงทะเบียนแอป
Stackblitz จัดการการพึ่งพาของคุณ ดังนั้นคุณจึงสามารถข้ามขั้นตอนการ npm install firebase ที่แสดงในคอนโซลได้
คัดลอก ออบเจ็กต์การกำหนดค่า Firebase ไปยังคลิปบอร์ดของคุณ
คลิก ดำเนินการต่อเพื่อคอนโซล เพิ่มออบเจ็กต์การกำหนดค่า Firebase ในแอปของคุณ:
กลับไปที่ StackBlitz ไปที่ไฟล์ index.js
ค้นหา Add Firebase project configuration object here บรรทัดความคิดเห็น จากนั้นวางข้อมูลโค้ดการกำหนดค่าของคุณด้านล่างความคิดเห็น

เพิ่มการเรียกใช้ฟังก์ชัน initializeApp เพื่อตั้งค่า Firebase โดยใช้การกำหนดค่าโปรเจ็กต์ Firebase เฉพาะของคุณ

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

หากคุณพลาด ข้อมูลโค้ด firebaseConfig (หรือต้องการใช้ที่จุดตรวจ)...

คุณรับออบเจ็กต์การกำหนดค่าโปรเจ็กต์ Firebase ได้จากคอนโซล Firebase

ในคอนโซล Firebase คลิกไอคอนการตั้งค่าที่มุมซ้ายบน จากนั้นเลือก การตั้งค่าโปรเจ็ กต์
ในแท็บ ทั่วไป ให้เลื่อนลงไปที่การ์ด แอปของคุณ
คลิกเว็บแอป แล้วเลือกตัวเลือกการ กำหนด ค่าสำหรับข้อมูลโค้ด Firebase SDK
คัดลอกข้อมูลโค้ดการกำหนดค่าทั้งหมดไปยังคลิปบอร์ดของคุณ

สกรีนช็อตของขั้นตอนนี้

6. เพิ่มการลงชื่อเข้าใช้ของผู้ใช้ (RSVP)

เมื่อคุณได้เพิ่ม Firebase ลงในแอปแล้ว คุณสามารถตั้งค่าปุ่ม RSVP ที่ลงทะเบียนผู้คนโดยใช้ Firebase Authentication

คุณจะต้องมีปุ่ม RSVP ที่แจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยที่อยู่อีเมลของพวกเขา คุณสามารถทำได้โดยเชื่อมต่อ FirebaseUI กับปุ่ม RSVP FirebaseUI เป็นไลบรารีที่ให้ UI ที่สร้างไว้ล่วงหน้าแก่คุณที่ด้านบนของ Firebase Auth

FirebaseUI ต้องการการกำหนดค่า (ดูตัวเลือกใน เอกสารประกอบ ) ที่ทำสองสิ่ง:

บอก FirebaseUI ว่าคุณต้องการใช้วิธีลงชื่อเข้าใช้ อีเมล/รหัสผ่าน
จัดการการโทรกลับสำหรับการลงชื่อเข้าใช้ที่สำเร็จและคืนค่าเท็จเพื่อหลีกเลี่ยงการเปลี่ยนเส้นทาง คุณไม่ต้องการให้หน้ารีเฟรชเพราะคุณกำลังสร้างเว็บแอปหน้าเดียว

เพิ่มรหัสเพื่อเริ่มต้น FirebaseUI Auth

ใน StackBlitz ไปที่ไฟล์ index.js
ที่ด้านบน ให้ค้นหาคำสั่งนำเข้า firebase firebase/auth จากนั้นเพิ่ม getAuth และ EmailAuthProvider เช่น
```
// ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';
```
บันทึกการอ้างอิงไปยังวัตถุ auth ทันทีหลังจาก initializeApp เช่นนั้น:
```
initializeApp(firebaseConfig);
auth = getAuth();
```
โปรดสังเกตว่าการกำหนดค่า FirebaseUI มีให้ในโค้ดเริ่มต้นแล้ว มีการตั้งค่าให้ใช้ผู้ให้บริการตรวจสอบสิทธิ์อีเมลแล้ว
ที่ด้านล่างของฟังก์ชัน main() ใน index.js ให้เพิ่มคำสั่งการเริ่มต้น FirebaseUI เช่น:
```
async function main() {
  // ...

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

เพิ่มปุ่ม RSVP ให้กับ HTML

ใน StackBlitz ไปที่ไฟล์ index.html
เพิ่ม HTML สำหรับปุ่ม RSVP ภายใน event-details-container ตามที่แสดงในตัวอย่างด้านล่าง

โปรดใช้ความระมัดระวังในการใช้ค่า id เดียวกันกับที่แสดงด้านล่าง เนื่องจากสำหรับ codelab นี้ มี hooks สำหรับ ID เฉพาะเหล่านี้ในไฟล์ index.js

โปรดทราบว่าในไฟล์ index.html มีคอนเทนเนอร์ที่มี ID firebaseui-auth-container นี่คือ ID ที่คุณจะส่งผ่านไปยัง FirebaseUI เพื่อเก็บข้อมูลการเข้าสู่ระบบของคุณ
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
ตัวอย่างแอป
ตั้งค่าผู้ฟังบนปุ่ม RSVP และเรียกใช้ฟังก์ชันเริ่มต้นของ FirebaseUI สิ่งนี้จะบอก FirebaseUI ว่าคุณต้องการเห็นหน้าต่างลงชื่อเข้าใช้

เพิ่มรหัสต่อไปนี้ที่ด้านล่างของฟังก์ชัน main() ใน index.js :
```
async function main() {
  // ...

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

ทดสอบการลงชื่อเข้าใช้แอป

ในหน้าต่างแสดงตัวอย่างของ StackBlitz ให้คลิกปุ่ม RSVP เพื่อลงชื่อเข้าใช้แอป
- สำหรับ Codelab นี้ คุณสามารถใช้ที่อยู่อีเมลใดก็ได้ แม้แต่ที่อยู่อีเมลปลอม เนื่องจากคุณไม่ได้ตั้งค่าขั้นตอนการยืนยันอีเมลสำหรับ Codelab นี้
- หากคุณเห็นข้อความแสดงข้อผิดพลาดที่ระบุว่า auth/operation-not-allowed หรือ The given sign-in provider is disabled for this Firebase project ให้ตรวจสอบว่าคุณเปิดใช้งาน อีเมล/รหัสผ่าน เป็นผู้ให้บริการลงชื่อเข้าใช้ในคอนโซล Firebase
ตัวอย่างแอป
ไปที่ แดชบอร์ดการ ตรวจสอบสิทธิ์ ในคอนโซล Firebase ในแท็บ ผู้ใช้ คุณควรเห็นข้อมูลบัญชีที่คุณป้อนเพื่อลงชื่อเข้าใช้แอป

เพิ่มสถานะการตรวจสอบสิทธิ์ให้กับ UI

ขั้นต่อไป ตรวจสอบให้แน่ใจว่า UI สะท้อนถึงข้อเท็จจริงที่คุณลงชื่อเข้าใช้

คุณจะใช้การเรียกกลับตัวฟังสถานะการตรวจสอบสิทธิ์ของ Firebase ซึ่งจะได้รับแจ้งทุกครั้งที่สถานะการลงชื่อเข้าใช้ของผู้ใช้เปลี่ยนแปลง หากปัจจุบันมีผู้ใช้ที่ลงชื่อเข้าใช้ แอปของคุณจะสลับปุ่ม "RSVP" เป็นปุ่ม "ออกจากระบบ"

ใน StackBlitz ไปที่ไฟล์ index.js

ที่ด้านบน ให้ค้นหาคำสั่งนำเข้า firebase firebase/auth จากนั้นเพิ่ม signOut และ onAuthStateChanged เช่น:

// ...
// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {} from 'firebase/firestore';

เพิ่มรหัสต่อไปนี้ที่ด้านล่างของฟังก์ชัน main() :

async function main() {
  // ...

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

ในตัวฟังปุ่ม ให้ตรวจสอบว่ามีผู้ใช้ปัจจุบันหรือไม่และออกจากระบบ เมื่อต้องการทำสิ่งนี้ ให้ แทนที่ startRsvpButton.addEventListener ปัจจุบันด้วยค่าต่อไปนี้:
```
// ...
// 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);
  }
});
```

ตอนนี้ ปุ่มในแอปของคุณควรแสดง LOGOUT และควรเปลี่ยนกลับเป็น RSVP เมื่อมีการคลิก

ตัวอย่างแอป

สกรีนช็อตของขั้นตอนนี้

7. เขียนข้อความไปยัง Cloud Firestore

การรู้ว่าผู้ใช้กำลังมานั้นยอดเยี่ยม แต่ให้แขกคนอื่นทำอย่างอื่นในแอป จะเกิดอะไรขึ้นหากพวกเขาสามารถฝากข้อความไว้ในสมุดเยี่ยมได้? พวกเขาสามารถแบ่งปันได้ว่าทำไมพวกเขาถึงตื่นเต้นที่จะมาหรือใครที่พวกเขาหวังว่าจะได้พบ

ในการจัดเก็บข้อความแชทที่ผู้ใช้เขียนในแอป คุณจะต้องใช้ Cloud Firestore

แบบจำลองข้อมูล

Cloud Firestore เป็นฐานข้อมูล NoSQL และข้อมูลที่จัดเก็บไว้ในฐานข้อมูลจะถูกแบ่งออกเป็นคอลเล็กชัน เอกสาร ฟิลด์ และคอลเล็กชันย่อย คุณจะเก็บแต่ละข้อความของการแชทเป็นเอกสารในคอลเลกชั่นระดับบนสุดที่เรียกว่า guestbook

กราฟิกโมเดลข้อมูล Firestore แสดงคอลเล็กชันสมุดเยี่ยมพร้อมเอกสารข้อความหลายฉบับ

เพิ่มข้อความไปที่ Firestore

ในส่วนนี้ คุณจะเพิ่มฟังก์ชันให้ผู้ใช้เขียนข้อความใหม่ลงในฐานข้อมูล ขั้นแรก คุณเพิ่ม HTML สำหรับองค์ประกอบ UI (ช่องข้อความและปุ่มส่ง) จากนั้น ให้คุณเพิ่มโค้ดที่เชื่อมโยงองค์ประกอบเหล่านี้เข้ากับฐานข้อมูล

ในการเพิ่มองค์ประกอบ UI ของฟิลด์ข้อความและปุ่มส่ง:

ใน StackBlitz ไปที่ไฟล์ index.html

ค้นหาที่เก็บ guestbook-container จากนั้นเพิ่ม HTML ต่อไปนี้เพื่อสร้างแบบฟอร์มที่มีช่องป้อนข้อความและปุ่มส่ง

<!-- ... -->

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

<!-- ... -->

ตัวอย่างแอป

สกรีนช็อตของขั้นตอนนี้

ผู้ใช้ที่คลิกปุ่ม ส่ง จะเรียกข้อมูลโค้ดด้านล่าง จะเพิ่มเนื้อหาของฟิลด์ป้อนข้อความไปยังคอลเลกชัน guestbook ของฐานข้อมูล โดยเฉพาะอย่างยิ่ง เมธอด addDoc จะเพิ่มเนื้อหาข้อความในเอกสารใหม่ (ด้วย ID ที่สร้างขึ้นโดยอัตโนมัติ) ไปยังคอลเลกชั่น guestbook

ใน StackBlitz ไปที่ไฟล์ index.js

ที่ด้านบน ให้ค้นหาคำสั่งการนำเข้า firebase firebase/firestore จากนั้นเพิ่ม getFirestore , addDoc และ collection เช่น:

// ...

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

ตอนนี้เราจะบันทึกการอ้างอิงไปยังวัตถุ Firestore db ทันทีหลังจาก initializeApp :
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

ที่ด้านล่างของฟังก์ชัน main() ให้เพิ่มโค้ดต่อไปนี้

โปรดทราบว่า auth.currentUser.uid เป็นข้อมูลอ้างอิงถึง ID เฉพาะที่สร้างโดยอัตโนมัติซึ่ง Firebase Authentication มอบให้สำหรับผู้ใช้ที่เข้าสู่ระบบทั้งหมด

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

แสดงสมุดเยี่ยมเฉพาะผู้ใช้ที่ลงชื่อเข้าใช้

คุณไม่ต้องการให้ ใคร เห็นการสนทนาของแขก สิ่งหนึ่งที่คุณสามารถทำได้เพื่อรักษาความปลอดภัยของแชทคืออนุญาตให้เฉพาะผู้ใช้ที่ลงชื่อเข้าใช้เท่านั้นที่จะดูสมุดเยี่ยมได้ อย่างไรก็ตาม สำหรับแอปของคุณเอง คุณจะต้องรักษาความปลอดภัยฐานข้อมูลด้วย Firebase Security Rules (มีข้อมูลเพิ่มเติมเกี่ยวกับกฎความปลอดภัยใน Codelab ในภายหลัง)

ใน StackBlitz ไปที่ไฟล์ index.js

แก้ไข Listener onAuthStateChanged เพื่อซ่อนและแสดงสมุดเยี่ยม

// ...

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

ทดสอบการส่งข้อความ

ตรวจสอบให้แน่ใจว่าคุณลงชื่อเข้าใช้แอพแล้ว
ป้อนข้อความเช่น "เฮ้!" จากนั้นคลิก ส่ง

การดำเนินการนี้จะเขียนข้อความไปยังฐานข้อมูล Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อความในเว็บแอปจริงของคุณ เนื่องจากคุณยังต้องใช้การดึงข้อมูล คุณจะทำอย่างนั้นต่อไป

แต่คุณสามารถดูข้อความที่เพิ่มใหม่ได้ในคอนโซล Firebase

ในคอนโซล Firebase ใน แดชบอร์ด ฐานข้อมูล Firestore คุณควรเห็นคอลเล็กชัน guestbook พร้อมข้อความที่เพิ่มใหม่ หากคุณยังคงส่งข้อความ คอลเลกชั่นสมุดเยี่ยมชมของคุณจะมีเอกสารจำนวนมากดังนี้:

คอนโซล Firebase

สกรีนช็อตของขั้นตอนนี้

8. อ่านข้อความ

ประสานข้อความ

เป็นเรื่องดีที่แขกสามารถเขียนข้อความไปยังฐานข้อมูลได้ แต่ยังไม่เห็นข้อความดังกล่าวในแอป

ในการแสดงข้อความ คุณจะต้องเพิ่ม Listener ที่จะทริกเกอร์เมื่อข้อมูลเปลี่ยนแปลง จากนั้นจึงสร้างองค์ประกอบ UI ที่แสดงข้อความใหม่

คุณจะเพิ่มโค้ดที่ฟังข้อความที่เพิ่มใหม่จากแอป ขั้นแรก เพิ่มส่วนใน HTML เพื่อแสดงข้อความ:

ใน StackBlitz ไปที่ไฟล์ index.html

ใน guestbook-container ให้เพิ่มส่วนใหม่ด้วย ID ของ guestbook

<!-- ... -->

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

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

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

 </section>

<!-- ... -->

ถัดไป ลงทะเบียนผู้ฟังที่รับฟังการเปลี่ยนแปลงที่ทำกับข้อมูล:

ใน StackBlitz ไปที่ไฟล์ index.js
ที่ด้านบน ให้ค้นหาคำสั่งนำเข้า firebase/firestore จากนั้นเพิ่ม query , orderBy และ onSnapshot เช่น:
```
// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
```
ที่ด้านล่างของฟังก์ชัน main() ให้เพิ่มโค้ดต่อไปนี้เพื่อวนซ้ำในเอกสารทั้งหมด (ข้อความสมุดเยี่ยม) ในฐานข้อมูล หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่เกิดขึ้นในโค้ดนี้ โปรดอ่านข้อมูลด้านล่างตัวอย่าง
```
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();
```

ในการฟังข้อความในฐานข้อมูล คุณได้สร้างคิวรีในคอลเลกชั่นเฉพาะโดยใช้ฟังก์ชัน collection ชั่น รหัสด้านบนจะรับฟังการเปลี่ยนแปลงในคอลเลกชั่น guestbook ซึ่งเป็นที่จัดเก็บข้อความแชท ข้อความยังเรียงลำดับตามวันที่ โดยใช้ orderBy('timestamp', 'desc') เพื่อแสดงข้อความใหม่ล่าสุดที่ด้านบน

ฟังก์ชัน onSnapshot ใช้พารามิเตอร์ 2 ตัว ได้แก่ คิวรีที่จะใช้และฟังก์ชันเรียกกลับ ฟังก์ชันเรียกกลับจะถูกทริกเกอร์เมื่อมีการเปลี่ยนแปลงใดๆ ในเอกสารที่ตรงกับคิวรี อาจเป็นได้หากข้อความถูกลบ แก้ไข หรือเพิ่ม สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารประกอบของ Cloud Firestore

ทดสอบการซิงโครไนซ์ข้อความ

Cloud Firestore จะซิงโครไนซ์ข้อมูลกับไคลเอนต์ที่สมัครรับข้อมูลฐานข้อมูลโดยอัตโนมัติและทันที

ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงในแอพ รู้สึกอิสระที่จะเขียนข้อความใหม่ ควรปรากฏขึ้นทันที
หากคุณเปิดพื้นที่ทำงานในหลายหน้าต่างหรือหลายแท็บ ข้อความจะซิงค์ตามเวลาจริงในแท็บต่างๆ
(ไม่บังคับ) คุณสามารถลองลบ แก้ไข หรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน ฐานข้อมูล ของคอนโซล Firebase การเปลี่ยนแปลงใดๆ ควรปรากฏใน UI

ยินดีด้วย! คุณกำลังอ่านเอกสาร Cloud Firestore ในแอปของคุณ!

ตัวอย่างแอป

สกรีนช็อตของขั้นตอนนี้

9. ตั้งกฎความปลอดภัยพื้นฐาน

ในตอนแรก คุณตั้งค่า Cloud Firestore ให้ใช้โหมดทดสอบ ซึ่งหมายความว่าฐานข้อมูลของคุณเปิดสำหรับการอ่านและเขียน อย่างไรก็ตาม คุณควรใช้โหมดทดสอบในช่วงเริ่มต้นของการพัฒนาเท่านั้น ตามแนวทางปฏิบัติที่ดีที่สุด คุณควรตั้งกฎความปลอดภัยสำหรับฐานข้อมูลของคุณในขณะที่คุณพัฒนาแอป ความปลอดภัยควรเป็นส่วนสำคัญในโครงสร้างและการทำงานของแอปของคุณ

กฎความปลอดภัยช่วยให้คุณควบคุมการเข้าถึงเอกสารและคอลเลกชันในฐานข้อมูลของคุณ ไวยากรณ์กฎที่ยืดหยุ่นช่วยให้คุณสร้างกฎที่ตรงกับอะไรก็ได้ตั้งแต่การเขียนทั้งหมดไปยังฐานข้อมูลทั้งหมด ไปจนถึงการดำเนินการในเอกสารเฉพาะ

คุณสามารถเขียนกฎความปลอดภัยสำหรับ Cloud Firestore ในคอนโซล Firebase:

ในส่วน บิล ด์ของคอนโซล Firebase ให้คลิก ฐานข้อมูล Firestore จากนั้นเลือกแท็บ กฎ (หรือ คลิกที่นี่ เพื่อไปที่แท็บ กฎ โดยตรง)
คุณควรเห็นกฎความปลอดภัยเริ่มต้นต่อไปนี้ โดยมีการจำกัดเวลาการเข้าถึงแบบสาธารณะในอีกสองสามสัปดาห์นับจากวันนี้

สกรีนช็อตของขั้นตอนนี้

ระบุคอลเล็กชัน

ขั้นแรก ระบุคอลเล็กชันที่แอปเขียนข้อมูล

ลบส่วนการ match /{document=**} ที่มีอยู่ เพื่อให้กฎของคุณมีลักษณะดังนี้:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}
```
ใน match /databases/{database}/documents ให้ระบุคอลเล็กชันที่คุณต้องการรักษาความปลอดภัย:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}
```

เพิ่มกฎความปลอดภัย

เนื่องจากคุณใช้ UID การตรวจสอบสิทธิ์เป็นฟิลด์ในเอกสารสมุดเยี่ยมแต่ละฉบับ คุณจึงสามารถรับ UID การตรวจสอบสิทธิ์และตรวจสอบว่าใครก็ตามที่พยายามเขียนลงในเอกสารนั้นมี UID การตรวจสอบสิทธิ์ที่ตรงกัน

เพิ่มกฎการอ่านและเขียนในชุดกฎของคุณดังที่แสดงด้านล่าง:

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

คลิก เผยแพร่ เพื่อปรับใช้กฎใหม่ของคุณ สำหรับสมุดเยี่ยม มีเพียงผู้ใช้ที่ลงชื่อเข้าใช้เท่านั้นที่สามารถอ่านข้อความ (ข้อความใดก็ได้!) แต่คุณสามารถสร้างข้อความได้โดยใช้ ID ผู้ใช้ของคุณเท่านั้น นอกจากนี้เรายังไม่อนุญาตให้แก้ไขหรือลบข้อความ

เพิ่มกฎการตรวจสอบ

เพิ่มการตรวจสอบความถูกต้องของข้อมูลเพื่อให้แน่ใจว่าฟิลด์ที่คาดหวังทั้งหมดมีอยู่ในเอกสาร:

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

คลิก เผยแพร่ เพื่อปรับใช้กฎใหม่ของคุณ

รีเซ็ตผู้ฟัง

เนื่องจากตอนนี้แอปของคุณอนุญาตให้เฉพาะผู้ใช้ที่ตรวจสอบสิทธิ์แล้วเข้าสู่ระบบได้ คุณควรย้ายข้อความค้นหา firestore ของสมุดเยี่ยมภายในตัวฟังการตรวจสอบสิทธิ์ มิฉะนั้น จะเกิดข้อผิดพลาดในการอนุญาตและแอปจะถูกตัดการเชื่อมต่อเมื่อผู้ใช้ออกจากระบบ

ใน StackBlitz ไปที่ไฟล์ index.js
ดึงคอลเลกชั่นสมุดเยี่ยม onSnapshot listener เข้าสู่ฟังก์ชันใหม่ที่เรียกว่า subscribeGuestbook นอกจากนี้ กำหนดผลลัพธ์ของฟังก์ชัน onSnapshot ให้กับตัวแปร guestbookListener

Listener ของ Firestore onSnapshot จะส่งกลับ ฟังก์ชันการยกเลิกการสมัครที่คุณจะใช้ยกเลิกตัวฟังสแน็ปช็อตได้ในภายหลัง
```
// ...
// 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);
    });
  });
}
```
เพิ่มฟังก์ชันใหม่ภายใต้ชื่อ unsubscribeGuestbook ตรวจสอบว่าตัวแปร guestbookListener ไม่เป็นค่าว่าง จากนั้นเรียกใช้ฟังก์ชันเพื่อยกเลิกการฟัง
```
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}
```

สุดท้าย เพิ่มฟังก์ชันใหม่ในการเรียกกลับ onAuthStateChanged

เพิ่ม subscribeGuestbook() ที่ด้านล่างของ if (user)

เพิ่ม unsubscribeGuestbook() ที่ด้านล่างของคำสั่ง 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. ขั้นตอนโบนัส: ฝึกฝนสิ่งที่คุณได้เรียนรู้

บันทึกสถานะ RSVP ของผู้เข้าร่วม

ตอนนี้ แอปของคุณอนุญาตให้ผู้คนเริ่มแชทได้หากพวกเขาสนใจในกิจกรรม วิธีเดียวที่คุณจะรู้ว่ามีคนมาหรือไม่คือถ้าพวกเขาโพสต์ในแชท มาจัดกันและให้คนรู้ว่ามีคนมากี่คน

คุณจะเพิ่มการสลับเพื่อลงทะเบียนคนที่ต้องการเข้าร่วมงาน จากนั้นรวบรวมจำนวนคนที่มา

ใน StackBlitz ไปที่ไฟล์ index.html

ใน guestbook-container ให้เพิ่มชุดของปุ่ม YES และ NO เช่น:

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

ตัวอย่างแอป

สกรีนช็อตของขั้นตอนนี้

ถัดไป ลงทะเบียนผู้ฟังสำหรับการคลิกปุ่ม หากผู้ใช้คลิก YES ให้ใช้ UID การตรวจสอบสิทธิ์เพื่อบันทึกการตอบกลับไปยังฐานข้อมูล

ใน StackBlitz ไปที่ไฟล์ index.js

ที่ด้านบน ให้ค้นหาคำสั่งการนำเข้า firebase/firestore จากนั้นเพิ่ม doc , setDoc และ where อย่างเช่น:

// ...
// Add the Firebase products and methods that you want to use
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot,
  doc,
  setDoc,
  where
} from 'firebase/firestore';

ที่ด้านล่างของฟังก์ชัน main() ให้เพิ่มโค้ดต่อไปนี้เพื่อฟังสถานะ RSVP:
```
async function main() {
  // ...

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

ถัดไป สร้างคอลเลกชันใหม่ที่เรียกว่า attendees จากนั้นลงทะเบียนเอกสารอ้างอิงหากมีการคลิกปุ่ม RSVP ตั้งค่าการอ้างอิงนั้น true หรือ false ขึ้นอยู่กับว่าคลิกปุ่มใด

อันดับแรกสำหรับ 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);
  }
};

จากนั้น rsvpNo ก็เหมือนกัน แต่มีค่า 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);
  }
};

อัปเดตกฎความปลอดภัยของคุณ

เนื่องจากคุณได้ตั้งค่ากฎบางอย่างไว้แล้ว ข้อมูลใหม่ที่คุณเพิ่มด้วยปุ่มจะถูกปฏิเสธ

อนุญาตให้เพิ่ม คอลเลกชัน `attendees`

คุณจะต้องอัปเดตกฎเพื่อให้สามารถเพิ่มไปยังคอลเลกชัน attendees ได้

สำหรับคอลเลกชั่น attendees เนื่องจากคุณใช้ Authentication UID เป็นชื่อเอกสาร คุณจึงสามารถคว้ามาและตรวจสอบว่า uid ของผู้ส่งตรงกับเอกสารที่พวกเขาเขียน คุณจะอนุญาตให้ทุกคนอ่านรายชื่อผู้เข้าร่วมได้ (เนื่องจากไม่มีข้อมูลส่วนตัวอยู่ที่นั่น) แต่เฉพาะผู้สร้างเท่านั้นที่สามารถอัปเดตได้
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
คลิก เผยแพร่ เพื่อปรับใช้กฎใหม่ของคุณ

เพิ่มกฎการตรวจสอบ

เพิ่มกฎการตรวจสอบข้อมูลเพื่อให้แน่ใจว่ามีฟิลด์ที่คาดไว้ทั้งหมดอยู่ในเอกสาร:

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;

    }
  }
}

อย่าลืมคลิก เผยแพร่ เพื่อทำให้กฎของคุณใช้งานได้!

(ไม่บังคับ) คุณสามารถดูผลลัพธ์ของการคลิกปุ่มได้แล้ว ไปที่แดชบอร์ด Cloud Firestore ในคอนโซล Firebase

อ่านสถานะ RSVP

เมื่อคุณได้บันทึกคำตอบแล้ว มาดูกันว่าใครกำลังจะมาและสะท้อนมันใน UI

ใน StackBlitz ไปที่ไฟล์ index.html
ใน description-container ให้เพิ่มองค์ประกอบใหม่ด้วย ID ของ number-attending
```


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


```

ถัดไป ลงทะเบียนผู้ฟังสำหรับการรวบรวม attendees และนับจำนวนการตอบกลับ ใช่ :

ใน StackBlitz ไปที่ไฟล์ index.js

ที่ด้านล่างของฟังก์ชัน main() ให้เพิ่มโค้ดต่อไปนี้เพื่อฟังสถานะ RSVP และนับการคลิก ใช่

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

สุดท้าย มาเน้นที่ปุ่มที่สอดคล้องกับสถานะปัจจุบันกัน

สร้างฟังก์ชันที่ตรวจสอบว่า UID การตรวจสอบสิทธิ์ปัจจุบันมีรายการในคอลเล็กชัน attendees หรือไม่ จากนั้นตั้งค่าคลาสปุ่มเป็น 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';
      }
    }
  });
}

มาสร้างฟังก์ชันเพื่อยกเลิกการสมัครรับข้อมูลกัน จะใช้เมื่อผู้ใช้ออกจากระบบ
```
// ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}
```

เรียกใช้ฟังก์ชันจาก Listener การตรวจสอบสิทธิ์

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

ลองเข้าสู่ระบบในฐานะผู้ใช้หลายคนและดูจำนวนที่เพิ่มขึ้นด้วยการคลิกปุ่ม ใช่ เพิ่มเติมแต่ละครั้ง

ตัวอย่างแอป

สกรีนช็อตของขั้นตอนนี้

11. ขอแสดงความยินดี!

คุณได้ใช้ Firebase เพื่อสร้างเว็บแอปพลิเคชันแบบเรียลไทม์เชิงโต้ตอบ!

สิ่งที่เราได้กล่าวถึง

การตรวจสอบสิทธิ์ Firebase
FirebaseUI
Cloud Firestore
กฎความปลอดภัยของ Firebase

ขั้นตอนถัดไป

ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเวิร์กโฟลว์นักพัฒนา Firebase หรือไม่ ลองดู Codelab ของโปรแกรมจำลอง Firebase เพื่อเรียนรู้เกี่ยวกับวิธีทดสอบและเรียกใช้แอปของคุณในเครื่องอย่างสมบูรณ์
ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับผลิตภัณฑ์ Firebase อื่นๆ หรือไม่ บางทีคุณอาจต้องการเก็บไฟล์ภาพที่ผู้ใช้อัปโหลด? หรือส่งการแจ้งเตือนไปยังผู้ใช้ของคุณ? ลองดู Codelab บนเว็บของ Firebase เพื่อดู Codelab ที่เจาะลึกยิ่งขึ้นเกี่ยวกับผลิตภัณฑ์ Firebase อื่นๆ สำหรับเว็บ
ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Cloud Firestore หรือไม่ บางทีคุณอาจต้องการเรียนรู้เกี่ยวกับคอลเลกชันย่อยและการทำธุรกรรม? ไปที่ เว็บโค้ดแล็บของ Cloud Firestore เพื่อดูโค้ดแล็บที่เจาะลึกยิ่งขึ้นเกี่ยวกับ Cloud Firestore หรือดู ซีรีส์ YouTube นี้เพื่อทำความรู้จักกับ Cloud Firestore !

เรียนรู้เพิ่มเติม

ไซต์ Firebase: firebase.google.com
ช่อง YouTube Firebase

มันไปได้อย่างไร?

เราชอบความคิดเห็นของคุณ! กรุณากรอกแบบฟอร์มสั้นๆ (มาก) ที่นี่

ทำความรู้จักกับ Firebase สำหรับเว็บ

1. ภาพรวม

สิ่งที่คุณจะได้เรียนรู้

สิ่งที่คุณต้องการ

2. รับรหัสเริ่มต้น

3. แก้ไขข้อมูลกิจกรรม

ตัวอย่างแอป

4. สร้างและตั้งค่าโปรเจ็กต์ Firebase

สร้างโปรเจ็กต์ Firebase

เปิดใช้งานและตั้งค่าผลิตภัณฑ์ Firebase ในคอนโซล

เปิดใช้งานการลงชื่อเข้าใช้อีเมลสำหรับการตรวจสอบสิทธิ์ Firebase

ตั้งค่า Cloud Firestore

5. เพิ่มและกำหนดค่า Firebase

เพิ่มไลบรารี Firebase

เพิ่มเว็บแอป Firebase ให้กับโปรเจ็กต์ Firebase

6. เพิ่มการลงชื่อเข้าใช้ของผู้ใช้ (RSVP)

ตรวจสอบผู้ใช้ของคุณด้วยอีเมลลงชื่อเข้าใช้และ FirebaseUI

เพิ่มรหัสเพื่อเริ่มต้น FirebaseUI Auth

เพิ่มปุ่ม RSVP ให้กับ HTML

ทดสอบการลงชื่อเข้าใช้แอป

เพิ่มสถานะการตรวจสอบสิทธิ์ให้กับ UI

ตัวอย่างแอป

7. เขียนข้อความไปยัง Cloud Firestore

แบบจำลองข้อมูล

เพิ่มข้อความไปที่ Firestore

ตัวอย่างแอป

แสดงสมุดเยี่ยมเฉพาะผู้ใช้ที่ลงชื่อเข้าใช้

ทดสอบการส่งข้อความ

คอนโซล Firebase

8. อ่านข้อความ

ประสานข้อความ

ทดสอบการซิงโครไนซ์ข้อความ

ตัวอย่างแอป

9. ตั้งกฎความปลอดภัยพื้นฐาน

ระบุคอลเล็กชัน

เพิ่มกฎความปลอดภัย

เพิ่มกฎการตรวจสอบ

รีเซ็ตผู้ฟัง

10. ขั้นตอนโบนัส: ฝึกฝนสิ่งที่คุณได้เรียนรู้

บันทึกสถานะ RSVP ของผู้เข้าร่วม

ตัวอย่างแอป

อัปเดตกฎความปลอดภัยของคุณ

อนุญาตให้เพิ่ม คอลเลกชัน attendees

เพิ่มกฎการตรวจสอบ

อ่านสถานะ RSVP

ตัวอย่างแอป

11. ขอแสดงความยินดี!

สิ่งที่เราได้กล่าวถึง

ขั้นตอนถัดไป

เรียนรู้เพิ่มเติม

มันไปได้อย่างไร?

อนุญาตให้เพิ่ม คอลเลกชัน `attendees`