WEBVTT 0 00:00.490 --> 00:00.790 All right. 1 00:00.810 --> 00:07.320 So now that we've spoken a bit about the theory, it's time to put it into practice and start building 2 00:07.440 --> 00:09.910 our very own RESTful API. 3 00:10.200 --> 00:14.560 So we're going to be building a Wikipedia style API. 4 00:14.820 --> 00:20.610 So if you imagine we have a whole bunch of data relating to articles on an array of things. 5 00:20.670 --> 00:26.070 So for example you could have a Wikipedia for all the programming knowledge you've learned in this course 6 00:26.310 --> 00:31.230 and you create articles that's related to each of the topics that you've learnt so you could have an 7 00:31.230 --> 00:34.860 article on the DOM or on 8 00:34.860 --> 00:41.200 JQuery or on Bootstrap and you could keep your notes organized like this with your very own Wikipedia. 9 00:41.220 --> 00:43.470 So once you're ready let's get started. 10 00:43.660 --> 00:49.020 And the first thing we need to do is of course create the data that's in our database. 11 00:49.020 --> 00:53.610 So the database that we're going to be using is again a MongoDB database 12 00:53.610 --> 00:59.700 and I'm going to take this opportunity to show you a graphical user interface that is commonly used 13 00:59.970 --> 01:04.980 with MongoDB which is called Robo 3T. And they used be called Robo Mongo 14 01:04.980 --> 01:11.340 so if you head over to robomongo.org you'll be able to download Robo 3T for your platform 15 01:11.400 --> 01:13.020 Windows or Mac. 16 01:13.020 --> 01:15.770 And once you have downloaded it and you open it up, 17 01:15.810 --> 01:17.610 this is what you should see. 18 01:17.640 --> 01:23.910 There's a window that's prompting you to connect to a MongoDB database. 19 01:23.910 --> 01:31.650 So let's go ahead and try to create a new MongoDB connection. And we're going to leave all of these 20 01:31.650 --> 01:37.710 settings to the default and you'll notice that the address here is what we've been using previously 21 01:37.950 --> 01:45.180 when we were coding it up in Atom when we were trying to access the location of our MongoDB on our 22 01:45.180 --> 01:46.270 local system. 23 01:46.290 --> 01:52.680 So that was localhost and MongoDB tends to use the port address that's 27017. 24 01:52.770 --> 01:56.520 So leave everything as it is and go ahead and click save. 25 01:56.610 --> 01:59.620 And now you should have this new connection that's created 26 01:59.970 --> 02:03.980 and it might be named something else if you decided to change that naming of the connection. 27 02:05.280 --> 02:11.180 So now let's go ahead and click connect to try and connect to it and you'll see that we get this error. 28 02:11.220 --> 02:18.870 It says "Cannot connect to the MongoDB at localhost: 27017" and the error is that the network 29 02:18.990 --> 02:20.400 is unreachable. 30 02:20.400 --> 02:21.660 So why is this? 31 02:21.660 --> 02:25.400 Well it's because we haven't started up our MongoDB server right? 32 02:25.710 --> 02:33.120 So we have to go ahead and go into our command line, our hyper terminal, and do that thing where we say 33 02:33.120 --> 02:37.050 mongod to spin up our MongoDB server. 34 02:37.560 --> 02:46.410 So now it's waiting for connections on port 27017 and we can go into Robo 3T, click on this connection 35 02:46.410 --> 02:48.710 button here and try to connect again. 36 02:48.870 --> 02:55.890 And now you'll see that it's managed to connect successfully and we can close off this welcome screen. 37 02:56.220 --> 03:03.920 So you can see on the left here the databases that we currently have on our local MongoDB instance. 38 03:03.990 --> 03:08.880 And we've got two system admin, local and config 39 03:08.880 --> 03:11.860 and then we've got blogDB from a previous tutorial. 40 03:11.880 --> 03:15.450 So now let's go ahead and create a brand new database. 41 03:15.600 --> 03:19.320 Now previously we've been doing all of this through the command line. 42 03:19.350 --> 03:26.610 So we tapped into the Mongo shell and we would say something like "show dbs" which essentially does the 43 03:26.610 --> 03:27.620 same thing as this 44 03:27.630 --> 03:32.080 and it lists admin, local, blogDB and config same as over here. 45 03:32.310 --> 03:36.520 Then we might have said something like use a particular db to create it. 46 03:36.660 --> 03:39.480 And we did all of this through the command line. 47 03:39.510 --> 03:43.310 Now the command line gives you an extraordinary amount of control. 48 03:43.320 --> 03:48.510 You can literally do anything that is possible through command line which is why developers love it 49 03:48.510 --> 03:49.470 so much. 50 03:49.560 --> 03:51.600 It gives you a lot of freedom. 51 03:51.810 --> 03:56.940 But if you wanted to do something quick and simple and you wanted to be able to see your data easily 52 03:57.270 --> 04:03.660 then using a graphical user interface like Robo 3T can be quite helpful especially if you're not 53 04:03.660 --> 04:05.520 quite yet familiar with the command line. 54 04:06.030 --> 04:12.090 So let's go ahead and create a new database. And to do that we're going to right click on our new connection 55 04:12.360 --> 04:14.870 and we're going to create a database. 56 04:14.910 --> 04:22.980 Now this new database we will call wikiDB as the database for our Wikipedia API. 57 04:23.550 --> 04:26.860 And you can see at the moment it has zero collections. 58 04:26.970 --> 04:29.560 So let's go ahead and create a collection. 59 04:29.620 --> 04:33.390 So right click on the collections folder and then click create 60 04:33.480 --> 04:34.800 collection 61 04:34.860 --> 04:36.770 and now what we have to give it a name. 62 04:36.900 --> 04:43.830 Now remember that the naming convention for MongoDB collections are that it should be lowercase and 63 04:43.830 --> 04:45.490 it should be plural. 64 04:45.540 --> 04:51.270 So in our case if we had a whole bunch of articles then we would call it something like this 65 04:51.300 --> 04:51.630 right? 66 04:51.630 --> 04:55.110 Lowercase "a" and the word is in the plural form. 67 04:55.470 --> 04:58.380 Now how do I know about those naming conventions? 68 04:58.560 --> 05:00.680 Of course the documentation. 69 05:00.700 --> 05:05.770 So whenever you're using a new piece of technology or something that you're learning about even a good 70 05:05.770 --> 05:11.200 place to look through are some of the guides and some of their documentation. 71 05:11.260 --> 05:15.220 But now we're going to go ahead and create our articles collection. 72 05:15.220 --> 05:21.970 So now when I click on the dropdown list you can see I've got this collection of articles. But the articles 73 05:22.060 --> 05:23.410 are currently empty. 74 05:23.770 --> 05:28.970 If I right click and I say view documents you can see that it says fetched 0 Records 75 05:28.990 --> 05:29.290 right? 76 05:29.590 --> 05:37.210 And all that Robo 3T is doing is it running these predefined Mongo shell commands like what we did before 77 05:37.500 --> 05:45.340 db.show collection or db.find and it translates that into kind of like a graphical user 78 05:45.340 --> 05:50.660 interface in terms of tables and folders instead of simply plain text. 79 05:51.010 --> 05:57.820 So given that we've got no documents in our articles collection we can go ahead and insert a document 80 05:58.120 --> 06:04.300 which is the same as the C in our CRUD and we're going to create a brand new document. 81 06:04.300 --> 06:07.900 So this document is going to have two fields 82 06:07.900 --> 06:13.390 and the first field is going to be the title of the article. So you can see that when we create a new 83 06:13.390 --> 06:19.420 document these two curly braces get added in by default and then all we have to do is put in the name 84 06:19.480 --> 06:25.450 of the field which is gonna be title and then it's going to be a colon and then it's going to be whatever 85 06:25.450 --> 06:27.370 it is we want it to be, 86 06:27.430 --> 06:29.310 and in this case it's gonna be a string. 87 06:29.500 --> 06:35.530 So let's say that we're going to create an article called REST and then we're going to create another 88 06:35.530 --> 06:37.210 field called content. 89 06:37.300 --> 06:48.000 So our articles will have a title and some content. The content is going to be "REST is short for REpresentational 90 06:48.590 --> 07:00.020 State Transfer. It's an architectural style for designing APIs." 91 07:00.380 --> 07:00.660 All right. 92 07:00.690 --> 07:07.080 So as you can see we're putting them both in as strings and then we're separating the fields with a 93 07:07.320 --> 07:08.120 comma. 94 07:08.130 --> 07:14.430 So this is exactly the way that we did it when we were coding it up inside Atom or in our server 95 07:14.700 --> 07:16.430 so this should be pretty familiar to you. 96 07:16.770 --> 07:20.780 And it looks pretty much the same as any sort of Javascript object. 97 07:20.820 --> 07:27.570 So now that we're done with our document let's go ahead and click save and now you'll see that Robo 98 07:27.570 --> 07:33.810 3T isn't quite smart enough to auto refresh when we add in a new article. 99 07:33.900 --> 07:40.680 So we have to go ahead and click View documents to rerun that line of command which find everything 100 07:40.740 --> 07:42.840 inside the article's collection. 101 07:42.840 --> 07:44.300 But if you have a look 102 07:44.310 --> 07:47.560 now we have a new item in here. 103 07:47.980 --> 07:50.880 So it's found one document and it's got three fields: 104 07:51.030 --> 07:58.380 the id that gets automatically assigned by MongoDB, the title which is what we inserted as well 105 07:58.380 --> 07:59.100 as the content. 106 07:59.610 --> 08:04.310 So now let's go ahead and add a few more documents. If you want to 107 08:04.350 --> 08:09.720 this is a good time to pause the video and add some of your own notes that you've learned along the 108 08:09.720 --> 08:10.390 way 109 08:10.500 --> 08:17.640 or alternatively if you head over to this URL github.com/londonappbrewery/Build-Your-Own-RESTful 110 08:17.700 --> 08:21.970 -API you can see that we've already created the repository. 111 08:22.080 --> 08:28.080 Then if you scroll down you can see that we've included some example documents that you can simply insert 112 08:28.080 --> 08:30.550 in if you wanted to save time. 113 08:30.600 --> 08:32.180 So that's exactly what I'm going to do. 114 08:32.190 --> 08:38.720 I'm going to copy that from here and then I'm going to try and add it to my articles collection. 115 08:38.820 --> 08:46.410 Now in order to do this I'm again gonna go insert document and I'm going to delete these two curly braces 116 08:46.830 --> 08:54.510 and paste everything I got over from GitHub. And you can see I've got three documents in here one that's 117 08:54.510 --> 08:59.350 got a title of API, another one about Bootstrap and another one about DOM. 118 08:59.460 --> 09:06.360 So let's go ahead and hit save and right click to view documents again and you see we now have four 119 09:06.420 --> 09:07.330 objects. 120 09:07.380 --> 09:14.880 So this is going to be our very rudimentary database which we're going to build our API around. So potentially 121 09:14.910 --> 09:25.680 any client can talk to our server in order to manipulate and change or retrieve data in our database. 122 09:25.710 --> 09:28.800 So for all of that and more, I'll see you on the next lesson.