เชื่อมต่อแอปและเริ่มสร้างต้นแบบ


ก่อนเริ่มต้นใช้งาน Firebase Local Emulator Suite โปรดตรวจสอบว่าคุณได้สร้างโปรเจ็กต์ Firebase, ตั้งค่าสภาพแวดล้อมการพัฒนา และเลือกและติดตั้ง Firebase SDK สําหรับแพลตฟอร์มตามหัวข้อเริ่มต้นใช้งาน Firebase สําหรับแพลตฟอร์มของคุณ ซึ่งได้แก่ Apple, Android หรือ เว็บ

สร้างต้นแบบและทดสอบ

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

การโต้ตอบระหว่างฐานข้อมูล Firebase กับโปรแกรมจำลองฟังก์ชัน
ฐานข้อมูลและโปรแกรมจำลอง Cloud Functions เป็นส่วนหนึ่งของ Local Emulator Suite เวอร์ชันสมบูรณ์

ในหัวข้อนี้ เราจะอธิบายเวิร์กโฟลว์ Local Emulator Suite โดยสมมติว่าคุณกําลังทํางานกับแอปที่ใช้ผลิตภัณฑ์แบบผสมผสานทั่วไป ได้แก่ ฐานข้อมูล Firebase และ Cloud Functions ที่ทริกเกอร์โดยการดำเนินการในฐานข้อมูลนั้น

หลังจากเริ่มต้นโปรเจ็กต์ Firebase ในพื้นที่แล้ว โดยทั่วไปวงจรการพัฒนาโดยใช้ Local Emulator Suite จะมี 3 ขั้นตอนดังนี้

  1. โต้ตอบกับฟีเจอร์ต้นแบบด้วยโปรแกรมจำลองและ Emulator Suite UI

  2. หากใช้โปรแกรมจำลองฐานข้อมูลหรือโปรแกรมจำลอง Cloud Functions ให้ทำตามขั้นตอนแบบครั้งเดียวเพื่อเชื่อมต่อแอปกับโปรแกรมจำลอง

  3. ทำการทดสอบโดยอัตโนมัติด้วยโปรแกรมจำลองและสคริปต์ที่กำหนดเอง

เริ่มต้นโปรเจ็กต์ Firebase ในเครื่อง

ตรวจสอบว่าคุณได้ติดตั้ง CLI หรืออัปเดตเป็นเวอร์ชันล่าสุดแล้ว

curl -sL firebase.tools | bash

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

firebase init

ตอนนี้ไดเรกทอรีโปรเจ็กต์จะมีไฟล์การกําหนดค่า Firebase, Firebase Security Rulesไฟล์คําจํากัดความสําหรับฐานข้อมูล, ไดเรกทอรี functions ที่มีโค้ดฟังก์ชันระบบคลาวด์ และไฟล์สนับสนุนอื่นๆ

สร้างต้นแบบแบบอินเทอร์แอกทีฟ

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

เมื่อใช้ Emulator Suite UI คุณจะออกแบบฐานข้อมูลซ้ำ ทดลองใช้การไหลของข้อมูลต่างๆ ที่เกี่ยวข้องกับ Cloud Functions ประเมินการเปลี่ยนแปลงกฎการรักษาความปลอดภัย ตรวจสอบบันทึกเพื่อยืนยันประสิทธิภาพของบริการแบ็กเอนด์ และอื่นๆ ได้ จากนั้น หากต้องการเริ่มต้นใหม่ ให้ล้างฐานข้อมูลแล้วเริ่มใหม่ด้วยแนวคิดการออกแบบใหม่

ฟีเจอร์ทั้งหมดจะพร้อมใช้งานเมื่อคุณเริ่มLocal Emulator Suiteด้วยคำสั่งต่อไปนี้

firebase emulators:start

หากต้องการสร้างต้นแบบแอปสมมติของเรา ให้ตั้งค่าและทดสอบ Cloud Function พื้นฐานเพื่อแก้ไขรายการข้อความในฐานข้อมูล รวมถึงสร้างและป้อนข้อมูลในฐานข้อมูลนั้นใน Emulator Suite UI เพื่อเรียกให้แสดง

  1. สร้างฟังก์ชันระบบคลาวด์ที่ทริกเกอร์โดยการเขียนฐานข้อมูลด้วยการแก้ไขไฟล์ functions/index.js ในไดเรกทอรีโปรเจ็กต์ แทนที่เนื้อหาของไฟล์ที่มีอยู่ด้วยข้อมูลโค้ดต่อไปนี้ ฟังก์ชันนี้จะคอยตรวจหาการเปลี่ยนแปลงในเอกสารของคอลเล็กชัน messages โดยแปลงเนื้อหาของช่อง original ของเอกสารเป็นตัวพิมพ์ใหญ่ และจัดเก็บผลลัพธ์ไว้ในช่อง uppercase ของเอกสารนั้น
    2.   const functions = require('firebase-functions/v1');

  exports.makeUppercase = functions.firestore.document('/messages/{documentId}')
      .onCreate((snap, context) => {
        const original = snap.data().original;
        console.log('Uppercasing', context.params.documentId, original);
        const uppercase = original.toUpperCase();
        return snap.ref.set({uppercase}, {merge: true});
      });
  2. เปิด Local Emulator Suite ด้วย firebase emulators:start โปรแกรมจำลอง Cloud Functions และฐานข้อมูลจะเริ่มทำงานโดยกำหนดค่าให้ทำงานร่วมกันโดยอัตโนมัติ
  3. ดู UI ในเบราว์เซอร์ที่ http://localhost:4000 พอร์ต 4000 เป็นพอร์ตเริ่มต้นสำหรับ UI แต่ให้ตรวจสอบเอาต์พุตข้อความเทอร์มินัลโดย Firebase CLI จดสถานะของโปรแกรมจำลองที่ใช้ได้ ในกรณีของเรา โปรแกรมจำลอง Cloud Functions และ Cloud Firestore จะทำงานอยู่
    รูปภาพของฉัน
  4. ใน UI ให้คลิกเริ่มคอลเล็กชันในแท็บ Firestore > ข้อมูล แล้วทําตามข้อความแจ้งเพื่อสร้างเอกสารใหม่ในคอลเล็กชัน messages ที่มีชื่อช่อง original และค่า test ซึ่งจะทริกเกอร์ฟังก์ชันระบบคลาวด์ โปรดสังเกตว่าช่อง uppercase ใหม่จะปรากฏขึ้นในไม่ช้า โดยจะมีสตริง "TEST"
    รูปภาพของฉัน รูปภาพของฉัน
  5. ในแท็บ Firestore > คำขอ ให้ตรวจสอบคำขอที่ส่งไปยังฐานข้อมูลจำลอง รวมถึงการประเมิน Firebase Security Rules ทั้งหมดที่ทำโดยเป็นส่วนหนึ่งของการดำเนินการตามคำขอเหล่านั้น
  6. ตรวจสอบแท็บบันทึกเพื่อยืนยันว่าฟังก์ชันไม่พบข้อผิดพลาดขณะอัปเดตฐานข้อมูล

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

เชื่อมต่อแอปกับโปรแกรมจำลอง

เมื่อคุณทําโปรโตไทป์แบบอินเทอร์แอกทีฟได้สําเร็จและเลือกการออกแบบได้แล้ว ก็จะพร้อมเพิ่มโค้ดการเข้าถึงฐานข้อมูลลงในแอปโดยใช้ SDK ที่เหมาะสม คุณจะยังใช้แท็บฐานข้อมูลต่อไป และสำหรับฟังก์ชัน แท็บ บันทึกใน Emulator Suite UI เพื่อยืนยันว่าลักษณะการทำงานของแอป ถูกต้อง

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

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

Kotlin+KTX
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val firestore = Firebase.firestore
firestore.useEmulator("10.0.2.2", 8080)

firestore.firestoreSettings = firestoreSettings {
    isPersistenceEnabled = false
}
EmulatorSuite.kt
Java
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
FirebaseFirestore firestore = FirebaseFirestore.getInstance();
firestore.useEmulator("10.0.2.2", 8080);

FirebaseFirestoreSettings settings = new FirebaseFirestoreSettings.Builder()
        .setPersistenceEnabled(false)
        .build();
firestore.setFirestoreSettings(settings);
EmulatorSuite.java
Swift
let settings = Firestore.firestore().settings
settings.host = "127.0.0.1:8080"
settings.cacheSettings = MemoryCacheSettings()
settings.isSSLEnabled = false
Firestore.firestore().settings = settings
ViewController.swift

Web

import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
connectFirestoreEmulator(db, '127.0.0.1', 8080);
fs_emulator_connect.js

Web

// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("127.0.0.1", 8080);
}
emulator-suite.js

ทำการทดสอบโดยอัตโนมัติด้วยสคริปต์ที่กำหนดเอง

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

firebase emulators:exec "./testdir/test.sh"

สำรวจโปรแกรมจำลองแต่ละรายการอย่างละเอียด

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

ฉันควรทำอย่างไรต่อไป

อย่าลืมอ่านหัวข้อที่เกี่ยวข้องกับโปรแกรมจำลองที่ลิงก์ไว้ด้านบน จากนั้นให้ทำดังนี้