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

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

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

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

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