1
00:00:03,900 --> 00:00:07,540
Let's go fishing in the bass market.

2
00:00:07,540 --> 00:00:10,520
We'll start out with Firebase,

3
00:00:10,520 --> 00:00:13,560
the premium offering from Google.

4
00:00:13,560 --> 00:00:16,190
Let's understand a little bit about Firebase,

5
00:00:16,190 --> 00:00:19,375
configure a Firebase server,

6
00:00:19,375 --> 00:00:22,340
and then we will look at the angular application,

7
00:00:22,340 --> 00:00:24,790
which I'm going to retrofit based upon

8
00:00:24,790 --> 00:00:29,340
the previous angular application that you have seen in the earlier lecture.

9
00:00:29,340 --> 00:00:34,890
We will modify it to make use of Firebase as the backend.

10
00:00:34,890 --> 00:00:38,890
So, as we would see at the end of this lesson,

11
00:00:38,890 --> 00:00:41,440
this exercise and the following exercise,

12
00:00:41,440 --> 00:00:46,600
we can easily take an angular application and retrofit it to make use of

13
00:00:46,600 --> 00:00:52,245
Firebase as the backend as a service provider.

14
00:00:52,245 --> 00:00:54,612
To get started on the journey,

15
00:00:54,612 --> 00:01:00,725
let's go to firebase.google.com to understand a little bit about Firebase.

16
00:01:00,725 --> 00:01:04,635
A topic sort of making a whole presentation about Firebase,

17
00:01:04,635 --> 00:01:06,550
I will quickly run you through what has been

18
00:01:06,550 --> 00:01:09,370
explained on the Firebase site itself because they give you

19
00:01:09,370 --> 00:01:15,125
sufficient details about how Firebase itself supports various features.

20
00:01:15,125 --> 00:01:19,810
So let's run through this website to understand how Firebase works.

21
00:01:19,810 --> 00:01:22,480
So if you go to the website, as you can see,

22
00:01:22,480 --> 00:01:27,955
it says Firebase helps you build better mobile apps and grow your business.

23
00:01:27,955 --> 00:01:30,750
And then, as you see here,

24
00:01:30,750 --> 00:01:36,280
it explains you the details about how it allows you to build your apps

25
00:01:36,280 --> 00:01:41,641
fast without having to manage the backend infrastructure for your application,

26
00:01:41,641 --> 00:01:46,875
and a single console that brings a bunch of products that work together.

27
00:01:46,875 --> 00:01:56,305
So these are all Google-offered products that work together to meet your backend needs.

28
00:01:56,305 --> 00:02:00,010
And also here, you can leverage

29
00:02:00,010 --> 00:02:03,585
many of the complementary products that are available from Google.

30
00:02:03,585 --> 00:02:06,055
So in particular, in this exercise,

31
00:02:06,055 --> 00:02:09,620
we will be leveraging the Cloud Firestore,

32
00:02:09,620 --> 00:02:12,775
the new provision from Google.

33
00:02:12,775 --> 00:02:15,740
We'll look at more details about that later on.

34
00:02:15,740 --> 00:02:18,520
We look at how we can use authentication support

35
00:02:18,520 --> 00:02:22,030
that is provided by Firebase for authenticating users.

36
00:02:22,030 --> 00:02:27,880
We'll look at cloud storage for storing our image files and serving them up.

37
00:02:27,880 --> 00:02:34,650
And then we'll also look at how we can leverage all these together with

38
00:02:34,650 --> 00:02:41,170
the Firebase-related node module that we can incorporate together with

39
00:02:41,170 --> 00:02:46,270
angularfire2 node module into our angular application so that

40
00:02:46,270 --> 00:02:51,910
we can communicate with our Firebase backend as a service.

41
00:02:51,910 --> 00:02:55,300
Also, looking more detail,

42
00:02:55,300 --> 00:02:58,390
we see how the Firebase

43
00:02:58,390 --> 00:03:04,525
dash itself provides various features like allowing you to roll out

44
00:03:04,525 --> 00:03:11,200
different user features for different onboarding of your application and

45
00:03:11,200 --> 00:03:17,590
how easy it is to integrate your backend with either an iOS,

46
00:03:17,590 --> 00:03:20,110
Android or the web application.

47
00:03:20,110 --> 00:03:26,305
In particular, we will look at the web application and using JavaScript and

48
00:03:26,305 --> 00:03:29,290
also the use of how we will

49
00:03:29,290 --> 00:03:33,610
incorporate this into our angular application a little bit later.

50
00:03:33,610 --> 00:03:39,900
And also, Firebase provides a real-time database,

51
00:03:39,900 --> 00:03:42,850
both the original real-time database,

52
00:03:42,850 --> 00:03:45,040
as well as the new Cloud Firestone,

53
00:03:45,040 --> 00:03:50,905
allow you to automatically synchronize the data between various user devices.

54
00:03:50,905 --> 00:03:52,900
So any changes made on

55
00:03:52,900 --> 00:03:59,625
the server side will be automatically reflected to all the clients,

56
00:03:59,625 --> 00:04:06,996
and, of course, you can read more details about Firebase on this website.

57
00:04:06,996 --> 00:04:13,885
And it's very easy to get started because the basic offering is free for users.

58
00:04:13,885 --> 00:04:17,854
So let's get started using Firebase.

59
00:04:17,854 --> 00:04:25,085
We'll set up our Firebase account and then access and set up our backend as a server,

60
00:04:25,085 --> 00:04:29,025
which we will then leverage from our angular application.

61
00:04:29,025 --> 00:04:31,995
So this is a quick tour of Firebase,

62
00:04:31,995 --> 00:04:34,880
but instead of just looking at these,

63
00:04:34,880 --> 00:04:38,665
let's go in and actually get our hands dirty,

64
00:04:38,665 --> 00:04:41,970
configuring a Firebase base

65
00:04:41,970 --> 00:04:45,900
back into the service and then using it on our angular application.

66
00:04:45,900 --> 00:04:47,593
So to get started,

67
00:04:47,593 --> 00:04:49,910
as you will see to the right edge here,

68
00:04:49,910 --> 00:04:51,510
it says go to console.

69
00:04:51,510 --> 00:04:56,705
Obviously, you should be having a Google account in order to be able to use Firebase.

70
00:04:56,705 --> 00:04:58,264
That goes without saying,

71
00:04:58,264 --> 00:05:00,380
and you should be logged into your Google account.

72
00:05:00,380 --> 00:05:01,640
So, as you can see,

73
00:05:01,640 --> 00:05:03,225
I'm already in my Google account.

74
00:05:03,225 --> 00:05:05,080
So that'll give me access to my console.

75
00:05:05,080 --> 00:05:06,857
If you're not logged in,

76
00:05:06,857 --> 00:05:09,871
then it is better for you to log in to your Google account.

77
00:05:09,871 --> 00:05:12,150
So when you go to the console,

78
00:05:12,150 --> 00:05:18,620
this will take you to the Firebase services console here,

79
00:05:18,620 --> 00:05:22,335
where you can set up projects.

80
00:05:22,335 --> 00:05:23,825
So when you go to the console,

81
00:05:23,825 --> 00:05:26,460
as you can see, it says add a project.

82
00:05:26,460 --> 00:05:27,605
And, as you can see,

83
00:05:27,605 --> 00:05:30,675
I have already tried out my hand at setting up

84
00:05:30,675 --> 00:05:35,750
another Firebase project before I explained it to you.

85
00:05:35,750 --> 00:05:38,190
So let's set up a project here.

86
00:05:38,190 --> 00:05:41,065
So we'll click on the add project,

87
00:05:41,065 --> 00:05:46,865
and that should bring up a nice little window,

88
00:05:46,865 --> 00:05:48,765
where you can type in information.

89
00:05:48,765 --> 00:05:53,750
So we'll call this project as conFusionServer,

90
00:05:53,750 --> 00:06:00,793
as you would expect and configure it to wherever you are at the moment.

91
00:06:00,793 --> 00:06:06,615
So I am going to configure it to use

92
00:06:06,615 --> 00:06:15,194
Hong Kong and create a project.

93
00:06:15,194 --> 00:06:17,850
And once your project is created,

94
00:06:17,850 --> 00:06:21,575
this is what you will be presented with by Firebase.

95
00:06:21,575 --> 00:06:28,980
And, in here, you would see that the first thing that you would want to grab

96
00:06:28,980 --> 00:06:32,430
is information about your Firebase configuration so

97
00:06:32,430 --> 00:06:36,670
that you can use it within your angular application.

98
00:06:36,670 --> 00:06:37,950
So to do that,

99
00:06:37,950 --> 00:06:40,985
click on this button here.

100
00:06:40,985 --> 00:06:44,085
So it says, add Firebase to your web app.

101
00:06:44,085 --> 00:06:47,730
And this will provide you with a bunch of information that

102
00:06:47,730 --> 00:06:51,750
you should copy and save because I will be

103
00:06:51,750 --> 00:06:54,585
making use of this information to configure

104
00:06:54,585 --> 00:07:00,045
my angular application a little bit later in the next exercise.

105
00:07:00,045 --> 00:07:04,440
So save this information at a convenient location so that you

106
00:07:04,440 --> 00:07:10,350
can make use of this information when you set up your client's site.

107
00:07:10,350 --> 00:07:14,310
The next step, I will set up a couple of accounts here.

108
00:07:14,310 --> 00:07:17,235
So let me click on the authentication here.

109
00:07:17,235 --> 00:07:20,655
And when the authentication is brought up,

110
00:07:20,655 --> 00:07:27,060
we'll set up the sign in methods that we will use for our Firebase server,

111
00:07:27,060 --> 00:07:29,865
and in my case,

112
00:07:29,865 --> 00:07:38,520
I will use the email password as one of the options.

113
00:07:38,520 --> 00:07:41,080
So we will enable the email password.

114
00:07:41,080 --> 00:07:45,095
I will also enable the Google sign-in.

115
00:07:45,095 --> 00:07:46,560
So these two are enabled.

116
00:07:46,560 --> 00:07:55,000
If you want to, you can enable other ways of authenticating the users.

117
00:07:55,000 --> 00:07:57,705
Next, going to the users, now,

118
00:07:57,705 --> 00:08:02,895
if you log into this application with your Google account,

119
00:08:02,895 --> 00:08:07,812
that user will be automatically added into your system.

120
00:08:07,812 --> 00:08:13,610
But right now, I'm going to set up one user with an email and password.

121
00:08:13,610 --> 00:08:21,195
So I will set up an admin@confusion.net,

122
00:08:21,195 --> 00:08:31,105
and I will set up a password here and add in the user.

123
00:08:31,105 --> 00:08:34,385
So this will be one user,

124
00:08:34,385 --> 00:08:38,630
who can sign in with the email-password combination.

125
00:08:38,630 --> 00:08:45,285
We can also sign up to access this using our Google account.

126
00:08:45,285 --> 00:08:47,690
So my angular application,

127
00:08:47,690 --> 00:08:51,770
I will set up to use both the email password way of signing in

128
00:08:51,770 --> 00:08:56,215
and as well as by Google account-based sign in.

129
00:08:56,215 --> 00:09:00,700
After that, we will go into storage.

130
00:09:00,700 --> 00:09:03,620
So we will set up storage next.

131
00:09:03,620 --> 00:09:09,650
So the storage is where you can set up a way

132
00:09:09,650 --> 00:09:18,035
of uploading files to your server and then making them available for use.

133
00:09:18,035 --> 00:09:22,084
So this storage, I'm going to set up my storage to store

134
00:09:22,084 --> 00:09:28,073
the images that we will use and save up from our server site.

135
00:09:28,073 --> 00:09:30,025
So when you set up storage,

136
00:09:30,025 --> 00:09:33,590
it will come up with the set of security rules,

137
00:09:33,590 --> 00:09:38,880
which specify what kind of operations will be allowed by the user.

138
00:09:38,880 --> 00:09:40,400
So it says allow read,

139
00:09:40,400 --> 00:09:44,355
write: if request.auth not equal to null,

140
00:09:44,355 --> 00:09:47,650
so which means that only users that have logged

141
00:09:47,650 --> 00:09:52,377
into this server will be able to read and write.

142
00:09:52,377 --> 00:09:59,270
Now, I'm going to change this to allow reads for anybody,

143
00:09:59,270 --> 00:10:06,035
but writes will be allowed only by authenticated users.

144
00:10:06,035 --> 00:10:07,675
So we'll say, got it,

145
00:10:07,675 --> 00:10:12,348
and then I'm going to get started.

146
00:10:12,348 --> 00:10:13,845
So, in the rules,

147
00:10:13,845 --> 00:10:18,705
I will go into the rules here and then modify the rules to

148
00:10:18,705 --> 00:10:24,845
allow users to be able to read from the server.

149
00:10:24,845 --> 00:10:29,590
Now, we can set it up at specific folder level,

150
00:10:29,590 --> 00:10:31,620
but since this is a simple application,

151
00:10:31,620 --> 00:10:36,590
I'm going to set it up at the entire storage level.

152
00:10:36,590 --> 00:10:39,325
So, here, I will say, allow read,

153
00:10:39,325 --> 00:10:43,403
and then I'm going to modify this rule to say allow read,

154
00:10:43,403 --> 00:10:48,670
and I'll say, allow write if request.

155
00:10:48,670 --> 00:10:50,700
So, as you can see,

156
00:10:50,700 --> 00:10:53,995
users will be allowed to read from the storage.

157
00:10:53,995 --> 00:10:57,165
Any user will be allowed to read, even without authentication,

158
00:10:57,165 --> 00:11:02,750
but writing is restricted only to users that log into the system.

159
00:11:02,750 --> 00:11:06,750
So this is simple modification to the access rules,

160
00:11:06,750 --> 00:11:08,180
of the security rules.

161
00:11:08,180 --> 00:11:10,410
You can be more elaborate on this,

162
00:11:10,410 --> 00:11:11,830
but in the simple example,

163
00:11:11,830 --> 00:11:13,170
I'm going to stay with this.

164
00:11:13,170 --> 00:11:18,451
And then we'll publish these rules to our server.

165
00:11:18,451 --> 00:11:23,600
Then going back to files, in the files,

166
00:11:23,600 --> 00:11:30,895
I'm going to create a new folder here named images.

167
00:11:30,895 --> 00:11:33,760
Now, as you see,

168
00:11:33,760 --> 00:11:37,450
the rules can be set up for this specific images folder,

169
00:11:37,450 --> 00:11:42,430
so it'll allow users to only read from these images folder and then only

170
00:11:42,430 --> 00:11:47,830
authorized users to upload to this images folder if you so choose to.

171
00:11:47,830 --> 00:11:50,150
But, right now, I'm going to leave it as such,

172
00:11:50,150 --> 00:11:53,780
as the generic set of rule that I have configured there.

173
00:11:53,780 --> 00:11:56,705
Now, going to the images folder.

174
00:11:56,705 --> 00:12:03,005
I'm going to upload a bunch of images to this folder here.

175
00:12:03,005 --> 00:12:10,445
So let me grab a bunch of images that I have for my application.

176
00:12:10,445 --> 00:12:19,915
And so, earlier, I had used these images in my other applications.

177
00:12:19,915 --> 00:12:29,855
I'm going to select all these images and then upload them to the Google storage here.

178
00:12:29,855 --> 00:12:34,680
These images are available in

179
00:12:34,680 --> 00:12:39,615
your images.zip file that I have provided you in the previous exercise,

180
00:12:39,615 --> 00:12:41,163
in the previous lesson.

181
00:12:41,163 --> 00:12:43,395
So just download the images.zip file,

182
00:12:43,395 --> 00:12:44,910
or if you have already downloaded,

183
00:12:44,910 --> 00:12:48,720
you should have these images with you so you can upload them to the file.

184
00:12:48,720 --> 00:12:50,303
When you upload these images,

185
00:12:50,303 --> 00:12:56,215
you can click on any one of those images and also notice that down below here,

186
00:12:56,215 --> 00:12:59,135
it gives you this file location.

187
00:12:59,135 --> 00:13:05,755
You need to copy this URL for this file location because when we configure our database,

188
00:13:05,755 --> 00:13:10,785
in the images field of our JSON data,

189
00:13:10,785 --> 00:13:17,525
we're going to configure each one of them with this URL for the corresponding image.

190
00:13:17,525 --> 00:13:21,315
Next, we will move on to that database.

191
00:13:21,315 --> 00:13:25,975
In the database, you're given two choices.

192
00:13:25,975 --> 00:13:28,970
You can go with the older real-time database,

193
00:13:28,970 --> 00:13:31,375
which is supported by Google,

194
00:13:31,375 --> 00:13:37,065
and indeed most current applications that use Firebase will use the real-time database.

195
00:13:37,065 --> 00:13:38,820
But then, in this course,

196
00:13:38,820 --> 00:13:43,420
we will explore the newer Firestore beta.

197
00:13:43,420 --> 00:13:50,450
The Firestore beta provides a lot more comprehensive real-time database.

198
00:13:50,450 --> 00:13:55,110
So this is the next generation real-time database and provides

199
00:13:55,110 --> 00:13:59,310
a lot more advanced ways of doing querying and

200
00:13:59,310 --> 00:14:04,320
automatically scaling their storage for us.

201
00:14:04,320 --> 00:14:07,260
So we'll go with the Firestore beta.

202
00:14:07,260 --> 00:14:09,870
Now, one of the reasons again for me to start with

203
00:14:09,870 --> 00:14:14,340
the Firestore beta is simply because it

204
00:14:14,340 --> 00:14:23,250
allows us to store the information in the form of documents and collections.

205
00:14:23,250 --> 00:14:25,770
Now, from our experience with MongoDB,

206
00:14:25,770 --> 00:14:28,988
we already know how documents and collections work,

207
00:14:28,988 --> 00:14:33,630
and so that's why the Firestore beta is a much better choice for us,

208
00:14:33,630 --> 00:14:37,275
since we already know how that is configured.

209
00:14:37,275 --> 00:14:39,900
If you want to default to the standard real-time database,

210
00:14:39,900 --> 00:14:41,280
you can choose to do so.

211
00:14:41,280 --> 00:14:44,040
But the real-time database stores all your data in

212
00:14:44,040 --> 00:14:51,272
one large tree and has a limited amount of querying capability.

213
00:14:51,272 --> 00:14:56,315
So for the security rules for my Firestore,

214
00:14:56,315 --> 00:14:59,970
I will go with the test mode,

215
00:14:59,970 --> 00:15:05,955
where I will just leave it open for people to read and write at the moment.

216
00:15:05,955 --> 00:15:11,790
And this is okay because we're just testing the database, but normally,

217
00:15:11,790 --> 00:15:20,245
I would suggest to go with a more configured way of working with your database here.

218
00:15:20,245 --> 00:15:23,171
So we'll start with a test mode to start with.

219
00:15:23,171 --> 00:15:27,165
And so we'll set up the security rules like this to begin with.

220
00:15:27,165 --> 00:15:31,280
You can go with more elaborate security tool set-up.

221
00:15:31,280 --> 00:15:34,710
So as you saw with the storage,

222
00:15:34,710 --> 00:15:37,255
we had set up such that reads are allowed by

223
00:15:37,255 --> 00:15:40,620
anybody but writes are allowed only by authorized users.

224
00:15:40,620 --> 00:15:44,790
We can set up a similar functionality here also.

225
00:15:44,790 --> 00:15:47,355
So this is the confusionserver.

226
00:15:47,355 --> 00:15:49,590
And so, in the rules,

227
00:15:49,590 --> 00:15:56,160
let me go to that storage and then just copy the rule from the storage here,

228
00:15:56,160 --> 00:16:01,020
and we will set up the same kind of restriction here.

229
00:16:01,020 --> 00:16:04,725
So we will allow anybody to read but only

230
00:16:04,725 --> 00:16:11,420
authorized users to write to the database.

231
00:16:11,420 --> 00:16:15,075
So going back to the database, in the rules,

232
00:16:15,075 --> 00:16:25,688
we can say allow read: and then the second line I'm going to replace that,

233
00:16:25,688 --> 00:16:29,620
saying allow write if request.auth is not equal to null.

234
00:16:29,620 --> 00:16:32,535
So only people that are logged in,

235
00:16:32,535 --> 00:16:36,540
they'll be able to make modifications to the data so that we,

236
00:16:36,540 --> 00:16:41,441
at least, I have some protection on my data.

237
00:16:41,441 --> 00:16:48,900
Now, in here, we now can graphically add in the data to our application.

238
00:16:48,900 --> 00:16:54,791
And this, I find the quickest way of adding in the data.

239
00:16:54,791 --> 00:16:57,270
If you set up the client site,

240
00:16:57,270 --> 00:17:00,380
you can post data from the client site also, but,

241
00:17:00,380 --> 00:17:04,780
right now, we'll start up by adding in three collections here.

242
00:17:04,780 --> 00:17:10,535
So the first collection that I will add up is dishes.

243
00:17:10,535 --> 00:17:14,800
And we can add documents to the dishes,

244
00:17:14,800 --> 00:17:17,400
so we can add our first document.

245
00:17:17,400 --> 00:17:19,405
So to add a document to the dishes,

246
00:17:19,405 --> 00:17:23,005
remember that I've given you the db.JSON file there.

247
00:17:23,005 --> 00:17:27,085
So you can go with the db.JSON file and then add in,

248
00:17:27,085 --> 00:17:31,665
step by step, each of the dishes that we have.

249
00:17:31,665 --> 00:17:36,350
So, here, I'm going to configure the first dish here.

250
00:17:36,350 --> 00:17:44,895
So for the dish, we can allow Firebase to automatically assign the ID for our document.

251
00:17:44,895 --> 00:17:48,010
So I'll let that automatically assign.

252
00:17:48,010 --> 00:17:52,660
So we'll add in the first dish here.

253
00:17:52,660 --> 00:18:01,200
The field's name and the first dish here.

254
00:18:01,200 --> 00:18:03,633
So we have to painstakingly add,

255
00:18:03,633 --> 00:18:07,099
bit by bit, each of the dishes here.

256
00:18:07,099 --> 00:18:09,205
So we'll say name,

257
00:18:09,205 --> 00:18:16,327
and then we'll say category, which is mains.

258
00:18:16,327 --> 00:18:21,935
And then we will add in image,

259
00:18:21,935 --> 00:18:26,450
which I'm going to come back and add in a little bit later because I need to copy

260
00:18:26,450 --> 00:18:32,250
the image URL from my storage and use it here.

261
00:18:32,250 --> 00:18:48,138
Then we will have it labeled as Hot, price.

262
00:18:48,138 --> 00:18:51,505
So we have category,

263
00:18:51,505 --> 00:18:55,240
name, category, image, label, price,

264
00:18:55,240 --> 00:19:02,310
description, which I'm going to copy and paste from my db.JSON file.

265
00:19:02,310 --> 00:19:07,325
And, finally, the featured flag,

266
00:19:07,325 --> 00:19:13,587
which I will set as a boolean and set that to true in this case.

267
00:19:13,587 --> 00:19:20,135
So this will be our first document that we will add into our database here.

268
00:19:20,135 --> 00:19:22,705
So you would immediately notice that,

269
00:19:22,705 --> 00:19:26,570
in our database, the first document gets added.

270
00:19:26,570 --> 00:19:29,815
So we'll see dishes and the first document,

271
00:19:29,815 --> 00:19:35,900
and you can see the information about this document configured here.

272
00:19:35,900 --> 00:19:38,695
So we have category, description,

273
00:19:38,695 --> 00:19:44,355
featured, image, label, name and price.

274
00:19:44,355 --> 00:19:49,360
We will also add one more field here called createdAt,

275
00:19:49,360 --> 00:19:54,175
and this will be a timestamp.

276
00:19:54,175 --> 00:20:00,870
And the timestamp would be today's timestamp and then I leave there time value as such.

277
00:20:00,870 --> 00:20:04,772
So we can add timestamps also to this, and, also,

278
00:20:04,772 --> 00:20:14,855
we'll add one more timestamp as updatedAt and with the timestamp here.

279
00:20:14,855 --> 00:20:17,145
So we have two more timestamps here.

280
00:20:17,145 --> 00:20:18,730
Now, for the image,

281
00:20:18,730 --> 00:20:21,375
we will go to the storage here.

282
00:20:21,375 --> 00:20:25,230
And from our storage, in the images,

283
00:20:25,230 --> 00:20:31,070
we will select the image file here

284
00:20:31,070 --> 00:20:36,790
and then go to the file location and then copy this URL here.

285
00:20:36,790 --> 00:20:38,795
So if we just click on this,

286
00:20:38,795 --> 00:20:40,880
that URL will be copied.

287
00:20:40,880 --> 00:20:42,050
So we'll come back to

288
00:20:42,050 --> 00:20:49,715
that database and then

289
00:20:49,715 --> 00:20:53,975
edit the image field and then add in that URL there.

290
00:20:53,975 --> 00:20:58,085
Like that, you can go ahead and add the remaining dishes,

291
00:20:58,085 --> 00:21:02,120
the promotions and also the leaders.

292
00:21:02,120 --> 00:21:04,280
So once you complete all the steps,

293
00:21:04,280 --> 00:21:08,700
which will take quite some time for you to do step by step.

294
00:21:08,700 --> 00:21:13,620
So I let you finish adding all this information to your Firebase.

295
00:21:13,620 --> 00:21:18,045
So after you complete entering all the data into your database,

296
00:21:18,045 --> 00:21:21,675
your dishes should have four dishes here.

297
00:21:21,675 --> 00:21:26,660
Again, make sure that you initialize

298
00:21:26,660 --> 00:21:33,166
the image field with the URL from that storage for that particular image.

299
00:21:33,166 --> 00:21:40,565
So you'll have one, two, three and four dishes.

300
00:21:40,565 --> 00:21:43,805
Then you'll have four leaders correspondingly.

301
00:21:43,805 --> 00:21:50,860
One, two, three and four and one promotion's here.

302
00:21:50,860 --> 00:21:54,590
Again, make sure that you initialize the images for each one of

303
00:21:54,590 --> 00:21:58,940
them appropriately from the Firebase storage.

304
00:21:58,940 --> 00:22:02,375
With this, our server is completely configured.

305
00:22:02,375 --> 00:22:10,100
So our Firebase server has all the data that is required for it to serve up to our plans.

306
00:22:10,100 --> 00:22:13,595
We will now move on to the next exercise,

307
00:22:13,595 --> 00:22:18,725
where we will configure our angular client to be able to access

308
00:22:18,725 --> 00:22:22,370
this Firebase backend as a service and then retrieve

309
00:22:22,370 --> 00:22:26,469
data and then also push data to their Firebase server.

310
00:22:26,469 --> 00:22:29,440
With this, we complete this exercise.

311
00:22:29,440 --> 00:22:33,110
In this exercise, we have seen how easy it is for us to

312
00:22:33,110 --> 00:22:37,100
configure our Firebase backend as a service for both authentication,

313
00:22:37,100 --> 00:22:43,520
for storing files and serving them up and also storing information into

314
00:22:43,520 --> 00:22:51,410
the Cloud Firestore database in the form of collections and documents within collections.

315
00:22:51,410 --> 00:22:55,180
With this, we complete this exercise.