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


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

สร้างต้นแบบและทดสอบ

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

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

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

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

โดยคุณจะใช้ฟีเจอร์ทั้งหมดได้เมื่อเริ่ม Local Emulator Suite ด้วยการทำดังนี้

firebase emulators:start

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

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

  exports.makeUppercase = functions.database.ref('/messages/{pushId}/original')
      .onCreate((snapshot, context) => {
        const original = snapshot.val();
        console.log('Uppercasing', context.params.pushId, original);
        const uppercase = original.toUpperCase();
        return snapshot.ref.parent.child('uppercase').set(uppercase);
      });
  2. เปิดใช้ Local Emulator Suite ด้วย firebase emulators:start Cloud Functions และโปรแกรมจำลองฐานข้อมูล จะเริ่มต้นทำงานและกำหนดค่าโดยอัตโนมัติให้ทำงานร่วมกันได้
  3. ดู UI ในเบราว์เซอร์ได้ที่ http://localhost:4000 พอร์ต 4000 เป็นพอร์ตเริ่มต้นสำหรับ UI แต่ให้ตรวจสอบเอาต์พุตข้อความของเทอร์มินัลที่สร้างโดย Firebase CLI จดบันทึกสถานะของโปรแกรมจำลองที่พร้อมใช้งาน ในกรณีของเรา โปรแกรมจำลอง Cloud Functions และ Realtime Database จะทำงานอยู่
    รูปภาพของฉัน
  4. ใน UI บนแท็บ Realtime Database ให้ใช้ตัวควบคุมโปรแกรมแก้ไขเนื้อหาฐานข้อมูล เพื่อสร้างชุดโหนดที่มีโหนด messages ซึ่งมีโหนด message1 อยู่ภายใน และในโหนดนั้นมีโหนดที่มี คีย์ตั้งค่าเป็น original และค่าตั้งค่าเป็น test ซึ่ง จะทริกเกอร์ฟังก์ชันระบบคลาวด์ของเรา สังเกตว่าพร็อพเพอร์ตี้ uppercase ใหม่จะปรากฏขึ้นในไม่ช้า โดยมีค่าเป็น TEST
    รูปภาพของฉัน รูปภาพของฉัน
  5. ตรวจสอบแท็บบันทึกเพื่อให้แน่ใจว่าฟังก์ชันของคุณทำงานโดยไม่มีข้อผิดพลาด ขณะอัปเดตฐานข้อมูล

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

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

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

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

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

Kotlin
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val database = Firebase.database
database.useEmulator("10.0.2.2", 9000)
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.
FirebaseDatabase database = FirebaseDatabase.getInstance();
database.useEmulator("10.0.2.2", 9000);
EmulatorSuite.java
Swift
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://127.0.0.1:9000?ns=YOUR_DATABASE_NAMESPACE")
ViewController.swift

Web

import { getDatabase, connectDatabaseEmulator } from "firebase/database";

const db = getDatabase();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  connectDatabaseEmulator(db, "127.0.0.1", 9000);
} 
rtdb_emulator_connect.js

Web

var db = firebase.database();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  db.useEmulator("127.0.0.1", 9000);
} 
emulator-suite.js

ทดสอบโดยอัตโนมัติด้วยสคริปต์ที่กำหนดเอง

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

firebase emulators:exec "./testdir/test.sh"

สำรวจโปรแกรมจำลองแต่ละโปรแกรมให้ลึกซึ้งยิ่งขึ้น

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

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

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