It's time to add a database. Why do you need a database? So a database is for
persistence, your ability to store information
over the long haul. So whether or not you quit the
server, restart the server, clients are connecting
or disconnecting, their information is saved. So a classic example of
this is, you made a game and you need a high score list. You're going to need somewhere
to store that high score list. Maybe you have
different user accounts with names and passwords. That's a little bit
tricky because we've got to deal with security there. But that's something that needs
to be stored in a database. And you can't do this with
client-side code alone. There is something
called local storage. And local storage is a
mechanism for your browser itself to store
information locally. But the issue with that is, if
you're saving information here, this client will
never know about it. If the different clients
connecting to your server need to be able to
share information, that needs to be saved
at a database that's living on the server. Of course, the
truth is, you don't need to make your
own database nor even keep your database on a server. You can use something called
a Database-as-a-Service. I've made videos
before about Firebase and how to have the Firebase
service store data for you. There's mLab, which is also
a Database-as-a-Service. It uses the database
system MongoDB, which is a very popular
database system. It's a known as a
document database, meaning the data is stored in
basically documents, like JSON files, in a way. It's more complex and
sophisticated than that, but that's the core idea. This relates to
what I'm actually going to do in this video. But mLab is a
service, once again, that you can send data to,
and it will save it for you. And you could receive data. You could do all
that from the client. Or you could still use Node, but
not actually have the database on your local server. So there's so many
possibilities there. And you could actually use
MongoDB itself with Node and have a MongoDB there. Or you could use
something called SQLite. SQL is beyond the
scope of what I want to do in this video series. But if you're interested
in learning more about SQL, I might recommend
the Socratica YouTube channel, which has a whole
playlist about SQL itself. What I'm going to use
is an open source, freely available database
system called NeDB. It's very lightweight,
very simple. It's all JavaScript based,
and you can run it in Node. This is not maybe going
to be your end solution for the giant piece
of software you're building for some
huge web application. But for basic database
functionality and learning about how to work
with databases, it's a wonderful system to use. All of the documentation
for NeDB is on GitHub. I'll be referring to it quite
a bit throughout this video. And there you can also
donate to help support that open source
projects development. Let's take a look at
where I left the code off. Now, I did make some
modifications since I last saw you in the previous video. I did the exercises
I suggested for you. I did it myself. And what I have now
on the web app page itself is a Submit button. So when I press
the Submit button, it sends the data to
the server, we can see. And then I get the
success response back. And I can do that
multiple times. I did it four times. Now let's look at
what the server says. Every time it gets a
request, it's listing, ah, here's the data. Here's the data twice. Here's the data three times. Here's the data four times. What it's doing is,
it's persistent. I have a database. It's an array. It's a global variable
that just starts off empty when the server begins. And then every time
I receive new data, I push it into the database. This is really all
that I want to do. I want something to store every
single time I submit a latitude and longitude. And I want to be able to look
at that thing that I stored. And an array is a perfectly
fine way to start doing that. It will immediately break down. As soon as I quit the
server, it's gone. So again, in my
previous video, I suggested maybe trying a text
file next or a JSON file. And I have a code example that
does that that I'll link to in the video's description. But I'm going to now
add the database. So here on the NeDB GitHub is
the documentation that I need. The first thing that
I am going to do is install the
Node package NeDB. So I'm going to go over
here, and I'm going to say, npm install nedb. It's telling me to
use dash dash save, but that's old information. Dash dash save is assumed now. I don't need to add it in there. I'm just going to do this. And we can see that it has now
popped up with version 1.8.0 in my dependencies. The next thing that I want
to do is create a database. So one of the nice things
about working with NeDB is it's a subset
of MongoDB's API. So it's not as big as MongoDB. It's not as robust
or sophisticated. But if you're
learning NeDB, it's a nice starting point where
you might move on and use MongoDB at some point. So I'm going to go to Creating
and loading a database. And there's a lot of
information in here, but this is really
what I care about. The first thing
that I want to do is I need to require NeDB,
import that Node package, so to speak. I'll use the same naming that
they use-- const Datastore. Basically, I'm getting
a function that creates a database, a data store. nedb-- once I've
done that, I can then make that database itself. Now, instead of my database
being a simple array, I can just say new Datastore. And what I'm going to give
this data store function is a path to a file name. So ultimately, the database is
going to sit in a local file on this laptop, because
that's where I'm running the server right now. So I'm going to call
it it database.db. That's my very creative name. Once I've created this
data store, it's up to me to now specify whether or
not I want to actually load whatever is in there. Now, there isn't
anything there right now. If I look in the Finder,
there's no database.db file. It doesn't exist. But if I were to say
database.loadDatabase, that's actually going to load the
file, load the existing data from the previous time
the server ran into memory. And if it hasn't ever run,
it's going to create that file. So now I'm going to go over,
and I'm going to run the server. I ran the server. I go back to the Finder. And look, there now is a
file called database.db. The next thing I can do is
actually go look at that file. But there's nothing in there,
because I haven't ever saved anything into the database. And the way that I save
something into the database is with the function insert. So just to test right now,
I can say database.insert. I'll give it some data, like
name, Sheefmahn, status, rainbow emoji. And there we go. Now I'm adding this
to the database. Let's add one more record,
and we'll give it a train. And now let's run
the server again. And now let's look
at database.db. You can see the data that
I put in through the Insert function is literally
there in the file as JSON. There is something new however-- this ID. A key aspect of
working with a database is having every record, every
entry into the database, be associated with a unique key. So NeDB is generating this code,
this seemingly random sequence of letters and numbers, to
be this particular piece of data's unique ID. But ultimately, this
is not what I want. I don't want to just randomly
insert stuff into the database. I want to insert information
into the database the moment that I'm receiving
it from the client. The client is sending
data via a post. The server is receiving it and
storing it in the database. So I can go right here. And instead of saying
database.push data, I can actually say
database.insert. So just like I pushed
into an array, now I'm inserting it into
the NeDB data store. And it will get
saved in that file. Let's add one more
thing, though, to the data before we
put it in the database. So the latitude and longitude
is coming in from the server. But I also want to add with it
into the database a timestamp. Meaning, what was the time when
that latitude and longitude was recorded? A way that I could do this in
JavaScript is with Date.now. So Date.now is a
function that returns the number of milliseconds that
have elapsed since January 1, 1970. So I'm going to say, const
timestamp equals Date.now. And then I'm going to
say, data.timestamp equals timestamp. And then I'm going to insert
that into the database. All right, let's take a look. I'm going to get rid
of the console log. And let's also add
that timestamp here to what I'm sending
back to the client. OK, so now I am going
to rerun the server. I'm going to go
back to the client. I don't think I changed
any code in the client, but I'm going to refresh anyway. And I'm going to get the new
latitude and longitude, which is still the same. And then I'm going
to hit Submit. 1, 2, 3, 4. So good news, we're seeing
the timestamp come back. So something is
working and we're getting a changing timestamp. If I go to the
server, we can see what's being console logged. Just, I got a request. But the real question here
is, when I go and look at the database, will I
see all of these entries? And there they are-- latitude,
longitude, timestamp, and ID. Unfortunately, you'll see I
do have this extra stuff still in the database from
when I was debugging. Just because this is
a kind of file format that I feel pretty
comfortable working with, I could actually just manually
delete those and save those. But I could also
investigate the NeDB API to see if I could
clear the database or just remove certain records. And certainly, I
could delete the file, and then save a
backup of the file. Everything that's
in that file is what's stored in the database. So I'm going to just
run the server again. I'm going to submit
a few more times. And we go and look at this,
and we can see, there we go, more entries. And we're done. Not done with this project,
but done with this step. We now have data from the
client being sent to the server, and the server saving
it into a database. If I were to quit the server
and restart the server, it's going to load the
data from the previous time and have that available. What's next for me to do? What I want to do is
make a page viewable by the client that can see the
log, the record of everything in the database. Sure, I could eventually
make something where I have to search
for stuff or sort stuff. But I just want
to see that log-- all of the latitudes and
longitudes and their timestamp. I'm also going to want
to add more stuff. So eventually, I'm going
to finish this project off by taking an image from
a webcam and saving that in the database along with
the latitude and longitude, as well. So as a step in that
direction, maybe what you could try to
do as an exercise is, add something more
to the web page. Maybe you want to put an input
box where the user could type their name or their
favorite vegetable, maybe their mood,
how they're feeling. And that could be captured
in the database, as well. So try that as an exercise. See if you can add one more
piece of data coming in from the client and have that
saved in the database, as well. And in the next part,
I'm going to show you how to create a separate
page that shows everything that's in the database itself. [MUSIC PLAYING]
