Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,230 --> 00:00:08,770
So enough about you state for now, let's now send this to a Web server so that we can also dive into
2
00:00:08,770 --> 00:00:09,730
some of our jokes.
3
00:00:09,730 --> 00:00:15,550
For example, jokes that help us replace class lifecycle methods, produce all again, use Firebase
4
00:00:15,550 --> 00:00:19,180
as a dummy back and we'll just create a new product here.
5
00:00:19,180 --> 00:00:20,500
React Hooks, update.
6
00:00:20,510 --> 00:00:21,700
You can name whatever you want.
7
00:00:22,840 --> 00:00:27,310
Create this project here, and I'm just using Firebase here because I don't want to write any complex
8
00:00:27,310 --> 00:00:32,200
server side logic, I just want to have a server we can talk to which automatically has a database attached
9
00:00:32,200 --> 00:00:34,700
to it so that the data as it gets stored there.
10
00:00:35,350 --> 00:00:42,610
So let's wait for it to finish and then dive into this newly created project and in there, go to database
11
00:00:43,270 --> 00:00:46,450
and now make sure to set up a new database there.
12
00:00:46,450 --> 00:00:52,090
And don't use Firestorm, but scroll down a bit and use a real time database, click on create database
13
00:00:52,090 --> 00:00:56,830
and start in test mode, which means that everyone is allowed to read and write because here we'll just
14
00:00:56,830 --> 00:00:58,120
use this as a dummy backend.
15
00:00:58,990 --> 00:01:06,100
Does this to you URL you can now send requests to to store data in that database and to send requests.
16
00:01:06,130 --> 00:01:12,550
We can use access as we did in this course, or we used a built in fetch API which is built right into
17
00:01:12,550 --> 00:01:13,270
JavaScript.
18
00:01:13,610 --> 00:01:14,320
It's totally up to you.
19
00:01:14,320 --> 00:01:16,510
What you want to do to mix things up.
20
00:01:16,510 --> 00:01:19,180
I'll use to fetch API build into JavaScript.
21
00:01:20,260 --> 00:01:26,830
So when we're adding an ingredient besides updating this locally, I also want to send the HTP request
22
00:01:27,070 --> 00:01:29,370
and I do this by calling fetch.
23
00:01:29,380 --> 00:01:32,350
And again, this is a function the browser understands.
24
00:01:32,350 --> 00:01:35,380
It's not a react function, not a react hooke's function.
25
00:01:35,540 --> 00:01:37,530
It's a browser function.
26
00:01:37,540 --> 00:01:42,460
So to say the fetch API, as it's called, is built into modern browsers.
27
00:01:42,610 --> 00:01:49,660
This will send a behind the scenes http request and fetch takes a U are l you want to send the request
28
00:01:49,660 --> 00:01:50,530
to which is a string.
29
00:01:51,160 --> 00:01:51,810
In our case.
30
00:01:51,810 --> 00:01:56,380
That's not just this URL, but let's say we want to store the ingredients in the ingredients node and
31
00:01:56,380 --> 00:01:59,130
firebase then also requires a dot JSON at the end.
32
00:01:59,170 --> 00:02:01,720
That's just a firebase thing.
33
00:02:01,720 --> 00:02:04,270
Nothing to do with react, nothing to do with reactants.
34
00:02:05,050 --> 00:02:10,300
So this is where we want to send our data to you and you got to know that fetch by default will send
35
00:02:10,300 --> 00:02:11,200
a get request.
36
00:02:11,500 --> 00:02:12,250
Firebase.
37
00:02:12,250 --> 00:02:18,220
Once a post request though, if we want to store data, hence we pass a second argument to fetch.
38
00:02:18,220 --> 00:02:21,640
And that's an object that allows us to configure this request.
39
00:02:22,000 --> 00:02:28,060
And on this object, we can set the method property to post a default is getting you never need to set
40
00:02:28,060 --> 00:02:30,040
that, but we want to set this to post.
41
00:02:30,910 --> 00:02:38,170
You then also can add a body property to define what you want to send, and that has to be JSON data,
42
00:02:38,170 --> 00:02:42,910
which means you can use JSON, which is another thing built into the browser.
43
00:02:42,910 --> 00:02:47,920
It's a it's a class and built into browsers, which has a stringy fine method.
44
00:02:48,040 --> 00:02:53,710
This will take a JavaScript object or array and convert it into valid chasten format.
45
00:02:53,750 --> 00:02:56,110
It's a convenience feature built into the browser.
46
00:02:56,350 --> 00:02:58,240
Also has nothing to do with react.
47
00:02:59,360 --> 00:03:06,680
So here I want to pass that ingredient, we're getting basically ingredient like this without an I.D.
48
00:03:06,680 --> 00:03:10,820
because now Firebase will generate an ID for us so we don't have to do that manually.
49
00:03:12,050 --> 00:03:17,630
Now, when everything you always need to set now is headers, this allows us to set our own headers
50
00:03:17,630 --> 00:03:23,150
and that in turns a JavaScript object, a nested JavaScript object, and there you can set headers.
51
00:03:23,150 --> 00:03:29,180
You want to point to this request and they are Firebase expects de content type header and set this
52
00:03:29,180 --> 00:03:31,880
to application jasen with access.
53
00:03:31,880 --> 00:03:34,430
We didn't have to do that because access did it for us.
54
00:03:34,670 --> 00:03:39,170
Fetched doesn't do it for us, just as it doesn't convert data to Jason for us.
55
00:03:39,410 --> 00:03:41,270
So we have to do the data conversion manually.
56
00:03:41,360 --> 00:03:47,600
We have to add this header manually to inform Firebase that we got some incoming Jason data and fetch
57
00:03:47,600 --> 00:03:49,310
will now return a promise.
58
00:03:50,550 --> 00:03:56,030
Which will eventually resolve Wednesday's request successfully was sent or of course, once it fails,
59
00:03:56,040 --> 00:04:00,450
that could be an option to let's say we want to update our data locally.
60
00:04:00,450 --> 00:04:08,820
When this promise is done, then we can use then here and get response inside of this nested function
61
00:04:09,210 --> 00:04:10,240
in India.
62
00:04:11,100 --> 00:04:16,589
I then want to update my ingredients, because as you learn from this course with promises, the thing
63
00:04:16,589 --> 00:04:22,110
is that the function you're passing through then will not execute immediately when this gets executed,
64
00:04:22,110 --> 00:04:25,050
but only when this request is done in this case.
65
00:04:25,500 --> 00:04:29,090
So then I want to update my ingredients.
66
00:04:29,940 --> 00:04:33,420
You could also use async a wait here if you wanted to, of course.
67
00:04:33,630 --> 00:04:39,030
But I will stick to this then approach because I think it makes it really clear that this executes at
68
00:04:39,030 --> 00:04:40,110
a later point of time.
69
00:04:40,920 --> 00:04:46,080
Now, the good thing is here, by the way, this response actually will get some data back from FIREBASE,
70
00:04:46,080 --> 00:04:50,520
which contains that automatically generated in response itself.
71
00:04:50,520 --> 00:04:52,200
However, it's a more complex object.
72
00:04:52,230 --> 00:04:58,080
We're interested in the body of that response and you get that by calling the JSON method there.
73
00:04:58,090 --> 00:05:01,710
This will extract the body and convert it from Jason to normal.
74
00:05:01,710 --> 00:05:05,040
JavaScript code, however, dissolves returns a promise.
75
00:05:05,430 --> 00:05:13,200
So we'll actually return response Jacir and move this code into a Naver, then block a change here which
76
00:05:13,200 --> 00:05:16,440
will be my my body or my response date.
77
00:05:16,450 --> 00:05:22,440
I get this in this function here which I passed the second then block which executes once this body
78
00:05:22,440 --> 00:05:28,920
has been passed and now response data will be an object which has a name property which contains does
79
00:05:28,920 --> 00:05:30,580
automatically generate that idea.
80
00:05:30,600 --> 00:05:32,200
That's just how Firebase works.
81
00:05:32,970 --> 00:05:41,130
So here we can now set it equal to respons data dot name again that we can access that name here has
82
00:05:41,130 --> 00:05:43,890
nothing to do with React or with the Fach API.
83
00:05:44,130 --> 00:05:45,390
That's just firebase.
84
00:05:45,480 --> 00:05:51,540
It returns some data, which in the end is a JavaScript object which has a name property and that name
85
00:05:51,540 --> 00:05:56,220
property will have that unique ID which was generated by Firebase.
86
00:05:56,610 --> 00:06:01,290
If you're using a different API, does will probably not be named, but for Firebase it is.
87
00:06:01,890 --> 00:06:04,350
And now we're creating our ingredient locally.
88
00:06:04,740 --> 00:06:11,850
We're updating it there based on all our previous ingredients with that ingredient we got here and with
89
00:06:11,850 --> 00:06:14,700
our name, with our ID generated by Firebase.
90
00:06:16,030 --> 00:06:19,870
So let's see whether it works, let's save that.
91
00:06:20,800 --> 00:06:27,760
Let's go back to our application, let's add five apples and you see it takes a while until it appears
92
00:06:27,760 --> 00:06:34,030
here, which makes sense because we're sending HTP request and then here we indeed have ingredients.
93
00:06:34,030 --> 00:06:35,740
Adut and Desistance unique ID.
94
00:06:36,800 --> 00:06:37,880
And if I add.
95
00:06:39,540 --> 00:06:45,540
Bananas, 10, again, it takes a while, not that long, because firebases very quick, but a short
96
00:06:45,540 --> 00:06:47,750
while, we also see it here.
97
00:06:48,330 --> 00:06:49,320
So that's working.
98
00:06:49,620 --> 00:06:52,320
As soon as we reload, though, all data is lost.
99
00:06:52,320 --> 00:06:56,120
So the next goal is to fetch our data whenever we reload.
100
00:06:56,130 --> 00:07:00,870
So whenever our app starts or whenever ingredients get gets rendered, so to say.
101
00:07:01,320 --> 00:07:06,510
And for Dad, we normally would have used lifecycle methods, we would have used components mount.
102
00:07:06,930 --> 00:07:11,280
And we can't use that anymore here unless we transform this to a Class-Based component, of course,
103
00:07:11,280 --> 00:07:12,270
which is not the goal.
104
00:07:12,660 --> 00:07:13,140
But react.
105
00:07:13,140 --> 00:07:14,280
Hoke's got us covered.
10790
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.