Thêm Firebase vào dự án JavaScript của bạn

Hãy làm theo hướng dẫn này để sử dụng SDK Firebase JavaScript trong ứng dụng web của bạn hoặc làm ứng dụng khách để người dùng cuối truy cập, ví dụ: trong ứng dụng Node.js dành cho máy tính hoặc IoT.

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, bạn cần tạo một dự án Firebase và đăng ký ứng dụng của mình 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 mà bạn sẽ dùng để kết nối ứng dụng với các tài nguyên trong dự án Firebase.

Hãy truy cập vào trang Tìm hiểu về 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ử một sản phẩm của Firebase, bạn có thể tải một trong các mẫu khởi động 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 theo mô-đun của Firebase JS SDK, sử dụng định dạng Mô-đun JavaScript.

Quy trình này sử dụng npm và yêu cầu các trình đóng gói mô-đun hoặc công cụ khung JavaScript vì API theo mô-đun được tối ưu hoá để hoạt động với trình đóng gói mô-đun nhằm loại bỏ mã không dùng đến (loại bỏ mã không dùng đến) và giảm kích thước SDK.

  1. Cài đặt Firebase bằng npm:

    npm install firebase

  2. Khởi động Firebase trong ứng dụng của bạn và tạo một đối tượng Ứng dụng Firebase:

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase 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ẻ hoạt động xác thực trên các dịch vụ Firebase. Sau khi khởi chạy một đối tượng Ứng dụng Firebase trong mã, bạn có thể thêm và bắt đầu sử dụng các dịch vụ của 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), bạn sẽ cần thực hiện thêm một số bước để đảm bảo cấu hình của bạn vẫn duy trì trong các lượt kết xuất phía máy chủ và kết xuất phía máy khách. Trong logic máy chủ, hãy triển khai giao diện FirebaseServerApp để tối ưu hoá hoạt động quản lý phiên của ứng dụng bằng các worker dịch vụ.

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ụ của Firebase (như Cloud Firestore, Authentication, Realtime Database, Remote Config 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 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 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 trình kết hợp 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 kết hợp mô-đun nhằm xoá mọi mã không dùng đến (loại bỏ mã không dùng đến). 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 sẽ tự động xử lý việc kết hợp mô-đun cho các thư viện được cài đặt thông qua npm và nhập vào cơ sở mã của bạn.

Hãy xem hướng dẫn Sử dụng trình kết hợp mô-đun với Firebase để biết thêm thông tin.

Các dịch vụ Firebase hiện có cho web

Giờ đây, 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 nào sau đây trong ứng dụng web của mình.

Các lệnh sau đây cho biết cách nhập các thư viện Firebase được cài đặt cục bộ bằng npm. Để biết các lựa chọn nhập thay thế, hãy xem tài liệu về các thư viện có sẵn.

1 Firebase AI Logic trước đây có tên là "Vertex AI in Firebase" với gói firebase/vertexai.

Các bước tiếp theo

Tìm hiểu về Firebase: