เพิ่ม Firebase ในโครงการ JavaScript ของคุณ

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

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

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

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

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

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

เวิร์กโฟลว์นี้ใช้ npm และต้องใช้โมดูลบันเดิลหรือเครื่องมือเฟรมเวิร์ก JavaScript เนื่องจาก v9 SDK ได้รับการปรับให้เหมาะกับการทำงานร่วมกับ โมดูลบันเดิล เพื่อกำจัดโค้ดที่ไม่ได้ใช้ (การสั่นแบบต้นไม้) และลดขนาด 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 ได้

ขั้นตอนที่ 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 : ใช้ชุดรวมโมดูล (webpack/Rollup) สำหรับการลดขนาด

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

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

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

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

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

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

เรียนรู้เกี่ยวกับ Firebase: