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

FireStore

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

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

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

การโต้ตอบระหว่าง Firebase dstabase และโปรแกรมจำลองฟังก์ชัน
ฐานข้อมูลและฟังก์ชั่นการเลียนแบบเมฆเป็นส่วนหนึ่งของ เต็มท้องถิ่น Emulator ห้องสวีท

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

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

  1. คุณสมบัติต้นแบบแบบโต้ตอบกับอีมูเลเตอร์และ Emulator Suite UI

  2. หากคุณกำลังใช้โปรแกรมจำลองฐานข้อมูลหรือโปรแกรมจำลอง Cloud Functions ให้ดำเนินการขั้นตอนเดียวเพื่อเชื่อมต่อแอปของคุณกับโปรแกรมจำลอง

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

เริ่มต้นโปรเจ็กต์ Firebase ในเครื่อง

ตรวจสอบให้แน่ใจว่าคุณ ติดตั้ง CLI หรือ อัปเดตรุ่นล่าสุดของ

curl -sL firebase.tools | bash

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

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

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

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

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

เว็บรุ่น 9

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

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

เว็บรุ่น8

// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("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 รวมถึงวิธีใช้สำหรับการพัฒนาแอปฝั่งเซิร์ฟเวอร์:

อะไรต่อไป?

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