1 00:00:02,160 --> 00:00:03,510 So we want to get started 2 00:00:03,510 --> 00:00:06,080 by building this example API. 3 00:00:06,080 --> 00:00:08,960 And actually, here's a challenge for you. 4 00:00:08,960 --> 00:00:10,720 Try building this on your own, 5 00:00:10,720 --> 00:00:13,603 though in a slightly simplified version, 6 00:00:13,603 --> 00:00:17,650 I want you to build a node express web server 7 00:00:17,650 --> 00:00:22,060 that has one route, a route to GET/quote, 8 00:00:22,060 --> 00:00:25,490 where you then return one string. 9 00:00:25,490 --> 00:00:29,860 Always the same string, no randomness, no list of strings, 10 00:00:29,860 --> 00:00:32,420 no database that needs to be connected, 11 00:00:32,420 --> 00:00:35,330 only a route that returns a string, 12 00:00:35,330 --> 00:00:38,660 but, don't return it as plain text, 13 00:00:38,660 --> 00:00:41,090 but instead as JSON data, 14 00:00:41,090 --> 00:00:45,003 because that is the default data format for exchanging data. 15 00:00:46,360 --> 00:00:48,050 This is a challenge for you, 16 00:00:48,050 --> 00:00:52,110 you won't need anything you wouldn't have learned thus far, 17 00:00:52,110 --> 00:00:54,600 I'll give you a couple of seconds to pause the video 18 00:00:54,600 --> 00:00:56,120 and try this on your own 19 00:00:56,120 --> 00:00:58,683 before we're then going to build this together. 20 00:01:01,750 --> 00:01:04,440 So, did you succeed? 21 00:01:04,440 --> 00:01:06,640 Let's build it together. 22 00:01:06,640 --> 00:01:09,160 For this I'm in a brand new folder, 23 00:01:09,160 --> 00:01:12,540 and I will actually start by opening the terminal 24 00:01:12,540 --> 00:01:15,740 and running NPM init-y. 25 00:01:15,740 --> 00:01:19,550 This will initialize this as a NPM managed project 26 00:01:19,550 --> 00:01:22,620 where we thereafter can use NPM install, 27 00:01:22,620 --> 00:01:25,210 since we now got a package.json file, 28 00:01:25,210 --> 00:01:26,500 and that's a key command 29 00:01:26,500 --> 00:01:29,600 so that we can then install all these packages we need 30 00:01:29,600 --> 00:01:32,223 and start building our node express project. 31 00:01:33,584 --> 00:01:35,237 Now once that's done, 32 00:01:35,237 --> 00:01:37,210 we can start installing packages, which we need, 33 00:01:37,210 --> 00:01:39,000 and in this case to get started, 34 00:01:39,000 --> 00:01:42,020 it's only one package, the express package. 35 00:01:42,020 --> 00:01:44,180 Since I wanna build a node express 36 00:01:44,180 --> 00:01:48,433 node JS application here, which will be our web API. 37 00:01:50,832 --> 00:01:51,870 And with that installed, 38 00:01:51,870 --> 00:01:55,420 we can add the good old app JS file again. 39 00:01:55,420 --> 00:01:59,560 And we could now also add sub folders for controllers 40 00:01:59,560 --> 00:02:02,270 and routes and so on, but, 41 00:02:02,270 --> 00:02:05,330 I won't do this here for this simple API, 42 00:02:05,330 --> 00:02:08,380 though of course you could do it, but if you do it, 43 00:02:08,380 --> 00:02:11,910 keep in mind that you won't need a views folder, 44 00:02:11,910 --> 00:02:14,870 so we won't use the MVC pattern here. 45 00:02:14,870 --> 00:02:17,410 You can use controllers and models, 46 00:02:17,410 --> 00:02:19,050 but you don't need views, 47 00:02:19,050 --> 00:02:22,570 because the core idea of a web service and web API 48 00:02:22,570 --> 00:02:25,360 is that there are no views. 49 00:02:25,360 --> 00:02:30,250 There will be no HTML code that we generate and send back. 50 00:02:30,250 --> 00:02:32,610 So there are no views. 51 00:02:32,610 --> 00:02:35,080 Nonetheless here, I'll keep it super simple 52 00:02:35,080 --> 00:02:37,730 and work only in this app JS file 53 00:02:37,730 --> 00:02:41,370 and in there, I'll then import express 54 00:02:41,370 --> 00:02:45,110 with that good old syntax that we already know, 55 00:02:45,110 --> 00:02:46,630 like this, 56 00:02:46,630 --> 00:02:51,630 create my express app by calling express as a function. 57 00:02:52,300 --> 00:02:55,223 And then I listen on port three thousand. 58 00:02:56,680 --> 00:03:00,280 Now, I want to have one route that I wanna handle, 59 00:03:00,280 --> 00:03:04,050 and that can be done with app.get. 60 00:03:04,050 --> 00:03:06,710 We could also create an express router, 61 00:03:06,710 --> 00:03:10,110 as we did it in most sections in this course. 62 00:03:10,110 --> 00:03:13,080 But if you remember, we got started with express 63 00:03:13,080 --> 00:03:16,380 in exactly the way I'm showing it to you here. 64 00:03:16,380 --> 00:03:19,360 You can also set up request listeners. 65 00:03:19,360 --> 00:03:22,700 So to say, directly on this app object, 66 00:03:22,700 --> 00:03:24,910 we just typically use the router 67 00:03:24,910 --> 00:03:27,920 so that we can outsource those route definitions 68 00:03:27,920 --> 00:03:30,110 in standalone files. 69 00:03:30,110 --> 00:03:32,400 But since I don't plan on doing this here, 70 00:03:32,400 --> 00:03:36,800 we can register a get route like this on the app object. 71 00:03:36,800 --> 00:03:41,800 And then as a first parameter value, pass our path to it, 72 00:03:41,950 --> 00:03:44,233 which in this case should be slash quote. 73 00:03:45,570 --> 00:03:47,530 And then, we can point at a function 74 00:03:47,530 --> 00:03:50,300 or define an anonymous function, 75 00:03:50,300 --> 00:03:54,010 which still gets request, response and next, 76 00:03:54,010 --> 00:03:56,760 that doesn't change because express doesn't care 77 00:03:56,760 --> 00:04:01,290 about what we build, so that always works in the same way. 78 00:04:01,290 --> 00:04:03,790 Everything about writing this back end code 79 00:04:03,790 --> 00:04:05,260 works in the same way, 80 00:04:05,260 --> 00:04:08,680 there is no difference between web APIs and websites 81 00:04:08,680 --> 00:04:10,690 when it comes to that. 82 00:04:10,690 --> 00:04:14,040 And hence here we can now send back our response 83 00:04:14,040 --> 00:04:15,360 by calling res.what. 84 00:04:18,040 --> 00:04:21,110 Before we most of the time called res.render, 85 00:04:21,110 --> 00:04:24,430 because we wanted to render a template. 86 00:04:24,430 --> 00:04:26,240 Here this doesn't make any sense though, 87 00:04:26,240 --> 00:04:30,340 because now as mentioned before, we won't render a template. 88 00:04:30,340 --> 00:04:32,140 We have no templates. 89 00:04:32,140 --> 00:04:35,610 And we don't want to send back HTML code, 90 00:04:35,610 --> 00:04:37,853 which is what res.render would do. 91 00:04:39,580 --> 00:04:42,560 Instead we can call a method on res 92 00:04:42,560 --> 00:04:45,520 that we have used before in the course as well. 93 00:04:45,520 --> 00:04:47,173 And that's the JSON method. 94 00:04:48,030 --> 00:04:51,680 We used it before in the course for all our routes 95 00:04:51,680 --> 00:04:54,803 that were triggered with Ajax requests. 96 00:04:55,690 --> 00:04:57,760 And in the end what we did back there, 97 00:04:57,760 --> 00:05:01,750 is we already built our own first API. 98 00:05:01,750 --> 00:05:04,420 We just didn't call it like that. 99 00:05:04,420 --> 00:05:09,420 But we built end points, HTTP method path combinations, 100 00:05:09,530 --> 00:05:12,880 that sent back data and did certain things 101 00:05:12,880 --> 00:05:15,853 when requests reached those end points. 102 00:05:16,710 --> 00:05:18,640 Of course we can call the routes 103 00:05:18,640 --> 00:05:22,550 that return HTML code end points as well, but this pattern, 104 00:05:22,550 --> 00:05:25,690 which we see here, that we return JSON code, 105 00:05:25,690 --> 00:05:28,980 is exactly the same pattern we also used before 106 00:05:28,980 --> 00:05:31,400 for those Ajax requests. 107 00:05:31,400 --> 00:05:35,480 Because those Ajax requests also didn't want HTML, 108 00:05:35,480 --> 00:05:37,653 instead they wanted JSON data. 109 00:05:39,040 --> 00:05:42,750 So here we can now pass an object to this JSON method, 110 00:05:42,750 --> 00:05:45,650 and it will be converted to a string 111 00:05:45,650 --> 00:05:50,140 in that JSON format automatically by express then, 112 00:05:50,140 --> 00:05:52,650 and there we could set a quote key 113 00:05:52,650 --> 00:05:54,970 or whatever you want to name it, 114 00:05:54,970 --> 00:05:57,117 and then we could add a quote like, 115 00:05:57,117 --> 00:06:02,117 "As you dive deeper into web development, 116 00:06:02,170 --> 00:06:06,777 web development will dive deeper into you!" 117 00:06:08,160 --> 00:06:10,820 So a very philosophical quote, 118 00:06:10,820 --> 00:06:12,840 of course you can choose any text, 119 00:06:12,840 --> 00:06:16,290 but this is now the quote which I'll return here, 120 00:06:16,290 --> 00:06:21,290 and that is my API end point, this registered route here. 121 00:06:21,860 --> 00:06:23,260 And again we could have done this 122 00:06:23,260 --> 00:06:27,253 with express router as well, but that works just as well. 123 00:06:28,320 --> 00:06:31,440 And we need nothing else, no other middleware, 124 00:06:31,440 --> 00:06:34,020 because we for example have no static files 125 00:06:34,020 --> 00:06:38,750 that need to be served since we won't render any webpages, 126 00:06:38,750 --> 00:06:41,270 we won't have any static files, 127 00:06:41,270 --> 00:06:43,700 because we have no CSS code and so on. 128 00:06:43,700 --> 00:06:45,790 If we're just building an API, 129 00:06:45,790 --> 00:06:49,340 that's the idea behind an API, that we just exchange data 130 00:06:49,340 --> 00:06:53,870 and that we don't render any web pages that might need CSS. 131 00:06:53,870 --> 00:06:57,770 So therefore we have no middleware that serves static files, 132 00:06:57,770 --> 00:06:59,090 nothing like that, 133 00:06:59,090 --> 00:07:01,950 though in the later examples of this section 134 00:07:01,950 --> 00:07:04,310 we will also add some middleware. 135 00:07:04,310 --> 00:07:06,110 Because there are a lot of use cases 136 00:07:06,110 --> 00:07:07,683 where you need that as well. 137 00:07:08,670 --> 00:07:11,580 Nonetheless that's the first simple API here 138 00:07:11,580 --> 00:07:13,730 and we could now install node one, 139 00:07:13,730 --> 00:07:16,290 or to keep things simple here, 140 00:07:16,290 --> 00:07:20,073 just manually run this by running node app.js. 141 00:07:20,990 --> 00:07:24,150 And now this web server is up and running. 142 00:07:24,150 --> 00:07:25,740 And now to view its effect, 143 00:07:25,740 --> 00:07:29,890 we can enter local host:3000/quote. 144 00:07:29,890 --> 00:07:32,710 And this will send a GET request to this path 145 00:07:32,710 --> 00:07:35,763 and hence it will trigger this API end point. 146 00:07:36,600 --> 00:07:38,272 So if I hit enter here, 147 00:07:38,272 --> 00:07:42,223 here's my JSON response output in the browser. 148 00:07:43,700 --> 00:07:48,620 And that is our first basic web API and API end point. 149 00:07:48,620 --> 00:07:51,330 And as you see, there's nothing fancy about that. 150 00:07:51,330 --> 00:07:55,370 And that indeed is one of the key takeaways I want you 151 00:07:55,370 --> 00:07:58,640 to take away from this lecture and this section. 152 00:07:58,640 --> 00:08:02,240 APIs are just web servers and projects 153 00:08:02,240 --> 00:08:04,730 as we built them throughout the course. 154 00:08:04,730 --> 00:08:07,110 In the end it's just the return value, 155 00:08:07,110 --> 00:08:09,920 the response value that's different. 156 00:08:09,920 --> 00:08:13,110 We always exchange data here, we don't build the views, 157 00:08:13,110 --> 00:08:15,130 we have no CSS code, 158 00:08:15,130 --> 00:08:17,870 instead it's all about what happens on the server 159 00:08:17,870 --> 00:08:22,140 and the data we get and use and the data we send back. 160 00:08:22,140 --> 00:08:24,790 And with that we can now take our next steps 161 00:08:24,790 --> 00:08:28,803 and make this API at least a little bit more complex here.