WEBVTT 0 00:00.430 --> 00:04.510 Hi guys. Welcome to a new module. Now a few modules back 1 00:04.560 --> 00:06.950 we built those beautiful to do list. 2 00:07.170 --> 00:13.680 And in the process we learnt about a whole bunch of things such as how to use EJS templates and how 3 00:13.680 --> 00:19.800 to pass data between your server and your EJS files. 4 00:19.810 --> 00:24.820 Now there's just one problem with this app as it is though. 5 00:25.080 --> 00:31.720 Because if we added in a new item, let's say "Test" and it looks great 6 00:31.740 --> 00:34.410 and you know when we refresh it it's still there. 7 00:34.590 --> 00:38.700 But if I go ahead and just restart my server, 8 00:38.700 --> 00:42.450 so at the moment I'm running app.js using nodemon. 9 00:42.510 --> 00:51.060 So if I just type in "rs" into the command line and hit enter then it will restart my nodemon server. 10 00:51.660 --> 00:59.310 And this is equivalent to say if you are running your app using node app.js then every single time 11 00:59.310 --> 01:06.630 you make a change in your app.js then you would have to rerun node app.js and nodemon basically 12 01:06.630 --> 01:08.850 does that automatically behind the scenes. 13 01:08.910 --> 01:14.020 But you can also just get it to restart the server by just typing "rs". 14 01:14.040 --> 01:16.640 So now we've restarted our server. 15 01:16.890 --> 01:24.600 And if I now take a look at our localhost:3000 if I go ahead and refresh this website you can see 16 01:24.600 --> 01:27.760 that that item that I just added disappears. 17 01:27.900 --> 01:34.620 And the reason for this is because currently all of these items are stored inside an array and every 18 01:34.620 --> 01:41.610 single time I restart my app.js, I rerun it, then it wipes that array to the default items that 19 01:41.610 --> 01:42.780 we began with. 20 01:43.020 --> 01:50.460 And all of the new items I added gets wiped out and it's no longer saved in our app which is not a great 21 01:50.460 --> 01:52.190 user experience to be honest. 22 01:53.110 --> 02:00.790 Now that we've learned about databases and how to persist our data then this is a perfect use case. 23 02:00.790 --> 02:08.290 So we're going to update this app to start using MongoDB to save our data to a MongoDB database 24 02:08.560 --> 02:14.950 and you'll see that afterwards no matter how much I restart my server or whatever changes I decide to 25 02:14.950 --> 02:21.990 make to my app.js or the rest of my website all of my data will be safely saved in our database. 26 02:22.000 --> 02:23.540 So let's get started. 27 02:24.760 --> 02:29.890 So in the last lesson you should have gotten hold of the starting files for the second version of our 28 02:29.890 --> 02:30.790 To-Do list. 29 02:30.850 --> 02:36.070 If you go ahead and just unzip it and place it on your desktop or into your development folder then 30 02:36.130 --> 02:39.610 we can drag it on to Atom and we can get started. 31 02:39.880 --> 02:45.210 Now the first thing you'll notice is that we don't actually have a Node modules folder. 32 02:45.580 --> 02:50.320 And that is of course because whenever we download something from the internet usually it won't come 33 02:50.320 --> 02:51.410 with the Node modules 34 02:51.490 --> 02:59.650 so we have to cd over to the location of our folder and then just run npm install or npm i in that 35 02:59.770 --> 03:00.790 folder. 36 03:01.390 --> 03:08.300 And then it'll go and look at all the dependencies we have in our package.json for example body- 37 03:08.380 --> 03:15.220 parser, ejs, and express. And it will install it and create our node_modules folder. 38 03:15.670 --> 03:22.300 So now that we're ready to upgrade our todo list to a version that actually has a database on the 39 03:22.300 --> 03:28.810 backend, then the first thing we should look at is, how are we storing our data currently? 40 03:28.810 --> 03:35.610 Well we currently have this constant called items which has an array of default objects to begin with. 41 03:35.860 --> 03:44.650 And then when we add or post new items into our app.js, then we push those items into the relevant 42 03:44.980 --> 03:45.730 arrays. 43 03:45.730 --> 03:51.660 So for example the items array or the workItems array. 44 03:51.730 --> 03:59.150 Now we're going to delete all of these arrays and we're going to be using Mongo and Mongoose instead. 45 03:59.440 --> 04:04.520 So the first thing we have to do is we have to install Mongoose of course. 46 04:04.570 --> 04:09.890 So let's go ahead and run npm install mongoose. 47 04:09.910 --> 04:12.880 Now that should add that to our package. 48 04:13.080 --> 04:18.130 json and it'll add the relevant modules into our node_modules folder. 49 04:18.130 --> 04:25.790 So now that we've got access to our node modules, we're going to now require our Mongoose. 50 04:25.870 --> 04:33.490 So we're going to create a constant called mongoose and it's going to be requiring the mongoose package 51 04:33.490 --> 04:35.690 that we just installed. 52 04:36.130 --> 04:43.130 The next thing that we need to do is to go ahead and create a new database inside MongoDB. 53 04:43.150 --> 04:50.860 The way that we do that as we've seen before in previous modules is mongoose.connect and then 54 04:50.950 --> 04:57.880 the thing that we're going to connect to is the URL where our MongoDB is hosted locally which 55 04:57.940 --> 04:58.760 is traditionally 56 04:58.770 --> 05:08.240 "mongodb://localhost:27017". 57 05:08.440 --> 05:14.410 And then we're going to write one further forward slash and we're going to specify the name of our database 58 05:14.770 --> 05:19.440 which in this case I'm just going to call todolistDB. 59 05:19.990 --> 05:26.140 And then finally remember if we wanted to not have that little warning show up if we want to avoid that 60 05:26.140 --> 05:33.650 deprecation warning, then we have to add that little flag in there which is "useNewUrlParser 61 05:34.030 --> 05:35.430 : true". 62 05:35.560 --> 05:40.510 And at some point in the future you won't have to do this anymore because Mongoose and Mongo will update 63 05:40.570 --> 05:41.580 their code 64 05:41.680 --> 05:47.290 but for now if you're seeing that deprecation warning when you don't have this in, then this is the way 65 05:47.290 --> 05:49.240 to work around it. 66 05:50.200 --> 05:57.520 So now that we specified how we're going to connect to our MongoDB and which database we want it to create 67 05:57.550 --> 05:59.270 or connect to, 68 05:59.530 --> 06:02.630 then the next step is to create a new schema 69 06:02.650 --> 06:03.180 right? 70 06:03.340 --> 06:06.620 And we want to create a new items schema. 71 06:06.970 --> 06:09.580 I'm going to leave this up to you as a challenge. 72 06:09.790 --> 06:15.460 I want you to create something called itemsSchema and this is only going to have one field which is 73 06:15.460 --> 06:22.480 called name and the names of each of our items are simply going to be of data type string. 74 06:22.540 --> 06:26.100 Remember, this is roughly what a Mongoose schema would look like. 75 06:26.110 --> 06:34.240 We have the const keyword, then we specify the schema name and then we set it to equal a new Javascript 76 06:34.300 --> 06:37.100 object with a key value field. 77 06:37.360 --> 06:44.060 And the key is going to be the name of the field and the value is going to be the data type of our field. 78 06:44.170 --> 06:45.890 So you've done this before. 79 06:45.910 --> 06:48.470 Pause the video and try to complete the challenge. 80 06:50.910 --> 06:52.440 So this is pretty simple. 81 06:52.440 --> 06:57.250 All we have to do is create our const and then we create our itemsSchema. 82 06:57.540 --> 07:03.630 And this is going to be equal to whatever field it is that we want into our schema and we're only going 83 07:03.630 --> 07:09.800 to have one field which is going to be the name of the item and the name is going to be of course a 84 07:09.810 --> 07:12.030 string data type. 85 07:12.030 --> 07:14.270 Now we have our item schema, 86 07:14.280 --> 07:22.760 the next thing we need to create is a new Mongoose model based on this schema. Again as a quick reminder 87 07:22.850 --> 07:24.940 this is what Mongoose models look like. 88 07:24.980 --> 07:32.890 We create a new constant and we use the mongoose.model initialiser to create that new model. 89 07:33.020 --> 07:40.350 And in order to create it we have to specify two things: the singular name of our collection, 90 07:40.370 --> 07:46.820 so if we had a collection called people then the singular form would be person and that has to be in 91 07:46.820 --> 07:48.440 the form of a string. 92 07:48.710 --> 07:55.260 And then we have our schema which we provide. Pause the video and try to complete that challenge. 93 07:57.480 --> 07:57.770 All right. 94 07:57.770 --> 08:03.440 So we've already created our schema and we now have to create our model based on the schema. 95 08:03.660 --> 08:10.030 Let's create a new constant and we'll call our model Item with a capital "I". 96 08:10.080 --> 08:14.930 So remember whenever you have a Mongoose model it's usually capitalized. 97 08:15.180 --> 08:21.480 And this is going to be equal to a mongoose.model and we're going to create the model passing in 98 08:21.600 --> 08:22.860 two arguments. 99 08:22.950 --> 08:27.600 The first thing is the singular version of our collection name. 100 08:27.690 --> 08:33.690 So we're going to have a collection called items and that means that the singular version is going to 101 08:33.690 --> 08:41.490 be item. And then the second argument is going to be the schema that we're going to use to create this 102 08:41.550 --> 08:49.030 item's collection which is of course our items schema that we created a little bit earlier on. 103 08:49.310 --> 08:53.800 So now we have a schema and we have a model created using that schema. 104 08:53.840 --> 08:59.620 The next thing I want to do is I'm going to delete everything that's related to this day and getDate. 105 08:59.630 --> 09:06.080 I'm just going to simplify our code a little bit instead of having to use our date module and instead 106 09:06.080 --> 09:14.630 of having this data file, we're going to just simply render the default list with a title that's called 107 09:14.690 --> 09:15.890 "Today". 108 09:16.490 --> 09:23.360 And this way we'll cut down the complexity of working with the date and the external modules and also 109 09:23.360 --> 09:28.060 trying to understand how MongoDB is going to be plugged in to our app. 110 09:28.070 --> 09:33.770 So this just makes it a little bit easier to understand. Now that we've replaced the list title with 111 09:33.830 --> 09:35.570 a simple string 112 09:35.570 --> 09:38.390 the second thing we're passing over to our list. 113 09:38.420 --> 09:45.460 ejs is our items array, which if you remember we deleted so it no longer exists. 114 09:45.590 --> 09:53.950 And instead we want to pass over the items that are inside our items collection. To do that we need some 115 09:53.950 --> 09:55.640 default items right? 116 09:55.660 --> 10:03.490 So let's go ahead and create three new documents using our brand new item Mongoose model just around 117 10:03.490 --> 10:03.920 here 118 10:03.970 --> 10:10.360 and I'm again going to leave that up to you as a challenge. Just as a reminder, the way that we create 119 10:10.360 --> 10:13.970 new documents using Mongoose is something like this. 120 10:13.990 --> 10:19.960 So we would create a new constant then we would bind it to a new model name, 121 10:19.960 --> 10:28.960 so in this case that would be item. And then we specify the values for each of the fields in our schema. 122 10:29.020 --> 10:30.150 We've done this before. 123 10:30.190 --> 10:36.790 And so I want you to pause the video and try to create three new documents which will be the default 124 10:36.820 --> 10:40.830 items in our To-Do list and they can say whatever it is you want them to say. 125 10:45.020 --> 10:46.250 Following that format 126 10:46.280 --> 10:49.260 we're going to create our item1 127 10:49.580 --> 10:52.040 and this is going to be a new item. 128 10:52.040 --> 11:00.500 So we're saying that we're creating a new document from our item model and then we pass in our fields 129 11:00.530 --> 11:00.850 right? 130 11:00.890 --> 11:08.170 So the field that is called name is going to say "Welcome to your todolist!". 131 11:09.500 --> 11:19.400 And that's one document out of the way. Now I'm just going to go ahead and create two more. 132 11:19.580 --> 11:27.910 So now I've created three documents item1, item2 and item3 and they have some arbitrary names. 133 11:27.920 --> 11:31.560 So the first item is just going to say "Welcome to your todo list!", 134 11:31.580 --> 11:36.910 the second one is going to say "Hit the + button to add a new item." 135 11:37.100 --> 11:43.220 and the third one's just going to say "Hit this check box" or "Hit this thing over here to delete an item". 136 11:43.220 --> 11:47.710 Now that we've got our three documents, let's go ahead and put them all into an array. 137 11:47.960 --> 11:52.670 And I'm just going to call this the defaultItems. 138 11:52.670 --> 12:01.220 It's going to be a new array and it's just going to contain item1, item2 and item3. 139 12:01.640 --> 12:10.310 Now that we have our array then we could use one of the methods in Mongoose called insertMany so that 140 12:10.310 --> 12:19.790 we get to insert all of these items in one go into our items collection. Again just as a quick reminder 141 12:19.790 --> 12:22.780 of how the syntax for insertMany looks like, 142 12:22.850 --> 12:25.820 then you can see it looks something kind of like this. 143 12:25.850 --> 12:32.840 We provide the model name which refers to the collection that we want to insert our data into, and then we 144 12:32.840 --> 12:37.000 provide the actual array of documents that we want to insert 145 12:37.130 --> 12:41.390 and finally get a callback which may or may not contain an error 146 12:41.420 --> 12:44.990 depending on how the process went. 147 12:45.110 --> 12:51.110 So while I'm showing you a lot of syntax using slides, you can also of course just simply read the docs 148 12:51.140 --> 12:52.650 inside Mongoose right? 149 12:52.730 --> 13:00.650 So if you go to the docs and you go over to the API and find the model API docs then you can find these 150 13:00.650 --> 13:08.750 things such as insertMany and see the full explanation and example as well. So don't feel like you 151 13:08.750 --> 13:12.740 have to rely on just the hints I've given here. 152 13:12.740 --> 13:18.740 Coding is essentially an open book exam. You can refer to as many sources as you like in order to get 153 13:18.740 --> 13:19.790 to the answer. 154 13:20.690 --> 13:28.550 Pause the video and try to insert all of our items into our items collection. 155 13:28.550 --> 13:28.920 All right. 156 13:28.910 --> 13:37.160 So in order to insert it we're going to specify that we want to insert our items into the items collection. 157 13:37.280 --> 13:44.540 So we'll refer to the item model. And then on that model we're going to call insertMany and we're going 158 13:44.540 --> 13:46.600 to provide two arguments. 159 13:46.610 --> 13:48.830 One is what do we want to insert. 160 13:48.830 --> 13:53.310 Well we want to insert our array of defaultItems. 161 13:53.930 --> 13:59.980 And the second thing is we have to provide a callback just in case there's any errors. 162 14:00.140 --> 14:11.300 So we could say something like if there's an error then log the error, else simply log success 163 14:13.900 --> 14:18.670 fully saved default items to database. 164 14:22.360 --> 14:24.470 Just before we run our app.js 165 14:24.610 --> 14:31.180 just make sure that you check your code that there's no errors anywhere, that you've got everything all 166 14:31.180 --> 14:34.750 set up with your model, your schema and your documents. 167 14:34.810 --> 14:36.140 Over here I've just spotted it. 168 14:36.160 --> 14:39.350 I've actually got a bit of a typo. Instead of user 169 14:39.370 --> 14:44.480 it should be useNewUrlParser. Now that I'm happy with my code 170 14:44.560 --> 14:52.640 then it's time to head over to my console and make sure that you've got a mongod process running. 171 14:52.780 --> 14:56.650 So you should have this set up from the last module. 172 14:56.860 --> 15:02.140 And we should also have a mongo shell that's enabled on another tab as well. 173 15:02.170 --> 15:07.130 So now make sure that you've cded over to where your app.js is 174 15:07.240 --> 15:09.630 and we're finally ready to run our app.js. 175 15:09.660 --> 15:16.690 So now if I hit enter, you can see that we get the service started but also we get the message that 176 15:16.690 --> 15:21.290 says "Successfully saved our default items to database". 177 15:22.300 --> 15:29.620 If we switch over to our Mongo shell and we say "show dbs" then we now have this extra database 178 15:29.620 --> 15:31.330 code todolistDB. 179 15:31.520 --> 15:40.120 And if we go ahead and say "use todolistDB" and now we "show collections" you can see we've now created 180 15:40.120 --> 15:47.200 this collections called items and this is all done when we created our Mongoose model and specify the 181 15:47.200 --> 15:49.770 singular name of our collection. 182 15:50.200 --> 15:58.610 So now if we say "db.items.find" basically find all, 183 15:58.610 --> 16:06.190 now we've got three documents saved in there which correspond to our default list that we want to show 184 16:06.190 --> 16:09.080 when we create a new todo list right? 185 16:09.730 --> 16:12.520 So that was pretty successful. 186 16:12.520 --> 16:18.730 Now if you have any problems with starting up your Mongo shell or with your mongod server then just 187 16:18.730 --> 16:25.300 have a look inside the course resources for this lesson where you can see some ways of debugging what 188 16:25.300 --> 16:27.840 the issue is and fixing it if needed. 189 16:28.210 --> 16:30.710 But hopefully you're on the same page as me 190 16:30.760 --> 16:36.550 and you've got your server started and you've successfully saved your items. 191 16:36.640 --> 16:41.770 The next step is to read from our database inside our app.js. 192 16:41.790 --> 16:45.580 So for all of that and more, I'll see you on the next lesson.