1 00:00:00,360 --> 00:00:00,780 Beautiful. 2 00:00:01,230 --> 00:00:08,250 We are successfully done with the initial express set up and ready to cover more complex express topics. 3 00:00:08,730 --> 00:00:14,280 Before we do that, though, there's something important I want to mention is that when it comes to 4 00:00:14,280 --> 00:00:18,570 express, in most cases you'll use one of the two following options. 5 00:00:19,140 --> 00:00:24,350 You'll use it to set up API or templates with server side rendering. 6 00:00:24,840 --> 00:00:31,980 Now, since the term API is probably one of the most overused terms in the community and in various 7 00:00:31,980 --> 00:00:34,590 scenarios, it can mean different things. 8 00:00:34,980 --> 00:00:43,380 Let's start by understanding that in express or in a package, when we talk about API, we mean setting 9 00:00:43,380 --> 00:00:53,640 up HTP interface to interact with our data now data and using JSON, which stands for JavaScript object 10 00:00:53,640 --> 00:00:54,240 notation. 11 00:00:54,630 --> 00:01:01,710 And in order to send back our response, we're going to use, whereas that JSON method, which will 12 00:01:01,710 --> 00:01:08,220 do all the heavy lifting, like for example, setting up the propaganda type and string ify our data. 13 00:01:09,120 --> 00:01:16,770 The other flavor we have is server side rendering, where we will set up templates and send back entire 14 00:01:16,770 --> 00:01:24,680 HDMI, all access and JavaScript ourselves, and we're going to do that using words that ORENDER method. 15 00:01:25,170 --> 00:01:32,160 Now, since I'm a big believer in actual examples over slide's, if you are a bit iffy on either of 16 00:01:32,160 --> 00:01:33,990 these flavors, just all on a bit. 17 00:01:34,210 --> 00:01:38,430 And once we cover some examples, I promise you it will all make sense. 18 00:01:38,910 --> 00:01:40,860 Now, why am I telling you all of this? 19 00:01:41,220 --> 00:01:49,080 Is it when it comes to more complex Xpress topics, it only makes sense if we cover them properly using 20 00:01:49,080 --> 00:01:53,010 one of these flavors instead of just a bunch of random examples. 21 00:01:53,520 --> 00:01:56,240 And the option I picked is the API one. 22 00:01:56,970 --> 00:02:04,470 So in the following examples, we're going to construct API response using more advanced Xpress setups. 23 00:02:04,920 --> 00:02:12,390 The reason why I picked April is because I believe it lets us focus more on the actual express since 24 00:02:12,390 --> 00:02:18,150 templates by themselves add a bit more unnecessary overhead, especially while we're just starting out 25 00:02:18,150 --> 00:02:19,170 with Xpress. 26 00:02:19,500 --> 00:02:21,270 With that said, let me be very clear. 27 00:02:21,450 --> 00:02:29,640 If you grasp the concept with API, so using the API flavor, you'll have no problem implementing them 28 00:02:29,790 --> 00:02:35,640 with templates as well, since for the most part, Xpress concept setup is exactly the same. 29 00:02:36,120 --> 00:02:38,370 Will cover server side rendering later. 30 00:02:38,370 --> 00:02:42,120 And of course, so you'll have to wait a bit for the actual example. 31 00:02:42,300 --> 00:02:47,760 And since we're going to start with API, let me just stress the main point one more time and how it 32 00:02:47,760 --> 00:02:49,230 looks like in a real world. 33 00:02:49,740 --> 00:02:58,080 So like I said, the main idea with APIs is that our server provides data and well, that means that 34 00:02:58,080 --> 00:03:06,030 any Front-End app that wants to access it and use it can simply perform a AGP request and using our 35 00:03:06,030 --> 00:03:09,030 data, set up the API and functionality. 36 00:03:09,490 --> 00:03:12,010 How does that look like in a real world? 37 00:03:12,030 --> 00:03:20,490 Well, if you navigate again back to course API and of course not, the slides slides are just images. 38 00:03:20,730 --> 00:03:27,390 But if you take a look at any of these examples, you'll notice something interesting where we're sending 39 00:03:27,390 --> 00:03:34,290 back the data and you can clearly see that if you go again to your browser network tab. 40 00:03:34,560 --> 00:03:41,760 And here again, let's refresh and you'll see that this is our response React Taps project. 41 00:03:41,790 --> 00:03:48,480 So again, the full URL is, of course, API dot com and then react to project. 42 00:03:49,510 --> 00:03:55,990 And if we take a closer look, we can see that this is the response that we're sending, so we're sending 43 00:03:55,990 --> 00:04:01,000 back a JSON data and I can clearly see that in my head. 44 00:04:01,630 --> 00:04:07,330 So in response, as you can see, content type is application JSON. 45 00:04:07,690 --> 00:04:10,030 Now, where is this data used? 46 00:04:10,360 --> 00:04:19,390 If you took either of my recourse or the analogy, of course, you know that in the course we build 47 00:04:19,390 --> 00:04:26,890 quite a few projects where we practice data fettering, either using analogies or react. 48 00:04:27,190 --> 00:04:35,850 And in some examples we use external APIs and in some we use the APIs that are here in the course API. 49 00:04:36,160 --> 00:04:44,290 So, for example, with this reactance project, if you navigate to react project not lafi that app 50 00:04:44,650 --> 00:04:49,150 and keep on scrolling, keep on scrolling, you'll hit the tabs project. 51 00:04:49,450 --> 00:04:54,260 And here this is the app that we build using the data. 52 00:04:54,550 --> 00:05:01,270 So again on a server, I set up my data, I set up the API and I share the data. 53 00:05:01,630 --> 00:05:08,590 So I create the interface and then the front end up just simply grabs there. 54 00:05:08,590 --> 00:05:10,810 And again, if you want, you can check it out here. 55 00:05:11,080 --> 00:05:18,010 If you refresh notice this request request goes to course API React Taps project. 56 00:05:18,220 --> 00:05:25,720 So we grab the data on the front end and then we set up the functionality as well as user interface. 57 00:05:26,050 --> 00:05:27,310 Hopefully this is clear. 58 00:05:27,550 --> 00:05:32,740 From now on we are going to be responsible for sending back the data. 59 00:05:32,980 --> 00:05:38,890 So now since we're setting up the server, it's not going to be our responsibility to do something with 60 00:05:38,890 --> 00:05:41,860 it like we were doing on a front end. 61 00:05:42,160 --> 00:05:45,880 In this case, we are responsible for setting up the responses. 62 00:05:46,070 --> 00:05:53,140 So we're going to be setting up APIs that are actually interfaces to interact with our data.