[MUSIC]
In the previous exercise, we had already configured our
Firebase back-end as a service with the new project.
And also set up a lot of the data into our database, and then set up our storage and
configured our Firebase server to act as the backend for our React application.
In this exercise, we're going to look at a modified version of our React application,
which makes use of the Firebase back-end as a service in order to
obtain the data and also store information for users on the server.
Also, we will take advantage of the authentication support that Firebase
provides to authenticate users.
Both using an email and password approach, and also using a Google account.
To get started on this exercise, go to a convenient location on your computer,
and then clone the given Git repository, I have provided
you with the Firebase version of our React application.
So type git clone https://github.com/jmuppala/conFusion-Rea-
ct-Firebase.git.
And then clone the Git repository.
And once the Git repository is cloned to your computer, then move
into the confusion-React-Firebase folder that will get created at this point.
And then you would notice that a bunch of files are already installed there.
Let's go ahead and do a yarn install to install all the node
modules on which this Angular application is dependent upon.
This version will also install additional node modules called Firebase.
I will explain a bit more about these node modules later on in this exercise.
Once the project installation is complete, open the project in an editor.
And then in the project, go into the source > Firebase folder and
then open config.js file.
And in the config.js file, you will see a set of Firebase configuration
that you need to setup with your own Firebase server configuration.
As we have seen in the previous exercise, we can obtain all this information when we
click on this button here called Add Firebase to your web app.
And then copy this information and
then paste this information into your config.js file.
To replace these with your specific Firebase servers configuration for
all this piece of information.
And once that is completed, then you can start up your React
application by typing yarn start at the prompt.
Once your React application is compiled, and so
here you would see the home page, the about page, as we see here.
And the menu.
And the contact page.
Let's login ourselves,
let me go back to the homepage and then we'll login ourselves.
So when you click the Login button,
you will see the typical form here with the email and the password information.
You'll also see an initial button here called Login with Google.
So let me login with my Google account.
So when you click on the Login with Google, then it will open another browser
window where you will be asked to authorize for using your Google account.
Then you will see, on the right-hand corner, you will immediately see your name
being displayed here, and with the login button now turned into a logout button.
So, at this point, you should be able to see your favorites.
And in this case, since we don't have any favorites, so
it'll be empty at this point.
Let me go back to the menu and then add a couple of items into my favorites.
So I'll add this dish to my favorites, so when I click on this dish,
you'll immediately see the icon turn into a filled heart.
And let me also select one more dish and add it into my favorites.
Ad then now when you go to the my favorites, you will see a couple
of dishes added into your favorites, as you would expect.
And again, you can delete the dishes by clicking on the delete
cross to remove the item from your list of favorites, as shown here.
Now we can also add, as you realize, we can go to any dish and
then add comments about that dish.
So let me add in a comment here.
And the moment you submit the comment, you will immediately see that
your comment will be displayed here with the author's name also included in here.
And with that date as shown here.
So, you can see that the user submission of comments will
be supported for any specific dish.
So, this is how your application works with that
Firebase as the back-end as a service.
Now, of course, you must be wondering, how do we redesign our application to
make use of Firebase instead of using the standard
Express MongoDB server that we have built earlier?
In order to configure your application to communicate with the Firebase server,
you need to install the Firebase module.
The Firebase module, as you see here, provides the tool and
infrastructure that enables you to communicate with the Firebase server.
And to install this into your application,
you type in the install minus minus save firebase.
Now how to make use of these?
I will illustrate that by quickly running you through the modified code
where we make use of Firebase to modify the application that we have developed
earlier to make use of the Firebase server as the back-end as a service.
Let's take a quick tour through our modified React application to understand
how it has been reconfigured to communicate with our Firebase server.
We'll begin our journey in package.json file.
And in package.json file,
you will notice that I have added in the Firebase npm module into this.
And so when you clone the Git repository and do the yarn install,
the Firebase module automatically gets installed into your application.
If you were configuring a new React application to
communicate with the server,
then you need to explicitly install the Firebase module into your application.
Now after this, you will notice changes in the Firebase folder.
Here we have already seen the config file.
The other file that you will notice here is called firebase.js.
Now this is where we configure our application to communicate with
the Firebase Server.
So we're importing the config here.
And then importing firebase from firebase.
And then you initial the app here by supplying the config to the firebase,
so this is where you supply all the configuration information so
that your client can communicate with the Firebase Server.
In addition, I am exporting a few of these exports from
here called auth, fireauth and so on.
These I will make use of in the action creators in order
to communicate with my Firebase Server.
Now after this, the major modifications will be in the ActionCreators file.
Now I have not added in any new actions, but instead all the communication
with the server is now modified to communicate with our Firebase Server.
So instead of using the fetch, as we did earlier,
we are now going to use firestore.
So as you can see, I have imported the auth, firestore,
fireauth, and firebasestore from the firebase module that
I have set up earlier in the firebase folder.
And then all these will enable me to communicate with my Firebase Server.
In order to fetch a collection from my Firebase,
we simply say firestore.collection, and then supply the name of the collection.
And then you can add to the collection by saying, add, as you can see here,
which takes the specific item that you're adding into your collection there.
So that's the document that we're adding into our collection.
So this is for the post comment, as you can see here.
And when you post that, then you will supplied back with a docRef,
which is the reference to the document,
which then you can use to go and fetch the document from your server.
Now the way Firebase works is that it'll supply
the ID separately from the actual contents of the documents.
So Firebase keeps the ID and the document data itself separately.
So here I have to explicitly combine the two together into
a JavaScript object here, called comment here.
So as you see from the doc, so you notice that when I
insert an item into a collection, it returns a docRef here.
And from the docRef, I can get the ID of the document.
And so what I am doing here is I am going and
fetching the corresponding document here.
And then once the document is fetched, now, of course, the document should exist,
so this should be always true, because we have just inserted the document.
But just for the sake of completeness, I am doing an explicit check for that.
And then after that the data that is in the document is
obtained by saying doc.data, as you see here.
And then the id of the document is obtained by doc.id.
So these two are separate.
But within our React code, we have always stored the id and
the data together as a single JSON document here, or JavaScript object here.
So that's why I'm combining the two together
into a single JavaScript object here by doing this.
You will see me repeatedly doing this for, say for example,
for audacious promotions and so on, also in the ActionCreators.
And then after that I am adding in the comment into my Redux store here,
and the rest of the code remains as such.
Similarly, for fetch dishes,
you'll see how we're fetching several dishes from the Firebase.
So we're seeing firestore.collection dishes get and obtain the dishes.
Now when you obtain that, then it will give me a snapshot value,
which is the snapshot of the current state of this collection, and from that,
I have to go in and retrieve each and every dish.
And then so I am reconstructing my array of dishes here.
Now notice that, as I said, the id and the data are separate, so
I need to combine them together, because that's the way I use the data in my React
application, so I am pushing that into the dishes array.
And then finally returning the dishes which will then be inserted into my
Redux store here.
So this kind of changes have been made in the ActionCreators.
Now the login and logout process will be handled down below here.
So for the login, the auth that we have imported from the firebase,
the auth is the one that allows me to do the login and logout.
So if you are logging in using email and password,
it provides with this method called signInWithEmailAndPassword.
And then you supply the email and password as the two parameters here.
And then that will enable you to login.
And when you login, the auth provides this object called the currentUser on the auth.
So you obtain the user's information by saying auth.currentUser here.
And also I am storing the user information into my database.
Now I'm not explicitly tracking any token and
things like that because that is automatically tracked by auth for me,
which is provided by the Firebase npm module.
So I am just leveraging that to track the current use.
If the current user is null, then I know that my client
doesn't have any user logged in to the server.
And similarly, to log out the user I simply say auth.signOut.
Now again, the documentation of how to make use of the Filebase
npm module is all available in the Firebase documentation.
So you can easily look that up to understand how to leverage
Firebase to make use of all these different functions
that are available from the Firebase npm module.
Also, for favorites, we either post a favorite and so
then you need to post items, so you would say add, and
when you need to get an item, you will say get.
And you can even get an item from a specific document in the collections.
If you want a specific document in the collection, you will say .doc.
And then you supply the id of the document here.
So that's how you can obtain a specific document.
Also delete favorites, and fetch favorites and so on.
Now for the favorites to be stored in my Firebase,
the favorites are stored as the user ID and the dish ID here.
Now firestore itself doesn't have any way of populating the dish
information into the dish ID.
So I'm just fetching all the dish information,
so this is every favorite is a pair, user and dish ID pair.
So I'm just fetching that into my favorites here.
But then that also means that I need to modify my favorites component so
it can use the dish ID and then index into the dishes that
are stored in my Redux store, and obtain the dish information.
Or the alternative would be to go to the server and then fetch the information.
But since I already have the data about the dishes in my Redux store,
because I have already done the fetch dishes to fetch all the information
about the dishes.
I'm just directly going into the dishes object in my Redux tore and
fetch this information.
So this also means that there are modifications to the main component.
In the main component, you would notice that when I do the favorite here for
the dish detail, I would simply have to compare the dish to that dishId.
So the dish here in my favorite is the dishId itself, so
I just need to do the comparison.
So there will be minor change to this line in the dishId.
And also you will notice that when I call the favorites,
in addition to supplying their favorites,
I also supply the dishes as one of the props for my favorites.
So that is another change that you will notice in the main component.
And similarly, in the favorite component,
you will notice that inside the favorite component down below here,
you will notice that, when I am rendering the favorite component.
Then, right here in this function here, const favorites,
what I am doing is I am going into the favorites dishes,
dishes is an array of all the dishIds here, so I map through that.
So look at each dishId, then from the dishes,
I filtered out that particular dish.
And then obtained the dishId, so
here you'll see me using the JavaScript array filter here.
It will filter out that specific dish information and
then render that particular dish.
So this is an additional work that I need to do in my favorite
component in order to render each of the dishes there.
So, such kind of minor modifications you will notice in a couple of the components,
specifically the dish detail, the favorite and the main component.
That's where some minor changes have been made in order to facilitate the React
application to be able to leverage the Firebase Server.
So this is a quick review of how
my React application has been modified to communicate with my Firebase Server.
Now, like with Angular, we had the Angularfire too, which was providing
us with a way of leveraging together with Firebase to communicate with the server.
React doesn't have any such counterpart, so I am directly using the Firebase
npm module which provides the basic base of accessing the Firebase Server.
And then leveraging the functions that it provides to communicate with my
Firebase Server.
Spend some time again going through this code to understand how
I have leveraged Firebase npm modules in order to communicate
with my Firebase Server that I have set up in the previous exercise.
With this, I have given you a quick overview of how you can set up your
React application to interact with Firebase back-end as a service, and
then be able to support various operations you have within your application.
Now, with this, I complete this particular exercise where I have
illustrated in this lesson about back-end as a service and
also demonstrated Firebase as an example of a back-end as a service.
[MUSIC]