Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

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

ก่อนที่คุณจะเริ่มใช้ 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 โดยทั่วไปจะมีสามขั้นตอน:

  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');
    
      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 > Data ให้คลิก เริ่มการรวบรวม และทำตามพร้อมท์เพื่อสร้างเอกสารใหม่ในคอลเลกชัน messages พร้อมชื่อฟิลด์ original และ test ค่า สิ่งนี้จะกระตุ้นการทำงานของระบบคลาวด์ของเรา สังเกตว่าฟิลด์ uppercase ใหม่จะปรากฏขึ้นในไม่ช้า โดยมีสตริง "TEST"
    ภาพลักษณ์ของฉันภาพลักษณ์ของฉัน
  6. ในแท็บ Firestore > คำขอ ให้ตรวจสอบคำขอที่ส่งไปยังฐานข้อมูลจำลองของคุณ รวมถึงการประเมินกฎความปลอดภัยของ Firebase ทั้งหมดที่ดำเนินการโดยเป็นส่วนหนึ่งของการตอบสนองคำขอเหล่านั้น
  7. ตรวจสอบแท็บ บันทึก เพื่อยืนยันว่าฟังก์ชันของคุณไม่พบข้อผิดพลาดเนื่องจากมีการอัปเดตฐานข้อมูล

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

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

เมื่อคุณมีความคืบหน้าที่ดีกับการสร้างต้นแบบเชิงโต้ตอบและได้ตกลงกับการออกแบบแล้ว คุณจะพร้อมที่จะเพิ่มรหัสการเข้าถึงฐานข้อมูลไปยังแอปของคุณโดยใช้ 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
}
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);
สวิฟต์
let settings = Firestore.firestore().settings
settings.host = "localhost:8080"
settings.isPersistenceEnabled = false 
settings.isSSLEnabled = false
Firestore.firestore().settings = settings

Web version 9

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

// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
connectFirestoreEmulator(db, 'localhost', 8080);

Web version 8

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

อะไรต่อไป?

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