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 Firebase JavaScript SDK trong ứng dụng web của bạn hoặc làm ứng dụng cho quyền truy cập của người dùng cuối, ví dụ: trong ứng dụng Node.js trên máy tính 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 của bạn với dự án đó. Khi bạn đăng ký 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 với các tài nguyên của dự án Firebase.

Hãy tham khảo bài viết 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 bạn chưa có dự án JavaScript và chỉ muốn thử một 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 Firebase JS SDK, sử dụng Mô-đun JavaScript .

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

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

    npm install firebase

  2. 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ữ thông tin cấu hình phổ biến và chia sẻ tính năng xác thực trên các dịch vụ Firebase. Sau khi bạn 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 Firebase luôn miễn phí.

    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 một số bước bổ sung để đảm bảo rằng cấu hình của mình vẫn tồn tại trên các lượt kết xuất hình ảnh trên máy chủ và lượt kết xuất ứng dụng. Ngang bằng logic máy chủ của bạn, hãy triển khai Giao diện FirebaseServerApp sang tối ưu hoá ứng dụng của bạn quản lý phiên bằng trình chạy dịch vụ.

Bước 3: Truy cập vào Firebase trong ứng dụng của bạn

Các dịch vụ của 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à các cấu hình khác) có sẵn để nhập trong từng các gói con.

Ví dụ bên dưới cho thấy cách 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ế để làm việc với các trình gói mô-đun nhằm xoá bất kỳ mã không sử dụng (có hiệu ứng rung 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 ứng dụng chính thức. Các công cụ như Angular CLI, Next.js, Vue CLI hoặc Create Tự động phản hồi ứng dụ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ỳ sau đây các dịch vụ Firebase có sẵn trong ứng dụng web của bạn.

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

Các bước tiếp theo

Tìm hiểu về Firebase: