Placeholder Image

Subtitles section Play video

  • Hi, I'm Bo.

  • 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.

  • So let's figure out what name was passed in as this parameter here.

  • So we'll do const name equals wreck that you You are l that slice.

  • So this ul we're getting it as a full section here and we're going to slice it and just get the index one of the U R L which will be the name and then we can do to lower case.

  • And then once we have the name, we can connect to the database again.

  • So Mongo client and it's just like before, where we're gonna connect.

  • We're gonna pass in the U R I.

  • We're going to put in this flag here, Use Nuri.

  • I knew you were all part sir True.

  • And then we have our function.

  • So in the function we're gonna air and then we're gonna have a reference to a client and let me scroll this a little bit here.

  • So if there is an error, well, just console that log it just like before else we can do something with that name, So first we'll get it.

  • We'll get it.

  • We'll store the data base in a variable so it d be equals client that d be and will pass in the D B name and then we need the collection.

  • This is just like before Nichols D b that collection names.

  • And remember, if someone puts the word the Lee all in the u R L.

  • We wanted to lead the whole database, so we're gonna check if the name equals, equals equals delete.

  • Oh, and then if it does, then we'll do a collection, not remove.

  • And if we just pass in an empty object, this is going to remove everything, and it's going to leave everything in the collection and then we'll just send a message, which is just database reset, so that should appear on screen.

  • So we know that that happened else.

  • So for any other name here, we'll do collection, not find.

  • So we want to find the item in the collection of the name.

  • So we're gonna pass in name colon name.

  • So the first name is the key in the database, But this name is actually the variable from here.

  • So if the name of the database equals the name we passed in, well, we're gonna convert that to Honore because there could be multiple entries for that name.

  • And we want every single, every single entry that has that name to be returned as a race.

  • We can do something with it here.

  • So the air result and of a row function here and again was just too.

  • If the air, if there isn't a WR, then we'll just console that long the air else Or else if result about Linc Now this If the length is one arm or this evaluates to true if the length zero it evaluates to false.

  • So if there is atleast one result, then we're gonna do this.

  • Const hard get what the card was That's associate with that person.

  • Result result that length minus one.

  • So result that link this is an array index result that link My swan is the last item in that array.

  • And then we want the card name of the item and then we just have to add a plus that p and G because that will be the file name.

  • So now we have the file name of the card and we'll just do rest that sinned file.

  • But instead of seeing an HTML file where it can send a PNG file.

  • So do path that join underscore underscored your name.

  • This is just like before to get the directory the actual full half to that card that PNG file.

  • So you have ah cards directory.

  • Let me get this in a string here, and then we will add the card.

  • Oh, I need to get rid of this in semi Colon and put it here.

  • Okay, We're joining all those things together into one path else.

  • If there's no results, if the result that length equals zero, then we'll send a status of 404 And then the final thing we have to do is he beat up close.

  • Now let's see what?

  • Oh, this is supposed to be a curly brace here.

  • That's a curly brace.

  • And this is a curly brace.

  • So we create all of our variable names, and then we put our middleware.

  • Then we have our routes here in The final thing we need to do is have our database start listening for people to connect to those rounds so the app not listen and then we'll pass in the port that the port number from our variables of above.

  • Consul, the log.

  • Sure.

  • The listening on port.

  • So this message will go to the screen.

  • So we know that the server is now listening on that port.

  • Okay, Now, normally, when you're going to do a project, you're gonna set it up to a work with, uh, local database.

  • Before you start using a database stored on another server, we can skip that step of trying to get this tested locally because we're gonna go right to hosting this on her Roku and using a database that's right on her, Roku.

  • First, let me see if there's any mistakes I have to fix.

  • Oh, yeah, This should actually be spelled close here.

  • And then this word is number.

  • Okay, I'll save, and then we'll go over to Hiroko in the browser.

  • I'm already on the page to create a new app in Harajuku, and we're gonna call this any card which is available now.

  • There can only be one of each name, so this name will be taken.

  • If you're trying to fall along, you'll have toe pick a different name.

  • But I'll do create app.

  • Okay, Now that I've created APP, this actually tells instructions on what to do.

  • So we want a log into her Roku and do her Roku law again.

  • No.

  • Ah, President.

  • He'd open up in the browser tow law again.

  • So do that.

  • And I could just click log in said Now we're logged in tow.

  • Hiroko, you may actually have to download and saw the Broken Seal II had already done that.

  • So we'll look at this.

  • It says initialize a git repositories.

  • And so we'll go back over here and do get a net.

  • We got a new get repositories and it says, too, Run this line right here.

  • Hiroko get remote.

  • So we're setting Hiroko as a remote host for our get repositories.

  • And the next thing it says to do is just, um, doing ad okay.

  • Before we add everything, we're going to add a get ignore file and ignore our nor node Modules directory.

  • So I'll do new file and do get a nor and then we'll just add node modules.

  • So now do you get ad and then we can go to this one that get commit a m.

  • We're just going off these directions here, even though ah, I think a lot of You probably know the different commands here, but we'll do it first.

  • Commit in.

  • The last thing that recommends doing is get pushed her Roku master, so we'll run that.

  • Okay, now that that's done, we're going to add our database.

  • We can do that right from the command line with her Roku add ons create mongo lab.

  • Okay, we have one final thing we need to do, which is to make sure our environmental variables are all set up.

  • So I'm in the Hiroko dashboard on the settings tab, and if I click, reveal config bars.

  • Now, the convict, these config bars are the environmental variables.

  • Now, this is automatically put in for us when we set up.

  • Mongol lab has the Mongol de bur I as this you are.

  • I hear we still need to create the d B name.

  • So the D B name is actually right in this.

  • Your I I just have to copy this section right here.

  • Now it will be different for you than for me because this is all randomly generated.

  • So I'm going to copy the section between these slashes and that colon.

  • Ah, copy and just paste in the value here and then click.

  • Add.

  • Now, if I've done everything correctly, our app should work now.

  • So let's give it a test, Okay?

  • Now I'm to my ap u r l Any car Doctorow co at that com slash secret.

  • And if I type in a name here and then I can choose the three of spades.

  • If I click, submit here and we haven't air.

  • Okay, well, I'm going to copy my Roku logs slash us tailed your dash desk tail.

  • I can put into my command line over here.

  • I'll paste this in, and then I can see the Hiroko logs, and it should tell us what the problem waas TV That close is not a function now.

  • Did I spell something wrong here?

  • Oh, okay.

  • I see what we did wrong.

  • Okay, so this this is a client here.

  • So down here, when I when we do d be that close, it should be client that close.

  • And then same with down here.

  • Client that should fix it.

  • So if I save this and then I am going to go out of this, um, get ad now, get commit message, update server, and then I'll go to the Get her Push, Hiroko.

  • Master Hope.

  • Can you go back over to my browser and load this again?

  • Type in my name.

  • Bo.

  • Ah, Bo.

  • And then Ace of Diamonds Smith, This incident a database.

  • So if I go toe Bo here, it should show ace of diamonds.

  • It worked.

  • Now, if I should go to another name like Quincy not found so any other name is going to be not found.

  • If I do delete.

  • Oh, database reset.

  • If I go to a secret again, it will go to this page again so I can make this magic trick work.

  • All I have to do is ask someone to pick a card.

  • And then I have my co conspirator, or my helper would type in their name like Quincy and then put the number.

  • Maybe was the seven of spades Click, submit.

  • And then when I have my person would go to the u r l.

  • Slash their name, it's going to show the card they chose.

  • So everything worked.

  • So you can try this out with your own deck of cards or you can purchase the freak.

  • Oh, camp deck of cards.

  • Like I said, the link is in the description.

  • Well, thanks for watching.

Hi, I'm Bo.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it