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


ก่อนที่จะเริ่มใช้ 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, ไฟล์คำจำกัดความสำหรับฐานข้อมูล, ไดเรกทอรีที่มีโค้ดฟังก์ชัน Cloud และไฟล์สนับสนุนอื่นๆFirebase Security Rulesfunctions

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

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

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

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

firebase emulators:start

ในการสร้างต้นแบบแอปสมมติของเรา ให้ตั้งค่าและทดสอบฟังก์ชัน Cloud พื้นฐาน เพื่อแก้ไขรายการข้อความในฐานข้อมูล รวมถึงสร้างและป้อนข้อมูลในฐานข้อมูลนั้น ใน 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. ตรวจสอบแท็บบันทึกเพื่อให้แน่ใจว่าฟังก์ชันของคุณไม่มีข้อผิดพลาด ขณะอัปเดตฐานข้อมูล

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

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

เมื่อสร้างต้นแบบแบบอินเทอร์แอกทีฟได้ดีและตัดสินใจเลือกการออกแบบแล้ว คุณก็พร้อมที่จะเพิ่มโค้ดการเข้าถึงฐานข้อมูลลงในแอปโดยใช้ 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
}
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"

สำรวจโปรแกรมจำลองแต่ละโปรแกรมให้ละเอียดยิ่งขึ้น

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

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

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