Khi phát triển một ứng dụng web bằng Firebase, bạn có thể gặp phải những khái niệm lạ hoặc những khía cạnh mà bạn cần thêm thông tin để đưa ra quyết định đúng đắn cho dự án của mình. Trang này nhằm trả lời những câu hỏi đó hoặc giới thiệu cho bạn các tài nguyên để tìm hiểu thêm.
Nếu bạn có thắc mắc về một chủ đề không được đề cập trên trang này, hãy truy cập vào một trong các cộng đồng trực tuyến của chúng tôi. Chúng tôi cũng sẽ định kỳ cập nhật các chủ đề mới trên trang này, vì vậy hãy kiểm tra lại để xem chúng tôi đã thêm chủ đề mà bạn muốn tìm hiểu hay chưa.
Phiên bản SDK: không gian tên và mô-đun
Firebase cung cấp hai nền tảng API cho các ứng dụng web:
- JavaScript – không gian tên. Đây là giao diện JavaScript mà Firebase đã duy trì trong nhiều năm và quen thuộc với các nhà phát triển web đang sử dụng các ứng dụng Firebase cũ. Vì API không gian tên không được hưởng lợi từ việc liên tục hỗ trợ tính năng mới, nên hầu hết ứng dụng mới nên sử dụng API mô-đun.
- JavaScript – mô-đun. SDK này dựa trên phương pháp mô-đun giúp giảm kích thước SDK và hiệu quả cao hơn với các công cụ xây dựng JavaScript hiện đại như webpack hoặc Cuộn lên.
API mô-đun tích hợp hiệu quả với các công cụ xây dựng giúp loại bỏ mã không dùng đến trong ứng dụng của bạn – một quy trình gọi là "châu cây". Các ứng dụng được tạo bằng SDK này được hưởng lợi từ việc giảm đáng kể kích thước. Mặc dù có sẵn dưới dạng một mô-đun, API không gian tên không có cấu trúc mô-đun nghiêm ngặt và không giúp giảm cùng mức độ giảm kích thước.
Mặc dù phần lớn API mô-đun đều tuân theo các mẫu giống như API không gian tên, nhưng cách sắp xếp mã lại khác nhau. Nhìn chung, API không gian tên được định hướng theo một không gian tên và mẫu dịch vụ, trong khi API mô-đun được định hướng theo các hàm riêng biệt. Ví dụ: chuỗi dấu chấm của API không gian tên, chẳng hạn như firebaseApp.auth(), được thay thế trong API mô-đun bằng một hàm getAuth() duy nhất nhận firebaseApp và trả về một thực thể Xác thực.
Điều này có nghĩa là các ứng dụng web được tạo bằng API không gian tên cần được tái cấu trúc để tận dụng thiết kế ứng dụng theo mô-đun. Hãy xem hướng dẫn nâng cấp để biết thêm thông tin chi tiết.
JavaScript – API mô-đun cho ứng dụng mới
Nếu đang bắt đầu một quá trình tích hợp mới với Firebase, bạn có thể chọn sử dụng API mô-đun khi thêm và khởi chạy SDK.
Khi bạn phát triển ứng dụng, hãy lưu ý rằng mã của bạn sẽ được sắp xếp chủ yếu xoay quanh các hàm. Trong API mô-đun, các dịch vụ được truyền làm đối số đầu tiên, sau đó, hàm này sử dụng thông tin chi tiết của dịch vụ để thực hiện phần còn lại. Ví dụ:
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Để biết thêm ví dụ và thông tin chi tiết, hãy xem hướng dẫn cho từng dòng sản phẩm cũng như tài liệu tham khảo API mô-đun.
Cách thêm SDK web vào ứng dụng của bạn
Firebase cung cấp thư viện JavaScript cho hầu hết các sản phẩm của Firebase, bao gồm cả Cấu hình từ xa, FCM, v.v. Cách bạn thêm Firebase SDK vào Ứng dụng web phụ thuộc vào công cụ bạn đang sử dụng với ứng dụng (chẳng hạn như trình gói mô-đun).
Bạn có thể thêm bất kỳ thư viện có sẵn nào vào ứng dụng của mình thông qua một trong các phương thức được hỗ trợ:
- npm (dành cho bộ gói mô-đun)
- CDN (mạng phân phối nội dung)
Để biết hướng dẫn thiết lập chi tiết, hãy xem bài viết Thêm Firebase vào ứng dụng JavaScript. Phần còn lại của mục này chứa thông tin giúp bạn chọn trong số các tuỳ chọn có sẵn.
bước/phút
Việc tải gói npm Firebase xuống (bao gồm cả gói trình duyệt và gói Node.js) sẽ cung cấp cho bạn một bản sao cục bộ của Firebase SDK. Bản sao này có thể cần thiết cho các ứng dụng không phải trình duyệt như ứng dụng Node.js, React Native hoặc Electron. Tệp tải xuống bao gồm các gói Node.js và React Native dưới dạng một lựa chọn cho một số gói. Các gói Node.js là cần thiết cho bước kết xuất phía máy chủ (SSR) của các khung SSR.
Việc sử dụng npm với một bộ gói mô-đun như webpack hoặc Rollup sẽ cung cấp các tuỳ chọn tối ưu hoá để "thay đổi dạng cây" mã không dùng đến và áp dụng các polyfill được nhắm mục tiêu. Điều này có thể giúp giảm đáng kể kích thước của ứng dụng. Việc triển khai các tính năng này có thể khiến cấu hình và chuỗi bản dựng của bạn trở nên phức tạp hơn. Tuy nhiên, bạn có thể giảm thiểu điều đó bằng nhiều công cụ CLI chính. Các công cụ này bao gồm Angular, React, Vue, Next, v.v.
Tóm lại:
- Tối ưu hoá kích thước ứng dụng một cách hiệu quả
- Cung cấp công cụ mạnh mẽ để quản lý các mô-đun
- Bắt buộc đối với SSR có Node.js
CDN (mạng phân phối nội dung)
Thêm thư viện được lưu trữ trên CDN của Firebase là một phương thức thiết lập SDK đơn giản có thể đã quen thuộc với nhiều nhà phát triển. Nếu sử dụng CDN để thêm SDK, bạn sẽ không cần đến công cụ tạo và chuỗi bản dựng của bạn có thể đơn giản và dễ làm việc hơn so với các trình gói mô-đun. Nếu bạn không đặc biệt quan tâm đến kích thước cài đặt của ứng dụng và không có các yêu cầu đặc biệt như chuyển đổi mã từ TypeScript, thì CDN có thể là một lựa chọn phù hợp.
Tóm lại:
- Quen thuộc và đơn giản
- Phù hợp khi kích thước ứng dụng không phải là vấn đề lớn
- Phù hợp khi trang web của bạn không sử dụng các công cụ xây dựng.
Các biến thể Firebase Web SDK
Bạn có thể sử dụng SDK Web của Firebase trong cả trình duyệt và ứng dụng Nút. Tuy nhiên, một số sản phẩm không dùng được trong môi trường Nút. Xem danh sách môi trường được hỗ trợ.
Một số SDK sản phẩm cung cấp các biến thể trình duyệt và Nút riêng biệt, mỗi biến thể được cung cấp ở cả định dạng ESM và CJS, một số SDK sản phẩm thậm chí còn cung cấp các biến thể gốc của Cordova hoặc React. SDK web được định cấu hình để cung cấp biến thể chính xác dựa trên cấu hình công cụ hoặc môi trường của bạn. Trong hầu hết trường hợp, bạn không cần phải chọn thủ công. Tất cả các biến thể SDK được thiết kế để giúp xây dựng ứng dụng web hoặc ứng dụng để người dùng cuối có thể truy cập, chẳng hạn như trong máy tính để bàn Node.js hoặc ứng dụng IoT. Nếu mục tiêu của bạn là thiết lập quyền truy cập quản trị từ các môi trường đặc quyền (chẳng hạn như máy chủ), hãy sử dụng SDK quản trị của Firebase.
Phát hiện môi trường bằng trình gói và khung
Khi bạn cài đặt SDK Web Firebase bằng npm, cả hai phiên bản JavaScript và Node.js đều được cài đặt. Gói này cung cấp tính năng phát hiện môi trường chi tiết để hỗ trợ các gói phù hợp cho ứng dụng của bạn.
Nếu mã của bạn sử dụng câu lệnh require của Node.js, thì SDK sẽ tìm gói dành riêng cho Nút. Nếu không, bạn phải tính toán chính xác chế độ cài đặt của bộ gói để phát hiện đúng trường điểm truy cập trong tệp package.json (ví dụ: main, browser hoặc module). Nếu bạn gặp lỗi thời gian chạy với SDK, hãy kiểm tra để đảm bảo trình đóng gói đã được định cấu hình để ưu tiên đúng loại gói cho môi trường của bạn.
Tìm hiểu về đối tượng cấu hình Firebase
Để chạy Firebase trong ứng dụng, bạn cần cung cấp cấu hình dự án Firebase của ứng dụng. Bạn có thể nhận đối tượng cấu hình Firebase bất cứ lúc nào.
Bạn không nên chỉnh sửa đối tượng cấu hình của mình theo cách thủ công, đặc biệt là các "tuỳ chọn Firebase" bắt buộc sau đây:
apiKey,projectIdvàappID. Nếu bạn khởi chạy ứng dụng với các giá trị không hợp lệ hoặc bị thiếu cho các "tuỳ chọn Firebase" bắt buộc này, thì người dùng ứng dụng của bạn có thể gặp phải các vấn đề nghiêm trọng. Trường hợp ngoại lệ làauthDomain. Bạn có thể cập nhật thẻ này theo Các phương pháp hay nhất để sử dụng signInWithTransition.Nếu bạn đã bật Google Analytics trong dự án Firebase, thì đối tượng cấu hình của bạn sẽ chứa trường
measurementId. Tìm hiểu thêm về trường này trên trang Bắt đầu Analytics.Nếu bạn bật Google Analytics hoặc Cơ sở dữ liệu theo thời gian thực sau khi tạo Ứng dụng web Firebase, hãy nhớ cập nhật đối tượng cấu hình Firebase mà bạn sử dụng trong ứng dụng của mình với các giá trị cấu hình được liên kết (
measurementIdvàdatabaseURLtương ứng). Bạn có thể nhận đối tượng cấu hình Firebase bất cứ lúc nào.
Dưới đây là định dạng của một đối tượng cấu hình đã bật tất cả các dịch vụ (các giá trị này sẽ được tự động điền):
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
// The value of `databaseURL` depends on the location of the database
databaseURL: "https://DATABASE_NAME.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
measurementId: "G-MEASUREMENT_ID",
};
Thư viện có sẵn
Các chế độ thiết lập khác
Trì hoãn tải Firebase SDK (từ CDN)
Bạn có thể trì hoãn việc đưa SDK Firebase vào cho đến khi tải xong toàn bộ trang. Nếu bạn đang sử dụng tập lệnh CDN API mô-đun với <script type="module">, đây sẽ là hành vi mặc định. Nếu bạn đang sử dụng các tập lệnh CDN không tên là một mô-đun, hãy hoàn thành các bước sau để trì hoãn việc tải:
Thêm cờ
defervào từng thẻscriptcho Firebase SDK, sau đó trì hoãn việc khởi chạy Firebase bằng cách sử dụng tập lệnh thứ hai, ví dụ:<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script>Tạo tệp
init-firebase.js, sau đó đưa những nội dung sau vào tệp:// TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Sử dụng nhiều dự án Firebase trong một ứng dụng
Trong hầu hết trường hợp, bạn chỉ phải khởi chạy Firebase trong một ứng dụng mặc định duy nhất. Bạn có thể truy cập vào Firebase từ ứng dụng đó theo hai cách tương đương:
API mô-đun web
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);
console.log(defaultProject.name); // "[DEFAULT]"
// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);
// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
API không gian tên trên web
// Initialize Firebase with a "default" Firebase project const defaultProject = firebase.initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = defaultProject.storage(); let defaultFirestore = defaultProject.firestore(); // Option 2: Access Firebase services using shorthand notation defaultStorage = firebase.storage(); defaultFirestore = firebase.firestore();
Tuy nhiên, đôi khi, bạn cần truy cập vào nhiều dự án Firebase cùng lúc. Ví dụ: có thể bạn muốn đọc dữ liệu từ cơ sở dữ liệu của một dự án Firebase nhưng lưu trữ tệp trong một dự án Firebase khác. Hoặc bạn có thể muốn xác thực một dự án trong khi không xác thực dự án thứ hai.
Firebase JavaScript SDK cho phép bạn khởi chạy và sử dụng nhiều dự án Firebase trong một ứng dụng cùng lúc, với mỗi dự án sử dụng thông tin cấu hình Firebase riêng của dự án đó.
API mô-đun web
import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);
// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");
console.log(getApp().name); // "[DEFAULT]"
console.log(otherProject.name); // "otherProject"
// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();
// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
API không gian tên trên web
// Initialize Firebase with a default Firebase project firebase.initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other"); console.log(firebase.app().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = firebase.storage(); const defaultFirestore = firebase.firestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = otherProject.storage(); const otherFirestore = otherProject.firestore();
Chạy máy chủ web cục bộ cho mục đích phát triển
Nếu bạn đang tạo một ứng dụng web, thì một số phần của SDK JavaScript của Firebase sẽ yêu cầu bạn phân phát ứng dụng web từ máy chủ thay vì từ hệ thống tệp cục bộ. Bạn có thể sử dụng Firebase CLI để chạy máy chủ cục bộ.
Nếu đã thiết lập tính năng Lưu trữ Firebase cho ứng dụng của mình, bạn có thể đã hoàn tất một số bước bên dưới.
Để phân phát ứng dụng web của mình, bạn sẽ sử dụng Firebase CLI, một công cụ dòng lệnh.
Truy cập tài liệu Giao diện dòng lệnh (CLI) của Firebase để tìm hiểu cách cài đặt CLI hoặc cập nhật lên phiên bản CLI mới nhất.
Khởi chạy dự án Firebase. Chạy lệnh sau từ gốc của thư mục ứng dụng cục bộ:
firebase init
Khởi động máy chủ cục bộ để phát triển. Chạy lệnh sau từ gốc của thư mục ứng dụng cục bộ:
firebase serve
Tài nguyên nguồn mở dành cho Firebase JavaScript SDK
Firebase hỗ trợ phát triển nguồn mở, đồng thời chúng tôi khuyến khích cộng đồng đóng góp và phản hồi.
SDK JavaScript của Firebase
Hầu hết các SDK JavaScript của Firebase đều được phát triển dưới dạng thư viện nguồn mở trong kho lưu trữ Firebase của Firebase công khai của chúng tôi.
Bắt đầu nhanh về mẫu
Firebase duy trì một tập hợp các mẫu bắt đầu nhanh cho hầu hết các API của Firebase trên Web. Hãy tìm những thông tin bắt đầu nhanh này trong kho lưu trữ khởi động nhanh Firebase GitHub công khai của chúng tôi. Bạn có thể sử dụng các bước khởi động nhanh này làm mã mẫu để sử dụng Firebase SDK.