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

ขั้นตอนที่ 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 : ใช้โมดูลบันเดิล (webpack/Rollup) เพื่อลดขนาด

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

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

บริการ Firebase ที่มีให้สำหรับเว็บ

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

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

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

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