1
00:00:02,000 --> 00:00:03,000
So let's now connect

2
00:00:03,000 --> 00:00:05,000
to our MongoDB cluster and let's,

3
00:00:05,000 --> 00:00:08,000
well, run some code against it,

4
00:00:08,000 --> 00:00:12,000
and let's maybe start with the newsletter API route.

5
00:00:12,000 --> 00:00:17,000
I will bring back my development server with npm rundef.

6
00:00:17,000 --> 00:00:20,000
And now here in the newsletter API route,

7
00:00:20,000 --> 00:00:24,000
I wanna store that email address in a table

8
00:00:24,000 --> 00:00:28,000
or, as it's called in MongoDB, a collection

9
00:00:28,000 --> 00:00:30,000
of email addresses.

10
00:00:30,000 --> 00:00:32,000
So that we have a collection of email addresses

11
00:00:32,000 --> 00:00:35,000
stored in the database,

12
00:00:35,000 --> 00:00:39,000
and that then could be used by us to send out newsletters

13
00:00:39,000 --> 00:00:43,000
and emails of any kind to those registered users.

14
00:00:43,000 --> 00:00:46,000
Now to do that, we need to do two things.

15
00:00:46,000 --> 00:00:48,000
We need to connect to the database.

16
00:00:48,000 --> 00:00:53,000
And once we are connected, we need to run an insert command

17
00:00:53,000 --> 00:00:58,000
to insert the email address into some collection.

18
00:00:58,000 --> 00:01:01,000
Now we can learn more about that on the official docs,

19
00:01:01,000 --> 00:01:05,000
and also on the npm docs of the MongoDB Driver already.

20
00:01:05,000 --> 00:01:07,000
If we scroll down to Quick Start,

21
00:01:07,000 --> 00:01:11,000
there we see that we have some code here for connecting.

22
00:01:11,000 --> 00:01:13,000
And then when we are connected,

23
00:01:13,000 --> 00:01:16,000
we can insert documents as they are called,

24
00:01:16,000 --> 00:01:20,000
so entries into the collection with insertMany

25
00:01:20,000 --> 00:01:23,000
or also with another command which we'll see.

26
00:01:24,000 --> 00:01:26,000
So let's connect to MongoDB.

27
00:01:26,000 --> 00:01:28,000
And for that, we can use this code.

28
00:01:28,000 --> 00:01:31,000
Though we can also adjust it here in newsletter.js,

29
00:01:31,000 --> 00:01:34,000
we can use ES module imports,

30
00:01:34,000 --> 00:01:39,000
and we can import something from MongoDB like this.

31
00:01:40,000 --> 00:01:43,000
And the something I wanna import is MongoClient,

32
00:01:44,000 --> 00:01:46,000
between curly braces.

33
00:01:46,000 --> 00:01:48,000
With that imported,

34
00:01:48,000 --> 00:01:51,000
we can use it down here to set up a connection.

35
00:01:51,000 --> 00:01:54,000
So here we can then use MongoClient.

36
00:01:54,000 --> 00:01:55,000
And as we see here in the docs,

37
00:01:55,000 --> 00:01:59,000
called the connect method to connect to a database.

38
00:02:00,000 --> 00:02:02,000
So here I'll then call connect.

39
00:02:02,000 --> 00:02:07,000
And now we need to pass in our connection URL.

40
00:02:07,000 --> 00:02:09,000
Now for that, we go back to the cluster

41
00:02:09,000 --> 00:02:10,000
because here we got this URL.

42
00:02:12,000 --> 00:02:15,000
So we can copy this URL here.

43
00:02:15,000 --> 00:02:17,000
And I got there by clicking on Connect,

44
00:02:17,000 --> 00:02:20,000
and then connect your application.

45
00:02:20,000 --> 00:02:25,000
So I'll copy that URL and paste it in here as a string.

46
00:02:27,000 --> 00:02:30,000
Now here we need to fill in a user name, a password,

47
00:02:30,000 --> 00:02:32,000
and a database name.

48
00:02:33,000 --> 00:02:35,000
Now for a username and password,

49
00:02:35,000 --> 00:02:38,000
you should go to Database Access here

50
00:02:38,000 --> 00:02:43,000
and add a new database user with password

51
00:02:43,000 --> 00:02:46,000
with any username or password of your choice,

52
00:02:46,000 --> 00:02:49,000
so fill in any values here,

53
00:02:49,000 --> 00:02:53,000
and then with read and write access to any database.

54
00:02:53,000 --> 00:02:55,000
Now I already did create such a user.

55
00:02:55,000 --> 00:02:58,000
So I'll just edit my existing user

56
00:02:58,000 --> 00:03:00,000
and assign a new password,

57
00:03:00,000 --> 00:03:04,000
which I'll also change once this recording is done,

58
00:03:04,000 --> 00:03:07,000
so you can't use that user and that password.

59
00:03:07,000 --> 00:03:09,000
So I will use that user and password.

60
00:03:09,000 --> 00:03:11,000
And hence here in my case,

61
00:03:11,000 --> 00:03:15,000
I'll use Maximilian as a username.

62
00:03:15,000 --> 00:03:18,000
Make sure to also get rid of those angle brackets here

63
00:03:18,000 --> 00:03:19,000
in those placeholders,

64
00:03:19,000 --> 00:03:22,000
and plug in my password as well.

65
00:03:22,000 --> 00:03:24,000
Now for the database name,

66
00:03:24,000 --> 00:03:26,000
you can choose any database name you want

67
00:03:26,000 --> 00:03:29,000
because that database of that name

68
00:03:29,000 --> 00:03:31,000
will then be created automatically

69
00:03:31,000 --> 00:03:34,000
once you start sending queries.

70
00:03:34,000 --> 00:03:36,000
And here I'll name it newsletter.

71
00:03:37,000 --> 00:03:40,000
Now there's one other setting we need to adjust.

72
00:03:40,000 --> 00:03:43,000
In MongoDB Atlas, under Network Access,

73
00:03:43,000 --> 00:03:46,000
you wanna add an IP address

74
00:03:46,000 --> 00:03:48,000
and make sure that you add your current IP address

75
00:03:48,000 --> 00:03:50,000
to that white list here.

76
00:03:52,000 --> 00:03:54,000
You should do that to ensure

77
00:03:54,000 --> 00:03:58,000
that your local machine is able to send requests

78
00:03:58,000 --> 00:04:01,000
to that MongoDB Atlas cluster.

79
00:04:01,000 --> 00:04:03,000
Once you deploy your application,

80
00:04:03,000 --> 00:04:05,000
you wanna make sure that the server

81
00:04:05,000 --> 00:04:08,000
you deployed your site to is white listed here.

82
00:04:08,000 --> 00:04:11,000
Otherwise, incoming requests will be blocked.

83
00:04:13,000 --> 00:04:15,000
So that's something we need to do.

84
00:04:15,000 --> 00:04:18,000
And with that, we get this connect string configured.

85
00:04:19,000 --> 00:04:22,000
Now the connect method takes a second argument,

86
00:04:22,000 --> 00:04:24,000
which is a call back,

87
00:04:24,000 --> 00:04:27,000
which gives us access to the connected client,

88
00:04:27,000 --> 00:04:28,000
so to the cluster in the end

89
00:04:28,000 --> 00:04:30,000
once the connection block is established.

90
00:04:31,000 --> 00:04:35,000
Alternatively, we don't add a second argument,

91
00:04:35,000 --> 00:04:37,000
and instead add a then block

92
00:04:37,000 --> 00:04:39,000
to use a promise return by connect,

93
00:04:39,000 --> 00:04:42,000
which also gives us access to the client

94
00:04:42,000 --> 00:04:44,000
once the connection block is established.

95
00:04:44,000 --> 00:04:47,000
That would also allow us to use async await here

96
00:04:47,000 --> 00:04:48,000
if we wanted to.

97
00:04:49,000 --> 00:04:52,000
Now we can only talk to the database

98
00:04:52,000 --> 00:04:53,000
once the connection block is established,

99
00:04:53,000 --> 00:04:57,000
so only inside of this then block here in this case,

100
00:04:57,000 --> 00:04:58,000
so only in this function

101
00:04:58,000 --> 00:05:01,000
where we do have access to the client.

102
00:05:01,000 --> 00:05:04,000
That's also what we see in this quick start guide here.

103
00:05:04,000 --> 00:05:07,000
There they are using the callback function,

104
00:05:07,000 --> 00:05:10,000
but we can use the promise as well.

105
00:05:10,000 --> 00:05:11,000
Now in here we wanna get access

106
00:05:11,000 --> 00:05:14,000
to the concrete database to which we connected,

107
00:05:14,000 --> 00:05:17,000
and we do this by executing client.db.

108
00:05:17,000 --> 00:05:20,000
We could enter the database name here.

109
00:05:20,000 --> 00:05:24,000
But since we already encoded that in the connection string.

110
00:05:24,000 --> 00:05:25,000
We don't need to do that.

111
00:05:25,000 --> 00:05:26,000
We can just leave that blank,

112
00:05:26,000 --> 00:05:28,000
and it will use that database

113
00:05:28,000 --> 00:05:31,000
to which we connected with the connection string.

114
00:05:32,000 --> 00:05:36,000
And once we got hold of the database with the db method,

115
00:05:36,000 --> 00:05:40,000
we can use the database to get access to a collection,

116
00:05:40,000 --> 00:05:43,000
which is like a table in that database

117
00:05:43,000 --> 00:05:45,000
into which we wanna store data.

118
00:05:45,000 --> 00:05:47,000
And that could be the emails collection

119
00:05:47,000 --> 00:05:50,000
in the newsletter database,

120
00:05:50,000 --> 00:05:53,000
which will then hold the individual email addresses.

121
00:05:53,000 --> 00:05:55,000
Now it's that collection

122
00:05:55,000 --> 00:05:58,000
against which we can now run our queries.

123
00:05:58,000 --> 00:06:01,000
For example, the insertOne query

124
00:06:01,000 --> 00:06:06,000
to insert one new entry into that collection.

125
00:06:06,000 --> 00:06:08,000
And entries in collections

126
00:06:08,000 --> 00:06:11,000
are called documents in MongoDB world,

127
00:06:11,000 --> 00:06:15,000
and a document should be a JavaScript object here,

128
00:06:15,000 --> 00:06:19,000
and then it can have any key value pairs of your choice.

129
00:06:19,000 --> 00:06:22,000
And here I'll have an email field let's say,

130
00:06:22,000 --> 00:06:26,000
which just contains that user email value

131
00:06:26,000 --> 00:06:29,000
which I extracted and validated here.

132
00:06:29,000 --> 00:06:32,000
So now I'll insert such a document into this collection.

133
00:06:34,000 --> 00:06:36,000
Now this also returns a promise,

134
00:06:36,000 --> 00:06:39,000
which will let us know once it's done.

135
00:06:39,000 --> 00:06:41,000
And therefore, since we're already in event chain,

136
00:06:41,000 --> 00:06:44,000
we can just return this promise here

137
00:06:45,000 --> 00:06:49,000
to add another then block thereafter and continue.

138
00:06:49,000 --> 00:06:51,000
However, I'll switch to async await now

139
00:06:51,000 --> 00:06:52,000
since that is a bit easier,

140
00:06:52,000 --> 00:06:55,000
and we can't do that by adding async

141
00:06:55,000 --> 00:06:56,000
in front of our handler function

142
00:06:56,000 --> 00:06:59,000
because these API route handler functions

143
00:06:59,000 --> 00:07:03,000
are allowed to be async, they can be async.

144
00:07:03,000 --> 00:07:05,000
So I'll add async here,

145
00:07:05,000 --> 00:07:08,000
and then I'll switch us all to async await

146
00:07:08,000 --> 00:07:11,000
by awaiting the connect method here

147
00:07:11,000 --> 00:07:13,000
and getting my client like this,

148
00:07:14,000 --> 00:07:17,000
and then removing this here and this here.

149
00:07:19,000 --> 00:07:21,000
And then instead of returning here,

150
00:07:21,000 --> 00:07:25,000
I will await this insert operation like that.

151
00:07:27,000 --> 00:07:29,000
So now we're using async await for connecting,

152
00:07:29,000 --> 00:07:31,000
for getting access to the database,

153
00:07:31,000 --> 00:07:33,000
and for inserting one document.

154
00:07:33,000 --> 00:07:35,000
And then once we're done with all of that,

155
00:07:35,000 --> 00:07:37,000
I will send back that status code.

156
00:07:37,000 --> 00:07:39,000
We should just do one other thing.

157
00:07:39,000 --> 00:07:41,000
We should all use the client again

158
00:07:41,000 --> 00:07:46,000
and call close to disconnect from that client.

159
00:07:47,000 --> 00:07:50,000
Now with all of that, we should be inserting

160
00:07:50,000 --> 00:07:54,000
a new email address into that emails collection

161
00:07:54,000 --> 00:07:57,000
in our newsletter database.

162
00:07:57,000 --> 00:08:00,000
If we save all that code now

163
00:08:00,000 --> 00:08:04,000
and we go back to our application to our site

164
00:08:04,000 --> 00:08:06,000
on localhost3000,

165
00:08:07,000 --> 00:08:08,000
let's test this.

166
00:08:08,000 --> 00:08:11,000
Let me enter a new email address and click Register.

167
00:08:11,000 --> 00:08:13,000
And we don't get any feedback here.

168
00:08:13,000 --> 00:08:14,000
We could of course add some,

169
00:08:14,000 --> 00:08:18,000
but let's see whether it worked by going to our cluster,

170
00:08:18,000 --> 00:08:21,000
and there we can click on Collections

171
00:08:21,000 --> 00:08:24,000
to see the collections that are part of this cluster,

172
00:08:24,000 --> 00:08:26,000
and there you should see a newsletter database

173
00:08:26,000 --> 00:08:28,000
with the emails collection.

174
00:08:28,000 --> 00:08:32,000
And then inside of that emails collection here on the right,

175
00:08:32,000 --> 00:08:34,000
you'll see that document which we inserted

176
00:08:34,000 --> 00:08:37,000
with that email address.

177
00:08:37,000 --> 00:08:40,000
It also has an automatically assigned unique ID.

178
00:08:40,000 --> 00:08:44,000
And that shows us that everything works.

179
00:08:44,000 --> 00:08:47,000
We also got no error here in the terminal,

180
00:08:47,000 --> 00:08:50,000
just some warning, which we can't ignore here.

181
00:08:50,000 --> 00:08:52,000
And therefore that is how we can now talk

182
00:08:52,000 --> 00:08:56,000
to a real database to store our emails.

183
00:08:56,000 --> 00:08:57,000
As mentioned, we could now,

184
00:08:57,000 --> 00:08:59,000
again, work on the front end a little bit

185
00:08:59,000 --> 00:09:02,000
and provide a better feedback to the user here,

186
00:09:02,000 --> 00:09:05,000
but I will not dive into that here,

187
00:09:05,000 --> 00:09:08,000
since I wanna focus on these API routes

188
00:09:08,000 --> 00:09:10,000
since it is these API routes

189
00:09:10,000 --> 00:09:12,000
which are the core feature we're looking at here.