ทำตามคำแนะนำนี้เพื่อใช้ Firebase JavaScript SDK ในเว็บแอปของคุณหรือเป็นไคลเอ็นต์สำหรับการเข้าถึงของผู้ใช้ปลายทาง เช่น ในเดสก์ท็อป Node.js หรือแอปพลิเคชัน IoT
ขั้นตอนที่ 1 : สร้างโครงการ Firebase และลงทะเบียนแอปของคุณ
ก่อนที่คุณจะเพิ่ม Firebase ในแอป JavaScript คุณต้องสร้างโปรเจ็กต์ Firebase และลงทะเบียนแอปของคุณกับโปรเจ็กต์นั้น เมื่อคุณลงทะเบียนแอปกับ Firebase คุณจะได้รับออบเจ็กต์การกำหนดค่า Firebase ที่จะใช้เชื่อมต่อแอปกับทรัพยากรของโปรเจ็กต์ Firebase
ไปที่ ทำความเข้าใจโปร เจ็กต์ Firebase เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับโปรเจ็กต์ Firebase และแนวทางปฏิบัติที่ดีที่สุดในการเพิ่มแอปลงในโปรเจ็กต์
หากคุณยังไม่มีโปรเจ็กต์ JavaScript และต้องการลองใช้ผลิตภัณฑ์ Firebase คุณสามารถดาวน์โหลดหนึ่งใน ตัวอย่าง การเริ่มต้นอย่างรวดเร็วของเรา
ขั้นตอนที่ 2 : ติดตั้ง SDK และเริ่มต้น Firebase
หน้านี้อธิบายวิธีการตั้งค่าสำหรับ Firebase JS SDK เวอร์ชัน 9 ซึ่งใช้รูปแบบ โมดูล JavaScript
เวิร์กโฟลว์นี้ใช้ npm และต้องใช้โมดูลบันเดิลหรือเครื่องมือเฟรมเวิร์ก JavaScript เนื่องจาก v9 SDK ได้รับการปรับให้เหมาะกับการทำงานร่วมกับ โมดูลบันเดิล เพื่อกำจัดโค้ดที่ไม่ได้ใช้ (การสั่นแบบต้นไม้) และลดขนาด 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 ได้
ขั้นตอนที่ 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 : ใช้ชุดรวมโมดูล (webpack/Rollup) สำหรับการลดขนาด
Firebase Web SDK ได้รับการออกแบบมาให้ทำงานร่วมกับชุดรวมโมดูลเพื่อนำโค้ดที่ไม่ได้ใช้ออก (การสั่นแบบต้นไม้) เราขอแนะนำอย่างยิ่งให้ใช้วิธีนี้สำหรับแอปที่ใช้งานจริง เครื่องมือต่างๆ เช่น Angular CLI , Next.js , Vue CLI หรือ Create React App จะจัดการการรวมโมดูลสำหรับไลบรารีที่ติดตั้งผ่าน npm และนำเข้าสู่ codebase ของคุณโดยอัตโนมัติ
ดูคำแนะนำ การใช้ชุดรวมโมดูลกับ Firebase สำหรับข้อมูลเพิ่มเติม
บริการ Firebase ที่พร้อมใช้งานสำหรับเว็บ
เมื่อคุณตั้งค่าให้ใช้ Firebase แล้ว คุณจะเริ่มเพิ่มและใช้บริการ Firebase ที่มีอยู่ต่อไปนี้ในเว็บแอปของคุณได้
คำสั่งต่อไปนี้แสดงวิธีการนำเข้าไลบรารี Firebase ที่ติดตั้งในเครื่องด้วย npm
สำหรับตัวเลือกการนำเข้าอื่น โปรดดู เอกสารประกอบของไลบรารีที่มี
ขั้นตอนถัดไป
เรียนรู้เกี่ยวกับ Firebase:
สำรวจ ตัวอย่างแอป Firebase
รับประสบการณ์ตรงกับ Firebase Web Codelab
สำรวจ รหัสโอเพ่นซอร์สใน GitHub
ตรวจสอบ สภาพแวดล้อมที่รองรับ สำหรับ Firebase JavaScript SDK
เร่งความเร็วการพัฒนาของคุณด้วยไลบรารีโอเพ่นซอร์สที่ดูแลโดย Firebase เพิ่มเติม เช่น AngularFire , RxFire และ FirebaseUI สำหรับเว็บ
เตรียมเปิดแอปของคุณ:
- ตั้งค่า การแจ้งเตือนงบประมาณ สำหรับโครงการของคุณใน Google Cloud Console
- ตรวจสอบ แดชบอร์ด การใช้งานและการเรียกเก็บเงิน ในคอนโซล Firebase เพื่อดูภาพรวมการใช้งานโปรเจ็กต์ของคุณในบริการ Firebase ที่หลากหลาย
- ตรวจ สอบรายการตรวจสอบการเปิดตัว Firebase