ทำความรู้จักกับ 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 ของคุณได้

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

ภาพหน้าจอของขั้นตอนนี้

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

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

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

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

  1. ใน StackBlitz ให้เปิดไฟล์ index.html
  2. ค้นหา 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

  1. ลงชื่อเข้าใช้ Firebase
  2. ในคอนโซล Firebase คลิก เพิ่มโครงการ (หรือ สร้างโครงการ ) จากนั้นตั้งชื่อโครงการ Firebase ของคุณ Firebase-Web-Codelab

    ภาพหน้าจอของขั้นตอนนี้

  3. คลิกผ่านตัวเลือกการสร้างโครงการ ยอมรับข้อกำหนดของ Firebase หากได้รับแจ้ง ในหน้าจอ Google Analytics คลิก "อย่าเปิดใช้งาน" เนื่องจากคุณจะไม่ใช้ Analytics สำหรับแอปนี้

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

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

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

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

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

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

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

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

    ภาพหน้าจอของขั้นตอนนี้

  2. เลือกแท็บ วิธีการลงชื่อเข้าใช้ (หรือ คลิกที่นี่ เพื่อไปที่แท็บโดยตรง)

    ภาพหน้าจอของขั้นตอนนี้

  3. คลิก อีเมล/รหัสผ่าน จากตัวเลือกของผู้ให้บริการ สลับสวิตช์เป็น เปิดใช้งาน จากนั้นคลิก บันทึก

    ภาพหน้าจอของขั้นตอนนี้

ตั้งค่า Cloud Firestore

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

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

  1. ในแผงด้านซ้ายของคอนโซล Firebase คลิก Build > Firestore Database จากนั้นคลิก สร้างฐานข้อมูล
  2. คลิก สร้างฐานข้อมูล

    ภาพหน้าจอของขั้นตอนนี้

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

    ภาพหน้าจอของขั้นตอนนี้

  4. เลือกตำแหน่งสำหรับฐานข้อมูลของคุณ (คุณสามารถใช้ค่าเริ่มต้นได้) อย่างไรก็ตาม โปรดทราบว่าสถานที่นี้ไม่สามารถเปลี่ยนแปลงได้ในภายหลัง

    ภาพหน้าจอของขั้นตอนนี้

  5. คลิก เสร็จสิ้น

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 ของคุณ

  1. กลับไปที่คอนโซล Firebase ไปที่หน้าภาพรวมของโครงการโดยคลิก ภาพรวมโครงการ ที่ด้านซ้ายบน
  2. ที่กึ่งกลางของหน้าภาพรวมของโครงการ ให้คลิกไอคอนเว็บ ไอคอนเว็บแอป เพื่อสร้างเว็บแอป Firebase ใหม่

    ภาพหน้าจอของขั้นตอนนี้

  3. ลงทะเบียนแอปด้วยชื่อเล่น Web App
  4. สำหรับ Codelab นี้ อย่าทำเครื่องหมายในช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ด้วย คุณจะใช้บานหน้าต่างแสดงตัวอย่างของ StackBlitz ในตอนนี้
  5. คลิกลง ทะเบียนแอป

    ภาพหน้าจอของขั้นตอนนี้

  6. คัดลอก ออบเจ็กต์การกำหนดค่า Firebase ไปยังคลิปบอร์ดของคุณ

    ภาพหน้าจอของขั้นตอนนี้

  7. คลิก ดำเนินการต่อไปยังคอนโซล เพิ่มออบเจ็กต์การกำหนดค่า Firebase ให้กับแอปของคุณ:
  8. ย้อนกลับไปใน StackBlitz ไปที่ไฟล์ index.js
  9. ค้นหา Add Firebase project configuration object here จากนั้นวางข้อมูลโค้ดการกำหนดค่าไว้ใต้ความคิดเห็น
  10. เพิ่มการเรียกใช้ฟังก์ชัน 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);
    

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

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

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

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

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

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

เพิ่มโค้ดเพื่อเริ่มต้น FirebaseUI Auth

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.js
  2. ที่ด้านบน ให้ค้นหาคำสั่งนำเข้า 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';
    
  3. บันทึกการอ้างอิงไปยังวัตถุ auth ทันทีหลังจาก initializeApp เช่น:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. โปรดสังเกตว่าการกำหนดค่า FirebaseUI มีระบุไว้ในโค้ดเริ่มต้นแล้ว มีการตั้งค่าให้ใช้ผู้ให้บริการตรวจสอบสิทธิ์อีเมลแล้ว
  5. ที่ด้านล่างของฟังก์ชัน main() ใน index.js ให้เพิ่มคำสั่งการเริ่มต้น FirebaseUI เช่น:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

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

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

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

    โปรดทราบว่าในไฟล์ index.html มีคอนเทนเนอร์ที่มี ID firebaseui-auth-container นี่คือ ID ที่คุณจะส่งไปยัง FirebaseUI เพื่อระงับการเข้าสู่ระบบของคุณ ตัวอย่างแอป
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    


    ภาพหน้าจอของขั้นตอนนี้

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

    เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของฟังก์ชัน main() ใน index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

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

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

    ภาพหน้าจอของขั้นตอนนี้

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

    ภาพหน้าจอของขั้นตอนนี้

เพิ่มสถานะการรับรองความถูกต้องให้กับ UI

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

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

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.js
  2. ที่ด้านบน ให้ค้นหาคำสั่ง firebase/auth import จากนั้นเพิ่ม 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';
    
  3. เพิ่มรหัสต่อไปนี้ที่ด้านล่างของฟังก์ชัน main() :
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. ในตัวฟังปุ่ม ให้ตรวจสอบว่ามีผู้ใช้ปัจจุบันอยู่หรือไม่ และออกจากระบบ เมื่อต้องการทำเช่นนี้ ให้แทนที่ 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 และควรเปลี่ยนกลับไป เป็นการตอบรับคำเชิญ เมื่อมีการคลิก

ตัวอย่างแอป

ภาพหน้าจอของขั้นตอนนี้

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

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

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

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

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

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

เพิ่มข้อความใน Firestore

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

หากต้องการเพิ่มองค์ประกอบ UI ของช่องข้อความและปุ่มส่ง:

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.html
  2. ค้นหา 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

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.js
  2. ที่ด้านบน ให้ค้นหาคำสั่งนำเข้า 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';
    
  3. ตอนนี้เราจะบันทึกการอ้างอิงไปยังวัตถุ Firestore db หลังจาก initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. ที่ด้านล่างของฟังก์ชัน 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)

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.js
  2. แก้ไข 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';
      }
    });
    

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

  1. ตรวจสอบให้แน่ใจว่าคุณได้ลงชื่อเข้าใช้แอปแล้ว
  2. ป้อนข้อความเช่น "สวัสดี!" จากนั้นคลิก ส่ง

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

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

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

คอนโซล Firebase

ภาพหน้าจอของขั้นตอนนี้

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

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

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

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

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

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.html
  2. ใน guestbook-container ให้เพิ่มส่วนใหม่ด้วยรหัสของ guestbook
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

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

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

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

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

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

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

ตัวอย่างแอป

ภาพหน้าจอของขั้นตอนนี้

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

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

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

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

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

ภาพหน้าจอของขั้นตอนนี้

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

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

  1. ลบ match /{document=**} ที่ตรงกันที่มีอยู่ เพื่อให้กฎของคุณมีลักษณะดังนี้:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
      }
    }
    
  2. ใน 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 การตรวจสอบสิทธิ์ที่ตรงกัน

  1. เพิ่มกฎการอ่านและเขียนลงในชุดกฎของคุณดังที่แสดงด้านล่าง:
    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. คลิก เผยแพร่ เพื่อปรับใช้กฎใหม่ของคุณ ขณะนี้สำหรับสมุดเยี่ยม เฉพาะผู้ใช้ที่ลงชื่อเข้าใช้เท่านั้นที่สามารถอ่านข้อความ (ข้อความใดก็ได้!) แต่คุณสามารถสร้างข้อความโดยใช้ ID ผู้ใช้ของคุณเท่านั้น นอกจากนี้เรายังไม่อนุญาตให้แก้ไขหรือลบข้อความ

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

  1. เพิ่มการตรวจสอบความถูกต้องของข้อมูลเพื่อให้แน่ใจว่าช่องที่คาดหวังทั้งหมดมีอยู่ในเอกสาร:
    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. คลิก เผยแพร่ เพื่อปรับใช้กฎใหม่ของคุณ

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

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

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

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

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

  1. เพิ่ม subscribeGuestbook() ที่ด้านล่างของ if (user)
  2. เพิ่ม 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. ขั้นตอนพิเศษ: ฝึกฝนสิ่งที่คุณได้เรียนรู้

บันทึกสถานะการตอบรับคำเชิญของผู้เข้าร่วม

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

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

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.html
  2. ใน 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>
    <!-- ... -->
    

ตัวอย่างแอป

ภาพหน้าจอของขั้นตอนนี้

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

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.js
  2. ที่ด้านบน ให้ค้นหาคำสั่งนำเข้า 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';
    
  3. ที่ด้านล่างของฟังก์ชัน main() ให้เพิ่มโค้ดต่อไปนี้เพื่อฟังสถานะ RSVP:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. ถัดไป สร้างคอลเลกชันใหม่ที่เรียกว่า 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

  1. สำหรับการรวบรวม attendees เนื่องจากคุณใช้ 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;
        }
      }
    }
    
  2. คลิก เผยแพร่ เพื่อปรับใช้กฎใหม่ของคุณ

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

  1. เพิ่มกฎการตรวจสอบความถูกต้องของข้อมูลเพื่อให้แน่ใจว่าช่องที่คาดหวังทั้งหมดมีอยู่ในเอกสาร:
    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. อย่าลืมคลิก เผยแพร่ เพื่อปรับใช้กฎของคุณ!

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

อ่านสถานะการตอบรับคำเชิญ

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

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.html
  2. ใน description-container ให้เพิ่มองค์ประกอบใหม่ด้วย ID เป็น number-attending
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

ถัดไป ลงทะเบียน Listener สำหรับคอลเลกชัน attendees และนับจำนวนคำตอบ YES :

  1. ใน StackBlitz ให้ไปที่ไฟล์ index.js
  2. ที่ด้านล่างของฟังก์ชัน main() ให้เพิ่มโค้ดต่อไปนี้เพื่อฟังสถานะ RSVP และนับการคลิก YES
    async function main() {
      // ...
    
      // Listen for attendee list
      const attendingQuery = query(
        collection(db, 'attendees'),
        where('attending', '==', true)
      );
      const unsubscribe = onSnapshot(attendingQuery, snap => {
        const newAttendeeCount = snap.docs.length;
        numberAttending.innerHTML = newAttendeeCount + ' people going';
      });
    }
    main();
    

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

  1. สร้างฟังก์ชันที่ตรวจสอบว่า 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';
          }
        }
      });
    }
    
  2. นอกจากนี้ เรามาสร้างฟังก์ชันเพื่อยกเลิกการสมัครกันดีกว่า สิ่งนี้จะถูกใช้เมื่อผู้ใช้ออกจากระบบ
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. เรียกใช้ฟังก์ชันจากตัวฟังการรับรองความถูกต้อง
    // ...
    // 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();
        }
      });
    
  4. ลองเข้าสู่ระบบในฐานะผู้ใช้หลายราย และดูจำนวนที่เพิ่มขึ้นเมื่อคลิกปุ่ม YES เพิ่มเติมแต่ละครั้ง

ตัวอย่างแอป

ภาพหน้าจอของขั้นตอนนี้

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

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

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

  • การรับรองความถูกต้องของ Firebase
  • FirebaseUI
  • คลาวด์ไฟร์สโตร์
  • กฎความปลอดภัยของ Firebase

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

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

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

มันเป็นยังไงบ้าง?

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