Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

เชื่อมต่อแอพของคุณและเริ่มสร้างต้นแบบ

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

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

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

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

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

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

  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 สำหรับฐานข้อมูล ไดเรกทอรี 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');
    
      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});
          });
      
  3. เปิด Local Emulator Suite ด้วย firebase emulators:start Cloud Functions และโปรแกรมจำลองฐานข้อมูลเริ่มทำงาน กำหนดค่าให้ทำงานร่วมกันโดยอัตโนมัติ
  4. ดู UI ในเบราว์เซอร์ของคุณที่ http://localhost:4000 พอร์ต 4000 เป็นค่าเริ่มต้นสำหรับ UI แต่ตรวจสอบข้อความเทอร์มินัลที่ส่งออกโดย Firebase CLI สังเกตสถานะของอีมูเลเตอร์ที่มีอยู่ ในกรณีของเรา Cloud Functions และโปรแกรมจำลอง Cloud Firestore จะทำงาน
    รูปของฉัน
  5. ใน UI บนแท็บ Firestore ให้คลิก เริ่มคอลเลกชั่น และปฏิบัติตามคำแนะนำเพื่อสร้างเอกสารใหม่ในคอลเลกชั่น messages โดยใช้ fieldname original และ value test สิ่งนี้จะกระตุ้นการทำงานของระบบคลาวด์ของเรา สังเกตว่าฟิลด์ uppercase ใหม่จะปรากฏขึ้นในไม่ช้า เติมด้วยสตริง "TEST"
    รูปของฉันรูปของฉัน
  6. ตรวจสอบแท็บ บันทึก เพื่อยืนยันว่าฟังก์ชันของคุณไม่มีข้อผิดพลาดขณะอัปเดตฐานข้อมูล

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

เชื่อมต่อแอพของคุณกับอีมูเลเตอร์

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

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

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

Android
        // 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);
iOS - Swift
let settings = Firestore.firestore().settings
settings.host = "localhost:8080"
settings.isPersistenceEnabled = false 
settings.isSSLEnabled = false
Firestore.firestore().settings = settings

เว็บ v8

// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("localhost", 8080);
}

เว็บ v9

import { getFirestore, useFirestoreEmulator } from "firebase/firestore";

// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
useFirestoreEmulator(db, 'localhost', 8080);
เว็บ
// Initialize your Web app as described in the Get started for Web
// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("localhost", 8080);
}

ทำให้การทดสอบของคุณเป็นแบบอัตโนมัติด้วยสคริปต์ที่กำหนดเอง

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

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

สำรวจอีมูเลเตอร์แต่ละตัวในเชิงลึกมากขึ้น

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

อะไรต่อไป?

อย่าลืมอ่านหัวข้อที่เกี่ยวข้องกับอีมูเลเตอร์บางตัวที่ลิงก์ด้านบน จากนั้น: