เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript

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

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

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

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

  1. ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์

    • หากต้องการเพิ่มทรัพยากร Firebase ลงในโปรเจ็กต์ Google Cloud ที่มีอยู่ ให้ป้อนชื่อโปรเจ็กต์หรือเลือกจากเมนูแบบเลื่อนลง

    • หากต้องการสร้างโปรเจ็กต์ใหม่ ให้ป้อนชื่อโปรเจ็กต์ที่ต้องการ นอกจากนี้ คุณยังแก้ไขรหัสโปรเจ็กต์ที่แสดงใต้ชื่อโปรเจ็กต์ได้ด้วย

  2. เมื่อได้รับข้อความแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase

  3. คลิกต่อไป

  4. (ไม่บังคับ) ตั้งค่า Google Analytics สําหรับโปรเจ็กต์ ซึ่งจะช่วยให้คุณได้รับประสบการณ์การใช้งานผลิตภัณฑ์ Firebase ต่อไปนี้อย่างเต็มประสิทธิภาพ

    เลือกบัญชี Google Analytics ที่มีอยู่หรือสร้างบัญชีใหม่

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

  5. คลิกสร้างโปรเจ็กต์ (หรือเพิ่ม Firebase หากคุณใช้โปรเจ็กต์ Google Cloud ที่มีอยู่)

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

หลังจากมีโปรเจ็กต์ Firebase แล้ว คุณจะลงทะเบียนเว็บแอปกับโปรเจ็กต์นั้นได้

  1. คลิกไอคอนเว็บ () ตรงกลางหน้าภาพรวมโปรเจ็กต์ของคอนโซล Firebase เพื่อเปิดเวิร์กโฟลว์การตั้งค่า

    หากเพิ่มแอปลงในโปรเจ็กต์ Firebase อยู่แล้ว ให้คลิกเพิ่มแอปเพื่อแสดงตัวเลือกแพลตฟอร์ม

  2. ป้อนชื่อเล่นของแอป
    ชื่อเล่นนี้เป็นตัวระบุภายในที่สะดวกและคุณจะเห็นชื่อนี้ในคอนโซล Firebase เท่านั้น

  3. คลิกลงทะเบียนแอป

  4. ทําตามวิธีการบนหน้าจอเพื่อเพิ่มและเริ่มต้น Firebase SDK ในแอป

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

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

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

หน้านี้อธิบายวิธีการตั้งค่าสําหรับ API แบบแยกส่วนของ Firebase JS SDK ซึ่งใช้รูปแบบ JavaScript Module

เวิร์กโฟลว์นี้ใช้ npm และต้องอาศัยเครื่องมือ Module Bundler หรือเฟรมเวิร์ก JavaScript เนื่องจาก API แบบแยกส่วนได้รับการเพิ่มประสิทธิภาพให้ทำงานร่วมกับ Module Bundler เพื่อกำจัดโค้ดที่ไม่ได้ใช้ (Tree-shaking) และลดขนาด 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, 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: ใช้ Module Bundler (Webpack/Rollup) เพื่อลดขนาด

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

ดูข้อมูลเพิ่มเติมได้ที่คู่มือการใช้เครื่องมือรวมโมดูลกับ Firebase

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

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

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

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

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