So let's add a real database now.
And for this, I'll again use MongoDB,
because it's easy to use, very popular, scalable,
works great with JavaScript,
and we can get started for free.
So for this, let's visit mongodb.com
and there, again, create an account
if you don't have one yet.
We did already create one
in the last course sections though,
so you can probably just log in with that.
Make sure you have a look at those previous sections
where we did already work with MongoDB if you skipped those,
before you continue with this lecture.
So here I did log in again,
and that brings me to my clusters.
We're using MongoDB Atlas again
since that's this cloud offering
with which we can get started with for free.
And here we already got a cluster set up
quickly double check that you do have
your local IP white listed.
If not, make sure you add it under Network Access,
so that your local server,
your local machine can talk to that database,
and make sure you also have at least one user
with a read and write access,
and that you know the credentials of that user.
Once all of that is set up,
we can use MongoDB in our API route.
And for this, we'll first of all quit the development server
and install another third party package,
the MongoDB package,
which is that official MongoDB driver,
which we need to talk to the database.
And then we can start the development server again.
With that installed in our contact API route,
we can use MongoDB.
Here we can import something from MongoDB,
and that something which we import is the MongoClient,
which we need for connecting and interacting.
Now I wanna connect to the database
after we've validated everything
and once we have our object here which we wanna store.
So then I'll go ahead and use MongoClient,
instead of console logging,
to connect to the database.
Now connect once a connection string,
and we get that by clicking our Cluster,
Connect, Connect your application,
and taking that string.
So that is the connection string we wanna use here.
And now here we need to plug in
values for a username, password, and database name.
For the database name, you can use any name you want.
I'll use my-site.
So that's the database
which will be created automatically my MongoDB
will be called my-site.
Now for the user data,
I have a username Maximilian,
and I'll quickly create a new password here,
and update that user.
And hence, here I will use that username
without the angle brackets,
and use that password for that user.
And that should then enable MongoDB to connect.
Now connect needs a call back
or we use the promise, which had returns,
and I'll do the later with then or with async await,
and I'll use async await here.
So I will convert my handler function
into an async function by adding the async keyword,
and then we can await this connection here.
And we get the connected client once this is done.
Now this could fail, so we could already wrap that
into a try-catch block like this,
and catch any potential errors we might be getting
to return and not continue with the function execution
if we have an error,
and send back a response with a 500 status code,
which means that something went wrong on the server,
and then a message which we either extract from that error
or to not give such information away to our front end users
simply some generic data message,
like, "Could not connect to database,"
something like this.
Now I'll convert my client into a variable,
which has the write scope.
And hence now after this try-catch block,
we have a connection and we can continue.
Now here we wanna use that connection to insert data.
So therefore here we can use the client
to get access to the database to which we connected here,
my-site.
We could also switch to a different database
by passing its name as an argument,
but I'll stick to the connected database here.
So then we get access to that database.
Oops, that should be const.
And then we can interact with that database.
Now in MongoDB, data is stored in so-called connections,
and hence the db object has a collection method
which allows us to work on a specific collection.
Now the collection name is up to you.
It will be created on the fly if it doesn't exist yet,
and I'll name it messages.
So now I'll interact with the messages collection.
And on that collection, I wanna insert one new document,
and that new document
is this newMessage we construct up there, this object.
That is the document that should be inserted
into this collection.
Now we can await this operation
because it's asynchronous and returns a promise,
and we'll then get our result of this operation eventually.
Again, this could fail,
so we can already wrap it with try-catch,
catch any errors here.
And if we have an error, return and not continue.
Close the connection though with client.close,
and send back a response with a 500 status code
with some data where we have message of
"Storing message failed," or anything like that.
But maybe we also succeeded.
And in that case, we'll send back that success response.
We can also tweak our new message here,
and add an ID field or _id, whatever you want,
and set this equals to result.insertedId
to have that automatically generated ID
inserted into that message object
after the message was inserted in the database.
And then we send back that success response in the end.
This now should work.
This should insert a message into the database.
The only remaining thing I wanna do here
is I also want to close the connection in the success case.
And now with those challenges made,
if we give this a try,
if we try submitting this message again here,
so if you reload this page maybe and then test it again,
does this work?
And I sent this message.
I got no error here.
That's good.
Just some warnings, which we can ignore.
And if we have a look at our database at the Cluster
and we click on Collections there,
we can look into the collections we have here.
And there we'll now see the my-site database
with a messages collection
which indeed does contain that one message I just submitted.
So storing that data in a database works,
and now we are using MongoDB for that.
Now what we're not doing here
is we're not having any logic for a fetching data.
That is some functionality which we implemented
earlier in the course already.
We don't really need it here
because the messages which are submitted
should not be shown to the visitors of our page,
hence we don't need to fetch and load them here.
Instead, just having them in the database is nice,
and we either then build some kind of
administration interface for ourselves, the owner,
to fetch the data there,
or we just dive into the database
to read messages user sent us here,
and to then delete them once we read them.
That could also be a viable option
if we as the owner are the only one who needs to read them.
And then after were done here
in our application, in our project,
sending messages is enough and that works.
Now let's work on the front end again.
Let's make sure that we give the user some feedback
about what's going on and of course let's make sure
that we handle success and error cases.