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

ก่อนที่คุณจะเริ่มใช้ 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 และฟังก์ชันคลาวด์ที่ทริกเกอร์โดยการดำเนินการบนฐานข้อมูลนั้น

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

  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 ที่มีโค้ดฟังก์ชันระบบคลาวด์ และไฟล์สนับสนุนอื่นๆ

ต้นแบบโต้ตอบ

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

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

ทุกอย่างพร้อมใช้งานเมื่อคุณเริ่ม Local Emulator Suite ด้วย:

firebase emulators:start

ในการสร้างต้นแบบแอปสมมุติของเรา ให้ตั้งค่าและทดสอบฟังก์ชันคลาวด์พื้นฐานเพื่อแก้ไขรายการข้อความในฐานข้อมูล และสร้างและเติมข้อมูลฐานข้อมูลนั้นใน Emulator Suite UI เพื่อทริกเกอร์

  1. สร้างฟังก์ชันคลาวด์ที่ทริกเกอร์โดยการเขียนฐานข้อมูลโดยแก้ไขไฟล์ functions/index.js ในไดเร็กทอรีโปรเจ็กต์ของคุณ แทนที่เนื้อหาของไฟล์ที่มีอยู่ด้วยข้อมูลโค้ดต่อไปนี้ ฟังก์ชันนี้รับฟังการเปลี่ยนแปลงเอกสารในคอ messages เลกชันข้อความ แปลงเนื้อหาของฟิลด์ original ของเอกสารให้เป็นตัวพิมพ์ใหญ่ และจัดเก็บผลลัพธ์ในฟิลด์ uppercase ของเอกสารนั้น
    2.   const functions = require('firebase-functions');

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

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

เชื่อมต่อแอปของคุณกับอีมูเลเตอร์

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

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

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

Kotlin+KTX
// 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
สวิฟต์
let settings = Firestore.firestore().settings
settings.host = "127.0.0.1:8080"
settings.isPersistenceEnabled = false 
settings.isSSLEnabled = false
Firestore.firestore().settings = settings
ViewController.swift

Web modular API

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 namespaced API

// 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 รวมถึงวิธีใช้พวกมันสำหรับการพัฒนาแอพฝั่งเซิร์ฟเวอร์:

อะไรต่อไป?

อย่าลืมอ่านหัวข้อที่เกี่ยวข้องกับอีมูเลเตอร์เฉพาะที่ลิงก์ด้านบน แล้ว: