Adding Firebase to the project - Angular Firebase #7

#AngularQuaNhanh #QuaNhanh Trong phần này, chúng tôi sẽ tích hợp dự án của mình với Firebase! Nhóm Firebase cung cấp gói @ angle / fire, cung cấp sự tích hợp giữa hai công nghệ. Để thêm hỗ trợ Firebase vào ứng dụng của bạn, hãy mở thư mục gốc của không gian làm việc của bạn và chạy:


ng add @ angle / fire
Lệnh này cài đặt gói @ angle / fire và hỏi bạn một số câu hỏi. Trong thiết bị đầu cuối của bạn, bạn sẽ thấy một cái gì đó như:

9ba88c0d52d18d0.png

Trong khi chờ đợi, quá trình cài đặt sẽ mở ra một cửa sổ trình duyệt để bạn có thể xác thực bằng tài khoản Firebase của mình. Cuối cùng, nó yêu cầu bạn chọn một dự án Firebase và tạo một số tệp trên đĩa của bạn.

Tiếp theo, chúng ta cần tạo một cơ sở dữ liệu Firestore! Trong "Cloud Firestore", hãy nhấp vào "Tạo cơ sở dữ liệu".

1e4a08b5a2462956.png

Sau đó, tạo cơ sở dữ liệu ở chế độ thử nghiệm:

ac1181b2c32049f9.png

Cuối cùng, chọn một khu vực:

34bb94cc542a0597.png

Điều duy nhất còn lại bây giờ là thêm cấu hình Firebase vào môi trường của bạn. Bạn có thể tìm thấy cấu hình dự án của mình trong Bảng điều khiển Firebase.

Nhấp vào biểu tượng Bánh răng bên cạnh Tổng quan về dự án.
Chọn Cài đặt dự án.
c8253a20031de8a9.png

Trong "Ứng dụng của bạn", hãy chọn một "Ứng dụng web":

428a1abcd0f90b23.png

Tiếp theo, đăng ký ứng dụng của bạn và đảm bảo bạn bật "Lưu trữ Firebase":

586e44cb27dd8f39.png

Sau khi nhấp vào "Đăng ký ứng dụng", bạn có thể sao chép cấu hình của mình vào src / environment / environment.ts:

e30f142d79cecf8f.png
Cuối cùng, tệp cấu hình của bạn sẽ giống như sau:

src / environment / environment.ts


export const môi trường = {
sản xuất: false,
căn cứ lửa: {
apiKey: 'your-key',
authDomain: 'your-project-authdomain',
databaseURL: 'your-database-URL',
projectId: 'your-project-id',
StorageBucket: 'your-storage-bucket',
messageSenderId: 'your-messaging-sender-id'
}
};

Đăng ký để không bỏ lỡ những video mới nhất: https://www.youtube.com/channel/UCkbRWdK8hATCE87Cf_A0erA?sub_confirmation=1 |

Đăng ký để không bỏ lỡ những video mới nhất:
https://www.youtube.com/channel/UCkbRWdK8hATCE87Cf_A0erA?sub_confirmation=1