Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,240 --> 00:00:05,360
Now we know how to send a get request,
2
00:00:05,360 --> 00:00:06,970
because that's what we're doing here.
3
00:00:06,970 --> 00:00:08,670
We're getting data
4
00:00:08,670 --> 00:00:11,427
by sending this fetch request to this URL.
5
00:00:12,650 --> 00:00:15,490
Now, in reality, in a lot of applications
6
00:00:15,490 --> 00:00:18,150
you don't just want to fetch data.
7
00:00:18,150 --> 00:00:20,890
You also want to send data to a server,
8
00:00:20,890 --> 00:00:24,480
for example because a new user was created.
9
00:00:24,480 --> 00:00:26,890
That's why I added a new component
10
00:00:26,890 --> 00:00:30,600
and attached you'll find an updated project snapshot
11
00:00:30,600 --> 00:00:32,880
which contains the new AddMovie.js
12
00:00:32,880 --> 00:00:35,570
and AddMovie.module.css files
13
00:00:35,570 --> 00:00:38,070
and an adjusted App.js file.
14
00:00:38,070 --> 00:00:40,790
Where I basically now also
15
00:00:40,790 --> 00:00:45,020
added this addMovie component here in my JSX code,
16
00:00:45,020 --> 00:00:48,390
and where I added this addMovieHandler function
17
00:00:48,390 --> 00:00:50,321
which just logs the movie.
18
00:00:50,321 --> 00:00:53,030
In addMovie I'm just rendering a form
19
00:00:53,030 --> 00:00:55,600
and I'm gathering the user input
20
00:00:55,600 --> 00:00:58,880
preventing the form default to submission default
21
00:00:58,880 --> 00:01:02,350
and then creating that movie object and passing it
22
00:01:02,350 --> 00:01:04,843
on through my prop here, through onAddMovie.
23
00:01:06,060 --> 00:01:07,560
Therefore we get this form,
24
00:01:07,560 --> 00:01:09,930
and this would allow us to add a movie.
25
00:01:09,930 --> 00:01:13,270
Now, the star Wars API, which we're using here
26
00:01:13,270 --> 00:01:16,550
is really just a dummy API for getting data.
27
00:01:16,550 --> 00:01:19,580
We can't send post requests there
28
00:01:19,580 --> 00:01:23,000
which is what we need to do, to store new data.
29
00:01:23,000 --> 00:01:25,610
But this dummy star Wars API, of course
30
00:01:25,610 --> 00:01:29,140
is just some API, which is there to play around with it.
31
00:01:29,140 --> 00:01:33,430
They don't want data to be submitted by anyone out there.
32
00:01:33,430 --> 00:01:36,580
So we can't send a post request here.
33
00:01:36,580 --> 00:01:39,949
That's while we'll now use as another dummy API,
34
00:01:39,949 --> 00:01:41,180
another service.
35
00:01:41,180 --> 00:01:44,030
And that service is Firebase.
36
00:01:44,030 --> 00:01:47,330
Firebase is a service provided by Google
37
00:01:47,330 --> 00:01:49,170
and it's in the end, a backend
38
00:01:49,170 --> 00:01:52,660
which we can use, without writing any code.
39
00:01:52,660 --> 00:01:56,610
Unlike the name implies, it's not some kind of database
40
00:01:56,610 --> 00:02:00,280
it's a backend that comes together with a database,
41
00:02:00,280 --> 00:02:02,780
but it also gives us a full backend app,
42
00:02:02,780 --> 00:02:06,710
a complete rest API, to which we can send requests.
43
00:02:06,710 --> 00:02:09,070
And the great thing is that we can get started
44
00:02:09,070 --> 00:02:12,710
for free here, alls if you check their pricing pages,
45
00:02:12,710 --> 00:02:16,360
and we can play around with our dummy backend here for free,
46
00:02:16,360 --> 00:02:19,200
without writing any server-side code.
47
00:02:19,200 --> 00:02:21,210
Since this course is a react course
48
00:02:21,210 --> 00:02:23,600
I of course want to focus on react
49
00:02:23,600 --> 00:02:26,380
and here we will then be able to get data
50
00:02:26,380 --> 00:02:28,410
and to store data.
51
00:02:28,410 --> 00:02:30,100
For that you need a Google account
52
00:02:30,100 --> 00:02:33,950
and then you need to go here to the Firebase console,
53
00:02:33,950 --> 00:02:37,230
after logging in with your Google account.
54
00:02:37,230 --> 00:02:40,630
Once you're logged in, you can add a new project
55
00:02:40,630 --> 00:02:43,000
and give it any name of your choice.
56
00:02:43,000 --> 00:02:44,713
Here I'll name it react-
57
00:02:46,450 --> 00:02:47,800
http,
58
00:02:47,800 --> 00:02:49,510
but the name is up to you.
59
00:02:49,510 --> 00:02:50,850
Click continue.
60
00:02:50,850 --> 00:02:52,780
You can disable Google analytics,
61
00:02:52,780 --> 00:02:54,790
we don't need them here.
62
00:02:54,790 --> 00:02:57,870
And this will now create our Firebase project.
63
00:02:57,870 --> 00:03:00,910
Now again, Firebase is a service offered by Google.
64
00:03:00,910 --> 00:03:03,260
It consists of many products
65
00:03:03,260 --> 00:03:06,030
and services that make up the overall service,
66
00:03:06,030 --> 00:03:08,750
and we will only use a fraction of that.
67
00:03:08,750 --> 00:03:11,600
We're not going to build some complex Firebase app here.
68
00:03:11,600 --> 00:03:14,380
I'm just using it because it's a free to use,
69
00:03:14,380 --> 00:03:17,713
no code needed, backend which we can start with.
70
00:03:19,640 --> 00:03:22,050
Now here I'm in the Firebase console,
71
00:03:22,050 --> 00:03:25,700
and for us, the RealTime database is interesting.
72
00:03:25,700 --> 00:03:28,920
Now I did say that Firebase is not just a database
73
00:03:28,920 --> 00:03:33,620
and it isn't, but part of its offerings is a database.
74
00:03:33,620 --> 00:03:35,750
They actually have two databases.
75
00:03:35,750 --> 00:03:38,420
Cloud Firestore is the more powerful one
76
00:03:38,420 --> 00:03:40,130
but Realtime Database is the one
77
00:03:40,130 --> 00:03:42,190
which is easier to get started with,
78
00:03:42,190 --> 00:03:45,260
and since we just want a dummy backend, we'll use that.
79
00:03:45,260 --> 00:03:48,290
It also has the nicer rest API.
80
00:03:48,290 --> 00:03:50,090
Now, once we click here, we can click
81
00:03:50,090 --> 00:03:55,090
on create database and then important, start in Test Mode.
82
00:03:55,750 --> 00:03:59,270
Otherwise you will not be able to send requests.
83
00:03:59,270 --> 00:04:02,520
Now this sets up a very simple database for you
84
00:04:02,520 --> 00:04:04,490
and it gives you a URL
85
00:04:04,490 --> 00:04:07,070
which you can use to talk to that database,
86
00:04:07,070 --> 00:04:09,100
though, that's deceiving.
87
00:04:09,100 --> 00:04:12,360
As I mentioned, our frontend won't directly talk
88
00:04:12,360 --> 00:04:15,210
to the database and it's not doing that here either,
89
00:04:15,210 --> 00:04:17,279
even though it might look like it is.
90
00:04:17,279 --> 00:04:21,279
In the end this here is a URL to some Firebase API,
91
00:04:21,279 --> 00:04:25,850
some Firebase arrest API, which then takes incoming requests
92
00:04:25,850 --> 00:04:29,110
and does talk to some other database behind the scenes.
93
00:04:29,110 --> 00:04:32,050
It just might look like we're directly sending requests
94
00:04:32,050 --> 00:04:33,400
to a database here.
95
00:04:33,400 --> 00:04:35,620
Actually, we aren't.
96
00:04:35,620 --> 00:04:37,957
Now we can use this URL to send data
97
00:04:37,957 --> 00:04:42,450
to our Firebase backend and to our database therefore.
98
00:04:42,450 --> 00:04:44,350
But of course, fetching movies from there
99
00:04:44,350 --> 00:04:46,140
won't really succeed.
100
00:04:46,140 --> 00:04:50,679
If you go to App.js, we can replace this Star Wars URL
101
00:04:50,679 --> 00:04:55,679
with this URL, and then actually add one extra segment here
102
00:04:55,720 --> 00:04:58,470
which is movies.json.
103
00:04:58,470 --> 00:05:01,630
Now this name, movies in my case, is up to you.
104
00:05:01,630 --> 00:05:04,940
This basically will then just create a new node
105
00:05:04,940 --> 00:05:06,710
in that database basically.
106
00:05:06,710 --> 00:05:10,430
It's a dynamic rest API which you can
107
00:05:10,430 --> 00:05:12,830
configure here by using different segments
108
00:05:12,830 --> 00:05:15,940
to store data in different nodes of your database.
109
00:05:15,940 --> 00:05:18,240
So this name is up to you, and I choose movies
110
00:05:18,240 --> 00:05:20,340
because I want to store some movies.
111
00:05:20,340 --> 00:05:22,480
A .json is important here.
112
00:05:22,480 --> 00:05:27,030
That's something Firebase specific, they need this .json
113
00:05:27,030 --> 00:05:30,840
at the end of the URL you are sending requests to,
114
00:05:30,840 --> 00:05:33,123
otherwise your requests will fail.
115
00:05:34,450 --> 00:05:39,010
Now we can get our data from there, but if I use this URL
116
00:05:39,010 --> 00:05:41,720
indeed will fail to get our data.
117
00:05:41,720 --> 00:05:44,100
And we actually get an error because I try to
118
00:05:44,100 --> 00:05:46,520
read some results, which we don't get.
119
00:05:46,520 --> 00:05:49,040
We are not making it into this if block here
120
00:05:49,040 --> 00:05:51,470
because we're not getting an error response code
121
00:05:51,470 --> 00:05:53,800
we do get a 200 response code,
122
00:05:53,800 --> 00:05:55,940
but we won't have our results in there.
123
00:05:55,940 --> 00:05:58,010
We won't get any data at all.
124
00:05:58,010 --> 00:05:58,843
Of course,
125
00:05:58,843 --> 00:06:01,550
because currently we're not storing any data here.
126
00:06:01,550 --> 00:06:05,310
Now I did switch to this Realtime database and to Firebase,
127
00:06:05,310 --> 00:06:07,680
so that we can send post requests
128
00:06:07,680 --> 00:06:09,470
and that we can store data.
129
00:06:09,470 --> 00:06:11,920
Because that's also something you often got to do.
130
00:06:11,920 --> 00:06:14,420
And that's something I want to show you therefore.
10294
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.