hi 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
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
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