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
เปิดใช้งานการลงชื่อเข้าใช้อีเมลสำหรับการตรวจสอบสิทธิ์ Firebase
ในการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้เว็บแอป คุณจะต้องใช้วิธีลงชื่อเข้าใช้ อีเมล/รหัสผ่าน สำหรับ Codelab นี้:
- ในแผงด้านซ้ายของคอนโซล Firebase คลิก Build > Authentication จากนั้นคลิก เริ่มต้น ใช้งาน ตอนนี้คุณอยู่ในแดชบอร์ดการตรวจสอบสิทธิ์ ซึ่งคุณสามารถดูผู้ใช้ที่ลงทะเบียน กำหนดค่าผู้ให้บริการลงชื่อเข้าใช้ และจัดการการตั้งค่า
- เลือกแท็บ วิธีการลงชื่อเข้าใช้ (หรือ คลิกที่นี่ เพื่อไปที่แท็บโดยตรง)
- คลิก อีเมล/รหัสผ่าน จากตัวเลือกผู้ให้บริการ สลับสวิตช์ไปที่ เปิดใช้งาน จากนั้นคลิก บันทึก
ตั้งค่า Cloud Firestore
เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
วิธีตั้งค่า Cloud Firestore มีดังนี้
- ในแผงด้านซ้ายของคอนโซล Firebase คลิก Build > Firestore Database จากนั้นคลิก สร้างฐานข้อมูล
- คลิก สร้างฐานข้อมูล
- เลือกตัวเลือก เริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย โหมดทดสอบช่วยให้แน่ใจว่าคุณสามารถเขียนฐานข้อมูลได้อย่างอิสระในระหว่างการพัฒนา คลิก ถัดไป
- เลือกตำแหน่งสำหรับฐานข้อมูลของคุณ (คุณสามารถใช้ค่าเริ่มต้นได้) อย่างไรก็ตาม โปรดทราบว่าสถานที่นี้ไม่สามารถเปลี่ยนแปลงได้ในภายหลัง
- คลิก เสร็จสิ้น
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 ในตอนนี้
- คลิก ลงทะเบียนแอป
- คัดลอก ออบเจ็กต์การกำหนดค่า 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);
6. เพิ่มการลงชื่อเข้าใช้ของผู้ใช้ (RSVP)
เมื่อคุณได้เพิ่ม Firebase ลงในแอปแล้ว คุณสามารถตั้งค่าปุ่ม RSVP ที่ลงทะเบียนผู้คนโดยใช้ Firebase Authentication
ตรวจสอบผู้ใช้ของคุณด้วยอีเมลลงชื่อเข้าใช้และ FirebaseUI
คุณจะต้องมีปุ่ม 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
มีคอนเทนเนอร์ที่มี IDfirebaseui-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> <!-- ... -->
- ตั้งค่าผู้ฟังบนปุ่ม 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
ในส่วนนี้ คุณจะเพิ่มฟังก์ชันให้ผู้ใช้เขียนข้อความใหม่ลงในฐานข้อมูล ขั้นแรก คุณเพิ่ม 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 ของ FirestoreonSnapshot
จะส่งกลับ ฟังก์ชันการยกเลิกการสมัครที่คุณจะใช้ยกเลิกตัวฟังสแน็ปช็อตได้ในภายหลัง// ... // 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
มันไปได้อย่างไร?
เราชอบความคิดเห็นของคุณ! กรุณากรอกแบบฟอร์มสั้นๆ (มาก) ที่นี่