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


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

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

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

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

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

หลังจากเริ่มต้นโปรเจ็กต์ 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 Functions พื้นฐาน เพื่อแก้ไขรายการข้อความในฐานข้อมูล รวมถึงสร้างและป้อนข้อมูลลงในฐานข้อมูลนั้น ใน Emulator Suite UI เพื่อทริกเกอร์ฟังก์ชัน

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

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

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

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

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

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

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

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

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

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

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