1
00:00:00,000 --> 00:00:04,708
[MUSIC]

2
00:00:04,708 --> 00:00:08,762
In the previous exercise,
we had already configured our

3
00:00:08,762 --> 00:00:12,657
Firebase back-end as a service
with the new project.

4
00:00:12,657 --> 00:00:18,637
And also set up a lot of the data into our
database, and then set up our storage and

5
00:00:18,637 --> 00:00:25,410
configured our Firebase server to act as
the backend for our React application.

6
00:00:25,410 --> 00:00:30,670
In this exercise, we're going to look at a
modified version of our React application,

7
00:00:30,670 --> 00:00:36,080
which makes use of the Firebase
back-end as a service in order to

8
00:00:36,080 --> 00:00:42,200
obtain the data and also store
information for users on the server.

9
00:00:42,200 --> 00:00:46,430
Also, we will take advantage of
the authentication support that Firebase

10
00:00:46,430 --> 00:00:48,510
provides to authenticate users.

11
00:00:48,510 --> 00:00:55,434
Both using an email and password approach,
and also using a Google account.

12
00:00:57,091 --> 00:01:04,231
To get started on this exercise, go to
a convenient location on your computer,

13
00:01:04,231 --> 00:01:09,347
and then clone the given Git repository,
I have provided

14
00:01:09,347 --> 00:01:14,950
you with the Firebase version
of our React application.

15
00:01:14,950 --> 00:01:24,300
So type git clone
https://github.com/jmuppala/conFusion-Rea-

16
00:01:24,300 --> 00:01:27,470
ct-Firebase.git.

17
00:01:27,470 --> 00:01:30,450
And then clone the Git repository.

18
00:01:30,450 --> 00:01:37,610
And once the Git repository is
cloned to your computer, then move

19
00:01:37,610 --> 00:01:47,340
into the confusion-React-Firebase folder
that will get created at this point.

20
00:01:47,340 --> 00:01:52,230
And then you would notice that a bunch
of files are already installed there.

21
00:01:52,230 --> 00:01:56,820
Let's go ahead and
do a yarn install to install all the node

22
00:01:56,820 --> 00:02:02,130
modules on which this Angular
application is dependent upon.

23
00:02:02,130 --> 00:02:07,140
This version will also install
additional node modules called Firebase.

24
00:02:07,140 --> 00:02:12,850
I will explain a bit more about these
node modules later on in this exercise.

25
00:02:12,850 --> 00:02:18,420
Once the project installation is complete,
open the project in an editor.

26
00:02:18,420 --> 00:02:24,290
And then in the project,
go into the source > Firebase folder and

27
00:02:24,290 --> 00:02:26,700
then open config.js file.

28
00:02:26,700 --> 00:02:33,220
And in the config.js file, you will
see a set of Firebase configuration

29
00:02:33,220 --> 00:02:38,950
that you need to setup with your
own Firebase server configuration.

30
00:02:38,950 --> 00:02:43,970
As we have seen in the previous exercise,
we can obtain all this information when we

31
00:02:43,970 --> 00:02:49,940
click on this button here called
Add Firebase to your web app.

32
00:02:49,940 --> 00:02:53,035
And then copy this information and

33
00:02:53,035 --> 00:02:58,162
then paste this information
into your config.js file.

34
00:02:58,162 --> 00:03:03,786
To replace these with your specific
Firebase servers configuration for

35
00:03:03,786 --> 00:03:06,280
all this piece of information.

36
00:03:06,280 --> 00:03:10,844
And once that is completed,
then you can start up your React

37
00:03:10,844 --> 00:03:14,609
application by typing
yarn start at the prompt.

38
00:03:14,609 --> 00:03:18,331
Once your React application is compiled,
and so

39
00:03:18,331 --> 00:03:23,890
here you would see the home page,
the about page, as we see here.

40
00:03:23,890 --> 00:03:25,596
And the menu.

41
00:03:27,900 --> 00:03:31,570
And the contact page.

42
00:03:31,570 --> 00:03:33,360
Let's login ourselves,

43
00:03:33,360 --> 00:03:36,865
let me go back to the homepage and
then we'll login ourselves.

44
00:03:36,865 --> 00:03:38,800
So when you click the Login button,

45
00:03:38,800 --> 00:03:43,430
you will see the typical form here with
the email and the password information.

46
00:03:43,430 --> 00:03:47,010
You'll also see an initial button
here called Login with Google.

47
00:03:47,010 --> 00:03:49,740
So let me login with my Google account.

48
00:03:49,740 --> 00:03:54,885
So when you click on the Login with
Google, then it will open another browser

49
00:03:54,885 --> 00:04:01,095
window where you will be asked to
authorize for using your Google account.

50
00:04:01,095 --> 00:04:07,745
Then you will see, on the right-hand
corner, you will immediately see your name

51
00:04:07,745 --> 00:04:13,285
being displayed here, and with the login
button now turned into a logout button.

52
00:04:13,285 --> 00:04:19,340
So, at this point,
you should be able to see your favorites.

53
00:04:19,340 --> 00:04:22,240
And in this case,
since we don't have any favorites, so

54
00:04:22,240 --> 00:04:24,110
it'll be empty at this point.

55
00:04:24,110 --> 00:04:29,610
Let me go back to the menu and then add
a couple of items into my favorites.

56
00:04:29,610 --> 00:04:35,990
So I'll add this dish to my favorites,
so when I click on this dish,

57
00:04:35,990 --> 00:04:41,350
you'll immediately see the icon
turn into a filled heart.

58
00:04:41,350 --> 00:04:47,597
And let me also select one more dish and
add it into my favorites.

59
00:04:47,597 --> 00:04:52,526
Ad then now when you go to the my
favorites, you will see a couple

60
00:04:52,526 --> 00:04:57,187
of dishes added into your favorites,
as you would expect.

61
00:04:57,187 --> 00:05:02,893
And again, you can delete the dishes
by clicking on the delete

62
00:05:02,893 --> 00:05:09,270
cross to remove the item from your
list of favorites, as shown here.

63
00:05:09,270 --> 00:05:14,181
Now we can also add, as you realize,
we can go to any dish and

64
00:05:14,181 --> 00:05:17,140
then add comments about that dish.

65
00:05:17,140 --> 00:05:19,317
So let me add in a comment here.

66
00:05:25,868 --> 00:05:31,364
And the moment you submit the comment,
you will immediately see that

67
00:05:31,364 --> 00:05:38,562
your comment will be displayed here with
the author's name also included in here.

68
00:05:38,562 --> 00:05:41,572
And with that date as shown here.

69
00:05:41,572 --> 00:05:46,592
So, you can see that the user
submission of comments will

70
00:05:46,592 --> 00:05:49,592
be supported for any specific dish.

71
00:05:49,592 --> 00:05:54,294
So, this is how your
application works with that

72
00:05:54,294 --> 00:05:58,211
Firebase as the back-end as a service.

73
00:05:58,211 --> 00:06:03,071
Now, of course, you must be wondering,
how do we redesign our application to

74
00:06:03,071 --> 00:06:07,882
make use of Firebase instead
of using the standard

75
00:06:07,882 --> 00:06:12,110
Express MongoDB server that
we have built earlier?

76
00:06:13,220 --> 00:06:18,606
In order to configure your application
to communicate with the Firebase server,

77
00:06:18,606 --> 00:06:21,349
you need to install the Firebase module.

78
00:06:21,349 --> 00:06:25,964
The Firebase module, as you see here,
provides the tool and

79
00:06:25,964 --> 00:06:31,772
infrastructure that enables you to
communicate with the Firebase server.

80
00:06:31,772 --> 00:06:35,639
And to install this into your application,

81
00:06:35,639 --> 00:06:40,141
you type in the install
minus minus save firebase.

82
00:06:40,141 --> 00:06:41,893
Now how to make use of these?

83
00:06:41,893 --> 00:06:47,461
I will illustrate that by quickly
running you through the modified code

84
00:06:47,461 --> 00:06:53,492
where we make use of Firebase to modify
the application that we have developed

85
00:06:53,492 --> 00:06:59,185
earlier to make use of the Firebase
server as the back-end as a service.

86
00:06:59,185 --> 00:07:04,065
Let's take a quick tour through our
modified React application to understand

87
00:07:04,065 --> 00:07:08,825
how it has been reconfigured to
communicate with our Firebase server.

88
00:07:08,825 --> 00:07:11,933
We'll begin our journey
in package.json file.

89
00:07:11,933 --> 00:07:13,455
And in package.json file,

90
00:07:13,455 --> 00:07:18,820
you will notice that I have added in
the Firebase npm module into this.

91
00:07:18,820 --> 00:07:24,020
And so when you clone the Git
repository and do the yarn install,

92
00:07:24,020 --> 00:07:27,880
the Firebase module automatically
gets installed into your application.

93
00:07:27,880 --> 00:07:31,810
If you were configuring
a new React application to

94
00:07:31,810 --> 00:07:33,160
communicate with the server,

95
00:07:33,160 --> 00:07:38,850
then you need to explicitly install
the Firebase module into your application.

96
00:07:38,850 --> 00:07:44,880
Now after this, you will notice
changes in the Firebase folder.

97
00:07:44,880 --> 00:07:47,396
Here we have already seen the config file.

98
00:07:47,396 --> 00:07:51,410
The other file that you will
notice here is called firebase.js.

99
00:07:51,410 --> 00:07:55,227
Now this is where we configure our
application to communicate with

100
00:07:55,227 --> 00:07:56,530
the Firebase Server.

101
00:07:56,530 --> 00:07:58,744
So we're importing the config here.

102
00:07:58,744 --> 00:08:01,786
And then importing firebase from firebase.

103
00:08:01,786 --> 00:08:06,624
And then you initial the app here by
supplying the config to the firebase,

104
00:08:06,624 --> 00:08:10,838
so this is where you supply all
the configuration information so

105
00:08:10,838 --> 00:08:14,835
that your client can communicate
with the Firebase Server.

106
00:08:14,835 --> 00:08:19,738
In addition,
I am exporting a few of these exports from

107
00:08:19,738 --> 00:08:23,280
here called auth, fireauth and so on.

108
00:08:23,280 --> 00:08:27,915
These I will make use of in
the action creators in order

109
00:08:27,915 --> 00:08:31,524
to communicate with my Firebase Server.

110
00:08:33,371 --> 00:08:40,580
Now after this, the major modifications
will be in the ActionCreators file.

111
00:08:40,580 --> 00:08:46,222
Now I have not added in any new actions,
but instead all the communication

112
00:08:46,222 --> 00:08:51,866
with the server is now modified to
communicate with our Firebase Server.

113
00:08:51,866 --> 00:08:55,478
So instead of using the fetch,
as we did earlier,

114
00:08:55,478 --> 00:08:57,979
we are now going to use firestore.

115
00:08:57,979 --> 00:09:02,466
So as you can see,
I have imported the auth, firestore,

116
00:09:02,466 --> 00:09:07,237
fireauth, and firebasestore
from the firebase module that

117
00:09:07,237 --> 00:09:11,260
I have set up earlier
in the firebase folder.

118
00:09:11,260 --> 00:09:16,170
And then all these will enable me to
communicate with my Firebase Server.

119
00:09:16,170 --> 00:09:20,320
In order to fetch a collection
from my Firebase,

120
00:09:20,320 --> 00:09:25,050
we simply say firestore.collection, and
then supply the name of the collection.

121
00:09:25,050 --> 00:09:29,250
And then you can add to the collection
by saying, add, as you can see here,

122
00:09:29,250 --> 00:09:37,570
which takes the specific item that you're
adding into your collection there.

123
00:09:37,570 --> 00:09:40,110
So that's the document that we're
adding into our collection.

124
00:09:40,110 --> 00:09:43,500
So this is for the post comment,
as you can see here.

125
00:09:43,500 --> 00:09:48,270
And when you post that,
then you will supplied back with a docRef,

126
00:09:48,270 --> 00:09:51,260
which is the reference to the document,

127
00:09:51,260 --> 00:09:56,570
which then you can use to go and
fetch the document from your server.

128
00:09:56,570 --> 00:10:00,180
Now the way Firebase works
is that it'll supply

129
00:10:00,180 --> 00:10:04,700
the ID separately from the actual
contents of the documents.

130
00:10:04,700 --> 00:10:10,550
So Firebase keeps the ID and
the document data itself separately.

131
00:10:10,550 --> 00:10:15,450
So here I have to explicitly
combine the two together into

132
00:10:15,450 --> 00:10:18,260
a JavaScript object here,
called comment here.

133
00:10:18,260 --> 00:10:23,450
So as you see from the doc,
so you notice that when I

134
00:10:23,450 --> 00:10:29,710
insert an item into a collection,
it returns a docRef here.

135
00:10:29,710 --> 00:10:34,180
And from the docRef,
I can get the ID of the document.

136
00:10:34,180 --> 00:10:36,610
And so
what I am doing here is I am going and

137
00:10:36,610 --> 00:10:39,464
fetching the corresponding document here.

138
00:10:39,464 --> 00:10:44,305
And then once the document is fetched,
now, of course, the document should exist,

139
00:10:44,305 --> 00:10:49,015
so this should be always true, because
we have just inserted the document.

140
00:10:49,015 --> 00:10:53,032
But just for the sake of completeness,
I am doing an explicit check for that.

141
00:10:53,032 --> 00:10:57,576
And then after that the data
that is in the document is

142
00:10:57,576 --> 00:11:01,822
obtained by saying doc.data,
as you see here.

143
00:11:01,822 --> 00:11:05,658
And then the id of the document
is obtained by doc.id.

144
00:11:05,658 --> 00:11:07,073
So these two are separate.

145
00:11:07,073 --> 00:11:12,708
But within our React code,
we have always stored the id and

146
00:11:12,708 --> 00:11:20,530
the data together as a single JSON
document here, or JavaScript object here.

147
00:11:20,530 --> 00:11:23,340
So that's why I'm
combining the two together

148
00:11:23,340 --> 00:11:26,800
into a single JavaScript
object here by doing this.

149
00:11:26,800 --> 00:11:30,490
You will see me repeatedly doing this for,
say for example,

150
00:11:30,490 --> 00:11:35,510
for audacious promotions and so
on, also in the ActionCreators.

151
00:11:35,510 --> 00:11:41,640
And then after that I am adding in
the comment into my Redux store here,

152
00:11:41,640 --> 00:11:44,250
and the rest of the code remains as such.

153
00:11:44,250 --> 00:11:47,016
Similarly, for fetch dishes,

154
00:11:47,016 --> 00:11:52,980
you'll see how we're fetching
several dishes from the Firebase.

155
00:11:52,980 --> 00:11:58,330
So we're seeing firestore.collection
dishes get and obtain the dishes.

156
00:11:58,330 --> 00:12:02,520
Now when you obtain that,
then it will give me a snapshot value,

157
00:12:02,520 --> 00:12:06,680
which is the snapshot of the current
state of this collection, and from that,

158
00:12:06,680 --> 00:12:10,690
I have to go in and
retrieve each and every dish.

159
00:12:10,690 --> 00:12:15,400
And then so I am reconstructing
my array of dishes here.

160
00:12:15,400 --> 00:12:18,990
Now notice that, as I said,
the id and the data are separate, so

161
00:12:18,990 --> 00:12:23,495
I need to combine them together, because
that's the way I use the data in my React

162
00:12:23,495 --> 00:12:27,660
application, so
I am pushing that into the dishes array.

163
00:12:27,660 --> 00:12:32,980
And then finally returning the dishes
which will then be inserted into my

164
00:12:32,980 --> 00:12:34,380
Redux store here.

165
00:12:34,380 --> 00:12:39,642
So this kind of changes have
been made in the ActionCreators.

166
00:12:39,642 --> 00:12:45,843
Now the login and logout process
will be handled down below here.

167
00:12:45,843 --> 00:12:51,445
So for the login, the auth that we
have imported from the firebase,

168
00:12:51,445 --> 00:12:56,372
the auth is the one that allows
me to do the login and logout.

169
00:12:56,372 --> 00:12:59,363
So if you are logging in using email and
password,

170
00:12:59,363 --> 00:13:03,940
it provides with this method
called signInWithEmailAndPassword.

171
00:13:03,940 --> 00:13:10,250
And then you supply the email and
password as the two parameters here.

172
00:13:10,250 --> 00:13:14,010
And then that will enable you to login.

173
00:13:14,010 --> 00:13:20,985
And when you login, the auth provides this
object called the currentUser on the auth.

174
00:13:20,985 --> 00:13:26,455
So you obtain the user's information
by saying auth.currentUser here.

175
00:13:26,455 --> 00:13:31,235
And also I am storing the user
information into my database.

176
00:13:31,235 --> 00:13:33,879
Now I'm not explicitly
tracking any token and

177
00:13:33,879 --> 00:13:37,945
things like that because that is
automatically tracked by auth for me,

178
00:13:37,945 --> 00:13:40,606
which is provided by
the Firebase npm module.

179
00:13:40,606 --> 00:13:43,723
So I am just leveraging that
to track the current use.

180
00:13:43,723 --> 00:13:49,078
If the current user is null,
then I know that my client

181
00:13:49,078 --> 00:13:53,840
doesn't have any user
logged in to the server.

182
00:13:53,840 --> 00:13:59,510
And similarly, to log out the user
I simply say auth.signOut.

183
00:13:59,510 --> 00:14:04,370
Now again, the documentation of
how to make use of the Filebase

184
00:14:04,370 --> 00:14:09,060
npm module is all available in
the Firebase documentation.

185
00:14:09,060 --> 00:14:14,238
So you can easily look that up
to understand how to leverage

186
00:14:14,238 --> 00:14:18,993
Firebase to make use of all
these different functions

187
00:14:18,993 --> 00:14:23,443
that are available from
the Firebase npm module.

188
00:14:23,443 --> 00:14:27,999
Also, for favorites,
we either post a favorite and so

189
00:14:27,999 --> 00:14:32,454
then you need to post items,
so you would say add, and

190
00:14:32,454 --> 00:14:36,333
when you need to get an item,
you will say get.

191
00:14:36,333 --> 00:14:41,455
And you can even get an item from
a specific document in the collections.

192
00:14:41,455 --> 00:14:45,245
If you want a specific document in
the collection, you will say .doc.

193
00:14:45,245 --> 00:14:49,015
And then you supply the id
of the document here.

194
00:14:49,015 --> 00:14:51,585
So that's how you can
obtain a specific document.

195
00:14:53,465 --> 00:14:56,265
Also delete favorites, and
fetch favorites and so on.

196
00:14:56,265 --> 00:15:01,640
Now for
the favorites to be stored in my Firebase,

197
00:15:01,640 --> 00:15:09,100
the favorites are stored as
the user ID and the dish ID here.

198
00:15:09,100 --> 00:15:13,680
Now firestore itself doesn't have
any way of populating the dish

199
00:15:13,680 --> 00:15:15,800
information into the dish ID.

200
00:15:15,800 --> 00:15:21,214
So I'm just fetching all
the dish information,

201
00:15:21,214 --> 00:15:27,694
so this is every favorite is a pair,
user and dish ID pair.

202
00:15:27,694 --> 00:15:30,431
So I'm just fetching that
into my favorites here.

203
00:15:30,431 --> 00:15:35,859
But then that also means that I need
to modify my favorites component so

204
00:15:35,859 --> 00:15:40,091
it can use the dish ID and
then index into the dishes that

205
00:15:40,091 --> 00:15:45,560
are stored in my Redux store,
and obtain the dish information.

206
00:15:45,560 --> 00:15:49,194
Or the alternative would be to go to
the server and then fetch the information.

207
00:15:49,194 --> 00:15:53,560
But since I already have the data
about the dishes in my Redux store,

208
00:15:53,560 --> 00:15:58,234
because I have already done the fetch
dishes to fetch all the information

209
00:15:58,234 --> 00:15:59,474
about the dishes.

210
00:15:59,474 --> 00:16:05,492
I'm just directly going into
the dishes object in my Redux tore and

211
00:16:05,492 --> 00:16:08,190
fetch this information.

212
00:16:08,190 --> 00:16:12,250
So this also means that there
are modifications to the main component.

213
00:16:12,250 --> 00:16:18,894
In the main component, you would notice
that when I do the favorite here for

214
00:16:18,894 --> 00:16:25,343
the dish detail, I would simply have
to compare the dish to that dishId.

215
00:16:25,343 --> 00:16:29,188
So the dish here in my favorite
is the dishId itself, so

216
00:16:29,188 --> 00:16:31,540
I just need to do the comparison.

217
00:16:31,540 --> 00:16:35,334
So there will be minor change
to this line in the dishId.

218
00:16:35,334 --> 00:16:39,503
And also you will notice that
when I call the favorites,

219
00:16:39,503 --> 00:16:42,786
in addition to supplying their favorites,

220
00:16:42,786 --> 00:16:47,322
I also supply the dishes as one
of the props for my favorites.

221
00:16:47,322 --> 00:16:51,711
So that is another change that you
will notice in the main component.

222
00:16:51,711 --> 00:16:54,990
And similarly, in the favorite component,

223
00:16:54,990 --> 00:16:59,996
you will notice that inside
the favorite component down below here,

224
00:16:59,996 --> 00:17:04,933
you will notice that, when I am
rendering the favorite component.

225
00:17:04,933 --> 00:17:09,761
Then, right here in this function here,
const favorites,

226
00:17:09,761 --> 00:17:14,113
what I am doing is I am going
into the favorites dishes,

227
00:17:14,113 --> 00:17:19,338
dishes is an array of all the dishIds
here, so I map through that.

228
00:17:19,338 --> 00:17:23,591
So look at each dishId,
then from the dishes,

229
00:17:23,591 --> 00:17:27,545
I filtered out that particular dish.

230
00:17:27,545 --> 00:17:29,484
And then obtained the dishId, so

231
00:17:29,484 --> 00:17:33,023
here you'll see me using
the JavaScript array filter here.

232
00:17:33,023 --> 00:17:36,419
It will filter out that
specific dish information and

233
00:17:36,419 --> 00:17:38,687
then render that particular dish.

234
00:17:38,687 --> 00:17:43,415
So this is an additional work
that I need to do in my favorite

235
00:17:43,415 --> 00:17:48,840
component in order to render
each of the dishes there.

236
00:17:48,840 --> 00:17:55,900
So, such kind of minor modifications you
will notice in a couple of the components,

237
00:17:55,900 --> 00:17:59,840
specifically the dish detail,
the favorite and the main component.

238
00:17:59,840 --> 00:18:05,410
That's where some minor changes have been
made in order to facilitate the React

239
00:18:05,410 --> 00:18:09,980
application to be able to
leverage the Firebase Server.

240
00:18:09,980 --> 00:18:12,790
So this is a quick review of how

241
00:18:12,790 --> 00:18:17,870
my React application has been modified
to communicate with my Firebase Server.

242
00:18:17,870 --> 00:18:23,257
Now, like with Angular, we had
the Angularfire too, which was providing

243
00:18:23,257 --> 00:18:29,680
us with a way of leveraging together with
Firebase to communicate with the server.

244
00:18:29,680 --> 00:18:35,659
React doesn't have any such counterpart,
so I am directly using the Firebase

245
00:18:35,659 --> 00:18:41,472
npm module which provides the basic
base of accessing the Firebase Server.

246
00:18:41,472 --> 00:18:46,165
And then leveraging the functions that
it provides to communicate with my

247
00:18:46,165 --> 00:18:47,382
Firebase Server.

248
00:18:47,382 --> 00:18:52,506
Spend some time again going through
this code to understand how

249
00:18:52,506 --> 00:18:57,534
I have leveraged Firebase npm
modules in order to communicate

250
00:18:57,534 --> 00:19:03,090
with my Firebase Server that I have
set up in the previous exercise.

251
00:19:03,090 --> 00:19:08,293
With this, I have given you a quick
overview of how you can set up your

252
00:19:08,293 --> 00:19:13,957
React application to interact with
Firebase back-end as a service, and

253
00:19:13,957 --> 00:19:20,012
then be able to support various operations
you have within your application.

254
00:19:20,012 --> 00:19:24,632
Now, with this, I complete this
particular exercise where I have

255
00:19:24,632 --> 00:19:28,758
illustrated in this lesson
about back-end as a service and

256
00:19:28,758 --> 00:19:33,645
also demonstrated Firebase as
an example of a back-end as a service.

257
00:19:33,645 --> 00:19:36,995
[MUSIC]