Creating a New App on Heroku with MongoDB Lab

To start, we need to create a new app on Heroku. This can be done by going to the Heroku website and clicking on "Create a new app". The app name is important, as there can only be one app with each given name. In this case, we'll call our app "anyCard". Once we've created the app, Heroku will guide us through the process of setting up the app.

The first step is to log in to Heroku and run `heroku login` to open up a new browser window where you can enter your credentials. After logging in, Heroku provides instructions on what to do next. We'll follow these instructions to create a Git repository for our app. The first step is to initialize a Git repository by running `git init`. This will create a new directory called `.git` that contains all of the files necessary for our Git repository.

Next, we need to add Heroku as a remote host for our Git repository. We can do this by running `git remote add heroku `. After adding Heroku as a remote host, we'll create a new branch in our Git repository and add all of the files to it. This includes ignoring certain directories, such as `.gitignore` and `node_modules`, which we don't want to be committed to our Git repository.

We'll also need to commit all of the changes to our Git repository using `git commit`. The first commit will include all of the files that are currently in our Git repository. After committing, we can push our changes to Heroku using `git push heroku master`.

Now that we have a new app on Heroku, we need to set up our database. We'll use MongoDB Lab, which is a free service provided by MongoDB that allows us to create and manage databases in the cloud.

To add a new database to our app, we can run the command `heroku addons:create mongodb`. This will create a new database for our app and connect it to our Git repository. After adding the database, we need to set up our environmental variables. We'll do this by going to the Heroku dashboard and clicking on "Settings" under the "App" tab.

In the settings page, we'll click on "Reveal Config Vars". This will show us all of the environmental variables that are currently set for our app. Our database URI is automatically generated when we create a new MongoDB Lab database, so we can leave this as is for now.

The only remaining variable that we need to set is the database name. We can do this by copying and pasting the section between the slashes and the colon from our database URI. This will give us the exact name of our database, which we can enter into the "Database Name" field in the settings page.

After setting the database name, we can click on "Add" to save our changes. Now that we have a new app on Heroku with a MongoDB Lab database set up, we're ready to start building our app.

Testing Our App

To test our app, we'll log in to the Heroku dashboard and go to the settings page under the "App" tab. We'll click on "Reveal Config Vars" to show us all of the environmental variables that are currently set for our app. We can then enter these variables into our app's code.

To test our app, we'll open up a new browser window and navigate to the URL `https://anyCard.herokuapp.com/secret`. When we arrive at this page, we'll see a text input field where we can enter a name. If we type in "bo" and click on the "Submit" button, it should display an error message saying "Not found". However, if we try again with a different name, such as "quincy", it should also display an error message saying "Not found".

If we want to see our app in action, we can add some placeholder data to our database. We can do this by creating a new file called `data.js` in the root directory of our app. In this file, we'll define an array of cards that we can use to populate our database.

We'll also need to update our app's code to use the `client.close()` function instead of `db.close()`. This is because our database is a MongoDB Lab database, which uses the client library to interact with the database. If we don't use the correct function, it will throw an error and prevent our app from functioning properly.

After updating our app's code, we can commit all of the changes using `git commit` and push them to Heroku using `git push heroku master`. Once we've pushed our changes to Heroku, we'll be able to see our app in action by navigating to the URL `https://anyCard.herokuapp.com/secret`.

To use our app, a user will need to pick a card from their deck and enter it into our text input field. If they do this correctly, our app should display the correct data for that particular card. However, if they make an error, such as entering an incorrect name or no name at all, our app should display an error message.

Conclusion

In this tutorial, we created a new app on Heroku using MongoDB Lab. We set up a Git repository for our app and connected it to Heroku, then added a new database to our app using the `heroku addons:create mongodb` command. We also updated our app's code to use the correct functions to interact with the database.

Finally, we tested our app by navigating to its URL in a browser window and entering different names into the text input field. We saw that our app displayed error messages when users entered incorrect data, which prevented it from functioning properly.

Overall, this tutorial demonstrated how to create a new app on Heroku using MongoDB Lab and how to set up a Git repository for your app. It also showed how to update your app's code to use the correct functions to interact with the database, as well as how to test your app by navigating to its URL in a browser window and entering different names into the text input field.

"WEBVTTKind: captionsLanguage: enhi i'm beau and i am going to show you how to program a magic trick using node.js and mongodb we are going to be using these free code camp playing cards so free code 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 are pretty cool we got larry well adele goldberg and there's all sorts of different uh 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 going to be a coding tutorial i'll show you how to code this trick using node.js in mongodb and we'll deploy it to heroku so let's see the trick okay caleb i have a card trick to show you okay i have these free code camp playing cards all right and what i'm gonna do is have you pick any card that you want okay yeah pick any card are you sure okay what car you can you can tell you can tell everyone what the card is what is it richard stallman uh a six of clubs okay so it's six it's a space six of spades six or six yes okay so this is what we're gonna do i made a a program that's going to be able to figure out what your card is so yeah i have we have our ipad here has a fun kid case and i'm gonna have you go to a website you have to uh type in the url um it's going to be do you see it i don't know so you're going to type in the word any card so a n a-n-y-c-a-r-d and they're gonna do dot okay and then you're gonna type in heroku app you spell it h-e-r-h-e-r you wait h-e-r-o h-r-o k-u a-p-p aapp dot com dot com now you do a slash slash you see the slash on the ipad keyboard i will there we go that's now type in your name caleb gonzalez just caleb now press uh go press go and it's the card why don't you show it to the camera six of spades the cards that you chose that's pretty cool coding it's like magic okay 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 can help out with this trick it doesn't have to be right next to you you could actually have someone far away as long as they can hear a recording of what's happening but my wife was actually putting in some information into the website that gets stored on the mongodb 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 mongodb database so it can display the card that he chose so let's go into the computer the code editor so you can see how this works first i'll show you how this any card app works and then we'll start coding it from scratch so we went to the url if we this is the root url and then slash secret this is where your person is helping you the website that they go to so we're going to enter a name i'll put bo that's my name and then if they say whatever the card that the spectator picks your helper is going to go to four let's say it's four of spades and then just do submit now if we go to slash bow we should see four of spades but if we go to another name like quincy it will just show not found because that hasn't been entered into the database and then also if you ever wanted to to delete everything we can just go to delete all and the database reset so now if i go to bow 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.js another thing i have already done is copied in this cards 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.js and we are going to start coding but actually before we start coding let's set up some things since we're going to be using node and we are going to be using some packages i'm going to have to set up a package.json json file so i have this terminal open down at the bottom here i'm going to do mpm and knit dash y and that's going to just create my package.json file and it just says yes to all the questions so now that we've done that we can install some things so do npm install we'll be using let's see express body parser and mongodb so we just install that and now we can start working on our server so the first things we're just going to require a lot of things at the beginning okay we got all this initial setup done let's go over this we've required express now this is a web server for node.js so it makes it easier to set up a web server pretty quickly and then we are going to be using the web server in app here you'll see that later path this is going to allow us to get the the root path that a file is stored in on our on in our directory you'll see that in a second and we have body parser this extracts the entire body portion of an incoming request stream and exposes it on the rect.body as something that's easier to interface with what it basically means is it makes it much simpler to deal with data coming in from forms and we have a form right on our page so when you know about mongodb we're going to be interacting with a mongodb database so we get this client for mongodb now this url or actually let's call this uri and we can even i'm going to just put this all capital capitalized so this is our an environment variable which is where our database is so we're actually going to set this up right in right in heroku this environment variable in the mongodb database so we'll do that later and then our server is going to be running on this port which is either going to be at this environment variable or port 5000. and i'm going to add one more variable we'll do a const and this is going to be the db name the database name and this is going to be an environment narrow variable so i'll do process.env dot db name these will be set in heroku later so now we need to include our middleware the body parser middleware so i'll do app.use and then i'll just pass in body parser dot url encoded and then i have to put extended false and then one more thing with the body parser now this body partial things the url encoded and the json this is something to help the forms we'll be able to send the form data correctly to our server now we'll create our first route so do app.get this is going to be an http get request which is the normal type of request when you go to a website we're doing a get request so the route is going to be slash 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 arrow function so after we go to that route then it's going to run this function here and it's going to do res dot send file and it's going to center html file we're going to do path dot join underscore der name secret dot html so what this is doing is it's finding the the root directory where we're storing our all of our files and then adding secret.html on the end now actually i already created that file so when you go to slash secret and it's going to send this file to the user and it's this file right here now i'll put a link in the description where you can get this file directly i didn't 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 we're on but this would be a post request instead of a get request to the slash secret and you can see they can input the their name and then it's a drop down 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 route is slash secret and our second route is also secret but it's going to be a post request and this is where after someone fills in the form they will submit the form data to this route here so secret and it's going to start off the same so i'll do a wreck rez and this is not just going to 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 database so this this is where we're going to use the client and we'll connect and we'll pass in the uri variable because that's the where the database is that we're connecting to and then i have to pass in this flag use new url parser now this is just something you have to do because things were updated and now there's this new url parser that's important to use so pretty much all new databases that you're connecting to you're going to pass in this new url parser and then it will put in the function so the result will have a error and then we'll have the database that we get as a result of connecting to this and what we're going to do here is check if there's an error so if there's an error then we'll just do something simple we're just going to console.log it but if there's not an error then we're going to get access to the database so const db and that reminds me actually this db should really be a client and then we access the db down here the database constdb equals client dot db 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 collection equals db.collection names now the cl 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 to create our entry that we're going to put into the database so we'll do const entry and we're going to have a name which is just going to be dot rec.body.net dot to lower case so from the request the http request we're going to get the body and then the name because remember we're 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 lowercase and that really should be a comma here and then the card is going to just be rec dot body dot number and so remember we passed a number in a suit and we're going to combine the number in the suit to the card name that corresponds to our files and our cards directory so we'll do number plus of so it'd be like three of hearts so the next part is going to be rec dot body dot suit okay now we've created our entry and we just have to insert that so i'll do collection dot insert one because we're entering one item into the collection and then we're going to pass in entry that's the entry we just created and then we'll have a function here so this is an arrow function error and result and in this if there is an error then we can just console.log the error else we'll send something back res.send and we'll just send 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 db.close at the end here now we have to create our other route so remember the other route is if someone goes to the url and then puts a person's name at the end so we'll do app.get and this is where we can put a variable right in the route so i'll do slash and then colon param and then i'll put a star or asterisk here and this becomes a variable so a route with a variable at the end and then we have our function rec res this arrow function here and we can 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 rec dot u url dot slice so this url we're getting it as a full section here and we are going to slice it and just get the index one of the url 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 client and it's just like before where we're going to connect we're going to pass in the uri we are going to put in this flag here use newer new url parser true and then we have our function so in the function we're going to have the error and then we're going to have a reference to the client and let me scroll this a little bit here so if there is an error we'll just console.log it just like before else we can do something with that name so first we'll get we'll get a we'll store the database in a variable so db equals client dot db and we'll pass in the db name and then we need the collection this is just like before equals db dot collection names and remember if someone puts the word delete all in the url we want to delete the whole database so we're going to check if the name equals equals equals delete all and then if it does then we'll do collection dot remove and if we just pass in an empty object this is going to remove everything and it's going to delete 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 dot 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 going to convert that to an array 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 an array so we can do something with it here so do air result and we'll have the arrow function here and again let's just do if the error if there is an error then we'll just console.log the error else or else if result dot length now this if the length is one or more this evaluates to true if the length is zero it evaluates to false so if there is at least one result then we're going to do this const card we're going to get what the card was that's associated with that person result result dot length minus one so result that length this is an array index result.length minus one is the last item in that array and then we want the card name of the item and then we just have to add plus dot 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 res.send file but instead of seeing an html file we can send a png file so we'll do path dot join underscore underscore name this is just like before to get the directory the actual full path to that card that png file so we have a 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 semicolon and put it here okay because we're joining all those things together into one path else if there's no results if the result.length equals zero then we'll send a status of 404 and then the final thing we have to do is db.close now let's see what i did oh this is supposed to be a curly brace here so that's a curly brace and this is a curly brace so we created all of our variable names and then we put in our middleware then we have our routes here and the final thing we need to do is have our database start listening for people to connect to those routes so we'll do app dot listen and then we'll pass in the port that's the port number from our variables up above console.log server 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 going to set it up to work with the local database before you start using a database stored on another server but we kind of skipped that step of trying to get this tested locally because we are going to go right to hosting this on heroku and using a database that's right on heroku 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 heroku in the browser i'm already on the page to create a new app in heroku and we're going to 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 follow along you'll have to pick a different name but i'll do create app okay now that i've created the app this actually kind of tells instructions on what to do so we want to log into heroku and do heroku login now pressing the key to open up in the browser to log in so i'll do that and i can just click login so now we're logged in to heroku you may actually have to download this it says initialize a git repository and so we'll go back over here and do get a net we got a new git repository and it says to run this line right here heroku get remote so we're setting heroku as a remote host for our git repository and the next thing it says to do is just um do it get add okay before we add everything we are going to add a get ignore file and ignore our node modules directory so i'll do new file and do git egg nor and then we'll just add node modules so now i'll do git add and then we can go to this one the get commit am we're just going off these directions here even though i think a lot of you probably already know the different commands here but we'll do first commit and the last thing it recommends doing is get push heroku master so we'll run that okay now that that's done we are going to add our database we can do that right from the command line with heroku add-ons create 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 heroku dashboard on the settings tab and if i click reveal config vars now the config these config vars are the environmental variables now this is automatically put in for us when we set up lab it has the mongodb uri there's this uri here we still need to create the db name so the db name is actually right in this uri 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 i'll copy it 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 app url anycard.herokuapp.com 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 have an error okay well i'm going to copy my heroku logs slash tail your dash dash tail i can put it into my command line over here i'll paste this in and then i can see the heroku logs and it should tell us what the problem was db.close is not a function now did i spell something wrong here oh okay i see what we did wrong okay so this is a client here so down here when i when we do db.close it should be client.close and then same with down here client that should fix it so if i save this and then i'm going to go out of this get add now get commit message update server and then i'll go to the get push heroku master okay i'm going to go back over to my browser and load this again type in my name bo bo and then ace of diamonds submit this insert into database so if i go to bow 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 all database reset if i go to 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 it was the seven of spades click submit and then when i have my person if what go to the url 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 free code camp deck of cards like i said the link is in the description well thanks for watching and remember use your code for goodhi i'm beau and i am going to show you how to program a magic trick using node.js and mongodb we are going to be using these free code camp playing cards so free code 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 are pretty cool we got larry well adele goldberg and there's all sorts of different uh 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 going to be a coding tutorial i'll show you how to code this trick using node.js in mongodb and we'll deploy it to heroku so let's see the trick okay caleb i have a card trick to show you okay i have these free code camp playing cards all right and what i'm gonna do is have you pick any card that you want okay yeah pick any card are you sure okay what car you can you can tell you can tell everyone what the card is what is it richard stallman uh a six of clubs okay so it's six it's a space six of spades six or six yes okay so this is what we're gonna do i made a a program that's going to be able to figure out what your card is so yeah i have we have our ipad here has a fun kid case and i'm gonna have you go to a website you have to uh type in the url um it's going to be do you see it i don't know so you're going to type in the word any card so a n a-n-y-c-a-r-d and they're gonna do dot okay and then you're gonna type in heroku app you spell it h-e-r-h-e-r you wait h-e-r-o h-r-o k-u a-p-p aapp dot com dot com now you do a slash slash you see the slash on the ipad keyboard i will there we go that's now type in your name caleb gonzalez just caleb now press uh go press go and it's the card why don't you show it to the camera six of spades the cards that you chose that's pretty cool coding it's like magic okay 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 can help out with this trick it doesn't have to be right next to you you could actually have someone far away as long as they can hear a recording of what's happening but my wife was actually putting in some information into the website that gets stored on the mongodb 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 mongodb database so it can display the card that he chose so let's go into the computer the code editor so you can see how this works first i'll show you how this any card app works and then we'll start coding it from scratch so we went to the url if we this is the root url and then slash secret this is where your person is helping you the website that they go to so we're going to enter a name i'll put bo that's my name and then if they say whatever the card that the spectator picks your helper is going to go to four let's say it's four of spades and then just do submit now if we go to slash bow we should see four of spades but if we go to another name like quincy it will just show not found because that hasn't been entered into the database and then also if you ever wanted to to delete everything we can just go to delete all and the database reset so now if i go to bow 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.js another thing i have already done is copied in this cards 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.js and we are going to start coding but actually before we start coding let's set up some things since we're going to be using node and we are going to be using some packages i'm going to have to set up a package.json json file so i have this terminal open down at the bottom here i'm going to do mpm and knit dash y and that's going to just create my package.json file and it just says yes to all the questions so now that we've done that we can install some things so do npm install we'll be using let's see express body parser and mongodb so we just install that and now we can start working on our server so the first things we're just going to require a lot of things at the beginning okay we got all this initial setup done let's go over this we've required express now this is a web server for node.js so it makes it easier to set up a web server pretty quickly and then we are going to be using the web server in app here you'll see that later path this is going to allow us to get the the root path that a file is stored in on our on in our directory you'll see that in a second and we have body parser this extracts the entire body portion of an incoming request stream and exposes it on the rect.body as something that's easier to interface with what it basically means is it makes it much simpler to deal with data coming in from forms and we have a form right on our page so when you know about mongodb we're going to be interacting with a mongodb database so we get this client for mongodb now this url or actually let's call this uri and we can even i'm going to just put this all capital capitalized so this is our an environment variable which is where our database is so we're actually going to set this up right in right in heroku this environment variable in the mongodb database so we'll do that later and then our server is going to be running on this port which is either going to be at this environment variable or port 5000. and i'm going to add one more variable we'll do a const and this is going to be the db name the database name and this is going to be an environment narrow variable so i'll do process.env dot db name these will be set in heroku later so now we need to include our middleware the body parser middleware so i'll do app.use and then i'll just pass in body parser dot url encoded and then i have to put extended false and then one more thing with the body parser now this body partial things the url encoded and the json this is something to help the forms we'll be able to send the form data correctly to our server now we'll create our first route so do app.get this is going to be an http get request which is the normal type of request when you go to a website we're doing a get request so the route is going to be slash 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 arrow function so after we go to that route then it's going to run this function here and it's going to do res dot send file and it's going to center html file we're going to do path dot join underscore der name secret dot html so what this is doing is it's finding the the root directory where we're storing our all of our files and then adding secret.html on the end now actually i already created that file so when you go to slash secret and it's going to send this file to the user and it's this file right here now i'll put a link in the description where you can get this file directly i didn't 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 we're on but this would be a post request instead of a get request to the slash secret and you can see they can input the their name and then it's a drop down 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 route is slash secret and our second route is also secret but it's going to be a post request and this is where after someone fills in the form they will submit the form data to this route here so secret and it's going to start off the same so i'll do a wreck rez and this is not just going to 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 database so this this is where we're going to use the client and we'll connect and we'll pass in the uri variable because that's the where the database is that we're connecting to and then i have to pass in this flag use new url parser now this is just something you have to do because things were updated and now there's this new url parser that's important to use so pretty much all new databases that you're connecting to you're going to pass in this new url parser and then it will put in the function so the result will have a error and then we'll have the database that we get as a result of connecting to this and what we're going to do here is check if there's an error so if there's an error then we'll just do something simple we're just going to console.log it but if there's not an error then we're going to get access to the database so const db and that reminds me actually this db should really be a client and then we access the db down here the database constdb equals client dot db 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 collection equals db.collection names now the cl 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 to create our entry that we're going to put into the database so we'll do const entry and we're going to have a name which is just going to be dot rec.body.net dot to lower case so from the request the http request we're going to get the body and then the name because remember we're 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 lowercase and that really should be a comma here and then the card is going to just be rec dot body dot number and so remember we passed a number in a suit and we're going to combine the number in the suit to the card name that corresponds to our files and our cards directory so we'll do number plus of so it'd be like three of hearts so the next part is going to be rec dot body dot suit okay now we've created our entry and we just have to insert that so i'll do collection dot insert one because we're entering one item into the collection and then we're going to pass in entry that's the entry we just created and then we'll have a function here so this is an arrow function error and result and in this if there is an error then we can just console.log the error else we'll send something back res.send and we'll just send 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 db.close at the end here now we have to create our other route so remember the other route is if someone goes to the url and then puts a person's name at the end so we'll do app.get and this is where we can put a variable right in the route so i'll do slash and then colon param and then i'll put a star or asterisk here and this becomes a variable so a route with a variable at the end and then we have our function rec res this arrow function here and we can 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 rec dot u url dot slice so this url we're getting it as a full section here and we are going to slice it and just get the index one of the url 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 client and it's just like before where we're going to connect we're going to pass in the uri we are going to put in this flag here use newer new url parser true and then we have our function so in the function we're going to have the error and then we're going to have a reference to the client and let me scroll this a little bit here so if there is an error we'll just console.log it just like before else we can do something with that name so first we'll get we'll get a we'll store the database in a variable so db equals client dot db and we'll pass in the db name and then we need the collection this is just like before equals db dot collection names and remember if someone puts the word delete all in the url we want to delete the whole database so we're going to check if the name equals equals equals delete all and then if it does then we'll do collection dot remove and if we just pass in an empty object this is going to remove everything and it's going to delete 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 dot 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 going to convert that to an array 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 an array so we can do something with it here so do air result and we'll have the arrow function here and again let's just do if the error if there is an error then we'll just console.log the error else or else if result dot length now this if the length is one or more this evaluates to true if the length is zero it evaluates to false so if there is at least one result then we're going to do this const card we're going to get what the card was that's associated with that person result result dot length minus one so result that length this is an array index result.length minus one is the last item in that array and then we want the card name of the item and then we just have to add plus dot 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 res.send file but instead of seeing an html file we can send a png file so we'll do path dot join underscore underscore name this is just like before to get the directory the actual full path to that card that png file so we have a 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 semicolon and put it here okay because we're joining all those things together into one path else if there's no results if the result.length equals zero then we'll send a status of 404 and then the final thing we have to do is db.close now let's see what i did oh this is supposed to be a curly brace here so that's a curly brace and this is a curly brace so we created all of our variable names and then we put in our middleware then we have our routes here and the final thing we need to do is have our database start listening for people to connect to those routes so we'll do app dot listen and then we'll pass in the port that's the port number from our variables up above console.log server 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 going to set it up to work with the local database before you start using a database stored on another server but we kind of skipped that step of trying to get this tested locally because we are going to go right to hosting this on heroku and using a database that's right on heroku 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 heroku in the browser i'm already on the page to create a new app in heroku and we're going to 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 follow along you'll have to pick a different name but i'll do create app okay now that i've created the app this actually kind of tells instructions on what to do so we want to log into heroku and do heroku login now pressing the key to open up in the browser to log in so i'll do that and i can just click login so now we're logged in to heroku you may actually have to download this it says initialize a git repository and so we'll go back over here and do get a net we got a new git repository and it says to run this line right here heroku get remote so we're setting heroku as a remote host for our git repository and the next thing it says to do is just um do it get add okay before we add everything we are going to add a get ignore file and ignore our node modules directory so i'll do new file and do git egg nor and then we'll just add node modules so now i'll do git add and then we can go to this one the get commit am we're just going off these directions here even though i think a lot of you probably already know the different commands here but we'll do first commit and the last thing it recommends doing is get push heroku master so we'll run that okay now that that's done we are going to add our database we can do that right from the command line with heroku add-ons create 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 heroku dashboard on the settings tab and if i click reveal config vars now the config these config vars are the environmental variables now this is automatically put in for us when we set up lab it has the mongodb uri there's this uri here we still need to create the db name so the db name is actually right in this uri 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 i'll copy it 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 app url anycard.herokuapp.com 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 have an error okay well i'm going to copy my heroku logs slash tail your dash dash tail i can put it into my command line over here i'll paste this in and then i can see the heroku logs and it should tell us what the problem was db.close is not a function now did i spell something wrong here oh okay i see what we did wrong okay so this is a client here so down here when i when we do db.close it should be client.close and then same with down here client that should fix it so if i save this and then i'm going to go out of this get add now get commit message update server and then i'll go to the get push heroku master okay i'm going to go back over to my browser and load this again type in my name bo bo and then ace of diamonds submit this insert into database so if i go to bow 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 all database reset if i go to 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 it was the seven of spades click submit and then when i have my person if what go to the url 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 free code camp deck of cards like i said the link is in the description well thanks for watching and remember use your code for good\n"