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

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

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

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

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

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

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

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

เวิร์กโฟลว์นี้ใช้ npm และต้องใช้ Module Bundler หรือเครื่องมือเฟรมเวิร์ก JavaScript เนื่องจาก API แบบแยกส่วนได้รับการเพิ่มประสิทธิภาพให้ทำงานร่วมกับ module Bundler เพื่อกำจัดโค้ดที่ไม่ได้ใช้ (การเขย่าต้นไม้) และลดขนาด 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: ใช้ Bundler โมดูล (Webpack/Rollup) เพื่อลดขนาด

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

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

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

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

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

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

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