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 และ Firebase UI เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณได้อย่างง่ายดาย
- 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 นี้ อย่าทำเครื่องหมายในช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ด้วย คุณจะใช้บานหน้าต่างแสดงตัวอย่างของ 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
คุณจะต้องมีปุ่มตอบรับคำเชิญที่แจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยที่อยู่อีเมลของตน คุณสามารถทำได้โดยเชื่อมต่อ FirebaseUI เข้ากับปุ่ม RSVP FirebaseUI เป็นไลบรารีที่ให้ UI ที่สร้างไว้ล่วงหน้าที่ด้านบนของ Firebase Auth
FirebaseUI ต้องการการกำหนดค่า (ดูตัวเลือกใน เอกสารประกอบ ) ที่ทำสองสิ่ง:
- แจ้ง FirebaseUI ว่าคุณต้องการใช้วิธีการลงชื่อเข้าใช้ อีเมล/รหัสผ่าน
- จัดการการโทรกลับเพื่อการลงชื่อเข้าใช้ที่สำเร็จ และส่งคืนค่าเท็จเพื่อหลีกเลี่ยงการเปลี่ยนเส้นทาง คุณไม่ต้องการให้เพจรีเฟรชเนื่องจากคุณกำลังสร้างเว็บแอปหน้าเดียว
เพิ่มโค้ดเพื่อเริ่มต้น FirebaseUI Auth
- ใน StackBlitz ให้ไปที่ไฟล์
index.js
- ที่ด้านบน ให้ค้นหาคำสั่งนำเข้า
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 สำหรับรหัสเฉพาะเหล่านี้ในไฟล์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 Authentication Listener ซึ่งจะได้รับแจ้งทุกครั้งที่สถานะการลงชื่อเข้าใช้ของผู้ใช้เปลี่ยนไป หากปัจจุบันมีผู้ใช้ที่ลงชื่อเข้าใช้ แอปของคุณจะเปลี่ยนปุ่ม "ตอบกลับ" เป็นปุ่ม "ออกจากระบบ"
- ใน StackBlitz ให้ไปที่ไฟล์
index.js
- ที่ด้านบน ให้ค้นหาคำสั่ง
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';
- เพิ่มรหัสต่อไปนี้ที่ด้านล่างของฟังก์ชัน
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 และควรเปลี่ยนกลับไป เป็นการตอบรับคำเชิญ เมื่อมีการคลิก
ตัวอย่างแอป
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/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
ให้เพิ่มส่วนใหม่ด้วยรหัสของguestbook
<!-- ... --> <section id="guestbook-container"> <h2>Discussion</h2> <form><!-- ... --></form> <section id="guestbook"></section> </section> <!-- ... -->
ถัดไป ลงทะเบียน Listener ที่รับฟังการเปลี่ยนแปลงที่เกิดขึ้นกับข้อมูล:
- ใน 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
รับพารามิเตอร์สองตัว: แบบสอบถามที่จะใช้และฟังก์ชันโทรกลับ ฟังก์ชันการโทรกลับจะถูกทริกเกอร์เมื่อมีการเปลี่ยนแปลงเอกสารที่ตรงกับแบบสอบถาม ซึ่งอาจเกิดขึ้นได้หากข้อความถูกลบ แก้ไข หรือเพิ่ม สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารประกอบของ Cloud Firestore
ทดสอบการซิงโครไนซ์ข้อความ
Cloud Firestore ซิงโครไนซ์ข้อมูลกับไคลเอ็นต์ที่สมัครรับฐานข้อมูลโดยอัตโนมัติและทันที
- ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงในแอป อย่าลังเลที่จะเขียนข้อความใหม่ ควรปรากฏขึ้นทันที
- หากคุณเปิดพื้นที่ทำงานในหลายหน้าต่างหรือหลายแท็บ ข้อความจะซิงค์ระหว่างแท็บแบบเรียลไทม์
- (ไม่บังคับ) คุณสามารถลองลบ แก้ไข หรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน ฐานข้อมูล ของคอนโซล Firebase การเปลี่ยนแปลงใด ๆ ควรปรากฏใน UI
ยินดีด้วย! คุณกำลังอ่านเอกสาร Cloud Firestore ในแอปของคุณ!
ตัวอย่างแอป
9. ตั้งค่ากฎความปลอดภัยขั้นพื้นฐาน
ในตอนแรกคุณได้ตั้งค่า Cloud Firestore ให้ใช้โหมดทดสอบ ซึ่งหมายความว่าฐานข้อมูลของคุณเปิดสำหรับการอ่านและเขียน อย่างไรก็ตาม คุณควรใช้โหมดทดสอบเฉพาะในช่วงเริ่มต้นของการพัฒนาเท่านั้น ตามแนวทางปฏิบัติที่ดีที่สุด คุณควรตั้งค่ากฎความปลอดภัยสำหรับฐานข้อมูลของคุณในขณะที่คุณพัฒนาแอปของคุณ ความปลอดภัยควรเป็นส่วนสำคัญในโครงสร้างและพฤติกรรมของแอป
กฎความปลอดภัยช่วยให้คุณควบคุมการเข้าถึงเอกสารและคอลเลกชันในฐานข้อมูลของคุณได้ ไวยากรณ์กฎที่ยืดหยุ่นช่วยให้คุณสร้างกฎที่ตรงกับอะไรก็ได้ตั้งแต่การเขียนทั้งหมดไปจนถึงฐานข้อมูลทั้งหมดไปจนถึงการดำเนินการในเอกสารเฉพาะ
คุณสามารถเขียนกฎความปลอดภัยสำหรับ Cloud Firestore ในคอนโซล Firebase ได้:
- ในส่วน Build ของคอนโซล Firebase คลิก Firestore Database จากนั้นเลือกแท็บ Rules (หรือ คลิกที่นี่ เพื่อไปยังแท็บ Rules โดยตรง)
- คุณควรเห็นกฎความปลอดภัยเริ่มต้นต่อไปนี้ โดยจำกัดเวลาการเข้าถึงโดยสาธารณะภายในสองสามสัปดาห์นับจากวันนี้
ระบุคอลเลกชัน
ขั้นแรก ระบุคอลเลกชันที่แอปเขียนข้อมูล
- ลบ
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
ของสมุดเยี่ยมไปไว้ภายใน Listener การตรวจสอบสิทธิ์ มิฉะนั้นจะเกิดข้อผิดพลาดในการอนุญาตและแอปจะตัดการเชื่อมต่อเมื่อผู้ใช้ออกจากระบบ
- ใน StackBlitz ให้ไปที่ไฟล์
index.js
- ดึงคอลเลคชันสมุดเยี่ยมบน Listener
onSnapshot
เข้าสู่ฟังก์ชันใหม่ที่เรียกว่าsubscribeGuestbook
นอกจากนี้ ให้กำหนดผลลัพธ์ของฟังก์ชันonSnapshot
ให้กับตัวแปรguestbookListener
ตัวฟัง 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
ไม่เป็นค่าว่างหรือไม่ จากนั้นเรียกใช้ฟังก์ชันเพื่อยกเลิก Listener// ... // 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. ขั้นตอนพิเศษ: ฝึกฝนสิ่งที่คุณได้เรียนรู้
บันทึกสถานะการตอบรับคำเชิญของผู้เข้าร่วม
ขณะนี้ แอปของคุณอนุญาตให้ผู้คนเริ่มแชทได้หากพวกเขาสนใจกิจกรรมนี้ นอกจากนี้ วิธีเดียวที่คุณจะทราบได้ว่ามีคนมาหรือไม่ก็คือการโพสต์ไว้ในแชท มาจัดระเบียบให้คนรู้ว่าจะมากี่คน
คุณจะเพิ่มปุ่มสลับเพื่อลงทะเบียนผู้ที่ต้องการเข้าร่วมกิจกรรม จากนั้นจึงนับจำนวนผู้ที่จะมา
- ใน 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> <!-- ... -->
ตัวอย่างแอป
จากนั้น ลงทะเบียน Listener สำหรับการคลิกปุ่ม หากผู้ใช้คลิก YES ให้ใช้ Authentication 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
เนื่องจากคุณใช้ 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
อ่านสถานะการตอบรับคำเชิญ
เมื่อคุณบันทึกการตอบกลับแล้ว มาดูกันว่าใครจะมาและสะท้อนให้เห็นใน UI
- ใน StackBlitz ให้ไปที่ไฟล์
index.html
- ใน
description-container
ให้เพิ่มองค์ประกอบใหม่ด้วย ID เป็นnumber-attending
<!-- ... --> <section id="description-container"> <!-- ... --> <p id="number-attending"></p> </section> <!-- ... -->
ถัดไป ลงทะเบียน Listener สำหรับคอลเลกชัน attendees
และนับจำนวนคำตอบ YES :
- ใน StackBlitz ให้ไปที่ไฟล์
index.js
- ที่ด้านล่างของฟังก์ชัน
main()
ให้เพิ่มโค้ดต่อไปนี้เพื่อฟังสถานะ RSVP และนับการคลิก YESasync 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 = ''; }
- เรียกใช้ฟังก์ชันจากตัวฟังการรับรองความถูกต้อง
// ... // 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(); } });
- ลองเข้าสู่ระบบในฐานะผู้ใช้หลายราย และดูจำนวนที่เพิ่มขึ้นเมื่อคลิกปุ่ม 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 !
เรียนรู้เพิ่มเติม
- ไซต์ Firebase: firebase.google.com
- ช่อง YouTube ของ Firebase
มันเป็นยังไงบ้าง?
เราชอบความคิดเห็นของคุณ! กรุณากรอกแบบฟอร์มสั้นๆ (มาก) ที่นี่