เพิ่ม 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 JavaScript SDK ซึ่งใช้ รูปแบบ JavaScript Module

เวิร์กโฟลว์นี้ใช้ 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 JavaScript 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.

2 Firebase SQL Connect เดิมชื่อ "Firebase Data Connect"

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

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