Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

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

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

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

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

หน้านี้จะอธิบายถึงคำแนะนำการติดตั้งสำหรับรุ่นที่ 9 ของ Firebase JS SDK ซึ่งใช้ JavaScript โมดูล รูปแบบ

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

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

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

ดูคู่มือของเรา ใช้โมดูล bundlers กับ Firebase สำหรับข้อมูลเพิ่มเติม

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

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

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

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

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