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


ก่อนที่จะเข้าร่วมกับ 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

หากต้องการสร้างต้นแบบแอปสมมติของเรา ให้ตั้งค่าและทดสอบ Cloud Function พื้นฐานเพื่อแก้ไขรายการข้อความในฐานข้อมูล รวมถึงสร้างและป้อนข้อมูลในฐานข้อมูลนั้นใน 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"

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

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

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

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