Trong bài tập trước,
chúng tôi đã cấu hình backend Firebase của chúng tôi như
một dịch vụ với dự án mới và cũng thiết lập rất nhiều
dữ liệu vào cơ sở dữ liệu của chúng tôi và sau đó thiết lập lưu trữ của chúng tôi và
cấu hình Firebase Server của chúng tôi để hoạt động như phụ trợ cho ứng dụng Angular của chúng tôi.
Trong bài tập này, chúng ta sẽ xem xét một phiên bản sửa đổi của
ứng dụng Angular của chúng tôi mà làm cho việc sử dụng các backend Firebase như
một dịch vụ để có được dữ liệu và
cũng lưu trữ thông tin cho người dùng trên các máy chủ.
Ngoài ra, chúng tôi sẽ tận dụng
sự hỗ trợ xác thực mà Firebase cung cấp để xác thực người dùng
cả bằng cách sử dụng cách tiếp cận email và mật khẩu và cũng sử dụng tài khoản Google.
Để bắt đầu bài tập này,
hãy đi đến một vị trí thuận tiện trên máy tính của bạn và
sau đó sao chép kho Git đã cho nơi tôi
đã cung cấp cho bạn phiên bản Angular Firebase của ứng dụng Angular của chúng tôi.
Vì vậy, gõ, git clone
https://github.com/jmuppala/confusion-Angular6-Firebase.git
và sau đó sao chép
kho Git và một khi kho Git được nhân bản vào máy tính của bạn,
sau đó di chuyển vào
thư mục Angular Firebase nhầm lẫn sẽ được tạo ra tại thời điểm này và
sau đó bạn sẽ nhận thấy rằng một loạt các tập tin đã được cài đặt ở đó.
Chúng ta hãy đi trước và thực hiện cài đặt npm để cài đặt
tất cả các mô-đun nút mà ứng dụng Angular này phụ thuộc vào.
Phiên bản này cũng sẽ cài đặt
hai module nút bổ sung gọi là Firebase và sau đó Angular fire two.
Tôi sẽ giải thích thêm một chút về hai mô-đun nút sau này trong bài tập này.
Một khi cài đặt dự án hoàn tất,
mở dự án trong một trình soạn thảo và sau đó trong dự án,
đi vào thư mục
môi trường nguồn và sau đó mở tập tin môi trường và trong tập tin môi trường,
bạn sẽ thấy một tập hợp cấu hình Firebase mà bạn
cần thiết lập với bạn cấu hình máy chủ Firebase riêng.
Như chúng ta đã thấy trong bài tập trước,
chúng ta có thể có được tất cả thông tin này khi chúng ta nhấp vào
nút này ở đây được gọi là “Thêm Firebase vào ứng dụng web của bạn” và sau đó
sao chép thông tin này và sau đó dán thông tin này
vào môi trường của bạn tập tin để thay thế chúng
với cụ thể của bạn Cấu hình máy chủ Firebase
cho tất cả các mảnh thông tin này và một khi đã hoàn thành,
sau đó bạn có thể khởi động ứng dụng Angular của bạn bằng cách gõ “ng serve” tại dấu nhắc.
Một khi ứng dụng Angular của bạn được biên dịch với “ng serve”,
sau đó đi đến một trình duyệt và sau đó gõ localhost:4200 để tải trong
ứng dụng Angular của bạn và bạn sẽ nhận thấy rằng ứng dụng Angular của bạn được biên dịch
và sau đó tải vào trình duyệt của bạn giống như trước đây.
Vì vậy, một khi ứng dụng Angular của
bạn được lên và chạy, bạn sẽ nhận thấy rằng phiên bản này của ứng dụng Angular sẽ được sử dụng
máy chủ Firebase mà bạn đã thiết lập trong
bài tập trước đó và do đó ở đây bạn sẽ thấy trang “Home”, trang
“About” như chúng ta thấy ở đây và các
“ Menu” và trang “Liên hệ” và rõ ràng là vì chúng tôi hiện không đăng nhập,
trang “Yêu thích của tôi” sẽ hiển thị một lỗi cho biết không người dùng nào được đăng nhập.
Vì vậy, chúng ta hãy đăng nhập chính mình.
Hãy để tôi quay lại “Trang chủ” và sau đó chúng tôi sẽ đăng nhập chính mình.
Vì vậy, khi bạn nhấp vào nút đăng nhập,
bạn sẽ thấy biểu mẫu điển hình ở đây với email và thông tin mật khẩu.
Bạn cũng sẽ thấy một nút bổ sung ở đây được gọi là “Đăng nhập với Google”.
Vì vậy, hãy để tôi đăng nhập bằng tài khoản Google của tôi.
Vì vậy, khi bạn nhấp vào “Đăng nhập với Google”,
sau đó nó sẽ mở một cửa sổ trình duyệt khác, nơi bạn sẽ được yêu cầu
cho phép sử dụng tài khoản Google của bạn bởi máy chủ Firebase này.
Vì vậy, hãy để tôi tiếp tục và cho phép
ứng dụng này và sau đó một khi ủy quyền được hoàn thành,
sau đó bạn sẽ thấy rằng
ứng dụng Angular dựa trên Firebase của bạn sẽ khởi động và ở góc bên phải,
bạn sẽ ngay lập tức thấy tên của bạn đang được
hiển thị ở đây và với “Đăng nhập” bây giờ biến thành nút “Đăng xuất”.
Vì vậy, tại thời điểm này,
bạn sẽ có thể xem mục yêu thích của bạn
và trong trường hợp này vì chúng tôi không có bất kỳ mục yêu thích,
vì vậy nó sẽ trống tại thời điểm này.
Hãy để tôi quay lại “Menu” và sau đó thêm một vài mục vào “My Favorites”.
Vì vậy, tôi sẽ thêm món ăn này vào mục yêu thích của tôi.
Vì vậy, khi tôi nhấp vào món ăn này,
bạn sẽ ngay lập tức thấy biểu tượng biến thành một trái tim đầy và cho phép tôi cũng chọn
một món ăn nữa và thêm nó vào “My
Favorites” và sau đó bây giờ khi bạn đi đến “My Favorites”,
bạn sẽ thấy vài món ăn được thêm vào
mục yêu thích của bạn như bạn sẽ mong đợi và một lần nữa,
bạn có thể xóa các món ăn bằng cách nhấp vào nút “Xóa” chuyển đổi lên đây và sau đó nhấp vào
thập tự giá để loại bỏ các mục từ danh sách yêu thích của bạn như được hiển thị ở đây.
Bây giờ, chúng ta cũng có thể thêm như bạn nhận ra,
chúng ta có thể đi đến bất kỳ món ăn nào và sau đó thêm ý kiến về món ăn đó.
Vì vậy, hãy để tôi thêm vào một bình luận
ở đây và thời điểm bạn gửi bình luận,
bạn sẽ ngay lập tức thấy rằng bình luận của bạn sẽ được hiển thị ở đây với
tên của tác giả bình luận cũng được bao gồm trong đây và với ngày như được hiển thị ở đây.
Vì vậy, bạn có thể thấy rằng việc gửi
bình luận của người dùng sẽ được hỗ trợ cho bất kỳ món ăn cụ thể nào.
Hãy để tôi thêm vào một yêu thích hơn và vì vậy người dùng này sẽ có một vài mục yêu thích.
Hãy để tôi “Đăng xuất” người dùng này.
Quay lại “Trang chủ” và sau đó “Đăng xuất” người dùng này.
Bây giờ chúng tôi sẽ đăng nhập bằng tài khoản khác.
Vì vậy, tôi sẽ - Tôi đã thiết lập
tài khoản mật khẩu email này trước đó và vì vậy chúng tôi sẽ
đăng nhập như người dùng khác và một khi người dùng khác được đăng nhập,
hãy để tôi một lần nữa đi đến “Menu” và thêm một vài mục vào mục
yêu thích cho người dùng cụ thể này
và vì vậy khi bạn quay trở lại “Yêu thích của tôi”,
bạn sẽ thấy những mục này được liệt kê cho người dùng thứ hai.
Bây giờ, tương tự cho người dùng này, cho
phép tôi một lần nữa gửi bình luận khác của người dùng này. Vì
vậy-
và bạn sẽ
thấy rằng các ý kiến gửi bởi người dùng thứ hai cũng được thêm vào ứng dụng.
Vì vậy, đây là cách ứng dụng Angular của bạn hoạt
động với Firebase như phụ trợ như một dịch vụ.
Bây giờ tất nhiên bạn phải tự hỏi,
làm thế nào để chúng tôi thiết kế lại ứng dụng Angular của chúng tôi để sử dụng Firebase thay vì sử
dụng máy chủ Standard Express cộng với MongoDB mà chúng tôi đã xây dựng trước đó?
Để cấu hình ứng dụng Angular của bạn để giao tiếp với Firebase Server,
có hai mô-đun nút mà bạn cần phải cài đặt vào
ứng dụng Angular của bạn và một trong số đó là mô-đun Firebase.
Mô-đun Firebase như bạn thấy ở đây,
cung cấp các công cụ và cơ sở hạ tầng cho phép bạn giao tiếp
với máy chủ Firebase và cài đặt này vào ứng dụng của
bạn, bạn gõ, npm cài đặt trừ đi lưu Firebase.
Bây giờ cùng với điều này,
có một mô-đun khác gọi là Angular Fire 2.
Vì vậy, Angular Fire 2.
Ngoài ra, một lần nữa tôi đã cung cấp các liên kết đến hai mô-đun này trong các nguồn lực bổ sung.
AngularFire 2 là thư viện chính thức
để hỗ trợ Firebase và Angular và như bạn có thể thấy,
đó là một hỗ trợ dựa trên quan sát cho các tệp Angular.
Vì vậy, điều này làm việc để thêm vào mô-đun npm Firebase và sau đó
cung cấp cho bạn giao diện dựa trên quan sát mà chúng ta có thể sử dụng trong ứng dụng Angular của bạn.
Vì vậy, chúng tôi sẽ tận dụng AngularFire 2.
Vì vậy, để sử dụng AngularFire2,
bạn cần phải cài đặt cả Firebase cũng như AngularFire 2.
Vì vậy, trong một lần chụp,
cài đặt cả hai này vào ứng dụng Angular của bạn.
Bây giờ, phiên bản của ứng dụng Angular mà tôi đã cung cấp cho bạn tự động
cài đặt cả hai như bạn sẽ thấy khi bạn kiểm tra tệp package.json.
Bây giờ, làm thế nào để sử dụng hai,
tôi sẽ minh họa rằng bằng cách nhanh chóng chạy bạn thông qua
mã sửa đổi cho các dịch vụ và một vài thành phần mà chúng tôi
sử dụng Firebase và AngularFire2
để sửa đổi các ứng dụng Angular mà chúng tôi đã phát triển
trước đó để sử dụng các Firebase server như phụ trợ như một dịch vụ.
Để hiểu thêm về cách chúng tôi
tận dụng Firebase và AngularFire 2 trong ứng dụng Angular của chúng tôi, điểm
dừng đầu tiên của chúng tôi là ở tập tin package.json.
Vì vậy, trong tập tin package.json,
bạn sẽ nhận thấy rằng tôi đã cài đặt AngularFire2 ở đây và chúng tôi cũng đã cài đặt
Firebase để sử dụng trong phiên bản này của ứng dụng Angular mà tôi cung cấp cho bạn.
Vì vậy, lưu ý rằng hai điều này sẽ tự động được cài đặt khi bạn gõ “npm
install” sau khi nhân bản kho git này mà tôi đã cung cấp cho bạn.
Nếu bạn đang bắt đầu với một ứng dụng Angular mới,
sau đó bạn nên cài đặt cả AngularFire 2 cũng như Firebase
để tận dụng việc sử dụng Firebase làm phụ trợ như một dịch vụ.
Bây giờ đã cài đặt hai cái này, chúng ta
hãy tìm hiểu cách chúng tôi sử dụng những thứ này trong các dịch vụ của chúng tôi.
Vì vậy, cách tốt nhất để tìm hiểu làm thế nào để sử dụng cả hai trong số
này là truy cập một số dịch vụ mà chúng tôi đã
cấu hình trong ứng dụng của chúng tôi và hiểu cách chúng tôi
tận dụng việc sử dụng AngularFire2 và Firebase.
Vì vậy, chúng tôi sẽ bắt đầu với tập tin dish.service.t.
Vì vậy, nếu bạn đi đến tập tin dish.service.tes,
bạn sẽ nhận thấy rằng ở đây,
trong dịch vụ món ăn này,
bạn sẽ thấy tôi nhập khẩu AngularFiRestore này, AngularFirestoreDocument,
và AngularFirestoreCollection từ AngularFire để Firestore đây.
Vì vậy, mà mang lại bất cứ điều gì tôi cần từ mô-đun npm AngularFiRestore của tôi,
cũng bạn sẽ nhận thấy rằng tôi đang nhập khẩu tất cả mọi thứ từ
FireBase/ứng dụng như Firebase vào dịch vụ món ăn của tôi ở đây.
Vì vậy, một khi chúng tôi đã nhập khẩu hai loại này, chúng ta
hãy xem xét cách chúng tôi cấu hình lại dịch vụ món ăn của chúng tôi ở đây.
Vì vậy, nếu bạn đi vào dịch vụ món ăn,
bạn sẽ nhận thấy rằng tôi không còn sử dụng HTTP client nữa.
Thay vào đó, tôi đang tiêm AFS đó là AngularFiRestore vào constructor ở đây.
AngularFiRestore là một trong đó cung cấp cho tôi
truy cập vào các phụ trợ Firebase như một dịch vụ.
Bây giờ, cũng nhớ lại rằng chúng tôi đã cấu hình tất cả các chi tiết của
máy chủ của chúng tôi và cũng là dự án filestore trong file environment.ets trước đó.
Vì vậy, bạn nên đã cấu hình thông tin này đã có
về cách ứng dụng Angular của bạn nên tận dụng
dự án dựa trên Firestore
của bạn trên máy chủ Firestore để truy cập dữ liệu mà bạn đã cấu hình ở đó.
Vì vậy, điều này sẽ cho tôi quyền truy cập vào đám mây của
tôi Firestore trong dự án Firebase của tôi mà tôi đã thiết lập.
Bây giờ, AuthService là tất nhiên cùng một Authservice mà chúng tôi đã sử dụng trước đây,
nhưng nó đã sửa đổi để sử dụng hỗ trợ Angular cho Firebase.
Chúng tôi sẽ truy cập AuthService để tìm hiểu cách nó đã được cập nhật.
Bây giờ, AuthService sẽ cung cấp cho chúng ta quyền truy cập vào
phương pháp này được gọi là GetAuthState mà sẽ trở lại trong một quan sát được.
Điều này quan sát được, khi chúng tôi đăng ký nó,
sẽ cung cấp cho chúng tôi thông tin như một người dùng có chứa thông tin của người dùng.
Vì vậy, tôi sẽ có được điều đó và sau đó thiết lập CurrentUser trong ứng dụng của tôi
như người dùng trả về bởi điều này quan sát được ở đây.
Vì vậy, khi chúng tôi truy cập AuthService,
chúng tôi sẽ tìm hiểu những gì GetAuthState này sẽ trở lại cho
chúng tôi và do đó thông tin
của CurrentUser có thể được lấy từ bất kỳ
dịch vụ nào khác bởi vì chúng tôi đã tiêm AuthService ở đây.
Bây giờ, chúng ta hãy xem làm thế nào phương pháp GetDishes được thực hiện ở đây.
Bây giờ, trước đó trong phương pháp GetDishes,
chúng tôi đã sử dụng HTTP client để truy cập vào máy chủ tại cơ sở URL+/Dishes.
Bây giờ trong trường hợp này,
để truy cập vào một bộ sưu tập trong máy chủ Firebase của tôi, chúng ta sẽ nói này.afs.
Vì vậy, đây là những gì AngularFire2 cung cấp cho chúng tôi.
AFS như bạn thấy là AngularFiRestore mà chúng tôi đã tiêm ở đây và vì vậy chúng tôi nói
này.afs.collection và ở đây chúng tôi
sẽ chỉ định bộ sưu tập cụ thể mà chúng tôi đang truy cập ở đây.
Nhớ lại rằng chúng tôi đã thiết lập các món ăn, chương trình khuyến mãi,
và các nhà lãnh đạo bộ sưu tập trên máy chủ Firebase của tôi.
Vì vậy, điều này trực tiếp cho tôi truy
cập vào bộ sưu tập món ăn của tôi ở đây và từ bộ sưu tập các món ăn,
tôi có thể do.ValueChanges mà
sẽ trả lại tất cả các thông tin trong bộ sưu tập kinh doanh cho tôi,
hoặc tôi có thể làm.SnapshotChanges mà sẽ
trả lại thông tin bổ sung bao gồm cả ID của các món ăn.
Vì vậy, nếu thay vì làm SnapShotChanges,
nếu tôi nói ValueChanges,
nó sẽ chỉ trả lại thông tin món ăn nhưng nó sẽ không trả lại
ID của các món ăn nhưng vì tôi sẽ cần ID của món ăn của tôi, vì
vậy đó là lý do tại sao tôi đang sử dụng .SnapShotChanges trong trường hợp này.
Vì vậy, khi.SnapshotChanges được gọi là,
điều này sẽ trở lại khi bạn thấy một quan sát được mà
tôi ánh xạ và do đó giá trị trả về được gọi là hành động và những hành động này, một
lần nữa, sẽ là một quan sát được mà tôi sẽ ánh xạ mỗi hành động trong
hành động này và sau đó trích xuất dữ liệu từ hành động đó là quay trở lại đây.
Vì vậy, hành động là một giá trị được trả về từ cho mỗi hành động
và hành động này chứa một trọng tải và chứa bên trong đó một trường tối ở đây.
Bây giờ, đây là một cái gì đó mà tôi đã tìm ra bằng cách đọc
tài liệu cho AngularFire2 và
vì vậy khi chúng tôi gọi chức năng dữ liệu này trên hành động.payload.doc
này, điều này sẽ cung cấp cho tôi dữ liệu.
Dữ liệu cho món ăn cụ thể đó
thu được từ bộ sưu tập món ăn của tôi ở phía máy chủ.
Vì vậy, mỗi tài liệu trong đó sẽ được trả lại ở đây và
sau đó tôi có được ID cho rằng bằng cách nói action.payload.doc.id
Vì vậy, đó là nơi ID của nó sẽ được
thực hiện và sau đó tôi sẽ tham gia hai với nhau và trả lại
điều này như một tài liệu món ăn trở lại các thành phần khác nhau của tôi từ đó,
tôi sẽ gọi phương pháp GetDishes này.
Vì vậy, như bạn nhớ lại,
từ thành phần menu,
tôi đang gọi phương pháp getDishes để có được
thông tin về tất cả các món ăn trong bộ sưu tập của tôi.
Bộ sưu tập. Vì vậy, mỗi món ăn được trả về như là một doc sẽ được xây dựng lại thành
một đối tượng JavaScript với ID được chèn vào đây và cũng
là dữ liệu được trích xuất từ hành động này payload.doc.data.
Bây giờ đây là một cái gì đó mà bạn học bằng cách đọc tài liệu của AngularFire2.
Bây giờ, kể từ khi tôi đã thực hiện phần đó,
tôi đang cho bạn thấy mã chính xác mà bạn đang phải
sử dụng để trích xuất dữ liệu và sau đó cung cấp
dữ liệu này trở lại thành phần của bạn mà sẽ gọi phương pháp getDishes ở đây.
Vì vậy, bằng cách làm điều này cho mỗi tài liệu ở đó, tài
liệu này sẽ được xây dựng lại
đối tượng món ăn mà chúng tôi
sử dụng trong ứng dụng Angular của chúng tôi và vì vậy chúng tôi thậm chí có thể truy cập vào ID.
Nếu bạn chỉ thực hiện thay đổi giá trị,
nó sẽ chỉ đơn giản là trả lại tất cả các tài liệu mà không có ID của tài liệu.
Vì vậy, công việc bổ sung này cần phải được thực hiện trong dịch vụ của bạn để
trả lại thông tin một cách đúng đắn để
MyComponents có thể sử dụng thông tin này.
Tương tự như vậy, đối với một phương pháp GetDish,
vì vậy hãy lưu ý cách tôi truy cập thông tin cho một món ăn cụ thể.
Một lần nữa, chúng ta sẽ nói này.afs và sau đó bạn sẽ nhận thấy rằng tôi
saying.doc và sau đó ở đây cho phương pháp the.doc,
tôi cung cấp các món ăn slash và sau đó ID của các món ăn cụ thể.
Bây giờ, lý do tại sao tôi đã cung cấp ID,
ID ở đây là tham số cho phương pháp GetDish ở đây.
Bây giờ, để ID này được cung cấp,
tôi cần phải có khả năng cung cấp ID đó trong
phương pháp getDishes để khi trình đơn của tôi được xây dựng,
mỗi món ăn sẽ có ID của nó gắn vào nó ở đó.
ID đó được thông qua ở đây và vì vậy tôi sẽ truy cập tài liệu vào thời điểm này.
Vì vậy, AngularFire2 cho phép bạn truy cập
một tài liệu cụ thể mà là bên trong một bộ sưu tập bằng cách nói tên bộ sưu tập dấu gạch chéo,
cộng với ID tài liệu hoặc bạn có thể nói điều này.afs.collection món ăn giống như bạn đã nghe,
bộ sưu tập các món ăn và then.doc và sau đó cung cấp doc và ID bên trong dấu ngoặc đơn ở đó.
Vì vậy, đó là một cách khác để giải quyết một món ăn cụ thể.
Một lần nữa, tôi đăng ký SnapsHotChanges và điều này sẽ trả về một hành động mà sau đó được
ánh xạ một lần nữa trong cùng một định dạng để
xây dựng đối tượng món ăn ở đây cùng với ID ở đây.
Bây giờ, Firebase giữ ID riêng biệt với tài liệu
chính nó và vì vậy đó là lý do tại sao tôi phải rõ ràng làm
tái thiết này để có được
các tài liệu món ăn trong một cách có thể sử dụng bởi MyComponents.
Sau đó, tôi xây dựng máy chủ của riêng tôi bằng cách sử dụng Express và MongoDB,
ID tự động đã có trong tài liệu chính nó và vì vậy nó rất
dễ dàng để lấy lại và cung cấp nó trở lại phía khách hàng.
Bây giờ, đối với GetFeaturedDish, hãy
nhớ lại rằng đối với GetFeaturedDish,
chúng tôi đang tìm kiếm những món ăn mà tính năng được đặt thành true.
Bây giờ, đây là nơi AngularFire2 cho phép chúng ta
xây dựng một truy vấn và cung cấp truy vấn đó ở đây cho bộ sưu tập đó.
Ở đây tôi đang nói điều này.afs bộ sưu tập món ăn ở đây,
vì vậy tôi vẫn đang sử dụng bộ sưu tập nhưng sau đó nhìn
vào tham số thứ hai cho cuộc gọi này ở đây.
Điều này nói ref nơi ref đề cập đến mỗi tài liệu trong bộ sưu tập này.
ref này nói ref và đây là nơi tôi có thể
sử dụng truy vấn này thiết lập nghe để nói.where.
Vì vậy, có nghĩa là mỗi một trong những tài liệu mà các đặc trưng,
như bạn có thể thấy, cú pháp là khá dễ dàng để làm theo ở đây mà nói nơi đặc trưng.
Bây giờ, nhận thấy rằng tính năng được cung cấp như một chuỗi ở đây,
và sau đó một trong những tiếp theo,
các nhà điều hành là bằng vì vậy bạn thậm chí có thể nói
lớn hơn, nhỏ hơn, lớn hơn hoặc bằng nhỏ hơn hoặc bằng bất kỳ một trong những điều này,
nhưng chú ý rằng đó nên được bên trong trích dẫn ở đây và sau đó bạn sẽ nói đúng.
Vì vậy, bất cứ nơi nào thuộc tính đặc trưng của tài liệu được đặt thành true,
trích xuất tất cả những tài liệu đó.
Vì vậy, truy vấn này sẽ trích xuất chỉ những tài liệu
từ bộ sưu tập món ăn nơi tính năng được thiết lập thành true,
và sau đó chỉ trả về những tài liệu từ bộ sưu tập đó ở đây,
và từ đó tôi sẽ thay đổi ảnh chụp và điều này sẽ
trả về một mảng các tài liệu và từ đó tôi sẽ ánh xạ chúng
vào tài liệu món ăn cá nhân và sau đó kể từ khi tôi đã
đảm bảo rằng chỉ có một trong những tài liệu đó sẽ có tính năng được thiết lập thành true.
Vì vậy, nó sẽ trả lại chỉ một trong số họ nhưng nó sẽ trả lại nó như là một mảng.
Vì vậy, đó là lý do tại sao tôi xây dựng này
với khung vuông zero phần tử đầu tiên của mảng,
và thực sự nó sẽ chứa chỉ có một phần tử bởi vì chỉ có một phần tử trong bộ sưu tập của tôi
sẽ phù hợp với truy vấn đặc biệt này mà tôi đã thiết lập ở đây với sóng ở đây.
Có các thiết lập truy vấn khác ở đây bạn cũng có thể sử dụng một cái gì đó gọi là thứ tự của.
Vì vậy, bạn có thể đặt hàng bộ sưu tập theo một thuộc tính nhất định
và một số tập hợp các tùy chọn truy vấn khác có sẵn.
Bây giờ, điều này được hỗ trợ bởi Firebase trên đám mây của nó Firestore,
và đó là những gì chúng ta có thể tận dụng bằng cách sử dụng AngularFire2 để thiết kế
mã trong ứng dụng Angular của bạn để thực hiện các truy vấn từ phía khách hàng chính nó.
Vì vậy, điều này sẽ trả lại các món ăn tính năng cụ thể.
Bây giờ, một lần nữa GetDishid sẽ được tương tự như những gì chúng tôi đã làm trước đó.
Vì vậy, không có sửa đổi ở đó.
Bây giờ, cho PostComment một lần nữa
bởi vì Firebase với đám mây Firestore beta,
không có khái niệm về dân số,
và như vậy, chúng ta đã thấy trước đó.
Vì vậy, những gì tôi sẽ làm cho các ý kiến là tôi sẽ đăng những ý kiến này như
một bộ sưu tập mà được kèm theo bên trong mỗi món ăn chính nó.
Vì vậy, mỗi món ăn sẽ có bộ sưu tập ý kiến riêng về món ăn cụ thể đó.
Khi tôi đăng bình luận tôi sẽ sử dụng DisHid,
và sau đó là thông tin bình luận.
Vì vậy, những gì tôi làm ở đây là đầu tiên tôi sẽ
truy vấn các món ăn và sau đó có được món ăn đặc biệt đó.
Vì vậy, bạn có thể thấy rằng tôi đang sử dụng cách khác để truy vấn cho một tài liệu cụ thể.
Vì vậy, ở đây tôi đang nói điều này afs.collection ('món ăn ') .doc disHid.
Vì vậy, tôi có thể sử dụng cách này để truy cập vào một tài liệu cụ thể nếu tôi muốn.
Cách khác tất nhiên bạn đã thấy đã có với
phương pháp GetDish nơi tôi nói món ăn doc slash cộng với ID.
Vì vậy, hai cách khác nhau để giải quyết một tài liệu cụ thể bên trong
một bộ sưu tập ở đây và sau đó DisHid và sau đó thu thập và bình luận.
Vì vậy, theo cách này nó nói trong
bộ sưu tập này cho tài liệu cụ thể này với DisHid rằng,
có một bộ sưu tập được bao gồm trong
tài liệu này và bộ sưu tập đó có các ý kiến tên.
Vì vậy, đây là một lồng của một bộ sưu tập
bên trong một tài liệu mà là trong một kết nối cấp cao hơn.
Vì vậy, loại lồng các bộ sưu tập này được
Firebase Cloud Store Beta cho phép lên đến 100 cấp độ sâu nếu bạn muốn chọn.
Vì vậy, bên trong bộ sưu tập này,
tôi sẽ thêm vào.
Vì vậy, làm thế nào để bạn thêm một tài liệu vào một bộ sưu tập?
Để thêm tài liệu vào bộ sưu tập của
bạn, bạn sử dụng phương pháp thêm vào bộ sưu tập ở đây.
Vì vậy, bạn có thể thấy rằng trên các ý kiến bộ sưu tập,
tôi đang làm một add ở đây và sau đó đây
là tài liệu thực tế sẽ được thêm vào ở đây.
Vì vậy, trong tài liệu chính nó,
bạn sẽ thấy rằng tôi có tài sản tác giả ở đây, nơi tôi đã thiết lập ID hiện tại,
và tôi cũng thiết lập tên đầu tiên cho tác giả ở đây,
tôi chỉ phục vụ lần đầu tiên ở đây vì vậy ở đây tôi nói tên hiển thị người dùng hiện tại này.
Nếu tên hiển thị là đúng thì tôi sẽ đặt nó thành tên hiển thị người dùng hiện tại này.
Nếu tài khoản của người dùng không có tên hiển thị như đính kèm với nó thì tôi sẽ chỉ đơn giản
sử dụng email người dùng hiện tại này làm thuộc tính tên đầu tiên ở đây.
Vì vậy, tài liệu này có chứa bình luận,
tự động cũng mang trường tên đầu tiên này
và đó là những gì tôi sẽ được sử dụng để hiển thị
thông tin khi tôi hiển thị các ý kiến trong thành phần DishDetail của tôi.
Vì vậy, chú ý rằng tôi đang thực sự sao chép thông tin ở đây trong mỗi ý kiến.
Nhưng không sao, vì chúng được lưu trữ dưới dạng
tài liệu Json trên Firebase, bạn có thể sao
chép một số thông tin trong các ý kiến ở đây.
Nhưng nếu bạn muốn biết thêm chi tiết về người dùng hiện tại,
bạn đã có một tham chiếu đến id của người dùng ở đây để bạn có thể thực sự đi và lấy
tài liệu cho người dùng cụ thể và sau đó
có được thêm thông tin về người dùng nên bạn chọn.
Bây giờ, khi tôi sử dụng Mongo DB cộng với Mongo,
bạn thấy rằng tôi sẽ chỉ sử dụng ID của người dùng hiện tại cho
tác giả và sau đó tôi sẽ sử dụng populate để điền thông tin này.
Bây giờ Cloud Firestore beta tại thời điểm này không có
bất kỳ khái niệm này cư trú như xa như tôi có thể nhìn thấy từ các tài liệu, có
lẽ một phiên bản tương lai có thể hỗ trợ một cách để kéo
thông tin từ một tài liệu khác và
tự động điền nó vào tài liệu hiện tại.
Khi điều đó xảy ra, sau đó mã này sẽ phải được sửa đổi để tận dụng lợi thế của điều đó.
Nhưng ngay bây giờ như tôi thấy nó,
Firestore beta không có khả năng để
điền thông tin từ một tài liệu khác vào tài liệu hiện tại.
Vì vậy, đó là lý do tại sao tôi chỉ sao chép phần
thông tin mà tôi thực sự cần khi tôi đưa ra nhận xét trong
thành phần dishdetail của tôi ở đây và sau đó xuống dưới
đây bạn có thể thấy rằng tôi có đánh giá và nhận xét ở đây và sau đó cũng có thể,
lưu ý rằng tôi đang tạo ra
hai các trường bổ sung trong bình luận của tôi ở đây được gọi là “CreateDat” và “UpdateDat”.
Chú ý làm thế nào tôi đang đặt dấu thời gian cho “CreateDat”.
Firebase, bây giờ Firebase này là gì tôi đang sử dụng ở đây,
Firebase này là chính xác những gì tôi nhập khẩu ở đây như từ ứng dụng Firebase.
Vì vậy, mà cung cấp cho tôi như bạn nhìn thấy ở đây dưới đây,
cung cấp cho tôi với giá trị này Firestore lĩnh vực này.
Vì vậy, cuộc gọi này đến các giá trị trường firestorm máy chủ timestamp,
sẽ trả về dấu thời gian hiện tại cho
tôi và đó là thông tin mà tôi sẽ được lưu trữ trong “CreateDat”.
Bây giờ, khi tôi chèn tất cả các tài liệu ở đây,
bạn thấy rằng tôi tự tạo ra trường “CreateDat” này cho mỗi tài liệu.
Bây giờ đây là một cách làm tương tự từ bên
trong mã góc của chúng
tôi ở phía khách hàng của chúng tôi và điều tương tự cho trường “UpdateDat” mà bạn sẽ thấy ở đây.
Vì vậy, khi bạn đăng một nhận xét mới,
bạn sẽ thấy rằng đây là cách bạn sẽ thêm một nhận xét mới vào máy chủ đó.
Bây giờ, điều này trả về một lời hứa và đó là thông tin
mà tôi đang sử dụng ở đây để xây dựng lời hứa này ở đây.
Sau đó, phương pháp khác này ở đây nói “GetComments”,
điều này “GetComments như bạn có thể thấy nó đang truy cập AFS bộ sưu tập món ăn,
doc disHid và sau đó thu thập ý kiến và thông báo rằng ở đây,
Tôi sẽ không yêu cầu mỗi ý kiến ID
chính nó mà tôi sẽ không được sử dụng trong góc của tôi kiến nghị nào,
vì vậy thay vì sử dụng thay đổi ảnh chụp,
tôi chỉ sử dụng thay đổi giá trị và điều này sẽ trả lại
tất cả các tài liệu trong bộ sưu tập ý kiến này cho tài liệu cụ thể
DisHid từ bộ sưu tập món ăn ở đây và đó sẽ được trả lại
và những ý kiến tôi sẽ vẽ trong thành phần món ăn của tôi.
Bây giờ, trong Mongos, bạn thấy rằng thực tế
là tôi bao gồm userID có nghĩa là tôi có thể làm giao hợp thông tin này bây giờ với Firebase, không có cách nào để điền thông tin phổ biến ở đây,
vì vậy đó là lý do tại sao tôi rõ ràng đi và sau đó điền các ý kiến trong
dishdetail của tôi để lấy tất cả các ý kiến về
món ăn đặc biệt này khi tôi làm cho chúng trong thành phần dishdetail.
Vì vậy, bạn thấy, rằng tôi đã phải điều chỉnh
mã góc một chút để đối phó với thực tế là
Firebase không hỗ trợ những điều mà mongos hỗ trợ
ít nhất tại thời điểm Cloud Firestore beta không hỗ trợ những điều này,
và vì vậy tôi đã phải làm việc xung quanh để đối phó với những gì Firebase cho
phép tôi lưu trữ và truy xuất từ trang web máy chủ Firebase.
Bây giờ, nó cũng là thú vị cho chúng tôi để nhanh chóng truy cập vào dịch vụ Auth ở đây.
Dịch vụ Auth ở đây một lần nữa,
nhận thấy rằng trong dịch vụ Auth ở đây tôi đang nhập khẩu AngularFireAuth này từ
AngularFire để npm submodule ở đây.
Vì vậy, ở đây bạn có thể thấy rằng tôi đang nhập khẩu AngularFireAuth và điều này
cho phép tôi truy cập vào các khía cạnh xác thực của Firebase.
Bây giờ, chúng ta hãy xem cách xác thực Firebase thực sự hoạt động từ ứng dụng Angular của chúng tôi.
Bây giờ chúng ta sẽ bắt đầu bằng cách nhìn vào cách đăng nhập được thực hiện.
Vì vậy, đây là nơi tôi thực hiện đăng nhập,
nơi tôi đang sử dụng email và mật khẩu.
Vì vậy, phần này khi tôi nhập AngularFireAuth ở đây,
lưu ý rằng các constructor tôi đang tiêm AngularFireAuth vào constructor của tôi.
Vì vậy, điều này sẽ tiêm dịch vụ AngularFireAuth
vào constructor của tôi và điều này cho phép tôi truy cập
vào xác thực Firebase trên trang web máy chủ để tôi có thể xác thực người dùng.
Vì vậy, nếu tôi muốn xác thực một người dùng đang đăng nhập bằng email và mật khẩu.
Chức năng đăng nhập này là một trong đó sẽ được gọi
khi tôi gõ vào email và mật khẩu của tôi
trong hộp thoại đăng nhập mà tôi bật lên và sau đó
nhấp vào nút gửi hoặc nút đăng nhập ở đây,
chức năng đăng nhập này sẽ được gọi và
thông tin người dùng nhưng tôi lấy từ thành phần đăng nhập được thông qua ở đây.
Vì vậy, khi nói đến đây,
tôi sẽ sử dụng AfAuth này như bạn thấy tôi chỉ cần tiêm nó vào constructor,
và điều này cung cấp đối tượng Auth này ở đây,
mà cung cấp phương pháp này được gọi là “đăng nhập với email và mật khẩu”.
Vì vậy, đăng nhập này bằng email và mật khẩu có hai tham số ở đây như bạn mong
đợi tên người dùng của người dùng hoặc email và mật khẩu ở đây.
Vì vậy, hai mảnh thông tin tôi cung cấp
nó như là hai tham số để đăng nhập này với email và mật khẩu.
Vì vậy, khi bạn nhấp vào đó bạn sẽ thấy rằng nó
nói rằng một trong những đầu tiên nên là email và một trong những thứ hai nên là mật khẩu.
Bây giờ cách tôi đã thiết lập nó,
đối tượng người dùng này đang đến trong chứa email trong
user.username ở đây và mật khẩu trong thuộc tính mật khẩu của đối tượng người dùng.
Vì vậy, khi đó là thu được,
sau đó tôi sẽ đăng thông tin này và sau đó vì vậy khi điều này được hoàn thành thành công, có
nghĩa là người dùng được đăng nhập đúng cách,
nếu có một lỗi,
sau đó bạn bắt lỗi ở đây ngay bây giờ tôi
không làm bất cứ điều gì cụ thể với lỗi bạn có thể
muốn in ra thông báo lỗi này để chỉ ra rằng người dùng không thể đăng nhập và như vậy.
Vì vậy, tôi đã không thực hiện một phần của thỏa thuận ở đây,
Tôi chỉ để lại nó ngay ở đó nếu bạn muốn giao diện điều khiển đăng nhập
thông tin này, bạn có thể làm điều đó khi lỗi xảy ra.
Bây giờ để đăng xuất, trong Firebase.
Một lần nữa chúng tôi lấy sự giúp đỡ của AFAuth mà chúng tôi đã tiêm và Auth vào nó,
và điều này cung cấp phương pháp này được gọi là “đăng xuất”,
mà khi được gọi là sẽ đăng xuất hiện tại đăng nhập
người dùng và do đó đó là một cách xử lý này.
Bây giờ, bạn phải tự hỏi làm thế nào tôi xử lý phần đăng nhập của Google.
Bây giờ điều này cũng được xử lý với AFAuth để các mô-đun AngularFire2 mà tôi đang sử dụng,
cung cấp thông tin này cho các phương pháp này cho chúng tôi thông qua
các mô-đun Firebase mà cũng được sử dụng trong AngularFire2,
và do đó điều này cung cấp phương pháp này được gọi là đăng nhập với pop và khi
chúng tôi đăng nhập với pop- lên đây để ý những gì tôi đang chỉ định ở đây.
Vì vậy, tôi đang nói “mới Firebase.auth.googleAuthProvider”.
Bây giờ, bạn cũng có thể làm Firebase.auth.facebookauthProvider và những người khác.
Vì vậy, như bạn đã thấy từ bài tập trước,
Firebase cho phép bạn đăng nhập của bên thứ ba bằng cách sử dụng Google,
Facebook, GitHub và Twitter.
Vì vậy, bạn có thể cấu hình này một cách thích hợp,
vì tôi đã bật chỉ ủy quyền của Google.
Vì vậy, đây là cách tôi sẽ thiết lập nó để sử dụng
ủy quyền Google của tôi ở đây và dòng mã duy nhất mà tôi kèm theo ở đây,
là một trong đó gây ra các cửa sổ pop-up của trình duyệt mà gợi ý cho tôi để ủy quyền
Firebase của tôi để sử dụng Google ủy quyền sử dụng tài khoản Google của tôi ở đây.
Đó là phần thứ hai mà tôi đã thiết lập ở đây.
Vì vậy, lưu ý rằng dịch vụ Auth đã
đơn giản hóa đáng kể so với những gì chúng tôi đã làm với phiên bản trước của ứng dụng này.
Vì vậy, bạn có thể so sánh hai phiên bản để xem điều này khác với phiên bản khác như thế nào.
Bây giờ, không chỉ điều này AfAuth mà chúng tôi đã tiêm ở đây,
AngularFireAuth phần mà chúng tôi đã tiêm ở đây,
cũng cung cấp điều này quan sát được gọi là “AuthState”.
AuthState này quan sát, có thể được đăng ký và điều này “AuthState” quan sát,
như bạn thấy ở đây,
mà tôi đã tuyên bố ở đây như là một FireBase.User quan sát được.
Vì vậy, đó là thông tin được áp dụng ở đây và chúng ta cũng có thể thiết lập
một biến ở đây gọi là người dùng hiện tại đó là loại người dùng Firebase ở đây.
Vì vậy, AFAuthState này là một quan sát được mà
tôi có thể đăng ký và bất cứ khi nào AuthSt
ate này thay đổi, AuthState theo dõi trạng thái xác thực của
người dùng cho dù người dùng đăng nhập hoặc đăng xuất và nếu người dùng đăng nhập,
sau đó điều này sẽ sau đó đăng ký sẽ trả lại cho tôi thông tin người dùng và từ
thông tin người dùng, chúng tôi có thể truy xuất rất nhiều thông tin bao gồm tên hiển thị
, email, ID hồ sơ và sau đó là
hình đại diện cho người dùng nếu nó đã được thiết lập cho các tài khoản cụ thể.
Tất cả những điều này sẽ được cung cấp cho chúng tôi tự động bởi người dùng.
Vì vậy, khi bạn nhấp vào “người dùng” và sau đó chấm,
bạn sẽ thấy rằng nó cung cấp tất cả những thông tin này cho chúng tôi.
Vì vậy, đó là một email tên hiển thị,
cho dù email được xác minh hay không và vân vân.
Vì vậy, một số điều mà chúng ta quan tâm cụ thể.
URL ảnh có thể được sử dụng để lấy thông tin hình đại diện cho người dùng,
ID nhà cung cấp xác định ai đang
cung cấp thông tin này cho bạn đây sẽ là ID Facebook, ID
Google và ID GitHub và vân vân và thông tin bổ sung ngay cả token làm mới.
Vì vậy, bạn thấy một loạt các thông tin
được cung cấp cho bạn thông qua các đối tượng người dùng được
trả về bởi Authstate này khi bạn đăng ký nó
và cũng cho phép tôi thu hút sự chú ý của bạn đến UID ID người dùng,
và đây là những gì có thể được sử dụng để lập chỉ mục người dùng trong ứng dụng của chúng tôi.
Vì vậy, đó là dịch vụ xác thực theo cách tôi đã thiết
lập nó để sử dụng xác thực Firebase trong ứng dụng này.
Vì vậy, hai thay đổi mà tôi đã phản ánh cho bạn để hiển thị
cách dịch vụ của tôi được sửa đổi để sử dụng Firebase.
Phần lớn các bản cập nhật mà tôi đã thực hiện cho ứng dụng Angular của tôi là tất cả
trong các dịch vụ để sử dụng Firebase cài đặt.
Vì vậy, vì em bé có cấu trúc của ứng dụng Angular,
các thành phần chỉ đơn giản là phụ thuộc vào
các dịch vụ và các dịch vụ là những người mà chúng ta đang nói chuyện với back-end.
Vì vậy, phần lớn các bản cập nhật mà
tôi đã thực hiện cho ứng dụng Angular của tôi liên quan đến việc cập nhật các dịch vụ này để
sử dụng Firebase back-end của Google như một dịch vụ với hai mô-đun npm,
Firebase và AngularFireAuth đây.
Vì vậy, bạn sẽ thấy rằng phần lớn các bản cập nhật bị giới hạn cho
tất cả các dịch vụ mà tôi có trong thư mục dịch vụ của ứng dụng Angular của tôi.
Tất nhiên, tôi cần phải làm một chút
điều chỉnh tối thiểu vào thành phần dishdetail
và thành phần tiêu đề để làm cho nó hoạt động với Firebase.
Bạn có thể truy cập nhanh vào headercomponent.t,
headercomponent.html và dishdetailcomponent.tsfile để xem cách mã
đã thay đổi giữa phiên bản trước
và phiên bản hiện tại của ứng dụng Angular, phiên bản
trước đó, tôi có nghĩa là phiên bản mà chúng tôi sử dụng cho
giao tiếp với X plus của chúng tôi
máy chủ Mongo DB mà chúng tôi đã sử dụng trong bài tập trước đó.
Bây giờ, một nơi nữa mà bạn sẽ thấy tôi sửa đổi,
Thật thú vị, là trong dịch vụ yêu thích.
Trong dịch vụ yêu thích,
cách tôi lưu trữ các mục yêu thích của người dùng,
là mục yêu thích là một bộ sưu tập trên
trang web máy chủ của tôi và bản thân yêu thích chứa tài liệu.
Mỗi tài liệu chứa ID người dùng và ID món ăn.
Vì vậy, một người dùng cụ thể có
nhiều tài liệu mỗi người trong số họ lưu trữ ID người dùng và ID món ăn.
Vì vậy, một bộ sưu tập của chúng với nhau sẽ xác định tất cả các mục yêu thích cho một người dùng cụ thể.
Tôi thấy rằng đây là một cách tốt hơn để tổ chức dữ liệu này trong Firebase.
Trong MongoDB
của chúng tôi cộng với mongos, bạn thấy rằng tôi đã nhúng trong mảng ID món ăn vào
tài liệu yêu thích và sau đó xác định giản đồ yêu thích theo cách đó.
Ở đây, tôi đang sử dụng
một tài liệu riêng biệt để theo dõi từng mục yêu thích cho từng người dùng.
Bây giờ, bởi vì Firebase hỗ trợ truy vấn, vì vậy,
tôi có thể truy vấn Firebase của tôi và trích xuất tất cả các tài liệu có cùng ID người dùng,
phù hợp với người dùng hiện đang đăng nhập và sau đó
trích xuất các ID món ăn tương ứng từ các mục yêu thích.
Sau đó, tôi sẽ đi và sau đó truy vấn máy chủ
của tôi và có được thông tin món ăn cho mỗi món ăn.
Vì vậy, nó liên quan đến nhiều chuyến đi đến máy chủ để có được
tất cả các món ăn yêu thích của tôi thông tin trước khi tôi có thể hiển thị danh sách yêu thích của tôi.
Nhưng, đó là cách tốt nhất mà tôi có thể làm cho Firebase để làm việc với ứng dụng Angular của tôi.
Có lẽ, vào một ngày tương lai,
Firebase Cloud Firestone có thể mở rộng để
cho phép một cái gì đó giống như dân cư mà chúng tôi đã làm với người Mông Cổ.
Trong trường hợp đó, tôi sẽ cập nhật mã để sử dụng cách đó để
có được tất cả các thông tin món ăn tự động.
Vì vậy, gánh nặng của việc xây dựng tài liệu hợp chất này sẽ được chuyển sang trang web máy chủ.
Ngay bây giờ, thân chủ của tôi đang làm rất nhiều công việc ở đây.
Bây giờ, khi bạn đi vào đây,
bạn sẽ thấy rằng trong phương pháp GetFavorites,
bạn sẽ thấy cách tôi truy cập vào mục yêu thích của tôi ở đây.
Vì vậy, khi tôi làm “Getfavorites” Tôi đang truy vấn
bộ sưu tập này của yêu thích nhưng nhận thấy rằng ở đây,
tôi nói “ref where is this user ID”.
ID người dùng này tôi có được ở đây.
Vì vậy, trong nhà xây dựng của máy chủ yêu thích của
tôi, tôi đăng ký dịch vụ Auth này, trạng thái Get Auth trong dịch vụ Auth.
Vì vậy, trong dịch vụ Auth nếu bạn đi vào,
bạn sẽ thấy phương pháp này được gọi là Get Auth trạng thái ở đây.
Trạng thái Nhận Auth trả về This.authState,
mà tôi đã xác định ngay tại đó.
Vì vậy, đây sẽ là một điều quan sát khi bạn thấy tôi tuyên bố ở đây.
Vì vậy, quan sát được là một trong những mà tôi sẽ
sử dụng trong dịch vụ yêu thích của tôi và sau đó đăng ký với điều đó.
Vì vậy, bất cứ khi nào thông tin người dùng thay đổi, điều này sẽ được tự động phản ánh ở đây.
Vì vậy, bạn thấy rằng ngay cả trong ứng dụng trước đó tôi đã sử dụng một quan sát được,
để phản ánh thông tin người dùng vào thành phần tiêu đề của tôi.
Loại cách tiếp cận tương tự,
mà tôi đang sử dụng trong thành phần yêu thích của tôi ở đây,
để có được giữ của ID người dùng cho người dùng hiện đang đăng nhập.
Vì vậy, khi tôi truy vấn bộ sưu tập yêu thích của
tôi, tôi sẽ truy vấn và trích xuất chỉ những tài liệu mà người dùng phù hợp với điều này.
Sau đó, tôi chỉ sử dụng những thay đổi giá trị ở đây.
Vì vậy, tôi chỉ trích xuất tất cả các tài liệu,
mà tôi không quan tâm đến ID của tài liệu yêu thích tại thời điểm này.
Vì vậy, tôi chỉ trích xuất tất cả chúng và sử dụng chúng.
Nếu người dùng không đăng nhập và như bạn có thể thấy
tôi đang ném một lỗi ở đây với câu nói có thể quan sát,
“không có người dùng đăng nhập” đó là những gì được hiển thị trong bài phát biểu yêu thích của tôi ở đó.
Bây giờ, isFavorites cũng được cập nhật
ở đây nhưng trong isFavorites những gì tôi đang làm là tôi sẽ đến DB.
Bây giờ ở đây, tôi sẽ truy cập vào cơ sở dữ liệu bằng cách nói,
“DB bằng firebase.firestore”.
Nhớ lại rằng tôi đang nhập khẩu Firebase ở đây,
nhập khẩu sao như Firebase ở đây.
Các Angular Firestore chính nó không cung cấp cho tôi một phương pháp thực
hiện nhiều truy vấn hợp chất ở đây.
Các góc Firestore hoặc góc lửa không cung cấp cho tôi làm điều đó.
Vì vậy, đó là lý do tại sao tôi phải sử dụng Firebase Firestore.
Vì vậy, khi tôi nói Firebase Firestore,
điều này cho tôi một tham chiếu đến cơ sở dữ liệu Firestore và sau đó tôi có thể đi vào cơ sở dữ liệu này
và sau đó nói “DB bộ sưu tập yêu thích” và sau đó tôi có thể làm nhiều truy vấn ở đây.
Vì vậy, tôi đang nói, .nơi người dùng là này.wheredish là ID món ăn.
Vì vậy, nếu tôi muốn có được một yêu thích cụ thể.
Để kiểm tra xem một món ăn cụ thể là yêu thích của một người dùng tôi có được
tài liệu cụ thể mà người dùng và món ăn phù hợp với hai món ăn này,
nếu họ không khớp thì nó sẽ trở lại với một trống rỗng.
Vì vậy, tôi trích xuất và sau đó trả về giá trị này ở đây.
Bây giờ, sau đó tôi đăng yêu thích,
bạn thấy làm thế nào tôi đang làm điều này tôi đang nói điều này AFS bộ sưu tập yêu thích và tôi sẽ nói “thêm”.
Nhìn vào tài liệu mà tôi đang lưu trữ trong mục yêu thích của tôi.
Tài liệu chính nó chứa ID người dùng và ID món ăn.
Vì vậy, hai mẩu thông tin kèm theo ở đây và nếu
không thì nó sẽ từ chối lời hứa mà không có người dùng đăng nhập ở đây.
Tương tự như vậy, cho yêu thích xóa mà tôi đã thực hiện ở đây.
Dành một thời gian một lần nữa đi qua mã này để hiểu làm thế nào tôi đã
tận dụng Firebase và Angular lửa để mô-đun npm
để giao tiếp với máy chủ Firebase của tôi mà tôi đã thiết lập trong bài tập trước đó.
Với điều này, tôi đã cung cấp cho bạn một cái nhìn tổng quan nhanh chóng về
cách bạn có thể thiết lập ứng dụng Angular của bạn để tương tác với
Firebase back-end như một dịch vụ và sau đó có thể
hỗ trợ các hoạt động khác nhau mà bạn có trong ứng dụng Angular của bạn.
Như tôi đã chứng minh trước đó,
ứng dụng Angular này trông giống như
phiên bản trước của ứng dụng Angular, nơi chúng tôi đang
sử dụng phiên bản riêng của chúng tôi máy chủ Express MongoDB.
Bây giờ, với điều này tôi hoàn thành bài tập đặc biệt này mà tôi đã minh họa trong
bài học này về back-end như một dịch vụ và cũng chứng minh
Firebase như một ví dụ về một back-end như một dịch vụ.