And I am going to show you how to program a magic trick using know Js and mongo d be We're gonna be using these freak Oh, camp playing cards.

So, freak.

Oh, camp has a some playing cards that you can actually buy.

So the link is in the description if you want to get your own copy, but check out these playing cards.

Each card has a different programmer.

A different important programmer from history.

These air pretty cool got Larry.

Well, Adele Goldberg.

And there's all sorts of different programmers from history.

So I'm about to perform the magic trick on my friend, and then we'll show you how it works.

And then this is gonna be a coating tutorial.

I'll show you how to code this trick using know Js and Mama D B and will deploy it to Hiroki.

So let's see the trick.

Okay.

Killed.

I have a card trick to show you.

Okay, I have these freak Oh, camp playing cards, all right.

And what I'm gonna do is have you pick any card that you want.

Okay?

Pick any card.

Are you sure?

Okay.

What are you Can you can tell us.

You can tell everyone with Carter.

What is Richard Stone?

A six.

OK, so it's six.

And it's a space six of space.

It's okay.

So this is what we're gonna do.

I made a program that's going to be able to figure out what your card is.

So, yeah, I have ever ipad here as a fun kid case, and I'm gonna have you go to a website.

Are you with that type in that the u R L It's gonna be, you see?

Yeah.

There s So you're gonna type in the word any car, tow A N Y c a r d.

Anything I do dot Okay.

And then a type of heroic UAP you spelled h e r a u a t r o t h e r o Okay, you a p p dot com Now you do a slash slapped on the keyboard.

I will go.

That's now type in your name.

Caleb Gonzales.

Just kill him Now.

Press go.

Let's go.

Card.

What do you show a show to the camera?

Six of spades.

Cody.

It's like magic.

OK?

One thing you may not have noticed.

My wife was in the background and she was typing something into her phone.

So this trick, actually, you do need to have an accomplice that could help out with this trick.

It doesn't have the right next to you.

You could actually have someone far away if as long as they can hear recording of what's happening.

But my wife was actually putting in some information into the website that gets stored on the Mondo DI B database.

So then when my friend went to the certain website with his name, it would not have worked with any other name, just his name.

Specifically, it gets the data from the Mongo D B database so we could display the card that he chose.

So let's go into the computer.

The code editors.

You can see how this works.

First, I'll show you how this any card app works, and then we'll start coating it from scratch.

So we went to the U R.

L flee this the route you are l and then slash secret.

This is where your person that's helping you, the website that they go to So we're gonna enter a name.

I'll put Bo That's my name.

And then If they say whatever the card that the spectator picks, your helpers gonna go to four.

Let's say it's four of spades and then just do submit.

Now, if we go to slash bo, we should see four of spades.

But if we go to another name like Quincy, it'll just show not found, because that hasn't been entered into the database.

And then also, if you ever want to delete everything, we can just go to delete all and the debt database reset.

So now if I go to Bo, it will not show anything.

So it's a pretty simple app, but it can make a pretty impressive magic trick when you go to perform it on somebody.

So let's start building this from scratch.

I'll go over into visual studio code.

I've already created a folder and then inside the folder that's called any card I created server dot Js.

Another thing I have already done is copied in this card's directory, and this just has an image of each card that can be chosen by the spectator so you can get a link to all these files right in the description of the video here.

So let me go back into our server file server dot Js and we're going to start cutting.

But actually, before we start quoting, let's set up some things.

Um, since we're going to be using node and we're going to be using some packages, I'm going to have Thio set up a pack.

Is that Jason?

Jason file.

So I have this terminal open down at the bottom here.

I'm going to m p M and Net Dash.

Why?

And that's going to just create my package that Jason file.

And it just says yes to all the questions.

So now that we've done that, we can install some things.

So do MPM.

Install will be using, Let's see, express body part, sir, and mongo D B.

So we just installed at and now we can start working on our server.

So the first thing we're just going to require a lot of things at the beginning.

Okay, we got all this initial set up.

Don, let's go over this.

We've required express Now, this is a Web server for know Js.

So it makes it easier to set up a Web server pretty quickly and then we're going to be using the Web server and app here.

You'll see that later path.

This is going to allow us to get the the route path that a file is stored in, um, on our inner directory.

You'll see that in a second when we have body parts, sir, this extracts the entire body portion of an incoming request stream and exposes it on the wrecked up body.

As some has easier to interface with what it basically means it.

It makes it much simpler to deal with data coming in from forms.

And we have a form right on our page.

So well, you know about mongo d be we're gonna be anchoring, interacting with among you to be database.

So we get this Mongol client from mongo D B Now this u r l or actually, let's call this u R I and we can even I must just put this all capital capitalized.

So this is our an environment variable, which is where our database is.

So we're actually gonna set this up right?

And right.

And Roku, this environment variable in the Mongol doobie database, so we'll do that later, and then our server is going to be running on this port, which is you.

They're gonna be at this environment variable or port 5000.

And I'm gonna add one more variable, Const.

And this is going to be the d be named the database name.

And this is going to be an environment variable.

So due process that he envy that d be name.

These will be set in Hiroko later.

So now we need to include our middle where the body partial middleware soul do ap dot use and then I'll just pass in body parts.

Sir, you are Ellen coded.

And then I have to put extended false.

And then one more thing with the body part, sir.

Now this body parts or think that you are encoded and the Jason this is something to help.

The forms will be able to send the form data correctly to our server.

Now we'll create our first route.

So do ap dot Get this is going to be an http get request, which is the normal type of request.

When you go to a website, where do we get request?

So the route is going to be slashed secret.

So if a person goes to the secret route.

That's where they can get the form to enter the card that the user has chosen.

We will make this request Aargh function.

So after we go to that route, then it's going to run this function here, and it's going to do rez that send file and it's going to center a CML file.

We're gonna do path dot join underscore your name secret?

Uh, a C M L.

So what this is doing is it's finding the root directory where we're storing our all of our files and then adding secret the html on the end.

Actually, I already created that file.

So when you go to slash secret and it's going to send this file to the user as this file right here now I'll put a link in the description where you can get this file directly.

I didn't I think I should just type all this in because it's a lot of repetitive stuff.

But this is the form that a user will see, and you can see the form action is to post to slash secret, which is the same route that were on but where this would be a post request instead of a get request to the slash secret and you can see they can imp put the their name and then it's just dropped on box for the number and then a drop down box for the suit and then a submit button.

So let's go back over to our server here.

So our first round ISS last secret and our second route is also slashed secret.

But it's going to be a post request.

And this is where after someone fills in the form, they will submit the formed attitude this route here so secret, and it's going to start off the same.

So do a wreck rez.

And this is not just gonna be a one line thing.

This is going to be multiple lines.

So once someone submits the data, it's going to have to connect to the Mongol database.

So this is this where we're going to use the Mongo client and will connect, and we'll pass in the U.

R I variable because that's the where the databases that were connecting to and then I have to pass on this flag.

Use New Ul Par, sir.

Now, this is just something you have to do because things were updated.

And now there's this new your help.

Our sir, That's important to use.

So pretty much all new databases they were connecting to You're gonna pass, then this new your help, our sir.

And then I will put in the function.

So the result Ah, well, have, ah, error.

And then we'll have the database that we get as a result of connecting to this.

And what we're gonna do here is check if there's an air.

So if there's an air, then we'll just do something simple.

We're just going to counsel that log it.

But if there's not an heir, then we're going to get access to the database.

So Const.

D B.

And that reminds me, actually, this d B should really be a client, and then we access the d be down here.

The database constant B equals client, not D B.

And then we pass in the database name, which is just our environment variable.

And then we have to get access to the collection of the database, so I'll do a collection equals D beat out collection names.

Now, the this collection that we're calling names you can call it anything here and the first time you access it, it's going to create it if it doesn't already exist.

And now we have two career entry that we got put into the database.

So do const.

Entry, and we're gonna have a name which is just gonna be wreck that body named that too lower case.

So from the request, the http requests we're gonna get the body and them the name because women were passing in a name and a card or a name and a number.

So we get the name here, and then we convert it to lower case, and that really should be a common here.

And then the card is going to just be wreck that body, That number.

And so then we passed a number in a suit, and we're gonna combine the number of the suit to the card name that corresponds to our files and our cards directory.

So we'll do a number plus of so we'll be like three of hearts.

So the next part is going to be wreck that body suit.

Okay, now we've created an entry, and we just have to insert that so I'll do a collection insert one because we're entering one item into the collection and then we're gonna pass in entry.

That's entry we just created.

And then we'll have a function here.

So this is an aero function, air and result.

And in this, if there is an error, then we can just consul dot log the air else we'll send something back rez dot send and we'll just insane back a string inserted into database so that they'll just show up on the screen, that string.

And then we have to make sure to close the database.

So the D b dot clothes at the end here.

Now we have to create our other route.

So one of the other route is if someone goes to the u.

R L and then puts a person's name at the end, so do ap dot get and this where we can put a variable right in the route.

So do slash and then colon Paramus.

And then I'll put a star ass trick here, and this becomes a variable.

So a route with a variable at the end.

And then we have our function wreck rez.

This hero function here, and we could do something with the information we get from from the route.