Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,750 --> 00:00:09,300
OK, so now we're at the section where we are going to integrate Firebase into our application for mostly
2
00:00:09,300 --> 00:00:20,370
authentication and a bit of storage now in order to understand what Firebase is, as well as why we
3
00:00:20,370 --> 00:00:29,700
want to use a service like Firebase, I want to show you a little diagram before we write any firebase
4
00:00:29,700 --> 00:00:30,330
code at all.
5
00:00:32,980 --> 00:00:40,420
Weapon development is generally divided into two sections, there's front end and then there's Back-End.
6
00:00:41,970 --> 00:00:52,830
Front end development consists of any JavaScript, HTML or code that comprises the application that
7
00:00:52,830 --> 00:00:55,680
our users see and interact with.
8
00:00:56,010 --> 00:01:01,170
So all of the code that we have written up to this point is all front end development.
9
00:01:02,370 --> 00:01:07,950
This includes any of the components we've built, any of the pages we've built, any of the styling
10
00:01:07,950 --> 00:01:13,080
we've written, everything that we've done is all front end development.
11
00:01:14,320 --> 00:01:22,450
You can see front end development as essentially anything that the user does see or is able to see.
12
00:01:23,620 --> 00:01:30,070
Back in, on the other hand, is mostly code regarding things that the user will not see.
13
00:01:31,020 --> 00:01:33,030
And what is back in development?
14
00:01:34,500 --> 00:01:42,120
Well, back in development generally consists of three things, at least for our intents and purposes,
15
00:01:42,120 --> 00:01:50,220
with our application, there is anything related to a server, anything related to a database and anything
16
00:01:50,220 --> 00:01:51,520
related to authentication.
17
00:01:52,410 --> 00:02:00,430
Now, the database is generally where we store any data that is important for our application.
18
00:02:01,260 --> 00:02:02,730
So what do I mean by this?
19
00:02:03,300 --> 00:02:12,120
Well, right now in our application, we have this list of shop data that we use in our shop component.
20
00:02:12,900 --> 00:02:22,470
Our shop component creates these collection previews based off of this shop data that has category items.
21
00:02:22,470 --> 00:02:28,280
And in the category items, there are the specific items that we want to display.
22
00:02:28,320 --> 00:02:28,660
Right.
23
00:02:29,190 --> 00:02:33,630
These are all the items that our user is able to purchase or see.
24
00:02:34,670 --> 00:02:41,950
We only have around 40 items, so it's not that big of a deal for us to store on our front end.
25
00:02:42,440 --> 00:02:51,920
But if this list was thousands of items in hundreds of categories, we can see how this would be really
26
00:02:52,220 --> 00:02:55,680
heavy in terms of performance for our browser.
27
00:02:56,300 --> 00:03:02,150
So what we would want to do is store this on a database so that our application loads quickly.
28
00:03:02,840 --> 00:03:12,290
And at the same time, it's not like at any point we want to display all 1000 of our hats, for example,
29
00:03:12,320 --> 00:03:14,480
when our user navigates to our hearts page.
30
00:03:14,870 --> 00:03:21,350
Nor do they need any of the information related to shoes related to jackets or whatever category if
31
00:03:21,350 --> 00:03:24,650
they only want to see the hats.
32
00:03:25,570 --> 00:03:34,030
Well, all of that data, those thousands of items would be stored in a database and then the server
33
00:03:34,030 --> 00:03:44,070
would store the code that determines the most efficient way to request any of that data from the database.
34
00:03:44,920 --> 00:03:49,690
So we on our front end, for example, a user navigates to arhats page.
35
00:03:49,990 --> 00:04:00,250
They would say in our code we would write something like I want from our server, the 20 latest hats
36
00:04:00,250 --> 00:04:01,060
that are available.
37
00:04:02,020 --> 00:04:09,970
While our server would figure out the best way to query the database for the 20 latest hats in all of
38
00:04:09,970 --> 00:04:15,780
those thousands of items that are available, it would have to figure out what our hats.
39
00:04:16,000 --> 00:04:16,250
Right.
40
00:04:16,300 --> 00:04:22,120
And what are the latest 20 and then what's the most efficient way to fetch that data?
41
00:04:23,290 --> 00:04:29,880
That code is all back end coding, we on the front end don't generally do any of that stuff.
42
00:04:31,060 --> 00:04:39,580
Authentication is the means in which our server determines that the user that is trying to access the
43
00:04:39,580 --> 00:04:43,060
server or the database is who they say they are.
44
00:04:43,660 --> 00:04:52,570
So if our user logs into our application and they want to request, say, all of the items that they
45
00:04:52,570 --> 00:05:00,280
stored in their last session three weeks ago, we would generally store that information on our database
46
00:05:00,640 --> 00:05:07,720
so that when they come back and they log in again, they would send that request to the server with
47
00:05:07,750 --> 00:05:10,100
their user profile information.
48
00:05:10,630 --> 00:05:16,720
Our server would then authenticate that that user is who they say they are usually with the email password,
49
00:05:17,080 --> 00:05:25,780
and then they would be able to properly query the database for that stuff, because we don't want users
50
00:05:26,020 --> 00:05:33,330
that aren't the right user asking for information that we don't want them to be able to have.
51
00:05:33,520 --> 00:05:33,840
Right.
52
00:05:34,360 --> 00:05:41,260
So one user could not access another user sensitive information that we would be storing on our database.
53
00:05:42,280 --> 00:05:53,320
Firebase is generally a solution or a platform that has all of this handled for us, so we don't actually
54
00:05:53,320 --> 00:05:57,700
have to write any backend code at all if we did not want to.
55
00:05:58,820 --> 00:05:59,270
Now.
56
00:06:00,430 --> 00:06:07,150
This course is ninety nine percent front end related, that last remaining one percent is mostly going
57
00:06:07,150 --> 00:06:14,560
to cover some of the concepts of our back end so that we know what we're doing with Firebase, as well
58
00:06:14,590 --> 00:06:22,090
as there's a point where we have to spin up a small server to handle our payments.
59
00:06:22,090 --> 00:06:24,990
But I will show you all of that stuff later.
60
00:06:25,000 --> 00:06:26,620
So definitely don't worry about that.
61
00:06:27,540 --> 00:06:34,590
But we need to understand this separation so we understand where fire base ends and our application
62
00:06:34,590 --> 00:06:36,440
begins and vice versa.
63
00:06:37,540 --> 00:06:43,570
Firebase in itself is a great solution for us front end developers because it's created by Google,
64
00:06:44,050 --> 00:06:51,160
so it handles a lot of the stuff that a back end developer would normally do for us, including efficiently
65
00:06:51,160 --> 00:06:55,270
querying our database, efficiently storing our stuff.
66
00:06:55,840 --> 00:07:05,110
It gives us a very easy way to do authentication, which normally to do from scratch is extremely difficult.
67
00:07:06,030 --> 00:07:15,120
And it also does a lot more than what I'm covering, there's so much great things about fire base that
68
00:07:15,120 --> 00:07:23,310
really helps us front end developers to get access to back end features without having to do back development.
69
00:07:24,220 --> 00:07:26,080
So let's dive right in.
7648
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.