Original subtitles

So let's now connect

to our MongoDB cluster and let's,

well, run some code against it,

and let's maybe start with the newsletter API route.

I will bring back my development server with npm rundef.

And now here in the newsletter API route,

I wanna store that email address in a table

or, as it's called in MongoDB, a collection

of email addresses.

So that we have a collection of email addresses

stored in the database,

and that then could be used by us to send out newsletters

and emails of any kind to those registered users.

Now to do that, we need to do two things.

We need to connect to the database.

And once we are connected, we need to run an insert command

to insert the email address into some collection.

Now we can learn more about that on the official docs,

and also on the npm docs of the MongoDB Driver already.

If we scroll down to Quick Start,

there we see that we have some code here for connecting.

And then when we are connected,

we can insert documents as they are called,

so entries into the collection with insertMany

or also with another command which we'll see.

So let's connect to MongoDB.

And for that, we can use this code.

Though we can also adjust it here in newsletter.js,

we can use ES module imports,

and we can import something from MongoDB like this.

And the something I wanna import is MongoClient,

between curly braces.

With that imported,

we can use it down here to set up a connection.

So here we can then use MongoClient.

And as we see here in the docs,

called the connect method to connect to a database.

So here I'll then call connect.

And now we need to pass in our connection URL.

Now for that, we go back to the cluster

because here we got this URL.

So we can copy this URL here.

And I got there by clicking on Connect,

and then connect your application.

So I'll copy that URL and paste it in here as a string.

Now here we need to fill in a user name, a password,

and a database name.

Now for a username and password,

you should go to Database Access here

and add a new database user with password

with any username or password of your choice,

so fill in any values here,

and then with read and write access to any database.

Now I already did create such a user.

So I'll just edit my existing user

and assign a new password,

which I'll also change once this recording is done,

so you can't use that user and that password.

So I will use that user and password.

And hence here in my case,

I'll use Maximilian as a username.

Make sure to also get rid of those angle brackets here

in those placeholders,

and plug in my password as well.

Now for the database name,

you can choose any database name you want

because that database of that name

will then be created automatically

once you start sending queries.

And here I'll name it newsletter.

Now there's one other setting we need to adjust.

In MongoDB Atlas, under Network Access,

you wanna add an IP address

and make sure that you add your current IP address

to that white list here.

You should do that to ensure

that your local machine is able to send requests

to that MongoDB Atlas cluster.

Once you deploy your application,

you wanna make sure that the server

you deployed your site to is white listed here.

Otherwise, incoming requests will be blocked.

So that's something we need to do.

And with that, we get this connect string configured.

Now the connect method takes a second argument,

which is a call back,

which gives us access to the connected client,

so to the cluster in the end

once the connection block is established.

Alternatively, we don't add a second argument,

and instead add a then block

to use a promise return by connect,

which also gives us access to the client

once the connection block is established.

That would also allow us to use async await here

if we wanted to.

Now we can only talk to the database

once the connection block is established,

so only inside of this then block here in this case,

so only in this function

where we do have access to the client.

That's also what we see in this quick start guide here.

There they are using the callback function,

but we can use the promise as well.

Now in here we wanna get access

to the concrete database to which we connected,

and we do this by executing client.db.

We could enter the database name here.

But since we already encoded that in the connection string.

We don't need to do that.

We can just leave that blank,

and it will use that database

to which we connected with the connection string.

And once we got hold of the database with the db method,

we can use the database to get access to a collection,

which is like a table in that database

into which we wanna store data.

And that could be the emails collection

in the newsletter database,

which will then hold the individual email addresses.

Now it's that collection

against which we can now run our queries.

For example, the insertOne query

to insert one new entry into that collection.

And entries in collections

are called documents in MongoDB world,

and a document should be a JavaScript object here,

and then it can have any key value pairs of your choice.

And here I'll have an email field let's say,

which just contains that user email value

which I extracted and validated here.

So now I'll insert such a document into this collection.

Now this also returns a promise,

which will let us know once it's done.

And therefore, since we're already in event chain,

we can just return this promise here

to add another then block thereafter and continue.

However, I'll switch to async await now

since that is a bit easier,

and we can't do that by adding async

in front of our handler function

because these API route handler functions

are allowed to be async, they can be async.

So I'll add async here,

and then I'll switch us all to async await

by awaiting the connect method here

and getting my client like this,

and then removing this here and this here.

And then instead of returning here,

I will await this insert operation like that.

So now we're using async await for connecting,

for getting access to the database,

and for inserting one document.

And then once we're done with all of that,

I will send back that status code.

We should just do one other thing.

We should all use the client again

and call close to disconnect from that client.

Now with all of that, we should be inserting

a new email address into that emails collection

in our newsletter database.

If we save all that code now

and we go back to our application to our site

on localhost3000,

let's test this.

Let me enter a new email address and click Register.

And we don't get any feedback here.

We could of course add some,

but let's see whether it worked by going to our cluster,

and there we can click on Collections

to see the collections that are part of this cluster,

and there you should see a newsletter database

with the emails collection.

And then inside of that emails collection here on the right,

you'll see that document which we inserted

with that email address.

It also has an automatically assigned unique ID.

And that shows us that everything works.

We also got no error here in the terminal,

just some warning, which we can't ignore here.

And therefore that is how we can now talk

to a real database to store our emails.

As mentioned, we could now,

again, work on the front end a little bit

and provide a better feedback to the user here,

but I will not dive into that here,

since I wanna focus on these API routes

since it is these API routes

which are the core feature we're looking at here.