Hãy làm theo hướng dẫn này để sử dụng SDK JavaScript của Firebase trong ứng dụng web của bạn hoặc dưới dạng ứng dụng khách để cấp quyền truy cập của người dùng cuối, chẳng hạn như trong ứng dụng Node.js hoặc ứng dụng IoT.
Bước 1: Tạo dự án Firebase và đăng ký ứng dụng
Trước khi có thể thêm Firebase vào ứng dụng JavaScript, bạn cần tạo một dự án Firebase và đăng ký ứng dụng với dự án đó. Khi đăng ký ứng dụng với Firebase, bạn sẽ nhận được một đối tượng cấu hình Firebase. Đối tượng này sẽ được dùng để kết nối ứng dụng với tài nguyên dự án Firebase.
Hãy xem bài viết Tìm hiểu các dự án Firebase để tìm hiểu thêm về các dự án Firebase và các phương pháp hay nhất để thêm ứng dụng vào dự án.
Nếu chưa có dự án JavaScript và chỉ muốn dùng thử sản phẩm của Firebase, bạn có thể tải một trong các mẫu bắt đầu nhanh của chúng tôi xuống.
Bước 2: Cài đặt SDK và khởi chạy Firebase
Trang này mô tả hướng dẫn thiết lập cho API mô-đun của SDK JS của Firebase (API mô-đun này sử dụng định dạng Mô-đun JavaScript).
Quy trình công việc này sử dụng npm và yêu cầu trình gói mô-đun hoặc công cụ khung JavaScript vì API mô-đun được tối ưu hoá để hoạt động với trình gói mô-đun nhằm loại bỏ mã không dùng đến (hiệu ứng rung cây) và giảm kích thước SDK.
Cài đặt Firebase bằng npm:
npm install firebase
Khởi chạy Firebase trong ứng dụng của bạn và tạo đối tượng Ứng dụng Firebase:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Ứng dụng Firebase là một đối tượng giống như vùng chứa có chức năng lưu trữ cấu hình phổ biến và chia sẻ thông tin xác thực trên các dịch vụ của Firebase. Sau khi khởi chạy một đối tượng Ứng dụng Firebase trong mã của mình, bạn có thể thêm và bắt đầu sử dụng các dịch vụ Firebase.
Nếu ứng dụng của bạn có các tính năng động dựa trên tính năng kết xuất phía máy chủ (SSR), thì bạn cần thực hiện thêm một số bước để đảm bảo rằng cấu hình được duy trì trên quá trình kết xuất phía máy chủ và truyền qua kết xuất từ ứng dụng. Trong logic máy chủ, hãy triển khai giao diện
FirebaseServerApp
để tối ưu hoá việc quản lý phiên bằng trình chạy dịch vụ của ứng dụng.
Bước 3: Truy cập vào Firebase trong ứng dụng của bạn
Bạn có thể nhập các dịch vụ Firebase (như Cloud Firestore, Xác thực, Cơ sở dữ liệu theo thời gian thực, Cấu hình từ xa và nhiều dịch vụ khác) trong các gói con riêng lẻ.
Ví dụ bên dưới cho thấy cách bạn có thể sử dụng SDK Cloud Firestore Lite để truy xuất danh sách dữ liệu.
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; }
Bước 4: Sử dụng bộ gói mô-đun (webpack/Rollup) để giảm kích thước
Firebase Web SDK được thiết kế để hoạt động với các trình gói mô-đun nhằm xoá mọi mã không sử dụng (có hiệu ứng rung cây). Bạn nên sử dụng phương pháp này cho các ứng dụng phát hành công khai. Các công cụ như Angular CLI, Next.js, Vue CLI hoặc Create React App (Tạo ứng dụng phản ứng) tự động xử lý việc đóng gói mô-đun cho các thư viện được cài đặt thông qua npm và được nhập vào cơ sở mã của bạn.
Hãy xem hướng dẫn của chúng tôi về Cách sử dụng trình gói mô-đun với Firebase để biết thêm thông tin.
Các dịch vụ Firebase hiện có dành cho web
Bây giờ, bạn đã thiết lập xong để sử dụng Firebase, bạn có thể bắt đầu thêm và sử dụng bất kỳ dịch vụ Firebase nào có sẵn sau đây trong ứng dụng web của mình.
Các lệnh sau đây cho biết cách nhập thư viện Firebase được cài đặt cục bộ bằng npm
. Để biết các tuỳ chọn nhập thay thế, hãy xem tài liệu về các thư viện có sẵn.
Các bước tiếp theo
Tìm hiểu về Firebase:
Khám phá ứng dụng Firebase mẫu.
Trải nghiệm thực tế với Lớp học lập trình web Firebase.
Khám phá mã nguồn mở trong GitHub.
Xem xét các môi trường được hỗ trợ cho SDK JavaScript của Firebase.
Đẩy nhanh tốc độ phát triển bằng các thư viện nguồn mở khác do Firebase duy trì, như AngularFire, RxFire và FirebaseUI cho web.
Chuẩn bị phát hành ứng dụng:
- Thiết lập cảnh báo ngân sách cho dự án của bạn trong bảng điều khiển Google Cloud.
- Hãy theo dõi trang tổng quan về Mức sử dụng và thanh toán trong bảng điều khiển của Firebase để nắm được thông tin tổng thể về mức sử dụng dự án của bạn trên nhiều dịch vụ của Firebase.
- Xem danh sách kiểm tra khi phát hành Firebase.