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

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

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

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

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

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

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

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

เวิร์กโฟลว์นี้ใช้ npm และต้องใช้ Module Bundler หรือเครื่องมือเฟรมเวิร์ก JavaScript เนื่องจาก API โมดูลได้รับการเพิ่มประสิทธิภาพให้ทำงานร่วมกับ module Bundler เพื่อกำจัดโค้ดที่ไม่ได้ใช้ (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 project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);
    

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

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

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

บริการ Firebase (เช่น Cloud Firestore, การตรวจสอบสิทธิ์, ฐานข้อมูลเรียลไทม์, การกำหนดค่าระยะไกล และอื่นๆ) จะพร้อมให้นำเข้าภายในแพ็กเกจย่อยแต่ละรายการ

ตัวอย่างด้านล่างแสดงวิธีใช้ 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 project 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: ใช้ Module Bundler (Webpack/Rollup) เพื่อลดขนาด

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

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

บริการ Firebase ที่ใช้ได้สำหรับเว็บ

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

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

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

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