เพิ่ม 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 ในโค้ดของคุณแล้ว คุณสามารถเพิ่มและเริ่มใช้บริการ 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: