1
00:00:02,000 --> 00:00:04,000
So let's add a real database now.

2
00:00:04,000 --> 00:00:07,000
And for this, I'll again use MongoDB,

3
00:00:07,000 --> 00:00:10,000
because it's easy to use, very popular, scalable,

4
00:00:10,000 --> 00:00:11,000
works great with JavaScript,

5
00:00:11,000 --> 00:00:14,000
and we can get started for free.

6
00:00:14,000 --> 00:00:16,000
So for this, let's visit mongodb.com

7
00:00:16,000 --> 00:00:18,000
and there, again, create an account

8
00:00:18,000 --> 00:00:20,000
if you don't have one yet.

9
00:00:20,000 --> 00:00:21,000
We did already create one

10
00:00:21,000 --> 00:00:23,000
in the last course sections though,

11
00:00:23,000 --> 00:00:26,000
so you can probably just log in with that.

12
00:00:26,000 --> 00:00:30,000
Make sure you have a look at those previous sections

13
00:00:30,000 --> 00:00:34,000
where we did already work with MongoDB if you skipped those,

14
00:00:34,000 --> 00:00:36,000
before you continue with this lecture.

15
00:00:37,000 --> 00:00:39,000
So here I did log in again,

16
00:00:39,000 --> 00:00:42,000
and that brings me to my clusters.

17
00:00:42,000 --> 00:00:44,000
We're using MongoDB Atlas again

18
00:00:44,000 --> 00:00:46,000
since that's this cloud offering

19
00:00:46,000 --> 00:00:49,000
with which we can get started with for free.

20
00:00:49,000 --> 00:00:52,000
And here we already got a cluster set up

21
00:00:52,000 --> 00:00:55,000
quickly double check that you do have

22
00:00:55,000 --> 00:00:57,000
your local IP white listed.

23
00:00:57,000 --> 00:01:01,000
If not, make sure you add it under Network Access,

24
00:01:01,000 --> 00:01:03,000
so that your local server,

25
00:01:03,000 --> 00:01:07,000
your local machine can talk to that database,

26
00:01:07,000 --> 00:01:09,000
and make sure you also have at least one user

27
00:01:09,000 --> 00:01:11,000
with a read and write access,

28
00:01:11,000 --> 00:01:14,000
and that you know the credentials of that user.

29
00:01:15,000 --> 00:01:17,000
Once all of that is set up,

30
00:01:17,000 --> 00:01:21,000
we can use MongoDB in our API route.

31
00:01:21,000 --> 00:01:24,000
And for this, we'll first of all quit the development server

32
00:01:24,000 --> 00:01:26,000
and install another third party package,

33
00:01:26,000 --> 00:01:29,000
the MongoDB package,

34
00:01:29,000 --> 00:01:31,000
which is that official MongoDB driver,

35
00:01:31,000 --> 00:01:34,000
which we need to talk to the database.

36
00:01:34,000 --> 00:01:37,000
And then we can start the development server again.

37
00:01:38,000 --> 00:01:41,000
With that installed in our contact API route,

38
00:01:41,000 --> 00:01:43,000
we can use MongoDB.

39
00:01:43,000 --> 00:01:46,000
Here we can import something from MongoDB,

40
00:01:46,000 --> 00:01:50,000
and that something which we import is the MongoClient,

41
00:01:50,000 --> 00:01:53,000
which we need for connecting and interacting.

42
00:01:54,000 --> 00:01:56,000
Now I wanna connect to the database

43
00:01:56,000 --> 00:01:58,000
after we've validated everything

44
00:01:58,000 --> 00:02:03,000
and once we have our object here which we wanna store.

45
00:02:03,000 --> 00:02:07,000
So then I'll go ahead and use MongoClient,

46
00:02:07,000 --> 00:02:09,000
instead of console logging,

47
00:02:10,000 --> 00:02:13,000
to connect to the database.

48
00:02:13,000 --> 00:02:16,000
Now connect once a connection string,

49
00:02:16,000 --> 00:02:18,000
and we get that by clicking our Cluster,

50
00:02:18,000 --> 00:02:21,000
Connect, Connect your application,

51
00:02:21,000 --> 00:02:22,000
and taking that string.

52
00:02:23,000 --> 00:02:27,000
So that is the connection string we wanna use here.

53
00:02:27,000 --> 00:02:28,000
And now here we need to plug in

54
00:02:28,000 --> 00:02:33,000
values for a username, password, and database name.

55
00:02:33,000 --> 00:02:35,000
For the database name, you can use any name you want.

56
00:02:35,000 --> 00:02:38,000
I'll use my-site.

57
00:02:38,000 --> 00:02:39,000
So that's the database

58
00:02:39,000 --> 00:02:43,000
which will be created automatically my MongoDB

59
00:02:43,000 --> 00:02:45,000
will be called my-site.

60
00:02:46,000 --> 00:02:49,000
Now for the user data,

61
00:02:49,000 --> 00:02:51,000
I have a username Maximilian,

62
00:02:51,000 --> 00:02:54,000
and I'll quickly create a new password here,

63
00:02:56,000 --> 00:02:58,000
and update that user.

64
00:02:58,000 --> 00:03:01,000
And hence, here I will use that username

65
00:03:01,000 --> 00:03:04,000
without the angle brackets,

66
00:03:04,000 --> 00:03:07,000
and use that password for that user.

67
00:03:07,000 --> 00:03:09,000
And that should then enable MongoDB to connect.

68
00:03:10,000 --> 00:03:12,000
Now connect needs a call back

69
00:03:12,000 --> 00:03:15,000
or we use the promise, which had returns,

70
00:03:15,000 --> 00:03:19,000
and I'll do the later with then or with async await,

71
00:03:19,000 --> 00:03:21,000
and I'll use async await here.

72
00:03:21,000 --> 00:03:24,000
So I will convert my handler function

73
00:03:24,000 --> 00:03:27,000
into an async function by adding the async keyword,

74
00:03:27,000 --> 00:03:31,000
and then we can await this connection here.

75
00:03:31,000 --> 00:03:34,000
And we get the connected client once this is done.

76
00:03:36,000 --> 00:03:39,000
Now this could fail, so we could already wrap that

77
00:03:39,000 --> 00:03:42,000
into a try-catch block like this,

78
00:03:42,000 --> 00:03:45,000
and catch any potential errors we might be getting

79
00:03:45,000 --> 00:03:49,000
to return and not continue with the function execution

80
00:03:49,000 --> 00:03:51,000
if we have an error,

81
00:03:51,000 --> 00:03:55,000
and send back a response with a 500 status code,

82
00:03:55,000 --> 00:03:58,000
which means that something went wrong on the server,

83
00:03:58,000 --> 00:04:02,000
and then a message which we either extract from that error

84
00:04:02,000 --> 00:04:06,000
or to not give such information away to our front end users

85
00:04:06,000 --> 00:04:09,000
simply some generic data message,

86
00:04:09,000 --> 00:04:13,000
like, "Could not connect to database,"

87
00:04:13,000 --> 00:04:15,000
something like this.

88
00:04:15,000 --> 00:04:19,000
Now I'll convert my client into a variable,

89
00:04:19,000 --> 00:04:21,000
which has the write scope.

90
00:04:21,000 --> 00:04:23,000
And hence now after this try-catch block,

91
00:04:23,000 --> 00:04:27,000
we have a connection and we can continue.

92
00:04:27,000 --> 00:04:31,000
Now here we wanna use that connection to insert data.

93
00:04:31,000 --> 00:04:34,000
So therefore here we can use the client

94
00:04:34,000 --> 00:04:38,000
to get access to the database to which we connected here,

95
00:04:38,000 --> 00:04:40,000
my-site.

96
00:04:40,000 --> 00:04:42,000
We could also switch to a different database

97
00:04:42,000 --> 00:04:44,000
by passing its name as an argument,

98
00:04:44,000 --> 00:04:47,000
but I'll stick to the connected database here.

99
00:04:47,000 --> 00:04:49,000
So then we get access to that database.

100
00:04:50,000 --> 00:04:52,000
Oops, that should be const.

101
00:04:52,000 --> 00:04:55,000
And then we can interact with that database.

102
00:04:55,000 --> 00:05:00,000
Now in MongoDB, data is stored in so-called connections,

103
00:05:00,000 --> 00:05:03,000
and hence the db object has a collection method

104
00:05:03,000 --> 00:05:06,000
which allows us to work on a specific collection.

105
00:05:06,000 --> 00:05:08,000
Now the collection name is up to you.

106
00:05:08,000 --> 00:05:11,000
It will be created on the fly if it doesn't exist yet,

107
00:05:11,000 --> 00:05:14,000
and I'll name it messages.

108
00:05:14,000 --> 00:05:17,000
So now I'll interact with the messages collection.

109
00:05:17,000 --> 00:05:22,000
And on that collection, I wanna insert one new document,

110
00:05:22,000 --> 00:05:23,000
and that new document

111
00:05:23,000 --> 00:05:28,000
is this newMessage we construct up there, this object.

112
00:05:28,000 --> 00:05:31,000
That is the document that should be inserted

113
00:05:31,000 --> 00:05:32,000
into this collection.

114
00:05:34,000 --> 00:05:36,000
Now we can await this operation

115
00:05:36,000 --> 00:05:40,000
because it's asynchronous and returns a promise,

116
00:05:40,000 --> 00:05:44,000
and we'll then get our result of this operation eventually.

117
00:05:45,000 --> 00:05:46,000
Again, this could fail,

118
00:05:46,000 --> 00:05:49,000
so we can already wrap it with try-catch,

119
00:05:51,000 --> 00:05:53,000
catch any errors here.

120
00:05:53,000 --> 00:05:56,000
And if we have an error, return and not continue.

121
00:05:58,000 --> 00:06:00,000
Close the connection though with client.close,

122
00:06:00,000 --> 00:06:05,000
and send back a response with a 500 status code

123
00:06:05,000 --> 00:06:08,000
with some data where we have message of

124
00:06:08,000 --> 00:06:12,000
"Storing message failed," or anything like that.

125
00:06:13,000 --> 00:06:15,000
But maybe we also succeeded.

126
00:06:15,000 --> 00:06:19,000
And in that case, we'll send back that success response.

127
00:06:19,000 --> 00:06:22,000
We can also tweak our new message here,

128
00:06:22,000 --> 00:06:26,000
and add an ID field or _id, whatever you want,

129
00:06:27,000 --> 00:06:30,000
and set this equals to result.insertedId

130
00:06:30,000 --> 00:06:33,000
to have that automatically generated ID

131
00:06:33,000 --> 00:06:36,000
inserted into that message object

132
00:06:36,000 --> 00:06:38,000
after the message was inserted in the database.

133
00:06:39,000 --> 00:06:43,000
And then we send back that success response in the end.

134
00:06:43,000 --> 00:06:45,000
This now should work.

135
00:06:45,000 --> 00:06:48,000
This should insert a message into the database.

136
00:06:48,000 --> 00:06:50,000
The only remaining thing I wanna do here

137
00:06:50,000 --> 00:06:54,000
is I also want to close the connection in the success case.

138
00:06:55,000 --> 00:06:58,000
And now with those challenges made,

139
00:06:58,000 --> 00:07:00,000
if we give this a try,

140
00:07:00,000 --> 00:07:04,000
if we try submitting this message again here,

141
00:07:04,000 --> 00:07:08,000
so if you reload this page maybe and then test it again,

142
00:07:08,000 --> 00:07:10,000
does this work?

143
00:07:11,000 --> 00:07:12,000
And I sent this message.

144
00:07:13,000 --> 00:07:15,000
I got no error here.

145
00:07:15,000 --> 00:07:16,000
That's good.

146
00:07:16,000 --> 00:07:18,000
Just some warnings, which we can ignore.

147
00:07:18,000 --> 00:07:22,000
And if we have a look at our database at the Cluster

148
00:07:22,000 --> 00:07:25,000
and we click on Collections there,

149
00:07:25,000 --> 00:07:28,000
we can look into the collections we have here.

150
00:07:28,000 --> 00:07:30,000
And there we'll now see the my-site database

151
00:07:30,000 --> 00:07:32,000
with a messages collection

152
00:07:32,000 --> 00:07:37,000
which indeed does contain that one message I just submitted.

153
00:07:37,000 --> 00:07:40,000
So storing that data in a database works,

154
00:07:40,000 --> 00:07:44,000
and now we are using MongoDB for that.

155
00:07:44,000 --> 00:07:45,000
Now what we're not doing here

156
00:07:45,000 --> 00:07:49,000
is we're not having any logic for a fetching data.

157
00:07:49,000 --> 00:07:52,000
That is some functionality which we implemented

158
00:07:52,000 --> 00:07:54,000
earlier in the course already.

159
00:07:54,000 --> 00:07:56,000
We don't really need it here

160
00:07:56,000 --> 00:07:58,000
because the messages which are submitted

161
00:07:58,000 --> 00:08:01,000
should not be shown to the visitors of our page,

162
00:08:01,000 --> 00:08:05,000
hence we don't need to fetch and load them here.

163
00:08:05,000 --> 00:08:08,000
Instead, just having them in the database is nice,

164
00:08:08,000 --> 00:08:11,000
and we either then build some kind of

165
00:08:11,000 --> 00:08:15,000
administration interface for ourselves, the owner,

166
00:08:15,000 --> 00:08:17,000
to fetch the data there,

167
00:08:17,000 --> 00:08:19,000
or we just dive into the database

168
00:08:19,000 --> 00:08:22,000
to read messages user sent us here,

169
00:08:22,000 --> 00:08:24,000
and to then delete them once we read them.

170
00:08:24,000 --> 00:08:26,000
That could also be a viable option

171
00:08:26,000 --> 00:08:30,000
if we as the owner are the only one who needs to read them.

172
00:08:30,000 --> 00:08:32,000
And then after were done here

173
00:08:32,000 --> 00:08:35,000
in our application, in our project,

174
00:08:35,000 --> 00:08:39,000
sending messages is enough and that works.

175
00:08:39,000 --> 00:08:41,000
Now let's work on the front end again.

176
00:08:41,000 --> 00:08:44,000
Let's make sure that we give the user some feedback

177
00:08:44,000 --> 00:08:47,000
about what's going on and of course let's make sure

178
00:08:47,000 --> 00:08:50,000
that we handle success and error cases.