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

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

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

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

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

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

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

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

เวิร์กโฟลว์นี้ใช้ 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, 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 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 ออกแบบมาให้ทำงานร่วมกับเครื่องมือรวมโมดูลเพื่อนำโค้ดที่ไม่ได้ใช้ออก (Tree-shaking) เราขอแนะนำอย่างยิ่งให้ใช้แนวทางนี้กับแอปเวอร์ชันที่ใช้งานจริง เครื่องมือต่างๆ เช่น Angular CLI, Next.js, Vue CLI หรือ Create React App จะจัดการการรวมโมดูลสำหรับไลบรารีที่ติดตั้งผ่าน npm และนําเข้าไปยังโค้ดเบสโดยอัตโนมัติ

ดูข้อมูลเพิ่มเติมได้ที่คู่มือการใช้เครื่องมือรวมโมดูลกับ Firebase

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

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

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

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

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