字幕表 動画を再生する 英語字幕をプリント 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]
A2 初級 2.4 データベースへの保存 - JavaScriptでのデータとAPIの操作 (2.4 Saving to a Database - Working with Data and APIs in JavaScript) 8 0 林宜悉 に公開 2021 年 01 月 14 日 シェア シェア 保存 報告 動画の中の単語