ในโค้ดแล็บนี้คุณจะได้เรียนรู้วิธีใช้ Firebase เพื่อสร้างเว็บแอปพลิเคชันอย่างง่ายดายโดยการติดตั้งและปรับใช้ไคลเอ็นต์แชทโดยใช้ผลิตภัณฑ์และบริการของ Firebase
สิ่งที่คุณจะได้เรียนรู้
- ซิงค์ข้อมูลโดยใช้ Cloud Firestore และ Cloud Storage สำหรับ Firebase
- ตรวจสอบผู้ใช้ของคุณโดยใช้ Firebase Authentication
- ทำให้เว็บแอปของคุณใช้งานได้บนโฮสติ้ง Firebase
- ส่งการแจ้งเตือนด้วย Firebase Cloud Messaging
- รวบรวมข้อมูลประสิทธิภาพของเว็บแอปของคุณ
สิ่งที่คุณต้องการ
โคลนที่ เก็บ GitHub ของ codelab จากบรรทัดคำสั่ง:
git clone https://github.com/firebase/codelab-friendlychat-web
หรือหากคุณไม่ได้ติดตั้ง git คุณสามารถ ดาวน์โหลดที่เก็บเป็นไฟล์ ZIP
นำเข้าแอปเริ่มต้น
ใช้ IDE ของคุณเปิดหรืออิมพอร์ตไดเร็กทอรี📁 web-start
จากที่เก็บโคลน ไดเร็กทอรี📁 web-start
นี้มีรหัสเริ่มต้นสำหรับ codelab ซึ่งจะเป็นเว็บแอปแชทที่ทำงานได้อย่างสมบูรณ์
สร้างโครงการ Firebase
- ลงชื่อเข้าใช้ Firebase
- ในคอนโซล Firebase ให้คลิก เพิ่มโครงการ แล้วตั้งชื่อโครงการ Firebase ว่า FriendlyChat จำรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ Firebase ของคุณ
- คลิก สร้างโครงการ
แอปพลิเคชันที่เรากำลังจะสร้างใช้ผลิตภัณฑ์ Firebase ที่พร้อมใช้งานสำหรับเว็บแอป:
- Firebase Authentication เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณได้อย่างง่ายดาย
- Cloud Firestore เพื่อบันทึกข้อมูลที่มีโครงสร้างบนคลาวด์และรับการแจ้งเตือนทันทีเมื่อข้อมูลมีการเปลี่ยนแปลง
- Cloud Storage สำหรับ Firebase เพื่อบันทึกไฟล์ในระบบคลาวด์
- Firebase Hosting เพื่อโฮสต์และให้บริการเนื้อหาของคุณ
- Firebase Cloud Messaging เพื่อส่งการแจ้งเตือนแบบพุชและแสดงการแจ้งเตือนป๊อปอัปของเบราว์เซอร์
- Firebase Performance Monitoring เพื่อรวบรวมข้อมูลประสิทธิภาพของผู้ใช้สำหรับแอปของคุณ
ผลิตภัณฑ์เหล่านี้บางอย่างต้องการการกำหนดค่าพิเศษหรือต้องเปิดใช้งานโดยใช้คอนโซล Firebase
เพิ่มเว็บแอป Firebase ในโปรเจ็กต์
- คลิกไอคอนเว็บ
เพื่อสร้างเว็บแอป Firebase ใหม่
- ลงทะเบียนแอปโดยใช้ชื่อเล่นว่า Friendly Chat จากนั้นทำเครื่องหมายที่ช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ ด้วย คลิก ลงทะเบียนแอป
- คลิกผ่านขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามคำแนะนำในตอนนี้ สิ่งเหล่านี้จะกล่าวถึงในขั้นตอนต่อไปของ codelab นี้
เปิดใช้การ ลงชื่อเข้าใช้ Google สำหรับการตรวจสอบสิทธิ์ Firebase
ในการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้เว็บแอปด้วยบัญชี Google เราจะใช้วิธีลงชื่อเข้าใช้ Google
คุณจะต้องเปิดใช้งานการลงชื่อเข้าใช้ Google :
- ในคอนโซล Firebase ให้ค้นหาส่วน พัฒนา ในแผงด้านซ้าย
- คลิกการ พิสูจน์ตัว ตนจากนั้นคลิกแท็บ วิธีการลงชื่อเข้าใช้ (หรือ คลิกที่นี่ เพื่อไปที่นั่นโดยตรง)
- เปิดใช้งานผู้ให้บริการลงชื่อเข้า ใช้ Google จากนั้นคลิก บันทึก
- ตั้งชื่อแอปที่เปิดเผยต่อสาธารณะเป็น Friendly Chat และเลือก อีเมลสนับสนุนโครงการ จากเมนูแบบเลื่อนลง
- กำหนดค่าหน้าจอคำยินยอม OAuth ของคุณใน Google Cloud Console เพิ่มโลโก้
เปิดใช้งาน Cloud Firestore
เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
คุณจะต้องเปิดใช้งาน Cloud Firestore:
- ในส่วน การพัฒนา ของคอนโซล Firebase ให้คลิก ฐานข้อมูล
- คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore
- เลือกตัวเลือก เริ่มในโหมดทดสอบ จากนั้นคลิก ถัดไป หลังจากอ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย
โหมดทดสอบช่วยให้มั่นใจได้ว่าเราสามารถเขียนลงในฐานข้อมูลได้อย่างอิสระในระหว่างการพัฒนา เราจะทำให้ฐานข้อมูลของเราปลอดภัยยิ่งขึ้นในภายหลังใน codelab นี้
- กำหนดตำแหน่งที่เก็บข้อมูล Cloud Firestore ของคุณ คุณสามารถปล่อยให้เป็นค่าเริ่มต้นหรือเลือกภูมิภาคใกล้เคียงกับคุณ คลิก เสร็จสิ้น เพื่อจัดเตรียม Firestore
เปิดใช้งาน Cloud Storage
เว็บแอปใช้ Cloud Storage สำหรับ Firebase เพื่อจัดเก็บอัปโหลดและแชร์รูปภาพ
คุณจะต้องเปิดใช้งาน Cloud Storage:
- ในส่วน การพัฒนา ของคอนโซล Firebase ให้คลิกที่ เก็บข้อมูล
- คลิก เริ่มต้น
- อ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัยสำหรับโครงการ Firebase ของคุณจากนั้นคลิก ถัดไป
ด้วยกฎความปลอดภัยเริ่มต้นผู้ใช้ที่ผ่านการรับรองความถูกต้องสามารถเขียนอะไรก็ได้ใน Cloud Storage เราจะทำให้พื้นที่เก็บข้อมูลของเราปลอดภัยยิ่งขึ้นในโค้ดแล็บนี้ในภายหลัง
- ตำแหน่ง Cloud Storage ถูกเลือกไว้ล่วงหน้าด้วยภูมิภาคเดียวกับที่คุณเลือกสำหรับฐานข้อมูล Cloud Firestore คลิก เสร็จสิ้น เพื่อเสร็จสิ้นการตั้งค่า
อินเทอร์เฟซบรรทัดคำสั่ง Firebase (CLI) ช่วยให้คุณใช้ Firebase Hosting เพื่อให้บริการเว็บแอปในเครื่องรวมทั้งปรับใช้เว็บแอปของคุณกับโครงการ Firebase
- ติดตั้ง CLI โดยรันคำสั่ง npm ต่อไปนี้:
npm -g install firebase-tools
- ตรวจสอบว่า CLI ได้รับการติดตั้งอย่างถูกต้องโดยรันคำสั่งต่อไปนี้:
firebase --version
ตรวจสอบว่าเวอร์ชันของ Firebase CLI คือ v4.1.0 หรือใหม่กว่า
- ให้สิทธิ์ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:
firebase login
เราได้ตั้งค่าเทมเพลตเว็บแอปเพื่อดึงการกำหนดค่าแอปของคุณสำหรับ Firebase Hosting จากไดเรกทอรีภายในของแอปของคุณ (ที่เก็บข้อมูลที่คุณโคลนไว้ก่อนหน้านี้ใน codelab) แต่ในการดึงการกำหนดค่าเราจำเป็นต้องเชื่อมโยงแอปของคุณกับโครงการ Firebase
- ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรี
web-start
ภายในของแอปของคุณ - เชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:
firebase use --add
- เมื่อได้รับแจ้งให้เลือก รหัสโครงการ ของคุณจากนั้นตั้งชื่อแทนโครงการ Firebase ของคุณ
นามแฝงมีประโยชน์หากคุณมีหลายสภาพแวดล้อม (การผลิตการแสดงละคร ฯลฯ ) อย่างไรก็ตามสำหรับ codelab นี้ให้ใช้นามแฝงของ default
- ทำตามคำแนะนำที่เหลือในบรรทัดคำสั่งของคุณ
เมื่อคุณนำเข้าและกำหนดค่าโครงการของคุณแล้วคุณก็พร้อมที่จะเรียกใช้เว็บแอปเป็นครั้งแรก
- ในคอนโซลจากไดเรกทอรี
web-start
ให้เรียกใช้คำสั่ง Firebase CLI ต่อไปนี้:
firebase serve --only hosting
- บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:
✔ hosting: Local server: http://localhost:5000
เรากำลังใช้โปรแกรมจำลอง โฮสติ้ง Firebase เพื่อให้บริการแอปของเราในพื้นที่ ตอนนี้เว็บแอปควรพร้อมใช้งานจาก http: // localhost: 5000 ไฟล์ทั้งหมดที่อยู่ภายใต้ไดเร็กทอรีย่อย public
จะถูกให้บริการ
- ใช้เบราว์เซอร์ของคุณเปิดแอปของคุณที่ 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 สามารถใช้ วิธีอื่นได้หลายวิธี
- ในไดเร็กทอรี
web-start
ในไดเร็กทอรีย่อยpublic/scripts/
เปิดmain.js
- ค้นหาฟังก์ชัน
signIn
ใช้ - แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
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
จะทำงานเมื่อผู้ใช้คลิกปุ่ม ลงชื่อออก
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
signOut
- แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
main.js
// Signs-out of Friendly Chat.
function signOut() {
// Sign out of Firebase.
firebase.auth().signOut();
}
ติดตามสถานะการรับรองความถูกต้อง
ในการอัปเดต UI ตามนั้นเราต้องการวิธีตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้หรือออกจากระบบ ด้วยการตรวจสอบสิทธิ์ Firebase คุณสามารถลงทะเบียนผู้สังเกตการณ์เกี่ยวกับสถานะการตรวจสอบสิทธิ์ที่จะทริกเกอร์ทุกครั้งที่สถานะการตรวจสอบสิทธิ์เปลี่ยนไป
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
initFirebaseAuth
- แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
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
เมื่อทริกเกอร์
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
getProfilePicUrl
และgetUserName
- แทนที่ทั้งสองฟังก์ชันด้วยรหัสต่อไปนี้
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;
}
เราจะแสดงข้อความแสดงข้อผิดพลาดหากผู้ใช้พยายามส่งข้อความเมื่อผู้ใช้ไม่ได้ลงชื่อเข้าใช้ (คุณสามารถลองได้!) ดังนั้นเราจำเป็นต้องตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้จริงหรือไม่
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
isUserSignedIn
- แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
main.js
// Returns true if a user is signed-in.
function isUserSignedIn() {
return !!firebase.auth().currentUser;
}
ทดสอบการลงชื่อเข้าใช้แอป
- หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้
firebase serve --only hosting
บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ - ลงชื่อเข้าใช้แอปโดยใช้ปุ่มลงชื่อเข้าใช้และบัญชี Google ของคุณ หากคุณเห็นข้อความแสดงข้อผิดพลาดที่ระบุว่า
auth/operation-not-allowed
ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งาน Google Sign-in เป็นผู้ให้บริการตรวจสอบสิทธิ์ในคอนโซล Firebase - หลังจากลงชื่อเข้าใช้รูปโปรไฟล์และชื่อผู้ใช้ของคุณควรจะปรากฏ:
ในส่วนนี้เราจะเขียนข้อมูลบางส่วนไปยัง Cloud Firestore เพื่อให้เติม UI ของแอปได้ สิ่งนี้สามารถทำได้ด้วยตนเองด้วย คอนโซล Firebase แต่เราจะทำในแอปเองเพื่อสาธิตการเขียน Cloud Firestore ขั้นพื้นฐาน
แบบจำลองข้อมูล
ข้อมูล Cloud Firestore จะแบ่งออกเป็นคอลเล็กชันเอกสารฟิลด์และคอลเล็กชันย่อย เราจะจัดเก็บแต่ละข้อความของการแชทเป็นเอกสารในคอลเลคชันระดับบนสุดที่เรียกว่า messages
เพิ่มข้อความใน Cloud Firestore
ในการจัดเก็บข้อความแชทที่ผู้ใช้เขียนขึ้นเราจะใช้ Cloud Firestore
ในส่วนนี้คุณจะเพิ่มฟังก์ชันสำหรับผู้ใช้ในการเขียนข้อความใหม่ไปยังฐานข้อมูลของคุณ ผู้ใช้ที่คลิกปุ่ม ส่ง จะเรียกข้อมูลโค้ดด้านล่าง เพิ่มวัตถุข้อความที่มีเนื้อหาของช่องข้อความไปยังอินสแตนซ์ Cloud Firestore ของคุณในคอลเล็กชัน messages
วิธีการ add()
จะเพิ่มเอกสารใหม่ที่มี ID ที่สร้างขึ้นโดยอัตโนมัติไปยังคอลเล็กชัน
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
saveMessage
- แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
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);
});
}
ทดสอบการส่งข้อความ
- หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้
firebase serve --only hosting
บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ - หลังจากลงชื่อเข้าใช้แล้วให้ป้อนข้อความเช่น "สวัสดี!" แล้วคลิก ส่ง เพื่อเขียนข้อความลงใน Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงของคุณ เนื่องจากเรายังต้องใช้การ ดึง ข้อมูล (ส่วนถัดไปของ codelab)
- คุณสามารถดูข้อความที่เพิ่มใหม่ได้ใน Firebase Console เปิดคอนโซล Firebase ของคุณ ภายใต้ส่วน พัฒนา ให้คลิก ฐานข้อมูล (หรือคลิก ที่นี่ และเลือกโครงการของคุณ) และคุณจะเห็นคอลเล็กชัน ข้อความ พร้อม ข้อความที่ คุณเพิ่งเพิ่มเข้ามา:
ซิงโครไนซ์ ข้อความ
หากต้องการอ่านข้อความในแอปเราจะต้องเพิ่ม Listener ที่จะทริกเกอร์เมื่อข้อมูลเปลี่ยนแปลงจากนั้นสร้างองค์ประกอบ UI ที่แสดงข้อความใหม่
เราจะเพิ่มรหัสที่รับฟังข้อความที่เพิ่มใหม่จากแอป ในรหัสนี้เราจะลงทะเบียนผู้ฟังที่รับฟังการเปลี่ยนแปลงที่เกิดขึ้นกับข้อมูล เราจะแสดงเฉพาะ 12 ข้อความสุดท้ายของการแชทเพื่อหลีกเลี่ยงการแสดงประวัติที่ยาวนานมากเมื่อโหลด
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
loadMessages
- แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
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
ทดสอบการซิงโครไนซ์ข้อความ
- หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้
firebase serve --only hosting
บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ - ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงใน FriendlyChat UI (ดูด้านล่าง) อย่าลังเลที่จะเขียนข้อความใหม่ ควรปรากฏทันที
- (ไม่บังคับ) คุณสามารถลองลบแก้ไขหรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน ฐานข้อมูล ของคอนโซล Firebase การเปลี่ยนแปลงใด ๆ ควรมีผลใน UI
ยินดีด้วย! คุณกำลังอ่านเอกสาร Cloud Firestore ในแอปของคุณ!
ตอนนี้เราจะเพิ่มฟีเจอร์ที่แชร์รูปภาพ
แม้ว่า Cloud Firestore จะดีสำหรับการจัดเก็บข้อมูลที่มีโครงสร้าง แต่ Cloud Storage ก็เหมาะสำหรับการจัดเก็บไฟล์มากกว่า Cloud Storage for Firebase เป็นบริการจัดเก็บไฟล์ / Blob และเราจะใช้เพื่อจัดเก็บภาพใด ๆ ที่ผู้ใช้แชร์โดยใช้แอปของเรา
บันทึกภาพไปยัง Cloud Storage
สำหรับโค้ดแล็บนี้เราได้เพิ่มปุ่มที่เรียกใช้กล่องโต้ตอบตัวเลือกไฟล์ให้คุณแล้ว หลังจากเลือกไฟล์แล้วฟังก์ชัน saveImageMessage
จะถูกเรียกใช้และคุณจะได้รับการอ้างอิงไปยังไฟล์ที่เลือก ฟังก์ชัน saveImageMessage
ดำเนินการดังต่อไปนี้:
- สร้างข้อความแชท "ตัวยึดตำแหน่ง" ในฟีดแชทเพื่อให้ผู้ใช้เห็นภาพเคลื่อนไหว "กำลังโหลด" ในขณะที่เราอัปโหลดภาพ
- อัปโหลดไฟล์รูปภาพไปยัง Cloud Storage ไปยังเส้นทางนี้:
/<uid>/<messageId>/<file_name>
- สร้าง URL ที่อ่านได้แบบสาธารณะสำหรับไฟล์รูปภาพ
- อัปเดตข้อความแชทด้วย URL ของไฟล์รูปภาพที่อัปโหลดใหม่แทนรูปภาพที่กำลังโหลดชั่วคราว
ตอนนี้คุณจะเพิ่มฟังก์ชันในการส่งภาพ:
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
saveImageMessage
- แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
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);
});
}
ทดสอบการส่งภาพ
- หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้
firebase serve --only hosting
บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ - หลังจากลงชื่อเข้าใช้ให้คลิกปุ่มอัปโหลดภาพ
และเลือกไฟล์ภาพโดยใช้ตัวเลือกไฟล์ หากคุณกำลังมองหารูปภาพอย่าลังเลที่จะใช้ ภาพสวย ๆ ของถ้วยกาแฟ นี้
- ข้อความใหม่ควรปรากฏใน UI ของแอปพร้อมรูปภาพที่คุณเลือก:
หากคุณลองเพิ่มรูปภาพในขณะที่ยังไม่ได้ลงชื่อเข้าใช้คุณจะเห็นการแจ้งเตือน Toast แจ้งว่าคุณต้องลงชื่อเข้าใช้เพื่อเพิ่มรูปภาพ
ตอนนี้เราจะเพิ่มการรองรับสำหรับการแจ้งเตือนของเบราว์เซอร์ แอพจะแจ้งให้ผู้ใช้ทราบเมื่อมีการโพสต์ข้อความใหม่ในแชท Firebase Cloud Messaging (FCM) เป็นโซลูชันการส่งข้อความข้ามแพลตฟอร์มที่ช่วยให้คุณส่งข้อความและการแจ้งเตือนได้อย่างน่าเชื่อถือโดยไม่มีค่าใช้จ่าย
เพิ่มรหัสผู้ส่ง GCM ที่อนุญาตพิเศษ
ในรายการ เว็บแอป คุณต้องระบุ gcm_sender_id
ซึ่งเป็นค่าฮาร์ดโค้ดที่ระบุว่า FCM ได้รับอนุญาตให้ส่งข้อความไปยังแอปนี้
- จากไดเร็กทอรี
web-start
ในไดเร็กทอรีpublic
ให้เปิดmanifest.json
- เพิ่มค่า 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
เว็บแอปต้องการ พนักงานบริการ ที่จะรับและแสดงการแจ้งเตือนทางเว็บ
- จากไดเร็กทอรี
web-start
ในไดเร็กทอรีpublic
ให้สร้างไฟล์ใหม่ชื่อfirebase-messaging-sw.js
- เพิ่มเนื้อหาต่อไปนี้ในไฟล์ใหม่นั้น
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
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
saveMessagingDeviceToken
- แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
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()
ซึ่งจะแสดงกล่องโต้ตอบของเบราว์เซอร์เพื่อขออนุญาตนี้ ( ในเบราว์เซอร์ที่รองรับ )
- กลับไปที่ไฟล์
public/scripts/main.js
- ค้นหาฟังก์ชัน
requestNotificationsPermissions
- แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้
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);
});
}
รับโทเค็นอุปกรณ์ของคุณ
- หากแอปของคุณยังคงให้บริการอยู่ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้นให้เรียกใช้
firebase serve --only hosting
บนบรรทัดคำสั่งเท่านั้นเพื่อเริ่มให้บริการแอปจาก http: // localhost: 5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ - หลังจากลงชื่อเข้าใช้กล่องโต้ตอบสิทธิ์การแจ้งเตือนควรปรากฏขึ้น:
- คลิก อนุญาต
- เปิดคอนโซล JavaScript ของเบราว์เซอร์ของคุณ คุณควรเห็นข้อความต่อไปนี้:
Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
- คัดลอกโทเค็นอุปกรณ์ของคุณ คุณจะต้องใช้มันสำหรับขั้นตอนต่อไปของ codelab
ส่งการแจ้งเตือนไปยังอุปกรณ์ของคุณ
เมื่อคุณมีโทเค็นอุปกรณ์แล้วคุณสามารถส่งการแจ้งเตือนได้
- นอกจากโทเค็นอุปกรณ์แล้วคุณจะต้องมีรหัส เซิร์ฟเวอร์ ของแอป 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"
}
- บนบรรทัดรับคำสั่งให้รันคำสั่ง 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:
- ไปที่ส่วน ฐานข้อมูล จากแผงด้านซ้ายจากนั้นคลิกแท็บ กฎ
- แทนที่กฎเริ่มต้นที่มีอยู่แล้วในคอนโซลด้วยกฎที่แสดงด้านบน
- คลิก เผยแพร่
ในการอัปเดตกฎความปลอดภัยจากไฟล์ในเครื่อง:
- จากไดเร็กทอรี
web-start
ให้เปิดfirestore.rules
- แทนที่กฎเริ่มต้นที่มีอยู่แล้วในไฟล์ด้วยกฎที่แสดงด้านบน
- จากไดเร็กทอรี
web-start
ให้เปิดfirebase.json
- เพิ่มแอตทริบิวต์
firestore.rules
ชี้ไปที่firestore.rules
ดังที่แสดงด้านล่าง (แอตทริบิวต์การhosting
ควรอยู่ในไฟล์แล้ว)
firebase.json
{
// Add this!
"firestore": {
"rules": "firestore.rules"
},
"hosting": {
"public": "./public"
}
}
- ปรับใช้กฎความปลอดภัยโดยใช้ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:
firebase deploy --only firestore
- บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:
=== 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:
- ไปที่ส่วนการ จัดเก็บ จากแผงด้านซ้ายจากนั้นคลิกแท็บ กฎ
- แทนที่กฎเริ่มต้นที่มีอยู่แล้วในคอนโซลด้วยกฎที่แสดงด้านบน
- คลิก เผยแพร่
ในการอัปเดตกฎความปลอดภัยจากไฟล์ในเครื่อง:
- จากไดเร็กทอรี
web-start
ให้เปิดstorage.rules
- แทนที่กฎเริ่มต้นที่มีอยู่แล้วในไฟล์ด้วยกฎที่แสดงด้านบน
- จากไดเร็กทอรี
web-start
ให้เปิดfirebase.json
- เพิ่มแอตทริบิวต์
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"
}
}
- ปรับใช้กฎความปลอดภัยโดยใช้ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:
firebase deploy --only storage
- บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:
=== 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 รวบรวมเมตริกการโหลดหน้าเว็บและการร้องขอเครือข่ายให้คุณโดยอัตโนมัติเมื่อผู้ใช้เยี่ยมชมไซต์ที่ใช้งาน
- ใน
public/scripts/main.js
ให้เพิ่มบรรทัดต่อไปนี้ด้านล่างTODO
ที่มีอยู่เพื่อเริ่มต้นการตรวจสอบประสิทธิภาพ
main.js
// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();
วัดความล่าช้าของอินพุตแรก (ไม่บังคับ)
ความล่าช้าในการป้อนข้อมูลครั้งแรก มีประโยชน์เนื่องจากเบราว์เซอร์ตอบสนองต่อการโต้ตอบของผู้ใช้ทำให้ผู้ใช้ของคุณแสดงผลครั้งแรกเกี่ยวกับการตอบสนองของแอปของคุณ
ความล่าช้าในการป้อนข้อมูลครั้งแรกเริ่มต้นเมื่อผู้ใช้โต้ตอบกับองค์ประกอบบนหน้าเป็นครั้งแรกเช่นการคลิกปุ่มหรือไฮเปอร์ลิงก์ จะหยุดทันทีหลังจากที่เบราว์เซอร์สามารถตอบสนองต่อข้อมูลที่ป้อนได้ซึ่งหมายความว่าเบราว์เซอร์จะไม่ยุ่งในการโหลดหรือแยกวิเคราะห์เนื้อหาในหน้าของคุณ
หากคุณต้องการวัดความล่าช้าในการป้อนข้อมูลครั้งแรกคุณจะต้องใส่รหัสต่อไปนี้โดยตรง
- เปิด
public/index.html
- ยกเลิกการใส่ข้อคิดเห็นแท็ก
script
ในบรรทัดต่อไปนี้
<!-- 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"
)
- ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรี
web-start
ภายในของแอปของคุณ - ทำให้ไฟล์ของคุณใช้งานได้กับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:
firebase deploy --except functions
- คอนโซลควรแสดงสิ่งต่อไปนี้:
=== 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
- ไปที่เว็บแอปของคุณที่ตอนนี้โฮสต์เต็มโดยใช้ 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