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


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

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

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

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

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

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

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