เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript

ทำตามคำแนะนำนี้เพื่อใช้ Firebase JavaScript SDK ในเว็บแอปหรือเป็นไคลเอ็นต์สำหรับการเข้าถึงของผู้ใช้ปลายทาง เช่น ในแอปพลิเคชันเดสก์ท็อปหรือ IoT ของ Node.js

ขั้นตอนที่ 1: สร้างโปรเจ็กต์ Firebase และลงทะเบียนแอป

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

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

หากยังไม่มีโปรเจ็กต์ JavaScript และเพียงต้องการลองใช้ผลิตภัณฑ์ Firebase คุณสามารถดาวน์โหลดตัวอย่างการเริ่มต้นใช้งานฉบับย่อของเราได้

ขั้นตอนที่ 2: ติดตั้ง SDK และเริ่มต้น Firebase

หน้านี้อธิบายวิธีการตั้งค่าสำหรับ Modular API ของ Firebase JS SDK ซึ่งใช้รูปแบบโมดูล JavaScript

เวิร์กโฟลว์นี้ใช้ npm และต้องใช้ตัวจัดกลุ่มโมดูลหรือเครื่องมือเฟรมเวิร์ก JavaScript เนื่องจาก Modular API ได้รับการปรับให้ทำงานร่วมกับ ตัวจัดกลุ่มโมดูล เพื่อนำโค้ดที่ไม่ได้ใช้ออก (Tree-Shaking) และลดขนาด SDK

  1. ติดตั้ง Firebase โดยใช้ npm ดังนี้

    npm install firebase

  2. เริ่มต้น Firebase ในแอปและสร้างออบเจ็กต์ Firebase App ดังนี้

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Firebase App เป็นออบเจ็กต์คล้ายคอนเทนเนอร์ที่จัดเก็บการกำหนดค่าทั่วไปและแชร์การตรวจสอบสิทธิ์ในบริการ Firebase หลังจากเริ่มต้นออบเจ็กต์ Firebase App ในโค้ดแล้ว คุณจะเพิ่มและเริ่มใช้บริการ Firebase ได้

    หากแอปมีฟีเจอร์แบบไดนามิกที่อิงตามการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) คุณจะต้องทำตามขั้นตอนเพิ่มเติมเพื่อให้แน่ใจว่าการกำหนดค่าจะยังคงอยู่ในการแสดงผลฝั่งเซิร์ฟเวอร์และการแสดงผลฝั่งไคลเอ็นต์ ใน ตรรกะของเซิร์ฟเวอร์ ให้ใช้ FirebaseServerApp อินเทอร์เฟซ เพื่อ เพิ่มประสิทธิภาพการจัดการ เซสชันของแอปด้วย Service Worker

ขั้นตอนที่ 3: เข้าถึง Firebase ในแอป

บริการ Firebase (เช่น Cloud Firestore, Authentication, Realtime Database, Remote Config, และอื่นๆ) พร้อมให้คุณนำเข้าไปใช้ในแพ็กเกจย่อยแต่ละรายการ

ตัวอย่างด้านล่างแสดงวิธีใช้ Cloud Firestore Lite SDK เพื่อดึงข้อมูลรายการ

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

ขั้นตอนที่ 4: ใช้ตัวจัดกลุ่มโมดูล (webpack/Rollup) เพื่อลดขนาด

Firebase Web SDK ได้รับการออกแบบมาให้ทำงานร่วมกับตัวจัดกลุ่มโมดูลเพื่อนำโค้ดที่ไม่ได้ใช้ออก (Tree-Shaking) เราขอแนะนำอย่างยิ่งให้ใช้วิธีนี้สำหรับแอปเวอร์ชันที่ใช้งานจริง เครื่องมือต่างๆ เช่น Angular CLI, Next.js, Vue CLI, หรือ Create React App จะจัดการการจัดกลุ่มโมดูลสำหรับไลบรารีที่ติดตั้งผ่าน npm และนำเข้าไปยัง ฐานของโค้ดโดยอัตโนมัติ

ดูข้อมูลเพิ่มเติมได้ในคู่มือการใช้ตัวจัดกลุ่มโมดูลกับ Firebase

บริการ Firebase ที่พร้อมใช้งานสำหรับเว็บ

เมื่อตั้งค่าให้ใช้ Firebase แล้ว คุณจะเริ่มเพิ่มและใช้บริการ Firebase ที่พร้อมใช้งานต่อไปนี้ในเว็บแอปได้

คำสั่งต่อไปนี้แสดงวิธีนำเข้าไลบรารี Firebase ที่ติดตั้งไว้ในเครื่อง ด้วย npm ดูตัวเลือกการนำเข้าอื่นๆ ได้ใน เอกสารประกอบของไลบรารีที่พร้อมใช้งาน

1 Firebase AI Logic เดิมชื่อ "Vertex AI in Firebase" ที่มีแพ็กเกจ firebase/vertexai.

ขั้นตอนถัดไป

ดูข้อมูลเกี่ยวกับ Firebase