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


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

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

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ที่มีโค้ด Cloud 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 ซึ่งจะทริกเกอร์ Cloud Function ของเรา สังเกตว่าฟิลด์ใหม่ uppercase จะปรากฏขึ้นในไม่ช้า โดยมีสตริง "TEST"
    รูปภาพของฉัน รูปภาพของฉัน
  5. ในแท็บ Firestore > คำขอ ให้ตรวจสอบคำขอที่ส่งไปยัง ฐานข้อมูลจำลอง รวมถึงFirebase Security Rulesการประเมินทั้งหมดที่ดำเนินการ เป็นส่วนหนึ่งของการดำเนินการตามคำขอเหล่านั้น
  6. ตรวจสอบแท็บบันทึกเพื่อยืนยันว่าฟังก์ชันของคุณไม่มีข้อผิดพลาด ขณะอัปเดตฐานข้อมูล

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

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

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

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

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

Kotlin
// 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
}
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);
Swift
let settings = Firestore.firestore().settings
settings.host = "127.0.0.1:8080"
settings.cacheSettings = MemoryCacheSettings()
settings.isSSLEnabled = false
Firestore.firestore().settings = settings
Unity
FirebaseFirestore db = FirebaseFirestore.DefaultInstance;
// Connects to the Firestore Emulator running on port 8080
db.Settings.Host = "127.0.0.1:8080";
db.Settings.SslEnabled = false;

Web

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

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

Web

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

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

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

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

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

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

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

โปรดอ่านหัวข้อที่เกี่ยวข้องกับโปรแกรมจำลองที่เฉพาะเจาะจงซึ่งลิงก์อยู่ด้านบน จากนั้นให้ทำดังนี้