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