เพิ่ม 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 และต้องใช้ Bundler โมดูลหรือเฟรมเวิร์ก JavaScript เนื่องจาก API โมดูล ได้รับการเพิ่มประสิทธิภาพให้ทำงานกับ 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, การตรวจสอบสิทธิ์, Realtime Database การกำหนดค่าระยะไกล และอื่นๆ) สามารถนำเข้าได้ภายในแต่ละรายการ แพ็กเกจย่อย

ตัวอย่างด้านล่างแสดงวิธีใช้ 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 หรือ สร้าง แสดงความรู้สึกแอปโดยอัตโนมัติ จัดการการรวมโมดูลโมดูลสำหรับไลบรารีที่ติดตั้งผ่าน npm และนำเข้าสู่ ฐานของโค้ด

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

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

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

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

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

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