เพิ่ม 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 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 &>#39;firebase/service';

// TODO: Replace the following with your app&#39;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.

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

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

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