Khi phát triển một ứng dụng web bằng Firebase, bạn có thể gặp phải các khái niệm hoặc lĩnh vực bạn cần thêm thông tin để đưa ra quyết định đúng đắn cho dự án của bạn. Trang này nhằm trả lời những câu hỏi đó hoặc hướng bạn đế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 một trong cộng đồng trực tuyến. 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 được duy trì trong nhiều năm và quen thuộc với các nhà phát triển web có Firebase. Bởi vì API không gian tên không được hưởng lợi từ hỗ trợ tính năng mới, hầu hết các ứng dụng mới sẽ sử dụng API mô-đun.
- JavaScript – mô-đun. SDK này dựa trên phương pháp tiếp cận theo mô-đun giúp giảm kích thước SDK và đạt được hiệu quả cao hơn với JavaScript hiện đại công cụ tạo bản dựng như webpack hoặc Tổng hợp.
API mô-đun tích hợp tốt với các công cụ xây dựng giúp loại bỏ mã không hợp lệ được dùng trong ứng dụng của bạn, một quá trình được gọi là "châu cây". Ứ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. API không gian tên, mặc dù có sẵn dưới dạng không có cấu trúc mô-đun nghiêm ngặt và không cung cấp 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,
cách tổ chức mã là khác nhau. Nhìn chung, API không gian tên
được điều hướng theo một không gian tên và mẫu dịch vụ, còn API mô-đun được định hướng
về phía các hàm rời rạc. 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ể Authentication.
Điều này có nghĩa là các ứng dụng web được tạo bằng API có vùng chứa tên yêu cầu tái cấu trúc để tận dụng thiết kế ứng dụng theo mô-đun. Xem hướng dẫn nâng cấp để biết thêm 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 tham gia mô-đun API khi bạn 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 dưới dạng gói đầu tiên đối số và hàm này sau đó 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 các 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 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 các thư viện JavaScript cho hầu hết các sản phẩm của Firebase, bao gồm Remote Config, FCM và các lý do khác. Cách 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ư một mô-đun) gói).
Bạn có thể thêm bất kỳ các thư viện có sẵn cho ứ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 Thêm Firebase vào Ứng dụng JavaScript của bạn. Phần còn lại của mục này chứa thông tin để giúp bạn chọn từ những tuỳ chọn có sẵn.
bước/phút
Tải gói npm Firebase xuống (bao gồm cả trình duyệt và Node.js Bundle) 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, chẳng hạn 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ần có các gói Node.js để hiển thị phía máy chủ (SSR) bước trong khuôn khổ SSR.
Sử dụng npm với một gói mô-đun, chẳng hạn như webpack hoặc Bản tổng hợp giúp tối ưu hoá tuỳ chọn "lắc cây" mã chưa dùng đến và áp dụng các đoạn mã polyfill được nhắm mục tiêu. giúp giảm đáng kể kích thước của ứng dụng. Việc triển khai những tính năng này có thể làm cho cấu hình và chuỗi bản dựng của bạn trở nên phức tạp hơn, nhưng nhiều Các công cụ CLI chính thống có thể giúp giảm thiểu điều đó. Các công cụ này bao gồm Góc, Phản ứng, Vue, Tiếp theo và các sự kiện khác.
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à 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. Sử dụng CDN để thêm SDK, bạn sẽ không cần công cụ xây dựng và chuỗi bản dựng của bạn có thể có xu hướng đơ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 lo ngại về kích thước cài đặt của ứng dụng và không có yêu cầu đặc biệt như khi chuyển 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 và một số SDK sản phẩm thậm chí cung cấp Các biến thể Cordova hoặc React gốc. SDK Web được định cấu hình để cung cấp 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 và không nên trong hầu hết các trường hợp đều phải được chọn thủ công. Tất cả biến thể SDK đều được thiết kế để giúp tạo các ứng dụng web hoặc ứng dụng khách để có quyền truy cập của người dùng cuối, chẳng hạn như trong ứng dụng Node.js trên máy tính hoặc ứng dụng IoT. Nếu 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ủ) sử dụng Firebase Admin SDK.
Phát hiện môi trường bằng trình gói và khung
Khi bạn cài đặt Firebase Web SDK bằng npm, JavaScript và Node.js đã cài đặt cả hai phiên bản. Gói này cung cấp tính năng phát hiện môi trường chi tiết để bật các gói phù hợp cho ứng dụng của mình.
Nếu mã của bạn sử dụng câu lệnh require của Node.js, thì SDK sẽ tìm các lệnh dành riêng cho nút
gói. Nếu không, cài đặt của bộ gói phải được xác định chính xác để phát hiện
trường điểm truy cập bên phải 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 để
hãy đảm bảo bộ gói của bạn đượ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
Để khởi chạy Firebase trong ứng dụng của mình, bạn cần cung cấp Firebase của ứng dụng cấu hình dự án. Bạn có thể nhận 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 theo cách thủ công, đặc biệt là sau "các tuỳ chọn Firebase" bắt buộc:
apiKey,projectIdvàappID. Nếu bạn khởi chạy ứng dụng bằng các giá trị không hợp lệ hoặc bị thiếu cho các giá trị bắt buộc này "Tùy chọn Firebase", 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, có thể được cập nhật sau Các phương pháp hay nhất để sử dụng signInWithChuyển hướng.Nếu bạn đã bật Google Analytics trong dự án Firebase, thì cấu hình của bạn đối tượng chứa trường
measurementId. Tìm hiểu thêm về trường này trong Analytics trang bắt đầu.Nếu bạn bật Google Analytics hoặc Realtime Database sau khi tạo Ứng dụng web Firebase, hãy đảm bảo rằng đối tượng cấu hình Firebase mà bạn sử dụng trong ứng dụng của bạn đã được cập nhật với các giá trị cấu hình liên quan (
measurementIdvàdatabaseURL). Bạn có thể nhận cấu hình Firebase đối tượng ở 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 được điền tự động):
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 toàn bộ trang
đã tải xong. Nếu bạn đang sử dụng tập lệnh CDN API mô-đun với <script type="module">,
đây là hành vi mặc định. Nếu bạn đang sử dụng tập lệnh CDN không gian tên làm
mô-đun, hãy hoàn tất 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 khởi chạy Firebase bằ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 các 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:
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();
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 một lúc bất cứ lúc nào. Ví dụ: bạn có thể muốn đọc dữ liệu từ cơ sở dữ liệu của một Firebase dự án 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.
SDK Firebase JavaScript 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, trong đó mỗi dự án sử dụng Firebase riêng thông tin cấu hình.
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);
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 Firebase sẽ yêu cầu bạn phân phát ứng dụng web của mình từ một máy chủ thay vì từ hệ thống tệp cục bộ. Bạn có thể dùng CLI Firebase để chạy máy chủ cục bộ.
Nếu đã thiết lập Firebase Hosting cho ứng dụng của mình, bạn có thể đã thiết lập đã hoàn tất một số bước dưới đây.
Để phân phát ứng dụng web, bạn sẽ sử dụng Firebase CLI, một công cụ dòng lệnh.
Truy cập vào tài liệu 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 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 sau đây từ gốc của thư mục ứng dụng cục bộ của bạn:
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ở và chúng tôi khuyến khích cộng đồng nội dung đóng góp và ý kiến 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.
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 Firebase trên Web. Tìm những phần bắt đầu nhanh này trong cộng đồng Kho lưu trữ khởi động nhanh Firebase GitHub. 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.