Làm theo hướng dẫn này để sử dụng SDK JavaScript Firebase trong ứng dụng web của bạn hoặc với tư cách là ứng dụng khách để người dùng cuối truy cập, chẳng hạn như trong ứng dụng IoT hoặc máy tính để bàn Node.js.
Bước 1 : Tạo dự án Firebase và đăng ký ứng dụng của bạn
Trước khi có thể thêm Firebase vào ứng dụng JavaScript của mình, bạn cần tạo dự án Firebase và đăng ký ứng dụng của mình với dự án đó. Khi bạn đăng ký ứng dụng của mình với Firebase, bạn sẽ nhận được một đối tượng cấu hình Firebase mà bạn sẽ sử dụng để kết nối ứng dụng của mình với tài nguyên dự án Firebase.
Truy cập 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 Firebase, bạn có thể tải xuống một trong các mẫu bắt đầu nhanh của chúng tôi .
Bước 2 : Cài đặt SDK và khởi tạo Firebase
Trang này mô tả các hướng dẫn thiết lập cho phiên bản 9 của SDK Firebase JS, 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 bộ đóng gói mô-đun hoặc công cụ khung JavaScript vì SDK v9 được tối ưu hóa để hoạt động với bộ đóng gói mô-đun nhằm loại bỏ mã không sử dụng (rung cây) và giảm kích thước SDK.
Cài đặt Firebase bằng npm:
npm install firebase
Khởi tạo 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 lưu trữ cấu hình chung và chia sẻ xác thực trên các dịch vụ Firebase. Sau khi bạn khởi tạo 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.
Bước 3 : Truy cập Firebase trong ứng dụng của bạn
Các dịch vụ Firebase (như Cloud Firestore, Xác thực, Cơ sở dữ liệu thời gian thực, Cấu hình từ xa, v.v.) có sẵn để nhập trong các gói phụ riêng lẻ.
Ví dụ dưới đây cho thấy cách bạn có thể sử dụng Cloud Firestore Lite SDK để 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 gói mô-đun (webpack/Rollup) để giảm kích thước
SDK Web Firebase được thiết kế để hoạt động với các gói mô-đun nhằm loại bỏ bất kỳ mã không sử dụng nào (lắc cây). Chúng tôi thực sự khuyên bạn nên sử dụng phương pháp này cho các ứng dụng sản xuất. Các công cụ như Angular CLI , Next.js , Vue CLI hoặc Create React App tự động xử lý 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.
Xem hướng dẫn của chúng tôi Sử dụng gói mô-đun với Firebase để biết thêm thông tin.
Dịch vụ Firebase có sẵn cho web
Bây giờ bạn đã thiết lập để sử dụng Firebase, bạn có thể bắt đầu thêm và sử dụng bất kỳ dịch vụ Firebase có sẵn nào sau đây trong ứng dụng web của mình.
Các lệnh sau cho biết cách nhập thư viện Firebase được cài đặt cục bộ với npm
. Để biết các tùy chọn nhập thay thế, hãy xem tài liệu thư viện có sẵn .
Bước tiếp theo
Tìm hiểu về Firebase:
Khám phá các ứng dụng Firebase mẫu .
Trải nghiệm thực tế với Firebase Web Codelab .
Khám phá mã nguồn mở trong GitHub .
Xem xét các môi trường được hỗ trợ cho SDK JavaScript Firebase.
Tăng tốc độ phát triển của bạn với các thư viện nguồn mở bổ sung do Firebase duy trì, như AngularFire , RxFire và FirebaseUI dành cho web .
Chuẩn bị khởi chạy ứng dụng của bạn:
- Thiết lập cảnh báo ngân sách cho dự án của bạn trong Google Cloud Console.
- Theo dõi bảng điều khiển Sử dụng và thanh toán trong bảng điều khiển Firebase để có được bức tranh tổng thể về việc sử dụng dự án của bạn trên nhiều dịch vụ Firebase.
- Xem lại danh sách kiểm tra khởi chạy Firebase .