โค้ดแล็บเว็บ Firebase

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

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

• ซิงค์ข้อมูลโดยใช้ Cloud Firestore และ Cloud Storage สำหรับ Firebase
• ตรวจสอบผู้ใช้ของคุณโดยใช้ Firebase Authentication
• ทำให้เว็บแอปของคุณใช้งานได้บนโฮสติ้ง Firebase
• ส่งการแจ้งเตือนด้วย Firebase Cloud Messaging
• รวบรวมข้อมูลประสิทธิภาพของเว็บแอปของคุณ

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

• โปรแกรมแก้ไข IDE / ข้อความที่คุณเลือกเช่น WebStorm , Atom , Sublime หรือ VS Code
• ตัวจัดการแพ็คเกจ npm ซึ่งโดยทั่วไปจะมาพร้อมกับ Node.js
• เทอร์มินัล / คอนโซล
• เบราว์เซอร์ที่คุณเลือกเช่น Chrome
• โค้ดตัวอย่างของ codelab (ดูขั้นตอนต่อไปของ codelab สำหรับวิธีรับโค้ด)

โคลนที่ เก็บ GitHub ของ codelab จากบรรทัดคำสั่ง:

git clone https://github.com/firebase/codelab-friendlychat-web

หรือหากคุณไม่ได้ติดตั้ง git คุณสามารถ ดาวน์โหลดที่เก็บเป็นไฟล์ ZIP

นำเข้าแอปเริ่มต้น

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

สร้างโครงการ Firebase

1. ลงชื่อเข้าใช้ Firebase
2. ในคอนโซล Firebase ให้คลิก เพิ่มโครงการ แล้วตั้งชื่อโครงการ Firebase ว่า FriendlyChat จำรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ Firebase ของคุณ
3. คลิก สร้างโครงการ

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

• Firebase Authentication เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณได้อย่างง่ายดาย
• Cloud Firestore เพื่อบันทึกข้อมูลที่มีโครงสร้างบนคลาวด์และรับการแจ้งเตือนทันทีเมื่อข้อมูลมีการเปลี่ยนแปลง
• Cloud Storage สำหรับ Firebase เพื่อบันทึกไฟล์ในระบบคลาวด์
• Firebase Hosting เพื่อโฮสต์และให้บริการเนื้อหาของคุณ
• Firebase Cloud Messaging เพื่อส่งการแจ้งเตือนแบบพุชและแสดงการแจ้งเตือนป๊อปอัปของเบราว์เซอร์
• Firebase Performance Monitoring เพื่อรวบรวมข้อมูลประสิทธิภาพของผู้ใช้สำหรับแอปของคุณ

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

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

1. คลิกไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
2. ลงทะเบียนแอปโดยใช้ชื่อเล่นว่า Friendly Chat จากนั้นทำเครื่องหมายที่ช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ ด้วย คลิก ลงทะเบียนแอป
3. คลิกผ่านขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามคำแนะนำในตอนนี้ สิ่งเหล่านี้จะกล่าวถึงในขั้นตอนต่อไปของ codelab นี้

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

ในการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้เว็บแอปด้วยบัญชี Google เราจะใช้วิธีลงชื่อเข้าใช้ Google

คุณจะต้องเปิดใช้งานการลงชื่อเข้าใช้ Google :

1. ในคอนโซล Firebase ให้ค้นหาส่วน พัฒนา ในแผงด้านซ้าย
2. คลิกการ พิสูจน์ตัว ตนจากนั้นคลิกแท็บ วิธีการลงชื่อเข้าใช้ (หรือ คลิกที่นี่ เพื่อไปที่นั่นโดยตรง)
3. เปิดใช้งานผู้ให้บริการลงชื่อเข้า ใช้ Google จากนั้นคลิก บันทึก
4. ตั้งชื่อแอปที่เปิดเผยต่อสาธารณะเป็น Friendly Chat และเลือก อีเมลสนับสนุนโครงการ จากเมนูแบบเลื่อนลง
5. กำหนดค่าหน้าจอคำยินยอม OAuth ของคุณใน Google Cloud Console เพิ่มโลโก้

เปิดใช้งาน Cloud Firestore

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

คุณจะต้องเปิดใช้งาน Cloud Firestore:

1. ในส่วน การพัฒนา ของคอนโซล Firebase ให้คลิก ฐานข้อมูล
2. คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore

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

โหมดทดสอบช่วยให้มั่นใจได้ว่าเราสามารถเขียนลงในฐานข้อมูลได้อย่างอิสระในระหว่างการพัฒนา เราจะทำให้ฐานข้อมูลของเราปลอดภัยยิ่งขึ้นในภายหลังใน codelab นี้

4. กำหนดตำแหน่งที่เก็บข้อมูล Cloud Firestore ของคุณ คุณสามารถปล่อยให้เป็นค่าเริ่มต้นหรือเลือกภูมิภาคใกล้เคียงกับคุณ คลิก เสร็จสิ้น เพื่อจัดเตรียม Firestore

เปิดใช้งาน Cloud Storage

เว็บแอปใช้ Cloud Storage สำหรับ Firebase เพื่อจัดเก็บอัปโหลดและแชร์รูปภาพ

คุณจะต้องเปิดใช้งาน Cloud Storage:

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

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

4. ตำแหน่ง Cloud Storage ถูกเลือกไว้ล่วงหน้าด้วยภูมิภาคเดียวกับที่คุณเลือกสำหรับฐานข้อมูล Cloud Firestore คลิก เสร็จสิ้น เพื่อเสร็จสิ้นการตั้งค่า

อินเทอร์เฟซบรรทัดคำสั่ง Firebase (CLI) ช่วยให้คุณใช้ Firebase Hosting เพื่อให้บริการเว็บแอปในเครื่องรวมทั้งปรับใช้เว็บแอปของคุณกับโครงการ Firebase

1. ติดตั้ง CLI โดยรันคำสั่ง npm ต่อไปนี้:

npm -g install firebase-tools

2. ตรวจสอบว่า CLI ได้รับการติดตั้งอย่างถูกต้องโดยรันคำสั่งต่อไปนี้:

firebase --version

ตรวจสอบว่าเวอร์ชันของ Firebase CLI คือ v4.1.0 หรือใหม่กว่า

3. ให้สิทธิ์ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:

firebase login

เราได้ตั้งค่าเทมเพลตเว็บแอปเพื่อดึงการกำหนดค่าแอปของคุณสำหรับ Firebase Hosting จากไดเรกทอรีภายในของแอปของคุณ (ที่เก็บข้อมูลที่คุณโคลนไว้ก่อนหน้านี้ใน codelab) แต่ในการดึงการกำหนดค่าเราจำเป็นต้องเชื่อมโยงแอปของคุณกับโครงการ Firebase

4. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรี web-start ภายในของแอปของคุณ
5. เชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:

firebase use --add

6. เมื่อได้รับแจ้งให้เลือก รหัสโครงการ ของคุณจากนั้นตั้งชื่อแทนโครงการ Firebase ของคุณ

นามแฝงมีประโยชน์หากคุณมีหลายสภาพแวดล้อม (การผลิตการแสดงละคร ฯลฯ ) อย่างไรก็ตามสำหรับ codelab นี้ให้ใช้นามแฝงของ default

7. ทำตามคำแนะนำที่เหลือในบรรทัดคำสั่งของคุณ

เมื่อคุณนำเข้าและกำหนดค่าโครงการของคุณแล้วคุณก็พร้อมที่จะเรียกใช้เว็บแอปเป็นครั้งแรก

1. ในคอนโซลจากไดเรกทอรี web-start ให้เรียกใช้คำสั่ง Firebase CLI ต่อไปนี้:

firebase serve --only hosting

2. บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:

✔  hosting: Local server: http://localhost:5000

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

3. ใช้เบราว์เซอร์ของคุณเปิดแอปของคุณที่ http: // localhost: 5000

คุณควรเห็น UI ของแอป FriendlyChat ซึ่งยังไม่ทำงาน (ยัง!):

แอปไม่สามารถทำอะไรได้ในขณะนี้ แต่ด้วยความช่วยเหลือของคุณจะเร็ว ๆ นี้! เราได้จัดเตรียม UI ไว้ให้คุณเท่านั้น

มาสร้างการแชทแบบเรียลไทม์กันเถอะ!

นำเข้า Firebase SDK

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

เนื่องจากเราใช้ Firebase Hosting เพื่อให้บริการแอปของเราเราจะนำเข้า URL ในเครื่องที่อยู่ในไฟล์ index.html (อยู่ในไดเรกทอรี web-start/public/ ) สำหรับ codelab นี้เราได้เพิ่มบรรทัดต่อไปนี้ให้คุณแล้วที่ด้านล่างของไฟล์ index.html แต่คุณสามารถตรวจสอบได้อีกครั้งว่ามีอยู่หรือไม่

index.html

<script src="/__/firebase/6.4.0/firebase-app.js"></script>
<script src="/__/firebase/6.4.0/firebase-auth.js"></script>
<script src="/__/firebase/6.4.0/firebase-storage.js"></script>
<script src="/__/firebase/6.4.0/firebase-messaging.js"></script>
<script src="/__/firebase/6.4.0/firebase-firestore.js"></script>
<script src="/__/firebase/6.4.0/firebase-performance.js"></script>

ในระหว่างโค้ดแล็บนี้เราจะใช้ Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging และ Performance Monitoring ดังนั้นเราจึงนำเข้าไลบรารีทั้งหมด ในแอปในอนาคตตรวจสอบให้แน่ใจว่าคุณนำเข้าเฉพาะส่วนของ Firebase ที่คุณต้องการเพื่อลดระยะเวลาในการโหลดแอปของคุณ

กำหนดค่า Firebase

นอกจากนี้เรายังต้องกำหนดค่า Firebase SDK เพื่อบอกว่าโครงการ Firebase ใดที่เราใช้อยู่ เนื่องจากเราใช้ Firebase Hosting คุณจึงนำเข้าสคริปต์พิเศษที่จะทำการกำหนดค่านี้ให้คุณได้ อีกครั้งสำหรับ codelab นี้เราได้เพิ่มบรรทัดต่อไปนี้ให้คุณแล้วที่ด้านล่างของไฟล์ public/index.html แต่ให้ตรวจสอบอีกครั้งว่ามีอยู่

index.html

<script src="/__/firebase/init.js"></script>

สคริปต์นี้มีการกำหนดค่าโครงการ Firebase ของคุณโดยอิงจากโครงการ Firebase ที่คุณระบุไว้ก่อนหน้านี้เมื่อคุณเรียก firebase use --add

อย่าลังเลที่จะตรวจสอบไฟล์ init.js เพื่อดูว่าการกำหนดค่าโครงการของคุณมีลักษณะอย่างไร ในการดำเนินการนี้ให้เปิด http: // localhost: 5000 / __ / firebase / init.js ในเบราว์เซอร์ของคุณ คุณควรเห็นบางสิ่งที่มีลักษณะดังต่อไปนี้:

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

ตอนนี้ Firebase SDK ควรพร้อมใช้งานตั้งแต่นำเข้าและเริ่มต้นใน index.html ตอนนี้เรากำลังจะใช้การลงชื่อเข้าใช้ของผู้ใช้โดยใช้ Firebase Authentication

ตรวจสอบผู้ใช้ของคุณด้วยการลงชื่อเข้าใช้ Google

ในแอปเมื่อผู้ใช้คลิกปุ่ม ลงชื่อเข้าใช้ด้วย Google ฟังก์ชัน signIn ใช้จะถูกเรียกใช้ (เราตั้งค่าให้คุณแล้ว!) สำหรับ codelab นี้เราต้องการอนุญาตให้ Firebase ใช้ Google เป็นผู้ให้บริการข้อมูลประจำตัว เราจะใช้ป๊อปอัป แต่ Firebase สามารถใช้ วิธีอื่นได้หลายวิธี

1. ในไดเร็กทอรี web-start ในไดเร็กทอรีย่อย public/scripts/ เปิด main.js
2. ค้นหาฟังก์ชัน signIn ใช้
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

ฟังก์ชัน signOut จะทำงานเมื่อผู้ใช้คลิกปุ่ม ลงชื่อออก

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน signOut
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Signs-out of Friendly Chat.
function signOut() {
  // Sign out of Firebase.
  firebase.auth().signOut();
}

ติดตามสถานะการรับรองความถูกต้อง

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

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน initFirebaseAuth
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

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

แสดงข้อมูลของผู้ใช้ที่ลงชื่อเข้าใช้

เราต้องการแสดงรูปโปรไฟล์และชื่อผู้ใช้ของผู้ใช้ที่ลงชื่อเข้าใช้ในแถบด้านบนของแอปของเรา ใน Firebase ข้อมูลของผู้ใช้ที่ลงชื่อเข้าใช้จะพร้อมใช้งานในออบเจ็กต์ firebase.auth().currentUser เสมอ ก่อนหน้านี้เราตั้งค่าฟังก์ชัน authStateObserver ให้ทริกเกอร์เมื่อผู้ใช้ลงชื่อเข้าใช้เพื่อให้ UI ของเราอัปเดตตามนั้น จะเรียก getProfilePicUrl และ getUserName เมื่อทริกเกอร์

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน getProfilePicUrl และ getUserName
3. แทนที่ทั้งสองฟังก์ชันด้วยรหัสต่อไปนี้

main.js

// Returns the signed-in user's profile pic URL.
function getProfilePicUrl() {
  return firebase.auth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return firebase.auth().currentUser.displayName;
}

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

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน isUserSignedIn
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!firebase.auth().currentUser;
}

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

1. หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้ firebase serve --only hosting บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
2. ลงชื่อเข้าใช้แอปโดยใช้ปุ่มลงชื่อเข้าใช้และบัญชี Google ของคุณ หากคุณเห็นข้อความแสดงข้อผิดพลาดที่ระบุว่า auth/operation-not-allowed ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งาน Google Sign-in เป็นผู้ให้บริการตรวจสอบสิทธิ์ในคอนโซล Firebase
3. หลังจากลงชื่อเข้าใช้รูปโปรไฟล์และชื่อผู้ใช้ของคุณควรจะปรากฏ:

ในส่วนนี้เราจะเขียนข้อมูลบางส่วนไปยัง Cloud Firestore เพื่อให้เติม UI ของแอปได้ สิ่งนี้สามารถทำได้ด้วยตนเองด้วย คอนโซล Firebase แต่เราจะทำในแอปเองเพื่อสาธิตการเขียน Cloud Firestore ขั้นพื้นฐาน

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

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

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

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

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

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน saveMessage
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

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

1. หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้ firebase serve --only hosting บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
2. หลังจากลงชื่อเข้าใช้แล้วให้ป้อนข้อความเช่น "สวัสดี!" แล้วคลิก ส่ง เพื่อเขียนข้อความลงใน Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงของคุณ เนื่องจากเรายังต้องใช้การ ดึง ข้อมูล (ส่วนถัดไปของ codelab)
3. คุณสามารถดูข้อความที่เพิ่มใหม่ได้ใน Firebase Console เปิดคอนโซล Firebase ของคุณ ภายใต้ส่วน พัฒนา ให้คลิก ฐานข้อมูล (หรือคลิก ที่นี่ และเลือกโครงการของคุณ) และคุณจะเห็นคอลเล็กชัน ข้อความ พร้อม ข้อความที่ คุณเพิ่งเพิ่มเข้ามา:

ซิงโครไนซ์ ข้อความ

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

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

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน loadMessages
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                       message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

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

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

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

1. หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้ firebase serve --only hosting บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
2. ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงใน FriendlyChat UI (ดูด้านล่าง) อย่าลังเลที่จะเขียนข้อความใหม่ ควรปรากฏทันที
3. (ไม่บังคับ) คุณสามารถลองลบแก้ไขหรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน ฐานข้อมูล ของคอนโซล Firebase การเปลี่ยนแปลงใด ๆ ควรมีผลใน UI

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

ตอนนี้เราจะเพิ่มฟีเจอร์ที่แชร์รูปภาพ

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

บันทึกภาพไปยัง Cloud Storage

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

1. สร้างข้อความแชท "ตัวยึดตำแหน่ง" ในฟีดแชทเพื่อให้ผู้ใช้เห็นภาพเคลื่อนไหว "กำลังโหลด" ในขณะที่เราอัปโหลดภาพ
2. อัปโหลดไฟล์รูปภาพไปยัง Cloud Storage ไปยังเส้นทางนี้: /<uid>/<messageId>/<file_name>
3. สร้าง URL ที่อ่านได้แบบสาธารณะสำหรับไฟล์รูปภาพ
4. อัปเดตข้อความแชทด้วย URL ของไฟล์รูปภาพที่อัปโหลดใหม่แทนรูปภาพที่กำลังโหลดชั่วคราว

ตอนนี้คุณจะเพิ่มฟังก์ชันในการส่งภาพ:

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน saveImageMessage
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });
}

ทดสอบการส่งภาพ

1. หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้ firebase serve --only hosting บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
2. หลังจากลงชื่อเข้าใช้ให้คลิกปุ่มอัปโหลดภาพ และเลือกไฟล์ภาพโดยใช้ตัวเลือกไฟล์ หากคุณกำลังมองหารูปภาพอย่าลังเลที่จะใช้ ภาพสวย ๆ ของถ้วยกาแฟ นี้
3. ข้อความใหม่ควรปรากฏใน UI ของแอปพร้อมรูปภาพที่คุณเลือก:

หากคุณลองเพิ่มรูปภาพในขณะที่ยังไม่ได้ลงชื่อเข้าใช้คุณจะเห็นการแจ้งเตือน Toast แจ้งว่าคุณต้องลงชื่อเข้าใช้เพื่อเพิ่มรูปภาพ

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

เพิ่มรหัสผู้ส่ง GCM ที่อนุญาตพิเศษ

ในรายการ เว็บแอป คุณต้องระบุ gcm_sender_id ซึ่งเป็นค่าฮาร์ดโค้ดที่ระบุว่า FCM ได้รับอนุญาตให้ส่งข้อความไปยังแอปนี้

1. จากไดเร็กทอรี web-start ในไดเร็กทอรี public ให้เปิด manifest.json
2. เพิ่มค่า ID ผู้ส่งของเบราว์เซอร์ในแอตทริบิวต์ gcm_sender_id ตามที่แสดงด้านล่าง อย่าเปลี่ยนค่าจากที่แสดงด้านล่าง

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

เพิ่มพนักงานบริการ FCM

เว็บแอปต้องการ พนักงานบริการ ที่จะรับและแสดงการแจ้งเตือนทางเว็บ

1. จากไดเร็กทอรี web-start ในไดเร็กทอรี public ให้สร้างไฟล์ใหม่ชื่อ firebase-messaging-sw.js
2. เพิ่มเนื้อหาต่อไปนี้ในไฟล์ใหม่นั้น

firebase- ข้อความ -w.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

ผู้ให้บริการเพียงแค่ต้องโหลดและเริ่มต้น Firebase Cloud Messaging SDK ซึ่งจะดูแลการแสดงการแจ้งเตือน

รับโทเค็นอุปกรณ์ FCM

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

เมื่อผู้ใช้ลงชื่อเข้าใช้เราจะเรียกใช้ฟังก์ชัน saveMessagingDeviceToken นั่นคือที่ที่เราจะได้รับ โทเค็นอุปกรณ์ FCM จากเบราว์เซอร์และบันทึกลงใน Cloud Firestore

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน saveMessagingDeviceToken
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(error){
    console.error('Unable to get messaging token.', error);
  });
}

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

ขอสิทธิ์เพื่อแสดงการแจ้งเตือน

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

1. กลับไปที่ไฟล์ public/scripts/main.js
2. ค้นหาฟังก์ชัน requestNotificationsPermissions
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

รับโทเค็นอุปกรณ์ของคุณ

1. หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้ firebase serve --only hosting บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
2. หลังจากลงชื่อเข้าใช้กล่องโต้ตอบสิทธิ์การแจ้งเตือนควรปรากฏขึ้น:
3. คลิก อนุญาต
4. เปิดคอนโซล JavaScript ของเบราว์เซอร์ของคุณ คุณควรเห็นข้อความต่อไปนี้: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
5. คัดลอกโทเค็นอุปกรณ์ของคุณ คุณจะต้องใช้มันสำหรับขั้นตอนต่อไปของ codelab

ส่งการแจ้งเตือนไปยังอุปกรณ์ของคุณ

เมื่อคุณมีโทเค็นอุปกรณ์แล้วคุณสามารถส่งการแจ้งเตือนได้

1. นอกจากโทเค็นอุปกรณ์แล้วคุณจะต้องมีรหัส เซิร์ฟเวอร์ ของแอป Firebase ด้วย ในการรับคีย์นี้ให้ไปที่ Firebase Console> การตั้งค่าโปรเจ็กต์> Cloud Messaging จากนั้นคัดลอก คีย์เซิร์ฟเวอร์

ในการส่งการแจ้งเตือนคุณจะต้องส่งคำขอ HTTP ต่อไปนี้:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}

2. บนบรรทัดรับคำสั่งให้รันคำสั่ง cURL ต่อไปนี้

curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

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

หากแอปของคุณทำงานอยู่เบื้องหลังการแจ้งเตือนควรปรากฏในเบราว์เซอร์ของคุณดังตัวอย่างนี้:

ดู กฎความปลอดภัยของฐานข้อมูล

Cloud Firestore ใช้ ภาษาของกฎ เฉพาะเพื่อกำหนดสิทธิ์การเข้าถึงความปลอดภัยและการตรวจสอบข้อมูล

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

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

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

เราจะอัปเดตกฎเพื่อ จำกัด สิ่งต่างๆโดยใช้กฎต่อไปนี้:

firestore.rules

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

อัปเดตกฎความปลอดภัยของฐานข้อมูล

มีสองวิธีในการแก้ไขกฎความปลอดภัยของฐานข้อมูลไม่ว่าจะในคอนโซล Firebase หรือจากไฟล์กฎในเครื่องที่ปรับใช้โดยใช้ Firebase CLI

ในการอัปเดตกฎความปลอดภัยในคอนโซล Firebase:

1. ไปที่ส่วน ฐานข้อมูล จากแผงด้านซ้ายจากนั้นคลิกแท็บ กฎ
2. แทนที่กฎเริ่มต้นที่มีอยู่แล้วในคอนโซลด้วยกฎที่แสดงด้านบน
3. คลิก เผยแพร่

ในการอัปเดตกฎความปลอดภัยจากไฟล์ในเครื่อง:

1. จากไดเร็กทอรี web-start ให้เปิด firestore.rules
2. แทนที่กฎเริ่มต้นที่มีอยู่แล้วในไฟล์ด้วยกฎที่แสดงด้านบน
3. จากไดเร็กทอรี web-start ให้เปิด firebase.json
4. เพิ่มแอตทริบิวต์ firestore.rules ชี้ไปที่ firestore.rules ดังที่แสดงด้านล่าง (แอตทริบิวต์การ hosting ควรอยู่ในไฟล์แล้ว)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

5. ปรับใช้กฎความปลอดภัยโดยใช้ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:

firebase deploy --only firestore

6. บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

ดูกฎความปลอดภัยของ Cloud Storage

Cloud Storage สำหรับ Firebase ใช้ ภาษาของกฎ เฉพาะเพื่อกำหนดสิทธิ์การเข้าถึงความปลอดภัยและการตรวจสอบข้อมูล

เมื่อตั้งค่าโปรเจ็กต์ Firebase ที่จุดเริ่มต้นของ codelab นี้เราเลือกใช้กฎความปลอดภัยเริ่มต้นของ Cloud Storage ที่อนุญาตให้เฉพาะผู้ใช้ที่ได้รับการพิสูจน์ตัวตนเท่านั้นที่สามารถใช้ Cloud Storage ได้ ใน คอนโซล Firebase ในแท็บ กฎ ของส่วน พื้นที่เก็บข้อมูล คุณสามารถดูและแก้ไขกฎได้ คุณควรเห็นกฎเริ่มต้นซึ่งอนุญาตให้ผู้ใช้ที่ลงชื่อเข้าใช้สามารถอ่านและเขียนไฟล์ใด ๆ ในที่เก็บข้อมูลของคุณได้

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

เราจะอัปเดตกฎเพื่อทำสิ่งต่อไปนี้:

• อนุญาตให้ผู้ใช้แต่ละคนเขียนเฉพาะโฟลเดอร์เฉพาะของตนเอง
• อนุญาตให้ทุกคนอ่านจาก Cloud Storage
• ตรวจสอบว่าไฟล์ที่อัพโหลดเป็นรูปภาพ
• จำกัด ขนาดของภาพที่สามารถอัพโหลดได้สูงสุด 5 MB

สามารถนำไปใช้ได้โดยใช้กฎต่อไปนี้:

storage.rules

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

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

มีสองวิธีในการแก้ไขกฎความปลอดภัยของพื้นที่เก็บข้อมูล: ในคอนโซล Firebase หรือจากไฟล์กฎในเครื่องที่ปรับใช้โดยใช้ Firebase CLI

ในการอัปเดตกฎความปลอดภัยในคอนโซล Firebase:

1. ไปที่ส่วนการ จัดเก็บ จากแผงด้านซ้ายจากนั้นคลิกแท็บ กฎ
2. แทนที่กฎเริ่มต้นที่มีอยู่แล้วในคอนโซลด้วยกฎที่แสดงด้านบน
3. คลิก เผยแพร่

ในการอัปเดตกฎความปลอดภัยจากไฟล์ในเครื่อง:

1. จากไดเร็กทอรี web-start ให้เปิด storage.rules
2. แทนที่กฎเริ่มต้นที่มีอยู่แล้วในไฟล์ด้วยกฎที่แสดงด้านบน
3. จากไดเร็กทอรี web-start ให้เปิด firebase.json
4. เพิ่มแอตทริบิวต์ storage.rules ชี้ไปที่ไฟล์ storage.rules ดังที่แสดงด้านล่าง (แอตทริบิวต์การ hosting และ database ควรอยู่ในไฟล์แล้ว)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

6. ปรับใช้กฎความปลอดภัยโดยใช้ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:

firebase deploy --only storage

7. บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

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

มีหลายวิธีในการผสานรวมกับ Firebase Performance Monitoring JavaScript SDK ใน codelab นี้เราเปิดใช้งานการตรวจสอบประสิทธิภาพจาก Hosting URL ดู เอกสารประกอบ เพื่อดูวิธีการอื่น ๆ ในการเปิดใช้งาน SDK

การติดตามอัตโนมัติ

เนื่องจากเรารวม firebase-performance.js และ init.js ไว้ในขั้นตอนก่อนหน้าของ codelab เราจึงต้องเพิ่มหนึ่งบรรทัดเพื่อบอกให้ Performance Monitoring รวบรวมเมตริกการโหลดหน้าเว็บและการร้องขอเครือข่ายให้คุณโดยอัตโนมัติเมื่อผู้ใช้เยี่ยมชมไซต์ที่ใช้งาน

1. ใน public/scripts/main.js ให้เพิ่มบรรทัดต่อไปนี้ด้านล่าง TODO ที่มีอยู่เพื่อเริ่มต้นการตรวจสอบประสิทธิภาพ

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

วัดความล่าช้าของอินพุตแรก (ไม่บังคับ)

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

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

หากคุณต้องการวัดความล่าช้าในการป้อนข้อมูลครั้งแรกคุณจะต้องใส่รหัสต่อไปนี้โดยตรง

1. เปิด public/index.html
2. ยกเลิกการใส่ข้อคิดเห็นแท็ก script ในบรรทัดต่อไปนี้

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

หากต้องการอ่านเพิ่มเติมเกี่ยวกับโพลีฟิลล์หน่วงเวลาอินพุตแรกโปรดดูที่ เอกสารประกอบ

ดูข้อมูลประสิทธิภาพ

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

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

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

Firebase มีบริการ โฮสติ้ง เพื่อให้บริการเนื้อหาและเว็บแอปของคุณ คุณสามารถปรับใช้ไฟล์ของคุณกับ Firebase Hosting โดยใช้ Firebase CLI ก่อนที่จะปรับใช้คุณต้องระบุในไฟล์ firebase.json ของคุณว่าควรปรับใช้ไฟล์ในเครื่องใด สำหรับ codelab นี้เราได้ดำเนินการให้คุณแล้วเนื่องจากขั้นตอนนี้จำเป็นเพื่อให้บริการไฟล์ของเราในระหว่าง codelab นี้ การตั้งค่าโฮสติ้งระบุไว้ภายใต้แอตทริบิวต์การ hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

การตั้งค่าเหล่านี้บอก CLI ว่าเราต้องการปรับใช้ไฟล์ทั้งหมดในไดเร็กทอรี. / ./public ( "public": "./public" )

1. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรี web-start ภายในของแอปของคุณ
2. ทำให้ไฟล์ของคุณใช้งานได้กับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:

firebase deploy --except functions

3. คอนโซลควรแสดงสิ่งต่อไปนี้:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. ไปที่เว็บแอปของคุณที่ตอนนี้โฮสต์เต็มโดยใช้ Firebase Hosting ที่โดเมนย่อย Firebase ของคุณเองสองโดเมน:

• https://<firebase-projectId>.firebaseapp.com
• https://<firebase-projectId>.web.app .

หรือคุณสามารถเรียกใช้ firebase open hosting:site ในบรรทัดคำสั่ง

ไปที่เอกสารเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ วิธีการทำงานของโฮสติ้งของ Firebase

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

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

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

• การตรวจสอบสิทธิ์ Firebase
• Cloud Firestore
• Firebase SDK สำหรับ Cloud Storage
• Firebase Cloud Messaging
• การตรวจสอบประสิทธิภาพ Firebase
• Firebase Hosting

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

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

• firebase.google.com