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


ก่อนที่จะเข้าร่วมกับ 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.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 แต่โปรดตรวจสอบเอาต์พุตข้อความเทอร์มินัลโดย CLI ในFirebase จดบันทึกสถานะของโปรแกรมจำลองที่ใช้ได้ ในกรณีของเรา โปรแกรมจำลอง Cloud Functions และ Realtime Database จะทำงาน
    รูปภาพของฉัน
  4. ใน UI ให้ใช้เนื้อหาของฐานข้อมูลในแท็บ Realtime Database การควบคุมเครื่องมือแก้ไขเพื่อสร้างชุดโหนดที่มี messages โหนด ที่มีโหนด message1 และจะมีโหนดที่มี ตั้งค่าคีย์เป็น original และกำหนดค่าเป็น test ช่วงเวลานี้ จะเรียกใช้ฟังก์ชันระบบคลาวด์ สังเกตว่ามีคอลัมน์ uppercase พร็อพเพอร์ตี้จะปรากฏขึ้นในไม่ช้า พร้อมค่า TEST
    รูปภาพของฉัน รูปภาพของฉัน
  5. ตรวจสอบแท็บบันทึกเพื่อยืนยันว่าฟังก์ชันไม่ได้เรียกใช้ข้อผิดพลาด Inot เมื่ออัปเดตฐานข้อมูล

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

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

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

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

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

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

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

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