Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,330 --> 00:00:03,550
So let's now connect
2
00:00:03,550 --> 00:00:05,930
to our MongoDB cluster and let's,
3
00:00:05,930 --> 00:00:08,700
well, run some code against it,
4
00:00:08,700 --> 00:00:12,500
and let's maybe start with the newsletter API route.
5
00:00:12,500 --> 00:00:17,500
I will bring back my development server with npm rundef.
6
00:00:17,500 --> 00:00:20,030
And now here in the newsletter API route,
7
00:00:20,030 --> 00:00:24,970
I wanna store that email address in a table
8
00:00:24,970 --> 00:00:28,460
or, as it's called in MongoDB, a collection
9
00:00:28,460 --> 00:00:30,340
of email addresses.
10
00:00:30,340 --> 00:00:32,960
So that we have a collection of email addresses
11
00:00:32,960 --> 00:00:35,510
stored in the database,
12
00:00:35,510 --> 00:00:39,690
and that then could be used by us to send out newsletters
13
00:00:39,690 --> 00:00:43,380
and emails of any kind to those registered users.
14
00:00:43,380 --> 00:00:46,140
Now to do that, we need to do two things.
15
00:00:46,140 --> 00:00:48,720
We need to connect to the database.
16
00:00:48,720 --> 00:00:53,450
And once we are connected, we need to run an insert command
17
00:00:53,450 --> 00:00:58,400
to insert the email address into some collection.
18
00:00:58,400 --> 00:01:01,010
Now we can learn more about that on the official docs,
19
00:01:01,010 --> 00:01:05,239
and also on the npm docs of the MongoDB Driver already.
20
00:01:05,239 --> 00:01:07,430
If we scroll down to Quick Start,
21
00:01:07,430 --> 00:01:11,320
there we see that we have some code here for connecting.
22
00:01:11,320 --> 00:01:13,310
And then when we are connected,
23
00:01:13,310 --> 00:01:16,100
we can insert documents as they are called,
24
00:01:16,100 --> 00:01:20,670
so entries into the collection with insertMany
25
00:01:20,670 --> 00:01:23,217
or also with another command which we'll see.
26
00:01:24,250 --> 00:01:26,240
So let's connect to MongoDB.
27
00:01:26,240 --> 00:01:28,560
And for that, we can use this code.
28
00:01:28,560 --> 00:01:31,550
Though we can also adjust it here in newsletter.js,
29
00:01:31,550 --> 00:01:34,530
we can use ES module imports,
30
00:01:34,530 --> 00:01:39,530
and we can import something from MongoDB like this.
31
00:01:40,010 --> 00:01:43,503
And the something I wanna import is MongoClient,
32
00:01:44,540 --> 00:01:46,950
between curly braces.
33
00:01:46,950 --> 00:01:48,460
With that imported,
34
00:01:48,460 --> 00:01:51,560
we can use it down here to set up a connection.
35
00:01:51,560 --> 00:01:54,070
So here we can then use MongoClient.
36
00:01:54,070 --> 00:01:55,860
And as we see here in the docs,
37
00:01:55,860 --> 00:01:59,483
called the connect method to connect to a database.
38
00:02:00,390 --> 00:02:02,970
So here I'll then call connect.
39
00:02:02,970 --> 00:02:07,080
And now we need to pass in our connection URL.
40
00:02:07,080 --> 00:02:09,100
Now for that, we go back to the cluster
41
00:02:09,100 --> 00:02:10,713
because here we got this URL.
42
00:02:12,080 --> 00:02:15,630
So we can copy this URL here.
43
00:02:15,630 --> 00:02:17,730
And I got there by clicking on Connect,
44
00:02:17,730 --> 00:02:20,230
and then connect your application.
45
00:02:20,230 --> 00:02:25,230
So I'll copy that URL and paste it in here as a string.
46
00:02:27,060 --> 00:02:30,810
Now here we need to fill in a user name, a password,
47
00:02:30,810 --> 00:02:32,533
and a database name.
48
00:02:33,810 --> 00:02:35,440
Now for a username and password,
49
00:02:35,440 --> 00:02:38,950
you should go to Database Access here
50
00:02:38,950 --> 00:02:43,710
and add a new database user with password
51
00:02:43,710 --> 00:02:46,770
with any username or password of your choice,
52
00:02:46,770 --> 00:02:49,470
so fill in any values here,
53
00:02:49,470 --> 00:02:53,690
and then with read and write access to any database.
54
00:02:53,690 --> 00:02:55,690
Now I already did create such a user.
55
00:02:55,690 --> 00:02:58,100
So I'll just edit my existing user
56
00:02:58,100 --> 00:03:00,320
and assign a new password,
57
00:03:00,320 --> 00:03:04,080
which I'll also change once this recording is done,
58
00:03:04,080 --> 00:03:07,510
so you can't use that user and that password.
59
00:03:07,510 --> 00:03:09,800
So I will use that user and password.
60
00:03:09,800 --> 00:03:11,090
And hence here in my case,
61
00:03:11,090 --> 00:03:15,210
I'll use Maximilian as a username.
62
00:03:15,210 --> 00:03:18,230
Make sure to also get rid of those angle brackets here
63
00:03:18,230 --> 00:03:19,860
in those placeholders,
64
00:03:19,860 --> 00:03:22,800
and plug in my password as well.
65
00:03:22,800 --> 00:03:24,140
Now for the database name,
66
00:03:24,140 --> 00:03:26,880
you can choose any database name you want
67
00:03:26,880 --> 00:03:29,380
because that database of that name
68
00:03:29,380 --> 00:03:31,700
will then be created automatically
69
00:03:31,700 --> 00:03:34,240
once you start sending queries.
70
00:03:34,240 --> 00:03:36,483
And here I'll name it newsletter.
71
00:03:37,550 --> 00:03:40,400
Now there's one other setting we need to adjust.
72
00:03:40,400 --> 00:03:43,550
In MongoDB Atlas, under Network Access,
73
00:03:43,550 --> 00:03:46,030
you wanna add an IP address
74
00:03:46,030 --> 00:03:48,900
and make sure that you add your current IP address
75
00:03:48,900 --> 00:03:50,593
to that white list here.
76
00:03:52,310 --> 00:03:54,750
You should do that to ensure
77
00:03:54,750 --> 00:03:58,520
that your local machine is able to send requests
78
00:03:58,520 --> 00:04:01,410
to that MongoDB Atlas cluster.
79
00:04:01,410 --> 00:04:03,330
Once you deploy your application,
80
00:04:03,330 --> 00:04:05,220
you wanna make sure that the server
81
00:04:05,220 --> 00:04:08,800
you deployed your site to is white listed here.
82
00:04:08,800 --> 00:04:11,783
Otherwise, incoming requests will be blocked.
83
00:04:13,180 --> 00:04:15,110
So that's something we need to do.
84
00:04:15,110 --> 00:04:18,993
And with that, we get this connect string configured.
85
00:04:19,910 --> 00:04:22,610
Now the connect method takes a second argument,
86
00:04:22,610 --> 00:04:24,270
which is a call back,
87
00:04:24,270 --> 00:04:27,140
which gives us access to the connected client,
88
00:04:27,140 --> 00:04:28,790
so to the cluster in the end
89
00:04:28,790 --> 00:04:30,923
once the connection block is established.
90
00:04:31,830 --> 00:04:35,570
Alternatively, we don't add a second argument,
91
00:04:35,570 --> 00:04:37,460
and instead add a then block
92
00:04:37,460 --> 00:04:39,950
to use a promise return by connect,
93
00:04:39,950 --> 00:04:42,180
which also gives us access to the client
94
00:04:42,180 --> 00:04:44,840
once the connection block is established.
95
00:04:44,840 --> 00:04:47,700
That would also allow us to use async await here
96
00:04:47,700 --> 00:04:48,703
if we wanted to.
97
00:04:49,880 --> 00:04:52,100
Now we can only talk to the database
98
00:04:52,100 --> 00:04:53,880
once the connection block is established,
99
00:04:53,880 --> 00:04:57,280
so only inside of this then block here in this case,
100
00:04:57,280 --> 00:04:58,990
so only in this function
101
00:04:58,990 --> 00:05:01,440
where we do have access to the client.
102
00:05:01,440 --> 00:05:04,430
That's also what we see in this quick start guide here.
103
00:05:04,430 --> 00:05:07,200
There they are using the callback function,
104
00:05:07,200 --> 00:05:10,420
but we can use the promise as well.
105
00:05:10,420 --> 00:05:11,900
Now in here we wanna get access
106
00:05:11,900 --> 00:05:14,740
to the concrete database to which we connected,
107
00:05:14,740 --> 00:05:17,900
and we do this by executing client.db.
108
00:05:17,900 --> 00:05:20,750
We could enter the database name here.
109
00:05:20,750 --> 00:05:24,550
But since we already encoded that in the connection string.
110
00:05:24,550 --> 00:05:25,610
We don't need to do that.
111
00:05:25,610 --> 00:05:26,940
We can just leave that blank,
112
00:05:26,940 --> 00:05:28,750
and it will use that database
113
00:05:28,750 --> 00:05:31,200
to which we connected with the connection string.
114
00:05:32,670 --> 00:05:36,730
And once we got hold of the database with the db method,
115
00:05:36,730 --> 00:05:40,480
we can use the database to get access to a collection,
116
00:05:40,480 --> 00:05:43,410
which is like a table in that database
117
00:05:43,410 --> 00:05:45,430
into which we wanna store data.
118
00:05:45,430 --> 00:05:47,850
And that could be the emails collection
119
00:05:47,850 --> 00:05:50,090
in the newsletter database,
120
00:05:50,090 --> 00:05:53,570
which will then hold the individual email addresses.
121
00:05:53,570 --> 00:05:55,210
Now it's that collection
122
00:05:55,210 --> 00:05:58,560
against which we can now run our queries.
123
00:05:58,560 --> 00:06:01,210
For example, the insertOne query
124
00:06:01,210 --> 00:06:06,170
to insert one new entry into that collection.
125
00:06:06,170 --> 00:06:08,180
And entries in collections
126
00:06:08,180 --> 00:06:11,310
are called documents in MongoDB world,
127
00:06:11,310 --> 00:06:15,260
and a document should be a JavaScript object here,
128
00:06:15,260 --> 00:06:19,520
and then it can have any key value pairs of your choice.
129
00:06:19,520 --> 00:06:22,520
And here I'll have an email field let's say,
130
00:06:22,520 --> 00:06:26,150
which just contains that user email value
131
00:06:26,150 --> 00:06:29,440
which I extracted and validated here.
132
00:06:29,440 --> 00:06:32,993
So now I'll insert such a document into this collection.
133
00:06:34,490 --> 00:06:36,740
Now this also returns a promise,
134
00:06:36,740 --> 00:06:39,360
which will let us know once it's done.
135
00:06:39,360 --> 00:06:41,640
And therefore, since we're already in event chain,
136
00:06:41,640 --> 00:06:44,110
we can just return this promise here
137
00:06:45,230 --> 00:06:49,100
to add another then block thereafter and continue.
138
00:06:49,100 --> 00:06:51,280
However, I'll switch to async await now
139
00:06:51,280 --> 00:06:52,890
since that is a bit easier,
140
00:06:52,890 --> 00:06:55,050
and we can't do that by adding async
141
00:06:55,050 --> 00:06:56,960
in front of our handler function
142
00:06:56,960 --> 00:06:59,780
because these API route handler functions
143
00:06:59,780 --> 00:07:03,470
are allowed to be async, they can be async.
144
00:07:03,470 --> 00:07:05,650
So I'll add async here,
145
00:07:05,650 --> 00:07:08,760
and then I'll switch us all to async await
146
00:07:08,760 --> 00:07:11,200
by awaiting the connect method here
147
00:07:11,200 --> 00:07:13,173
and getting my client like this,
148
00:07:14,440 --> 00:07:17,373
and then removing this here and this here.
149
00:07:19,270 --> 00:07:21,340
And then instead of returning here,
150
00:07:21,340 --> 00:07:25,073
I will await this insert operation like that.
151
00:07:27,120 --> 00:07:29,440
So now we're using async await for connecting,
152
00:07:29,440 --> 00:07:31,070
for getting access to the database,
153
00:07:31,070 --> 00:07:33,600
and for inserting one document.
154
00:07:33,600 --> 00:07:35,690
And then once we're done with all of that,
155
00:07:35,690 --> 00:07:37,800
I will send back that status code.
156
00:07:37,800 --> 00:07:39,510
We should just do one other thing.
157
00:07:39,510 --> 00:07:41,770
We should all use the client again
158
00:07:41,770 --> 00:07:46,713
and call close to disconnect from that client.
159
00:07:47,790 --> 00:07:50,520
Now with all of that, we should be inserting
160
00:07:50,520 --> 00:07:54,760
a new email address into that emails collection
161
00:07:54,760 --> 00:07:57,940
in our newsletter database.
162
00:07:57,940 --> 00:08:00,870
If we save all that code now
163
00:08:00,870 --> 00:08:04,890
and we go back to our application to our site
164
00:08:04,890 --> 00:08:06,410
on localhost3000,
165
00:08:07,940 --> 00:08:08,773
let's test this.
166
00:08:08,773 --> 00:08:11,860
Let me enter a new email address and click Register.
167
00:08:11,860 --> 00:08:13,420
And we don't get any feedback here.
168
00:08:13,420 --> 00:08:14,940
We could of course add some,
169
00:08:14,940 --> 00:08:18,570
but let's see whether it worked by going to our cluster,
170
00:08:18,570 --> 00:08:21,740
and there we can click on Collections
171
00:08:21,740 --> 00:08:24,470
to see the collections that are part of this cluster,
172
00:08:24,470 --> 00:08:26,840
and there you should see a newsletter database
173
00:08:26,840 --> 00:08:28,910
with the emails collection.
174
00:08:28,910 --> 00:08:32,130
And then inside of that emails collection here on the right,
175
00:08:32,130 --> 00:08:34,850
you'll see that document which we inserted
176
00:08:34,850 --> 00:08:37,090
with that email address.
177
00:08:37,090 --> 00:08:40,799
It also has an automatically assigned unique ID.
178
00:08:40,799 --> 00:08:44,350
And that shows us that everything works.
179
00:08:44,350 --> 00:08:47,110
We also got no error here in the terminal,
180
00:08:47,110 --> 00:08:50,310
just some warning, which we can't ignore here.
181
00:08:50,310 --> 00:08:52,490
And therefore that is how we can now talk
182
00:08:52,490 --> 00:08:56,580
to a real database to store our emails.
183
00:08:56,580 --> 00:08:57,820
As mentioned, we could now,
184
00:08:57,820 --> 00:08:59,900
again, work on the front end a little bit
185
00:08:59,900 --> 00:09:02,910
and provide a better feedback to the user here,
186
00:09:02,910 --> 00:09:05,060
but I will not dive into that here,
187
00:09:05,060 --> 00:09:08,100
since I wanna focus on these API routes
188
00:09:08,100 --> 00:09:10,230
since it is these API routes
189
00:09:10,230 --> 00:09:12,823
which are the core feature we're looking at here.
14785
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.