ทำตามคู่มือนี้เพื่อใช้ 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 และต้องใช้ Module Bundler หรือเครื่องมือเฟรมเวิร์ก JavaScript เนื่องจาก API แบบแยกส่วนได้รับการเพิ่มประสิทธิภาพให้ทำงานร่วมกับ module Bundler เพื่อกำจัดโค้ดที่ไม่ได้ใช้ (การเขย่าต้นไม้) และลดขนาด SDK
ติดตั้ง Firebase โดยใช้ npm
npm install firebase
เริ่มต้น 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, การตรวจสอบสิทธิ์, ฐานข้อมูลเรียลไทม์, การกำหนดค่าระยะไกล และอื่นๆ) ภายในแพ็กเกจย่อยแต่ละรายการได้
ตัวอย่างด้านล่างแสดงวิธีใช้ 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 ออกแบบมาเพื่อทำงานร่วมกับ Bundler โมดูลเพื่อนำโค้ดที่ไม่ได้ใช้ออก (การเขย่าต้นไม้) เราขอแนะนำเป็นอย่างยิ่งให้ใช้แนวทางนี้กับ แอปเวอร์ชันที่ใช้งานจริง เครื่องมืออย่างเช่น Angular CLI, Next.js, Vue CLI หรือ Create React App จะจัดการกับการรวมโมดูลโมดูลโดยอัตโนมัติสำหรับไลบรารีที่ติดตั้งผ่าน npm และนำเข้าสู่ Codebase ของคุณ
ดูข้อมูลเพิ่มเติมในคู่มือการใช้ Bundler โมดูลกับ Firebase
บริการ Firebase ที่พร้อมใช้งานสำหรับเว็บ
เมื่อตั้งค่าให้ใช้ Firebase แล้ว คุณก็เริ่มเพิ่มและใช้บริการ Firebase ต่อไปนี้ที่มีอยู่ในเว็บแอปได้
คำสั่งต่อไปนี้แสดงวิธีนำเข้าไลบรารี Firebase ที่ติดตั้งในเครื่องด้วย npm
โปรดดูตัวเลือกอื่นๆ ในการนำเข้าในเอกสารประกอบเกี่ยวกับไลบรารีที่ใช้ได้
ขั้นตอนถัดไป
ดูข้อมูลเกี่ยวกับ Firebase
สำรวจตัวอย่างแอป Firebase
รับประสบการณ์การใช้งาน Firebase Web Codelab
ตรวจสอบสภาพแวดล้อมที่รองรับสำหรับ Firebase JavaScript SDK
เร่งการพัฒนาด้วยไลบรารีโอเพนซอร์สอื่นๆ ที่ดูแลรักษาด้วย Firebase เช่น AngularFire, RxFire และ FirebaseUI สำหรับเว็บ
เตรียมเปิดตัวแอป
- ตั้งค่าการแจ้งเตือนงบประมาณสำหรับโปรเจ็กต์ในคอนโซล Google Cloud
- ตรวจสอบหน้าแดชบอร์ดการใช้งานและการเรียกเก็บเงินในคอนโซล Firebase เพื่อดูภาพรวมการใช้งานโปรเจ็กต์ในบริการต่างๆ ของ Firebase
- ดูรายการตรวจสอบการเปิดตัว Firebase