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


ก่อนที่จะเริ่มใช้ 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 ที่มีโค้ด Cloud Functions และไฟล์สนับสนุนอื่นๆ

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

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

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

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

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

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

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

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

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

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