ปฏิบัติตามคำแนะนำนี้เพื่อใช้ 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
ติดตั้ง 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, การตรวจสอบสิทธิ์, ฐานข้อมูลเรียลไทม์, การกำหนดค่าระยะไกล และอื่นๆ) พร้อมให้นำเข้าภายในแพ็คเกจย่อยแต่ละแพ็คเกจ
ตัวอย่างด้านล่างแสดงวิธีที่คุณสามารถใช้ 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:
สำรวจ แอป Firebase ตัวอย่าง
สัมผัสประสบการณ์ตรงด้วย Firebase Web Codelab
สำรวจ โค้ดโอเพ่นซอร์สใน GitHub
ตรวจสอบ สภาพแวดล้อมที่รองรับ สำหรับ Firebase JavaScript SDK
เร่งการพัฒนาของคุณด้วยไลบรารีโอเพ่นซอร์สที่ดูแลโดย Firebase เพิ่มเติม เช่น AngularFire , RxFire และ FirebaseUI สำหรับเว็บ
เตรียมเปิดตัวแอปของคุณ:
- ตั้งค่า การแจ้งเตือนงบประมาณ สำหรับโครงการของคุณใน Google Cloud Console
- ตรวจสอบ แดชบอร์ด การใช้งานและการเรียกเก็บเงิน ในคอนโซล Firebase เพื่อดูภาพรวมการใช้งานโปรเจ็กต์ของคุณในบริการ Firebase ต่างๆ
- ตรวจสอบ รายการตรวจสอบการเปิดตัว Firebase