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


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

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

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

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

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

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

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

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