Codelab เว็บ AngularFire

1. ภาพรวม

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

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

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

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

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

2. รับรหัสตัวอย่าง

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

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

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

พื้นที่เก็บ friendlychat-web มีโครงการตัวอย่างสำหรับหลายแพลตฟอร์ม

Codelab นี้ใช้ที่เก็บทั้งสองนี้เท่านั้น:

• 📁 angularfire-start : โค้ดเริ่มต้นที่คุณจะสร้างขึ้นในระหว่าง codelab นี้
• 📁 angularfire : รหัสที่สมบูรณ์สำหรับแอปตัวอย่างที่เสร็จแล้ว

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

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

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

ข้อสำคัญ : หลังจากที่คุณโคลนหรือดาวน์โหลดโค้ดจากที่เก็บแล้ว ให้เข้าถึงไดเร็กทอรี 📁 angularfire-start ในคอนโซลของคุณ และเรียกใช้ npm install เพื่อติดตั้งการพึ่งพา

3. สร้างและตั้งค่าโครงการ Firebase

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

1. ลงชื่อเข้าใช้ Firebase
2. ในคอนโซล Firebase คลิก Add Project จากนั้นตั้งชื่อโปรเจ็กต์ Firebase ของคุณ FriendlyChat จำรหัสโครงการสำหรับโครงการ Firebase ของคุณ
3. ยกเลิก การเลือกเปิดใช้งาน Google Analytics สำหรับโครงการนี้
4. คลิก สร้างโครงการ

สำคัญ : โปรเจ็กต์ Firebase ของคุณจะมีชื่อว่า FriendlyChat แต่ Firebase จะกำหนด ID โปรเจ็กต์ที่ไม่ซ้ำให้โดยอัตโนมัติในรูปแบบ friendlychat-1234 ตัวระบุเฉพาะนี้เป็นวิธีการระบุโครงการของคุณ (รวมถึงใน CLI) ในขณะที่ FriendlyChat เป็นเพียงชื่อที่แสดง

แอปพลิเคชันที่คุณจะสร้างใช้ผลิตภัณฑ์ 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. ในขั้นตอนถัดไป คุณจะเห็นวัตถุการกำหนดค่า คัดลอกเฉพาะวัตถุ JS (ไม่ใช่ HTML โดยรอบ) ลงใน firebase-config.js

เปิดใช้งาน การลงชื่อเข้าใช้ Google สำหรับ Firebase Authentication

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

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

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

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

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

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

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

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

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

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

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

เปิดใช้งานที่เก็บข้อมูลบนคลาวด์

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

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

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

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

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

4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase

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

หมายเหตุ : ในการติดตั้ง CLI คุณต้องติดตั้ง npm ซึ่งโดยทั่วไปจะมาพร้อมกับ Node.js

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

npm -g install firebase-tools

ไม่ทำงาน? คุณอาจต้อง เปลี่ยนสิทธิ์ npm

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

firebase --version

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

3. อนุญาต Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:

firebase login

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

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

firebase use --add

6. เมื่อได้รับแจ้ง ให้เลือก Project ID ของคุณ จากนั้นตั้งนามแฝงให้กับโปรเจ็กต์ Firebase

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

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

5. ติดตั้ง AngularFire

ก่อนเรียกใช้โปรเจ็กต์ ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่า Angular CLI และ AngularFire แล้ว

1. ในคอนโซล ให้รันคำสั่งต่อไปนี้:

npm install -g @angular/cli

2. จากนั้นในคอนโซลจากไดเร็กทอรี angularfire-start ให้รันคำสั่ง Angular CLI ต่อไปนี้:

ng add @angular/fire

สิ่งนี้จะติดตั้งการพึ่งพาที่จำเป็นทั้งหมดสำหรับโครงการของคุณ

3. เมื่อได้รับแจ้ง ให้เลือกคุณสมบัติที่ตั้งค่าไว้ใน Firebase Console ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging , Cloud Storage ) และปฏิบัติตามคำแนะนำบนคอนโซล

6. เรียกใช้แอปเริ่มต้นในเครื่อง

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

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

firebase emulators:start

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

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

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

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

คุณควรเห็น UI ของแอป FriendlyChat ซึ่งยังใช้งานไม่ได้ (ยัง!)

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

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

7. นำเข้าและกำหนดค่า Firebase

กำหนดค่า Firebase

คุณจะต้องกำหนดค่า Firebase SDK เพื่อบอกว่าคุณกำลังใช้โปรเจ็กต์ Firebase ใด

1. ไปที่ การตั้งค่าโครงการของคุณในคอนโซล Firebase
2. ในการ์ด "แอปของคุณ" ให้เลือกชื่อเล่นของแอปที่คุณต้องการวัตถุการกำหนดค่า
3. เลือก "กำหนดค่า" จากแผงข้อมูลโค้ด Firebase SDK

คุณจะพบว่าไฟล์สภาพแวดล้อม /angularfire-start/src/environments/environment.ts ถูกสร้างขึ้นสำหรับคุณ

4. คัดลอกส่วนย่อยของวัตถุ config แล้วเพิ่มไปยัง angularfire-start/src/firebase-config.js

สิ่งแวดล้อม.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID",
  },
};

โค้ดด้านบนควรมีออบเจกต์การกำหนดค่า Firebase เฉพาะแอปของคุณ ไม่ใช่ค่าตัวยึดตำแหน่งของเรา!

นำเข้า AngularFire

คุณจะพบว่าคุณสมบัติที่คุณเลือกในคอนโซลนั้นถูกกำหนดเส้นทางโดยอัตโนมัติในไฟล์ /angularfire-start/src/app/app.module.ts ซึ่งช่วยให้แอปใช้ฟีเจอร์และฟังก์ชันต่างๆ ของ Firebase ได้ อย่างไรก็ตาม หากต้องการพัฒนาในสภาพแวดล้อมท้องถิ่น คุณต้องเชื่อมต่ออุปกรณ์เหล่านั้นเพื่อใช้ชุด Emulator

1. ใน /angularfire-start/src/app/app.module.ts ค้นหาส่วน imports และแก้ไขฟังก์ชันที่มีให้เพื่อเชื่อมต่อกับ Emulator suite ในสภาพแวดล้อมที่ไม่ได้ใช้งานจริง

// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

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

8. ตั้งค่าการลงชื่อเข้าใช้ของผู้ใช้

ขณะนี้ AngularFire ควรพร้อมใช้งานแล้ว เนื่องจากนำเข้าและเริ่มต้นใน app.module.ts คุณกำลังจะใช้การลงชื่อเข้าใช้ของผู้ใช้โดยใช้ Firebase Authentication

ตรวจสอบผู้ใช้ของคุณด้วย Google Sign-In

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

1. ในไดเร็กทอรี angularfire-start ในไดเร็กทอรีย่อย /src/app/services/ ให้เปิด chat.service.ts
2. ค้นหา login ระบบของฟังก์ชัน
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

แชท.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

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

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. ค้นหาฟังก์ชัน logout
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

แชท.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

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

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

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. ค้นหาการกำหนดตัวแปร user$
3. แทนที่การมอบหมายทั้งหมดด้วยรหัสต่อไปนี้

แชท.service.ts

// Observable user
user$ = user(this.auth);

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

ทดสอบการเข้าสู่แอพ

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

9. เขียนข้อความไปที่ Cloud Firestore

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

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

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

เคล็ดลับ : หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโมเดลข้อมูล Cloud Firestore โปรดอ่านเกี่ยวกับเอกสารและคอลเล็กชันใน เอกสารประกอบ

เพิ่มข้อความไปยัง Cloud Firestore

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

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

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. ค้นหาฟังก์ชัน addMessage
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

แชท.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

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

1. หากแอปของคุณยังให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้รัน firebase emulators:start บนบรรทัดคำสั่งเพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
2. หลังจากเข้าสู่ระบบ ให้ป้อนข้อความเช่น "Hey there!" จากนั้นคลิก SEND สิ่งนี้จะเขียนข้อความลงใน Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงของคุณ เนื่องจากคุณยังคงต้องใช้ การดึง ข้อมูล (ส่วนถัดไปของ Codelab)
3. คุณจะเห็นข้อความที่เพิ่มใหม่ในคอนโซล Firebase เปิด Emulator suite UI ของคุณ ในส่วน Build ให้คลิก Firestore Database (หรือคลิก ที่นี่ แล้วคุณจะเห็นคอลเล็กชัน ข้อความ พร้อมข้อความที่เพิ่มใหม่ของคุณ:

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

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

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

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

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. ค้นหาฟังก์ชัน loadMessages
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

แชท.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

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

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

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

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

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

11. ส่งภาพ

ตอนนี้คุณจะเพิ่มฟีเจอร์ที่แบ่งปันรูปภาพ

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

บันทึกภาพไปยังที่เก็บข้อมูลบนคลาวด์

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

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

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

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

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

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

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

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

12. แสดงการแจ้งเตือน

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

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

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

ผู้ให้บริการส่งข้อความควรได้รับการตั้งค่าแล้วเมื่อเพิ่ม AngularFire ตรวจสอบให้แน่ใจว่ามีรหัสต่อไปนี้อยู่ในส่วนการนำเข้าของ /angularfire-start/src/app/app.module.ts

provideMessaging(() => {
    return getMessaging();
}),

แอพ/app.module.ts

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

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

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

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

แชท.service.ts

2. ค้นหาฟังก์ชัน saveMessagingDeviceToken
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

แชท.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

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

ขออนุญาตแสดงการแจ้งเตือน

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

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. ค้นหาฟังก์ชัน requestNotificationsPermissions
3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

แชท.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

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

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

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

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

1. เปิด แท็บ Cloud Messaging ของคอนโซล Firebase
2. คลิก "การแจ้งเตือนใหม่"
3. ป้อนชื่อการแจ้งเตือนและข้อความแจ้งเตือน
4. ที่ด้านขวาของหน้าจอ คลิก "ส่งข้อความทดสอบ"
5. ป้อนโทเค็นอุปกรณ์ที่คุณคัดลอกจากคอนโซล JavaScript ของเบราว์เซอร์ จากนั้นคลิกเครื่องหมายบวก ("+")
6. คลิก "ทดสอบ"

หากแอปของคุณอยู่เบื้องหน้า คุณจะเห็นการแจ้งเตือนในคอนโซล JavaScript

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

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

13. กฎความปลอดภัยของ Cloud Firestore

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

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

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

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

rules_version = '2';

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

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

firestore.rules

rules_version = '2';

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;
    }
  }
}

ตัวแปรกฎ request.auth เป็นตัวแปรพิเศษที่มีข้อมูลเกี่ยวกับผู้ใช้ที่ผ่านการรับรองความถูกต้อง ตัวแปรกฎ request.resource ชี้ไปที่ข้อมูลใหม่ที่กำลังเขียน สามารถดูข้อมูลเพิ่มเติมได้ใน เอกสารประกอบ

กฎความปลอดภัยควรอัปเดตเป็นชุด Emulator ของคุณโดยอัตโนมัติ

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

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

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

rules_version = '2';

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

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

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

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

storage.rules

rules_version = '2';

// 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;
    }
  }
}

ตัวแปรกฎ request.auth เป็นตัวแปรพิเศษที่มีข้อมูลเกี่ยวกับผู้ใช้ที่ผ่านการรับรองความถูกต้อง ตัวแปรกฎ request.resource มีข้อมูลเกี่ยวกับไฟล์ที่อัปโหลด สามารถดูข้อมูลเพิ่มเติมได้ใน เอกสารประกอบ

14. ปรับใช้แอปของคุณโดยใช้ Firebase Hosting

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. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเร็กทอรี angularfire-start ในเครื่องของแอป
2. ปรับใช้ไฟล์ของคุณกับโครงการ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:

ng deploy

จากนั้นเลือกตัวเลือก Firebase และปฏิบัติตามคำแนะนำในบรรทัดคำสั่ง

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. เยี่ยมชมเว็บแอปของคุณที่ตอนนี้โฮสต์โดยสมบูรณ์บน CDN ทั่วโลกโดยใช้โฮสติ้ง Firebase ที่โดเมนย่อย Firebase สองโดเมนของคุณเอง:

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

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

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

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

15. ยินดีด้วย!

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

สิ่งที่คุณได้ครอบคลุม

• การรับรองความถูกต้องของ Firebase
• Cloud Firestore
• Firebase SDK สำหรับที่เก็บข้อมูลบนคลาวด์
• การส่งข้อความบนคลาวด์ของ Firebase
• การตรวจสอบประสิทธิภาพ Firebase
• โฮสติ้ง Firebase

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

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

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

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

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

• firebase.google.com