Placeholder Image

字幕表 動画を再生する

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

It's time to add a database.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

2.4 データベースへの保存 - JavaScriptでのデータとAPIの操作 (2.4 Saving to a Database - Working with Data and APIs in JavaScript)

  • 8 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語