ทำตามคำแนะนำนี้เพื่อใช้ 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 App object ในโค้ดของคุณแล้ว คุณจะเพิ่มและเริ่มใช้บริการ 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