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


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

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

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

การโต้ตอบระหว่างฐานข้อมูล Firebase กับโปรแกรมจำลองฟังก์ชัน
โปรแกรมจำลองฐานข้อมูลและ Cloud Functions เป็นส่วนหนึ่งของ แบบ Local Emulator Suite

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

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

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

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

เมื่อสร้างต้นแบบแบบอินเทอร์แอกทีฟได้ดีและตัดสินใจเลือกการออกแบบแล้ว คุณก็พร้อมที่จะเพิ่มโค้ดการเข้าถึงฐานข้อมูลลงในแอปโดยใช้ SDK ที่เหมาะสม คุณจะใช้แท็บฐานข้อมูลและแท็บ Logsใน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)
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);
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")
Unity
// Connects to the RTDB Emulator running on port 9000.
// Note: You may need to append your namespace: "?ns=YOUR_PROJECT_ID"
FirebaseDatabase database = FirebaseDatabase.GetInstance("http://127.0.0.1:9000");

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);
}

Web

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

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

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

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

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

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

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

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