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

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

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

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

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

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

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

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

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

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

    npm install firebase

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

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

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

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

ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำการใช้ Bundler ของโมดูลกับ Firebase

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

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

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

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

2 Firebase SQL Connect เดิมเรียกว่า "Firebase Data Connect"

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

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