[MUSIC]
Trong bài tập trước, chúng tôi đã cấu hình
Firebase back-end 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 máy chủ Firebase của chúng tôi để hoạt động như phụ trợ cho ứng dụng React 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 React
của chúng tôi, mà sử dụng Firebase back-end 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 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ả hai 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, tôi đã cung cấp cho
bạn phiên bản Firebase của ứng dụng React của chúng tôi.
Vì vậy, gõ git clone https://github.com/jmuppala/conFusion-Rea -
CT-Firebase.git.
Và sau đó sao chép kho Git.
Và một khi kho lưu trữ 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 Confusion-phản ứng Firebase 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 một cài đặt sợi để 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 thêm mô-đun nút gọi là Firebase.
Tôi sẽ giải thích thêm một chút về các mô-đun nút sau này trong bài tập này.
Sau khi cài đặt dự án hoàn tất, hãy mở dự án trong một trình soạn thảo.
Và sau đó trong dự án, đi vào nguồn > thư mục Firebase và
sau đó mở tệp config.js.
Và trong tập tin config.js, 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 cấu hình máy chủ Firebase của riêng bạn.
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 tệp config.js của bạn.
Để thay thế chúng với cấu hình máy chủ Firebase cụ thể của bạn 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 React của bạn bằng cách gõ sợi bắt đầu tại dấu nhắc.
Một khi ứng dụng React của bạn được biên dịch, và do đó
ở đây bạn sẽ thấy trang chủ, trang về, như chúng ta thấy ở đây.
Và thực đơn.
Và trang liên lạc.
Hãy đăng nhập chính mình,
để 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 ban đầu ở đây 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.
Sau đó, bạn sẽ thấy, ở 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 nút đă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 ta không có bất kỳ mục yêu thích, vì vậy
nó sẽ trống rỗng vào 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 mục yêu thích của tôi.
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à hãy để tôi chọn thêm một món nữa và thêm nó vào mục yêu thích của tôi.
Quảng cáo sau đó bây giờ khi bạn đi đến mục yêu thích của tôi, bạn sẽ thấy một vài
món ăn được thêm vào mục yêu thích của bạn, như bạn 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
chữ thập xóa để xóa mục khỏi 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 nhận xét 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ả cũng có trong đây.
Và với ngày đó như thể hiện ở đâ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.
Vì vậy, đây là cách ứng dụng của bạn làm việc với
Firebase đó như là back-end 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 của chúng tôi để sử dụng Firebase thay vì sử dụng
máy chủ Express MongoDB chuẩn mà chúng tôi đã xây dựng trước đó?
Để cấu hình ứng dụng của bạn để giao tiếp với máy chủ Firebase,
bạn cần phải cài đặt mô-đun Firebase.
Mô-đun Firebase, như bạn thấy ở đây, cung cấp 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õ vào cài đặt trừ trừ đi lưu firebase.
Bây giờ làm thế nào để sử dụng những thứ này?
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
mà chúng tôi sử dụng Firebase để sửa đổi ứng dụng mà chúng tôi đã phát triển
trước đó để sử dụng máy chủ Firebase như là một dịch vụ back-end.
Chúng ta hãy xem qua ứng dụng React đã sửa đổi của chúng tôi để hiểu
cách nó đã được cấu hình lại để giao tiếp với máy chủ Firebase của chúng tôi.
Chúng tôi sẽ bắt đầu cuộc hành trình của chúng tôi trong tập tin package.json.
Và trong tập tin package.json,
bạn sẽ nhận thấy rằng tôi đã thêm vào trong mô-đun npm Firebase vào này.
Và vì vậy khi bạn sao chép kho Git và cài đặt sợi,
mô-đun Firebase sẽ tự động được cài đặt vào ứng dụng của bạn.
Nếu bạn đang cấu hình một ứng dụng React mới để
giao tiếp với máy chủ,
thì bạn cần cài đặt một cách rõ ràng mô-đun Firebase vào ứng dụng của bạn.
Bây giờ sau đó, bạn sẽ nhận thấy những thay đổi trong thư mục Firebase.
Ở đây chúng ta đã thấy các tập tin cấu hình.
Các tập tin khác mà bạn sẽ nhận thấy ở đây được gọi là firebase.js.
Bây giờ đây là nơi chúng tôi cấu hình ứng dụng của chúng tôi để giao
tiếp với Firebase Server.
Vì vậy, chúng tôi đang nhập cấu hình ở đây.
Và sau đó nhập khẩu firebase từ firebase.
Và sau đó bạn khởi động ứng dụng ở đây bằng cách cung cấp cấu hình cho firebase,
vì vậy đây là nơi bạn cung cấp tất cả các thông tin cấu hình để
khách hàng của bạn có thể giao tiếp với Firebase Server.
Ngoài ra, tôi đang xuất khẩu một vài trong số những xuất khẩu từ
đây gọi là auth, fireauth và vân vân.
Những điều này tôi sẽ sử dụng trong những người sáng tạo hành động
để giao tiếp với Firebase Server của tôi.
Bây giờ sau đó, các sửa đổi chính sẽ nằm trong tệp ActionCreators.
Bây giờ tôi đã không thêm vào bất kỳ hành động mới, nhưng thay vào đó tất cả các giao tiếp
với máy chủ bây giờ được sửa đổi để giao tiếp với Firebase Server của chúng tôi.
Vì vậy, thay vì sử dụng lấy, như chúng tôi đã làm trước đó,
bây giờ chúng tôi sẽ sử dụng firestore.
Vì vậy, như bạn có thể thấy, tôi đã nhập auth, firestore,
fireauth và firebasestore từ mô-đun firebase mà
tôi đã thiết lập trước đó trong thư mục firebase.
Và sau đó tất cả những điều này sẽ cho phép tôi giao tiếp với Firebase Server của tôi.
Để lấy một bộ sưu tập từ Firebase của tôi,
chúng tôi chỉ cần nói firestore.collection, và sau đó cung cấp tên của bộ sưu tập.
Và sau đó bạn có thể thêm vào bộ sưu tập bằng cách nói, thêm, như bạn có thể thấy ở đây,
lấy mục cụ thể mà bạn đang thêm vào bộ sưu tập của bạn ở đó.
Vì vậy, đó là tài liệu mà chúng tôi đang thêm vào bộ sưu tập của chúng tôi.
Vì vậy, đây là cho bài bình luận, như bạn có thể thấy ở đây.
Và khi bạn đăng nó, sau đó bạn sẽ cung cấp lại với một DoCef,
đó là tham chiếu đến tài liệu,
sau đó bạn có thể sử dụng để đi và lấy tài liệu từ máy chủ của bạn.
Bây giờ cách Firebase hoạt động là nó sẽ cung cấp
ID riêng biệt với nội dung thực tế của các tài liệu.
Vì vậy, Firebase giữ ID và dữ liệu tài liệu riêng biệt.
Vì vậy, ở đây tôi phải rõ ràng kết hợp hai với nhau thành
một đối tượng JavaScript ở đây, được gọi là bình luận ở đây.
Vì vậy, như bạn nhìn thấy từ các tài liệu, vì vậy bạn nhận thấy rằng khi tôi
chèn một mục vào một bộ sưu tập, nó trả về một docRef ở đây.
Và từ DocRef, tôi có thể lấy ID của tài liệu.
Và vì vậy những gì tôi đang làm ở đây là tôi đang đi và
lấy tài liệu tương ứng ở đây.
Và sau đó một khi tài liệu được lấy, bây giờ, tất nhiên, tài liệu nên tồn tại, vì
vậy điều này phải luôn luôn đúng, bởi vì chúng tôi vừa chèn tài liệu.
Nhưng chỉ vì lợi ích của sự hoàn chỉnh, tôi đang làm một kiểm tra rõ ràng cho điều đó.
Và sau đó dữ liệu trong tài liệu
thu được bằng cách nói doc.data, như bạn thấy ở đây.
Và sau đó id của tài liệu được thu được bởi doc.id
Vì vậy, hai cái này là riêng biệt.
Nhưng trong mã React của chúng tôi, chúng tôi đã luôn luôn lưu trữ id và
dữ liệu với nhau như một tài liệu JSON duy nhất ở đây, hoặc đối tượng JavaScript ở đây.
Vì vậy, đó là lý do tại sao tôi kết hợp hai với nhau
thành một đối tượng JavaScript duy nhất ở đây bằng cách làm điều này.
Bạn sẽ thấy tôi liên tục làm điều này cho, ví dụ,
cho các chương trình khuyến mãi táo bạo và như vậy, cũng trong ActionCreators.
Và sau đó tôi thêm vào bình luận vào cửa hàng Redux của tôi ở đây,
và phần còn lại của mã vẫn như vậy.
Tương tự như vậy, để lấy các món ăn,
bạn sẽ thấy cách chúng ta đang lấy một số món ăn từ Firebase.
Vì vậy, chúng tôi đang nhìn thấy các món ăn firestore.collection nhận được và có được các món ăn.
Bây giờ khi bạn có được điều đó, nó sẽ cho tôi một giá trị chụp nhanh,
đó là ảnh chụp của trạng thái hiện tại của bộ sưu tập này, và từ đó,
tôi phải đi vào và lấy lại từng món ăn.
Và sau đó tôi đang xây dựng lại mảng các món ăn của mình ở đây.
Bây giờ nhận thấy rằng, như tôi đã nói, id và dữ liệu là riêng biệt, vì vậy
tôi cần phải kết hợp chúng lại với nhau, bởi vì đó là cách tôi sử dụng dữ liệu trong
ứng dụng React của tôi, vì vậy tôi đang đẩy nó vào mảng đĩa.
Và sau đó cuối cùng trả lại các món ăn mà sau đó sẽ được đưa vào
cửa hàng Redux của tôi ở đây.
Vì vậy, loại thay đổi này đã được thực hiện trong ActionCreators.
Bây giờ quá trình đăng nhập và đăng xuất sẽ được xử lý dưới đây.
Vì vậy, đối với đăng nhập, auth mà chúng tôi đã nhập từ firebase,
auth là một trong đó cho phép tôi để làm đăng nhập và đăng xuất.
Vì vậy, nếu bạn đang đăng nhập bằng cách sử dụng email và mật khẩu,
nó cung cấp với phương pháp này được gọi là SigninWiTheMailAndPassword.
Và sau đó bạn cung cấp email và mật khẩu như hai tham số ở đây.
Và sau đó điều đó sẽ cho phép bạn đăng nhập.
Và khi bạn đăng nhập, auth cung cấp đối tượng này được gọi là CurrentUser trên auth.
Vì vậy, bạn có được thông tin của người dùng bằng cách nói auth.CurrentUser ở đây.
Và tôi cũng đang lưu trữ thông tin người dùng vào cơ sở dữ liệu của tôi.
Bây giờ tôi không theo dõi rõ ràng bất kỳ mã thông báo và
những thứ như thế bởi vì nó được tự động theo dõi bởi auth cho tôi,
được cung cấp bởi mô-đun Firebase npm.
Vì vậy, tôi chỉ tận dụng điều đó để theo dõi việc sử dụng hiện tại.
Nếu người dùng hiện tại là null, sau đó tôi biết rằng khách hàng của tôi
không có bất kỳ người dùng đăng nhập vào máy chủ.
Và tương tự, để đăng xuất người dùng tôi chỉ đơn giản là nói auth.Signout.
Bây giờ một lần nữa, tài liệu về cách sử dụng
mô-đun Filebase npm là tất cả có sẵn trong tài liệu Firebase.
Vì vậy, bạn có thể dễ dàng tìm kiếm để hiểu
làm thế nào để tận dụng Firebase để sử dụng tất cả
các chức năng khác nhau có sẵn từ mô-đun Firebase npm.
Ngoài ra, đối với mục yêu thích, chúng tôi hoặc đăng một yêu thích và vì vậy
sau đó bạn cần phải đăng các mục, vì vậy bạn sẽ nói thêm, và
khi bạn cần để có được một mục, bạn sẽ nói nhận được.
Và bạn thậm chí có thể nhận được một mục từ một tài liệu cụ thể trong bộ sưu tập.
Nếu bạn muốn có một tài liệu cụ thể trong bộ sưu tập, bạn sẽ nói .doc.
Và sau đó bạn cung cấp id của tài liệu ở đây.
Vì vậy, đó là cách bạn có thể có được một tài liệu cụ thể.
Cũng xóa mục yêu thích, và lấy mục yêu thích và vân vân.
Bây giờ cho các mục yêu thích được lưu trữ trong Firebase của tôi,
các mục yêu thích được lưu trữ dưới dạng ID người dùng và ID món ăn ở đây.
Bây giờ firestore chính nó không có bất kỳ cách nào để điền
thông tin món ăn vào ID món ăn.
Vì vậy, tôi chỉ lấy tất cả các thông tin món ăn,
vì vậy đây là mỗi yêu thích là một cặp, người dùng và món ăn ID cặp.
Vì vậy, tôi chỉ lấy nó vào mục yêu thích của tôi ở đây.
Nhưng sau đó cũng có nghĩa là tôi cần phải sửa đổi thành phần yêu thích của tôi để
nó có thể sử dụng ID món ăn và sau đó chỉ mục vào các món ăn
được lưu trữ trong cửa hàng Redux của tôi, và có được thông tin món ăn.
Hoặc thay thế là đi đến máy chủ và sau đó lấy thông tin.
Nhưng kể từ khi tôi đã có dữ liệu về các món ăn trong cửa hàng Redux của
tôi, bởi vì tôi đã thực hiện các món ăn lấy để lấy tất cả thông tin
về các món ăn.
Tôi chỉ trực tiếp đi vào đối tượng món ăn trong Redux xé của tôi và
lấy thông tin này.
Vì vậy, điều này cũng có nghĩa là có những sửa đổi đối với thành phần chính.
Trong thành phần chính, bạn sẽ nhận thấy rằng khi tôi làm yêu thích ở đây cho
chi tiết món ăn, tôi chỉ đơn giản là phải so sánh món ăn với DisHid đó.
Vì vậy, món ăn ở đây trong yêu thích của tôi là DisHid chính nó, vì vậy
tôi chỉ cần làm so sánh.
Vì vậy, sẽ có sự thay đổi nhỏ đối với dòng này trong DiSid.
Và bạn cũng sẽ nhận thấy rằng khi tôi gọi các mục yêu thích,
ngoài việc cung cấp mục yêu thích của họ,
tôi cũng cung cấp các món ăn như một trong những đạo cụ cho mục yêu thích của tôi.
Vì vậy, đó là một thay đổi khác mà bạn sẽ nhận thấy trong thành phần chính.
Và tương tự, trong thành phần yêu thích,
bạn sẽ nhận thấy rằng bên trong thành phần yêu thích xuống dưới đây,
bạn sẽ nhận thấy rằng, khi tôi vẽ thành phần yêu thích.
Sau đó, ngay ở đây trong chức năng này ở đây, const yêu thích,
những gì tôi đang làm là tôi đang đi vào các món ăn yêu thích,
món ăn là một mảng của tất cả các DishID ở đây, vì vậy tôi lập bản đồ thông qua đó.
Vì vậy, nhìn vào mỗi DisHid, sau đó từ các món ăn,
tôi lọc ra món ăn đặc biệt đó.
Và sau đó thu được DiSid, vì vậy
ở đây bạn sẽ thấy tôi sử dụng bộ lọc mảng JavaScript ở đây.
Nó sẽ lọc ra rằng thông tin món ăn cụ thể và
sau đó hiển thị món ăn đặc biệt đó.
Vì vậy, đây là một công việc bổ sung mà tôi cần phải làm
trong thành phần yêu thích của tôi để làm cho mỗi món ăn ở đó.
Vì vậy, loại sửa đổi nhỏ như vậy bạn sẽ nhận thấy trong một vài thành phần,
đặc biệt là chi tiết món ăn, yêu thích và thành phần chính.
Đó là nơi mà một số thay đổi nhỏ đã được thực hiện để tạo điều kiện cho ứng
dụng React để có thể tận dụng Firebase Server.
Vì vậy, đây là một đánh giá nhanh chóng về cách
ứng dụng React của tôi đã được sửa đổi để giao tiếp với Firebase Server của tôi.
Bây giờ, giống như Angular, chúng tôi cũng có Angularfire, nó cung cấp cho
chúng tôi một cách để tận dụng cùng với Firebase để giao tiếp với máy chủ.
React không có bất kỳ đối tác như vậy, vì vậy tôi trực tiếp sử dụng
mô-đun Firebase npm cung cấp cơ sở cơ bản của việc truy cập Firebase Server.
Và sau đó tận dụng các chức năng mà nó cung cấp để giao tiếp với
Firebase Server của tôi.
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 mô-đun npm Firebase để giao tiếp
với Firebase Server 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 về cách bạn có thể thiết lập
ứng dụng React 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 của bạn.
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ụ.
[ NHẠC]