1 00:00:03,650 --> 00:00:10,755 Now that we have completed developing a full-fledged Rest API server using LoopBack, 2 00:00:10,755 --> 00:00:14,639 the immediate next question that will arise in your mind is, 3 00:00:14,639 --> 00:00:20,090 how do we adapt the Angular application to make use of this Rest API server? 4 00:00:20,090 --> 00:00:23,135 As we have done in the previous cases, 5 00:00:23,135 --> 00:00:29,190 we will also need to reconfigure our Angular application to specifically make use of 6 00:00:29,190 --> 00:00:31,385 the Rest API endpoints and 7 00:00:31,385 --> 00:00:37,190 the various Rest API requests as exposed by our LoopBack server. 8 00:00:37,190 --> 00:00:40,295 Now, this is where we will take advantage of 9 00:00:40,295 --> 00:00:46,865 a LoopBack SDK that can be automatically built for us using a Node module. 10 00:00:46,865 --> 00:00:51,214 We'll look at our LoopBack servers, 11 00:00:51,214 --> 00:00:56,975 various Rest API endpoints and automatically construct the SDK, 12 00:00:56,975 --> 00:00:59,480 which we can then incorporate into 13 00:00:59,480 --> 00:01:04,380 our Angular application and then be able to communicate with our LoopBack server, 14 00:01:04,380 --> 00:01:10,055 both for authentication and also to be able to exchange data. 15 00:01:10,055 --> 00:01:13,000 To get started on this exercise, 16 00:01:13,000 --> 00:01:17,045 first clone the git repository that contains 17 00:01:17,045 --> 00:01:23,535 a partially completed Angular application that communicates with our LoopBack server. 18 00:01:23,535 --> 00:01:26,730 So, to do that, go to your convenient location on your computer. 19 00:01:26,730 --> 00:01:29,580 So, here I'm in my Coursera Angular folder. 20 00:01:29,580 --> 00:01:33,390 I'm going to clone the git repository by 21 00:01:33,390 --> 00:01:35,680 typing git clone 22 00:01:41,510 --> 00:01:51,270 https://github.com/jmuppala/conFusion-Angular6-LoopBack.git, 23 00:01:51,270 --> 00:01:54,160 and then clone this git repository. 24 00:01:55,460 --> 00:01:58,645 Once the git repository is cloned, 25 00:01:58,645 --> 00:02:08,355 then we will move into the conFusion Angular6 LoopBack folder and then 26 00:02:08,355 --> 00:02:12,370 perform an NPM install to install 27 00:02:12,370 --> 00:02:19,135 all the node modules for this partially completed Angular application. 28 00:02:19,135 --> 00:02:26,670 To automatically build the LoopBack software development kit for our LoopBack server, 29 00:02:26,670 --> 00:02:32,125 we're going to take the help of this LoopBack SDK Builder node module. 30 00:02:32,125 --> 00:02:34,955 So, this LoopBack SDK Builder 31 00:02:34,955 --> 00:02:39,140 is a community-driven node module that is actually developed 32 00:02:39,140 --> 00:02:46,380 from the official LoopBack SDK Angular which LoopBack developers had released. 33 00:02:46,380 --> 00:02:50,160 The Loopback SDK Angular supported Angular JS. 34 00:02:50,160 --> 00:02:53,885 So, this has been modified in this Loopback SDK Builder 35 00:02:53,885 --> 00:02:58,390 to support the Angular two and about applications. 36 00:02:58,390 --> 00:03:01,090 So, the LoopBack SDK Builder, 37 00:03:01,090 --> 00:03:10,155 the node module itself once it is installed into your server project folder, 38 00:03:10,155 --> 00:03:13,610 then you can make use of the LoopBack SDK Builder to 39 00:03:13,610 --> 00:03:18,810 automatically pass through your LoopBack application that you have already built. 40 00:03:18,810 --> 00:03:22,190 This will automatically build everything we 41 00:03:22,190 --> 00:03:25,610 need to get started on our Angular application. 42 00:03:25,610 --> 00:03:27,765 So, it builds the software development kit. 43 00:03:27,765 --> 00:03:30,155 So, within the software development kit, 44 00:03:30,155 --> 00:03:35,995 the LoopBack SDK Builder exports all the interfaces, 45 00:03:35,995 --> 00:03:41,930 all the models for the various data that we're going to be storing on 46 00:03:41,930 --> 00:03:44,390 our LoopBack server and also 47 00:03:44,390 --> 00:03:49,520 all the API services that can be used within your Angular application. 48 00:03:49,520 --> 00:03:55,485 So, your models and your services automatically come for the ride once you build the SDK. 49 00:03:55,485 --> 00:04:00,935 Now it's just a matter of incorporating this SDK into our Angular application, 50 00:04:00,935 --> 00:04:03,265 and then quickly getting started. 51 00:04:03,265 --> 00:04:08,010 Since we have already built our Angular application in a previous course, 52 00:04:08,010 --> 00:04:11,900 I'm going to retrofit that application to make use of 53 00:04:11,900 --> 00:04:16,660 the LoopBack SDK that we will export from this LoopBack SDK Builder. 54 00:04:16,660 --> 00:04:18,620 In the previous step, 55 00:04:18,620 --> 00:04:20,030 you have just installed 56 00:04:20,030 --> 00:04:23,420 the partially-completed Angular application which has 57 00:04:23,420 --> 00:04:27,305 already been adapted to make use of the LoopBack SDK. 58 00:04:27,305 --> 00:04:30,070 So, let's go ahead and construct 59 00:04:30,070 --> 00:04:33,855 the LoopBack SDK and then deploy it into our Angular application, 60 00:04:33,855 --> 00:04:41,605 and then go ahead and compile our Angular application and get started with it. 61 00:04:41,605 --> 00:04:44,390 To setup the LoopBack SDK, 62 00:04:44,390 --> 00:04:51,830 go to the LoopBack server folder in your terminal tab or in your command window. 63 00:04:51,830 --> 00:04:57,355 So here I am in my LoopBack server folder. 64 00:04:57,355 --> 00:04:58,855 So, in this folder, 65 00:04:58,855 --> 00:05:14,185 let me go ahead and install that LoopBack 66 00:05:14,185 --> 00:05:16,960 SDK Builder. 67 00:05:16,960 --> 00:05:19,535 Once the builder is installed, 68 00:05:19,535 --> 00:05:22,625 let's go ahead and build the LoopBack SDK. 69 00:05:22,625 --> 00:05:24,835 To build the LoopBack SDK, 70 00:05:24,835 --> 00:05:34,460 we're going take the help of the LB-SDK command line tool that this LoopBack SDK module, 71 00:05:34,460 --> 00:05:36,370 automatically configures for us. 72 00:05:36,370 --> 00:05:42,060 So, to access that, we'll say,./node modules. 73 00:05:42,060 --> 00:05:43,610 So, in the node modules, 74 00:05:43,610 --> 00:05:47,570 there is a.bin folder that is automatically created whenever you 75 00:05:47,570 --> 00:05:51,770 install various node modules into the folder there. 76 00:05:51,770 --> 00:05:55,040 So, to go to the.bin folder, 77 00:05:55,040 --> 00:06:01,540 we will access this LB-SDK command there, 78 00:06:01,540 --> 00:06:03,490 that gets automatically installed, 79 00:06:03,490 --> 00:06:07,850 then we will call this width server./server.js, 80 00:06:12,430 --> 00:06:20,310 and we need to specify the path to the Angular application that we have just configured. 81 00:06:20,310 --> 00:06:23,180 So, my Angular application is currently in 82 00:06:23,180 --> 00:06:28,865 my documents Coursera angular conFusion angular LoopBack folder. 83 00:06:28,865 --> 00:06:31,410 So, let me copy that part over. 84 00:06:31,410 --> 00:06:36,470 Then let me go into my terminal or the command window 85 00:06:36,470 --> 00:06:41,600 where I am trying to configure my LoopBack SDK. 86 00:06:41,600 --> 00:06:43,490 So, at the prompt, 87 00:06:43,490 --> 00:06:45,995 since it is in My Documents folder, 88 00:06:45,995 --> 00:06:55,540 I'm going to type in the full path to this starting from my root folder in my mac. 89 00:06:55,540 --> 00:06:57,680 If you are using their Windows, 90 00:06:57,680 --> 00:07:04,370 make sure that this path indicates the complete path starting from C colon or D colon, 91 00:07:04,370 --> 00:07:07,540 whichever drive you're installing it on your Windows machine. 92 00:07:07,540 --> 00:07:12,650 So, the complete path to your angular LoopBack folder, 93 00:07:12,650 --> 00:07:15,505 and then we'll say, 94 00:07:15,505 --> 00:07:21,900 /SRC, the source folder there, and then app. 95 00:07:21,900 --> 00:07:24,710 Then, we're going to be deploying the SDK into 96 00:07:24,710 --> 00:07:30,120 the shared folder in the SDK subfolder there. 97 00:07:30,430 --> 00:07:36,680 We want this LoopBack SDK Builder to 98 00:07:36,680 --> 00:07:43,570 automatically deploy the NG2 web version of the SDK. 99 00:07:43,570 --> 00:07:45,879 So, this is the version that will support 100 00:07:45,879 --> 00:07:50,380 web applications and our Angular application in this case. 101 00:07:50,380 --> 00:07:54,870 If you are constructing this for a native script application, then you will say, 102 00:07:54,870 --> 00:08:00,050 NG2 native to build the SDK for the Native Script application. 103 00:08:00,050 --> 00:08:02,380 Since I am building my Angular application, 104 00:08:02,380 --> 00:08:04,580 I'll just say, NG2 web, 105 00:08:04,580 --> 00:08:08,190 and then let the Loopback SDK Builder automatically 106 00:08:08,190 --> 00:08:12,230 build the software development kit and then deploy it 107 00:08:12,230 --> 00:08:20,780 into my Angular applications source app/shared/sdk folder there. 108 00:08:20,780 --> 00:08:23,715 So, after a few seconds, 109 00:08:23,715 --> 00:08:29,915 the SDK is built and deployed to my Angular application. 110 00:08:29,915 --> 00:08:33,250 Now before I start up my Angular application, 111 00:08:33,250 --> 00:08:36,730 let me start up my LoopBack server, 112 00:08:36,730 --> 00:08:40,820 and before I do that I will go to another terminal tab 113 00:08:40,820 --> 00:08:44,900 here and then start up my MongoDB server, 114 00:08:44,900 --> 00:08:45,955 so well I'll say, 115 00:08:45,955 --> 00:08:55,790 Mongod --dbpath=data, and then 116 00:08:55,790 --> 00:08:57,890 start up my MongoDB server. 117 00:08:57,890 --> 00:09:02,760 First, let me start up my LoopBack server. 118 00:09:02,760 --> 00:09:07,710 So, at the prompt NPM start, 119 00:09:07,710 --> 00:09:12,140 and my LoopBack server should be up and running in a short while. 120 00:09:12,140 --> 00:09:17,555 Then, now going to my LoopBack application, 121 00:09:17,555 --> 00:09:20,645 let me open this application in 122 00:09:20,645 --> 00:09:25,890 my Visual Studio code so that we can look at the source code. 123 00:09:27,500 --> 00:09:31,665 Once my application is open in Visual Studio code, 124 00:09:31,665 --> 00:09:37,315 let me take that into a new desktop Window. 125 00:09:37,315 --> 00:09:45,200 Then, let me also start my Angular application deployment 126 00:09:45,200 --> 00:09:53,645 by typing NGServe at the prompt and wait for my Angular application to get compiled. 127 00:09:53,645 --> 00:09:57,785 Once my Angular application is compiled and applied, 128 00:09:57,785 --> 00:10:00,910 let me go to a browser, 129 00:10:00,910 --> 00:10:04,810 and then first checkout this Angular application. 130 00:10:04,810 --> 00:10:06,935 Going to the browser, 131 00:10:06,935 --> 00:10:09,455 let me open a new tab here, 132 00:10:09,455 --> 00:10:13,760 and then type in localhost: 4200 and you will see 133 00:10:13,760 --> 00:10:18,345 the Angular application deployed to this browser window here, 134 00:10:18,345 --> 00:10:21,070 and you can see that the Home, 135 00:10:21,070 --> 00:10:25,095 the About Us page with all the data, 136 00:10:25,095 --> 00:10:32,740 then the Menu and also the My Favorites. 137 00:10:34,120 --> 00:10:38,410 Currently which is not showing anything because 138 00:10:38,410 --> 00:10:42,640 no user is logged in and the contact page, just like before. 139 00:10:42,640 --> 00:10:47,520 So to log in, let me log in as a user and then I will be typing 140 00:10:47,520 --> 00:10:52,540 in my username and a password here, 141 00:10:52,540 --> 00:10:59,030 and then once I log in then you'll be able to see that when I go to My Favorites, 142 00:10:59,030 --> 00:11:04,665 the Favorites of this particular user will be displayed here. 143 00:11:04,665 --> 00:11:08,680 Just like before, we can type comments and then submit comments, 144 00:11:08,680 --> 00:11:13,515 and then also add items to the favorites and so on. 145 00:11:13,515 --> 00:11:16,900 All the functionality that you have seen with the earlier versions of 146 00:11:16,900 --> 00:11:22,740 the Angular application are also supported in this version of the Angular application. 147 00:11:22,740 --> 00:11:28,860 Also for your LoopBack server to be able to serve up images, 148 00:11:28,860 --> 00:11:36,235 all this data will be stored in your server code in the client folder of the server code. 149 00:11:36,235 --> 00:11:39,975 So, in the client folder of my LoopBack server, 150 00:11:39,975 --> 00:11:43,010 notice that I have created this sub folder 151 00:11:43,010 --> 00:11:47,365 named images and then stored all the images into the subfolder. 152 00:11:47,365 --> 00:11:52,010 Now, in order for these images to be served and also for 153 00:11:52,010 --> 00:11:58,930 the client folder to be used as the public folder for my LoopBack server, 154 00:11:58,930 --> 00:12:02,630 then in a couple of changes that I need to make to my LoopBack server. 155 00:12:02,630 --> 00:12:05,100 Now, the first thing that you need to do is, 156 00:12:05,100 --> 00:12:08,275 go into the boot folder and in the boot folder, 157 00:12:08,275 --> 00:12:12,250 you would see this root.js file here, 158 00:12:12,250 --> 00:12:15,025 which contains this information here. 159 00:12:15,025 --> 00:12:18,410 Now, you can either delete the root.js file 160 00:12:18,410 --> 00:12:22,330 or simply rename the root.js file to something else. 161 00:12:22,330 --> 00:12:29,630 So here, you see that I have renamed this file to root.jsold with the extension jsold. 162 00:12:29,630 --> 00:12:34,190 Now, this file should not contain the.js extension anymore. 163 00:12:34,190 --> 00:12:37,430 So, anything other than the.js extension is fine. 164 00:12:37,430 --> 00:12:39,975 So, what this means is that in this case, 165 00:12:39,975 --> 00:12:45,250 my LoopBack server, when it starts up will not execute the code in this folder. 166 00:12:45,250 --> 00:12:51,745 Now, when you look at the code in the root.js file which was configured earlier, 167 00:12:51,745 --> 00:12:55,605 you saw that the router was configured such that, 168 00:12:55,605 --> 00:13:00,955 when you access the slash which is the root folder of your servers, 169 00:13:00,955 --> 00:13:05,170 then it will simply serve up the servers LoopBack status and indeed, 170 00:13:05,170 --> 00:13:08,175 that is what we saw our LoopBack server serving up 171 00:13:08,175 --> 00:13:15,055 the uptime and the last restarted time for our server. 172 00:13:15,055 --> 00:13:16,590 We don't want it to do that, 173 00:13:16,590 --> 00:13:20,920 instead we want our LoopBack server to be able to use whatever we 174 00:13:20,920 --> 00:13:25,390 put in the client folder as the public folder and so 175 00:13:25,390 --> 00:13:27,900 any client application can be deployed to 176 00:13:27,900 --> 00:13:31,590 the client folder of my LoopBack server and should be 177 00:13:31,590 --> 00:13:39,250 accessed when we access the LoopBack server at its standard slash end points. 178 00:13:39,250 --> 00:13:43,940 So, that is the root of the server folder. 179 00:13:43,940 --> 00:13:46,890 So, to do that, first thing that you need to do is to 180 00:13:46,890 --> 00:13:50,560 change this root.js files name to root. 181 00:13:50,560 --> 00:13:53,245 for example, you can just simply rename that to 182 00:13:53,245 --> 00:13:56,440 root.jsold or you can just delete that file. 183 00:13:56,440 --> 00:14:00,325 That file will not be needed in this version of my LoopBack server. 184 00:14:00,325 --> 00:14:01,840 Now, not only that, 185 00:14:01,840 --> 00:14:08,265 the second part that you need to reconfigure is to go into the middleware.json file here. 186 00:14:08,265 --> 00:14:10,230 The middleware.json file. 187 00:14:10,230 --> 00:14:12,170 In the middleware.json file, 188 00:14:12,170 --> 00:14:14,605 if you scroll down, 189 00:14:14,605 --> 00:14:17,195 you will see that in here, 190 00:14:17,195 --> 00:14:23,755 originally this will just simply contain files: and then an empty a brace here. 191 00:14:23,755 --> 00:14:26,505 Now, into that empty brace here, 192 00:14:26,505 --> 00:14:28,420 just add this code here, 193 00:14:28,420 --> 00:14:36,430 which says loopback#static and it says params$!../client. 194 00:14:36,820 --> 00:14:41,025 So, this will indicate to my LoopBack server 195 00:14:41,025 --> 00:14:45,670 that the client folder that is available here 196 00:14:45,670 --> 00:14:53,800 should be used as the static public folder for my LoopBack server. 197 00:14:53,800 --> 00:14:58,790 So, anything put in the client folder can be accessed from my server. 198 00:14:58,790 --> 00:15:05,725 So, this is the additional change that you need to do to the middleware.json file. 199 00:15:05,725 --> 00:15:08,235 So, once you do these two changes, 200 00:15:08,235 --> 00:15:15,030 then your LoopBack server will be all configured to serve up the data including 201 00:15:15,030 --> 00:15:17,940 the images which you're going to put into 202 00:15:17,940 --> 00:15:22,575 the images subfolder under the client folder here. 203 00:15:22,575 --> 00:15:28,475 So, make sure to copy the images into the client folder here and the second one is to 204 00:15:28,475 --> 00:15:34,625 go to the middleware.json file in the server folder, 205 00:15:34,625 --> 00:15:37,265 and then update this part. 206 00:15:37,265 --> 00:15:43,860 Once we do that, then these images can be accessed by simply accessing 207 00:15:43,860 --> 00:15:48,760 the /images/ the image file name to access 208 00:15:48,760 --> 00:15:54,120 these images because our dishes, 209 00:15:54,120 --> 00:16:00,390 leaders, and the promotions will require this image files and 210 00:16:00,390 --> 00:16:03,525 so that will be available for us from 211 00:16:03,525 --> 00:16:08,080 the LoopBack server and also whatever you put in the client folder. 212 00:16:08,080 --> 00:16:14,050 So for example, you can prepare the distribution folder 213 00:16:14,050 --> 00:16:16,920 for your Angular application and simply copy 214 00:16:16,920 --> 00:16:21,025 the entire distribution folder contents into the client folder here, 215 00:16:21,025 --> 00:16:25,220 and then if you access the LoopBack server at 216 00:16:25,220 --> 00:16:30,850 its standard root endpoint 217 00:16:30,850 --> 00:16:37,565 then your Angular application will be automatically served up by your LoopBack server. 218 00:16:37,565 --> 00:16:43,950 So, these are the two changes that you need to make to your LoopBack server. 219 00:16:43,950 --> 00:16:49,700 Of course, you must be curious about how exactly is this SDK built, 220 00:16:49,700 --> 00:16:52,820 where exactly is this SDK and how am I actually 221 00:16:52,820 --> 00:16:56,045 going to make use of it within my Angular application. 222 00:16:56,045 --> 00:17:01,955 So, to do that, let's go to our Angular application and in the source folder, 223 00:17:01,955 --> 00:17:04,375 under source app folder, 224 00:17:04,375 --> 00:17:06,565 now when you open the shared folder, 225 00:17:06,565 --> 00:17:13,235 you would see that there is a subfolder here named SDK and inside this SDK subfolder, 226 00:17:13,235 --> 00:17:16,365 you'll find a whole bunch of files here, 227 00:17:16,365 --> 00:17:22,565 lb.config.ts, index.ts and within the storage sockets, 228 00:17:22,565 --> 00:17:25,330 the services, and inside the service, 229 00:17:25,330 --> 00:17:28,255 you have custom services and core services here, 230 00:17:28,255 --> 00:17:31,960 and the various models that are deployed here. 231 00:17:31,960 --> 00:17:36,630 The models actually contain the model structures 232 00:17:36,630 --> 00:17:42,605 for our various models that we're implementing. 233 00:17:42,605 --> 00:17:45,280 Now, this is the LoopBack SDK. 234 00:17:45,280 --> 00:17:49,430 This code is automatically built for you and if you want to, 235 00:17:49,430 --> 00:17:52,800 you can simply go in and then 236 00:17:52,800 --> 00:17:57,030 pass through these files to just see what is available there. 237 00:17:57,030 --> 00:18:00,560 Make sure not to modify any of the files in 238 00:18:00,560 --> 00:18:02,940 this SDK subfolder because this is 239 00:18:02,940 --> 00:18:06,040 automatically built for you by the Loopback SDK Builder, 240 00:18:06,040 --> 00:18:10,355 and this will contain everything configured so that 241 00:18:10,355 --> 00:18:15,125 your LoopBack server can be accessed from your Angular application. 242 00:18:15,125 --> 00:18:19,240 The services that I'm going to make use are all available in here. 243 00:18:19,240 --> 00:18:21,630 Now, how do we make use of this? 244 00:18:21,630 --> 00:18:25,600 So, to help you understand how we make use of this, 245 00:18:25,600 --> 00:18:33,725 let's visit our home component and then see how the home component is now update. 246 00:18:33,725 --> 00:18:35,855 So, when you go to the home component, 247 00:18:35,855 --> 00:18:44,125 you will notice that I am now importing dishes from../shared/sdk/models. 248 00:18:44,125 --> 00:18:47,950 So, this is the models that is automatically exported into 249 00:18:47,950 --> 00:18:52,390 the SDK by my Loopback SDK Builder. 250 00:18:52,390 --> 00:18:57,010 So, this is where my dishes model will be defined there. 251 00:18:57,010 --> 00:18:59,450 So, I'm just going to leverage the dishes model. 252 00:18:59,450 --> 00:19:06,290 Similarly, the service itself is available as this DishesAPI, 253 00:19:06,290 --> 00:19:15,220 as you can see here and this DishesAPI is in the../shared/sdk/services folder here. 254 00:19:15,220 --> 00:19:18,280 Similarly, the promotions and the promotions API, 255 00:19:18,280 --> 00:19:20,110 and leaders and leaders API. 256 00:19:20,110 --> 00:19:24,750 So, these are all built automatically for me by the Loopback SDK Builder. 257 00:19:24,750 --> 00:19:26,720 Now, then you go into the code, 258 00:19:26,720 --> 00:19:31,045 you will now notice that I will declare the dish as dishes, 259 00:19:31,045 --> 00:19:35,455 promotion as promotions, and leader as /leaders. 260 00:19:35,455 --> 00:19:39,955 These three are the models that are exported by the Loopback SDK Builder. 261 00:19:39,955 --> 00:19:44,905 Also notice how I have reconfigured the three services here. 262 00:19:44,905 --> 00:19:48,090 Now, my dish service is referring to dishes API, 263 00:19:48,090 --> 00:19:50,950 promotion services referring to promotions API, 264 00:19:50,950 --> 00:19:55,825 and leader service to API leaders API, 265 00:19:55,825 --> 00:19:59,980 and also notice how I access the dish service here. 266 00:19:59,980 --> 00:20:06,290 So, I'll say this dish service find one and where featured equal to true. 267 00:20:06,290 --> 00:20:14,539 So, this is where you recall that in my LoopBack rest API Explorer, 268 00:20:14,539 --> 00:20:20,405 I had typed this into the filter there, 269 00:20:20,405 --> 00:20:23,490 then I tried to find the dishes there. 270 00:20:23,490 --> 00:20:27,260 So, that is exactly what I'm doing here also in my code here. 271 00:20:27,260 --> 00:20:30,140 So, this findOne, then supplied with this, 272 00:20:30,140 --> 00:20:34,140 will find one item and then return that here, 273 00:20:34,140 --> 00:20:38,240 and then that I am assigning each to this dish here and 274 00:20:38,240 --> 00:20:43,510 the rest of my Angular application works exactly the same way as before. 275 00:20:43,510 --> 00:20:47,490 Now, also notice that in the constructor, 276 00:20:47,490 --> 00:20:52,945 note how I have configured this called the LoopBack config. 277 00:20:52,945 --> 00:20:59,685 Now, to do the LoopBack config in every component that you are making use of, 278 00:20:59,685 --> 00:21:09,280 you need to import this LoopBack config from this shared SDK folder here and also, 279 00:21:09,280 --> 00:21:13,790 this API version that I declare. 280 00:21:14,410 --> 00:21:19,340 I've updated this baseurl.ts file. 281 00:21:19,340 --> 00:21:21,720 So in the base URL folder, 282 00:21:21,720 --> 00:21:31,330 I have updated this to my name of my computer colon 3,000. 283 00:21:31,330 --> 00:21:35,510 So, this one make sure to replace this with 284 00:21:35,510 --> 00:21:42,460 the IP address or the name of your specific computer on which you are running. 285 00:21:42,460 --> 00:21:50,350 So, make sure to update the base URL here and the API version here is simply a string. 286 00:21:50,350 --> 00:21:52,560 Saying API here. 287 00:21:52,560 --> 00:21:58,790 So these two are going to be used in my home component.ts file. 288 00:21:58,790 --> 00:22:02,560 So I'm importing this API version here and the LoopBackConfig. 289 00:22:02,560 --> 00:22:05,475 The baseURL I am already injecting 290 00:22:05,475 --> 00:22:10,640 into my constructor here so that is already available here, 291 00:22:10,640 --> 00:22:14,890 and then in my constructor of my component, 292 00:22:14,890 --> 00:22:19,440 I've need to do these two statements here. 293 00:22:19,440 --> 00:22:22,190 So, we'll say, "LoopBack set base URL 294 00:22:22,190 --> 00:22:25,120 to base URL" which is the same as the one that I've just 295 00:22:25,120 --> 00:22:31,950 injected there and then look back on set API Version to API version here. 296 00:22:31,950 --> 00:22:36,695 So these two I need to configure in my home component 297 00:22:36,695 --> 00:22:41,815 and also any other component where I am accessing my LoopBack server, 298 00:22:41,815 --> 00:22:43,425 I need to configure this. 299 00:22:43,425 --> 00:22:48,060 Now, LoopBack SDK builder suggests that we need to 300 00:22:48,060 --> 00:22:53,880 do this in every single one of the components here. 301 00:22:53,880 --> 00:23:01,775 Also, you will notice that if you go to the app module.ts file in the app module.ts file, 302 00:23:01,775 --> 00:23:08,610 I have removed all the inputs of all the other services and instead I am importing 303 00:23:08,610 --> 00:23:15,480 this here called import SDK Browser module from share SDK here. 304 00:23:15,480 --> 00:23:18,110 SDK Browser module here, 305 00:23:18,110 --> 00:23:24,075 and if you go down into the inputs here, 306 00:23:24,075 --> 00:23:31,635 you will see that I have configured this SDK Browser module.forRoot here in the inputs. 307 00:23:31,635 --> 00:23:38,180 So this SDK Browser module is automatically configured when we build our LoopBack SDK and 308 00:23:38,180 --> 00:23:41,000 we just need to import that into our app 309 00:23:41,000 --> 00:23:44,705 module.ts file and also notice that the providers, 310 00:23:44,705 --> 00:23:46,895 this is where we configured our services, 311 00:23:46,895 --> 00:23:49,540 doesn't contain any of the services anymore because that 312 00:23:49,540 --> 00:23:52,745 comes as part of my LoopBack SDK, 313 00:23:52,745 --> 00:23:56,715 so the only thing that I am providing is the base URL here. 314 00:23:56,715 --> 00:24:02,510 I've removed all the other ones from my app module.ts file here. 315 00:24:03,180 --> 00:24:07,325 So, that is one change that you will notice. 316 00:24:07,325 --> 00:24:11,720 So similarly if you go to the About component.ts file, 317 00:24:11,720 --> 00:24:14,740 the DishDetail component.ts file, 318 00:24:14,740 --> 00:24:19,740 the favorites component.ts file and and also the menu component.ts file. 319 00:24:19,740 --> 00:24:22,420 So let's look at the menu component.ts file. 320 00:24:22,420 --> 00:24:25,190 So you will see here again I'm importing this 321 00:24:25,190 --> 00:24:29,370 four and then in my menu component I am saying, 322 00:24:29,370 --> 00:24:33,075 Dish services dishes API and then I am 323 00:24:33,075 --> 00:24:37,400 configuring the LoopBackConfig set baseURL setAPI version. 324 00:24:37,400 --> 00:24:42,550 I've already done that in the Angular repository that I have provided for 325 00:24:42,550 --> 00:24:49,235 you for my angular application for LoopBack server, 326 00:24:49,235 --> 00:24:54,220 and also, you will see that I have just made some modification here. 327 00:24:54,220 --> 00:25:00,225 So if you want to find all the items from the dish service so you simply say 328 00:25:00,225 --> 00:25:03,335 dishService.find and that'll return 329 00:25:03,335 --> 00:25:09,100 all the dishes that are there in my LoopBack server here. 330 00:25:09,100 --> 00:25:11,425 So that's what I'm retrieving here. 331 00:25:11,425 --> 00:25:15,435 So the rest of the code should look familiar here except that here I call 332 00:25:15,435 --> 00:25:20,010 dishes is equal to dishes and array of dishes here. 333 00:25:20,010 --> 00:25:22,995 So that's the change that you will see in menu component. 334 00:25:22,995 --> 00:25:28,810 Now, you must be wondering how does user authentication work in this case. 335 00:25:28,810 --> 00:25:32,275 For user authentication, let me draw your attention to 336 00:25:32,275 --> 00:25:35,800 two places where I am making use of the user authentication. 337 00:25:35,800 --> 00:25:38,735 Let's first go to the login component. 338 00:25:38,735 --> 00:25:40,990 So, in the login component, 339 00:25:40,990 --> 00:25:46,030 you would see that in the login component I am importing these two here, 340 00:25:46,030 --> 00:25:49,970 the customer API which is the services that allow me to 341 00:25:49,970 --> 00:25:54,245 do user authentication and logging in and logging out, 342 00:25:54,245 --> 00:25:57,430 and also I am importing the customer model and 343 00:25:57,430 --> 00:26:00,995 access token model and in the login component, 344 00:26:00,995 --> 00:26:06,320 you would see that by Auth service now is nothing but customer API and 345 00:26:06,730 --> 00:26:15,670 also you will notice that in the login component when the login form is submitted, 346 00:26:15,670 --> 00:26:19,530 I call this AuthService.login. 347 00:26:19,530 --> 00:26:24,655 This login function that is available through the customer API. 348 00:26:24,655 --> 00:26:30,775 Recall when we tried to login using the LoopBack rest API explorer, 349 00:26:30,775 --> 00:26:36,500 we were using the customer endpoint to login to the system. 350 00:26:36,500 --> 00:26:39,310 So that is exactly what I'm doing in code here. 351 00:26:39,310 --> 00:26:43,335 So we'll say this Authservice.login and here you see that 352 00:26:43,335 --> 00:26:47,930 it takes these free parameters here, 353 00:26:47,930 --> 00:26:55,425 the username and the password as the first JavaScript object here, 354 00:26:55,425 --> 00:27:01,755 and then I am also specifying this user.remember.,.remember is the flag 355 00:27:01,755 --> 00:27:08,310 from the remember me checkbox that we have in our login components dialogue there. 356 00:27:08,310 --> 00:27:12,180 So, when the user checks that in the user's information will be 357 00:27:12,180 --> 00:27:16,095 automatically persisted by the SDK. 358 00:27:16,095 --> 00:27:18,945 The Auth service that is provided inside the SDK. 359 00:27:18,945 --> 00:27:21,275 So, now you see that I don't need to 360 00:27:21,275 --> 00:27:24,290 explicitly implement any authorization service that is 361 00:27:24,290 --> 00:27:26,940 automatically available to me through 362 00:27:26,940 --> 00:27:31,565 the customer API that is available as a service here. 363 00:27:31,565 --> 00:27:35,320 So, that is how I login the user here, 364 00:27:35,320 --> 00:27:38,275 and when the user logs in this will return 365 00:27:38,275 --> 00:27:45,015 a JavaScript object and from the JavaScript object I get the 366 00:27:45,015 --> 00:27:50,930 res.user..user supplies the user's information for me and I'm 367 00:27:50,930 --> 00:27:57,355 simply sending this over to my HeaderComponent here. 368 00:27:57,355 --> 00:27:59,860 So going into the HeaderComponent. 369 00:27:59,860 --> 00:28:02,235 So let's go into the header component, 370 00:28:02,235 --> 00:28:04,620 and in the HeaderComponent.ts file, 371 00:28:04,620 --> 00:28:09,670 you will see that again here I am importing the customer API and 372 00:28:09,670 --> 00:28:18,115 customer here and also you will notice that in the customer API, 373 00:28:18,115 --> 00:28:23,830 I specify here note that I'm saying 374 00:28:23,830 --> 00:28:29,880 this customer is this authService getCachedCurrent. 375 00:28:29,880 --> 00:28:34,190 So if a user is locked in the currently logged in 376 00:28:34,190 --> 00:28:38,660 users information is cast in the authService which is nothing but the customer API. 377 00:28:38,660 --> 00:28:43,775 So, when I call this getCachedCurrent this will return the currently logged in user. 378 00:28:43,775 --> 00:28:45,570 If no user is logged in, 379 00:28:45,570 --> 00:28:46,820 this will return null. 380 00:28:46,820 --> 00:28:51,865 So that is one way I can check to see if a user is currently logged in or not. 381 00:28:51,865 --> 00:28:55,690 So, if the user is currently logged in then this.customer will 382 00:28:55,690 --> 00:28:59,740 get the information about the customer that is loaded in. 383 00:28:59,740 --> 00:29:02,385 The customer information including firstname, lastname, 384 00:29:02,385 --> 00:29:11,190 the email and the other user's profile will be available to this object this.customer. 385 00:29:11,190 --> 00:29:16,080 So, here I am checking to make sure that the this.customer is not null. 386 00:29:16,080 --> 00:29:19,265 If it is not null then I will save the user name to 387 00:29:19,265 --> 00:29:23,100 this.customer.username and that way when 388 00:29:23,100 --> 00:29:26,705 the username is set then my header in 389 00:29:26,705 --> 00:29:31,690 the toolbar in my HeaderComponent will reflect the user's name there. 390 00:29:31,690 --> 00:29:37,820 Now, to logout the user all that I am doing is I am setting the username and 391 00:29:37,820 --> 00:29:45,665 the customer variables to null and then I simply called authService.log, 392 00:29:45,665 --> 00:29:51,075 authServices is customerApi.logout, and that's how I log out the user. 393 00:29:51,075 --> 00:29:52,760 When the user logs out, 394 00:29:52,760 --> 00:29:55,750 his or her credentials is all destroyed. 395 00:29:55,750 --> 00:30:02,360 Now, all this is taken care of automatically by the customer API service 396 00:30:02,360 --> 00:30:09,075 that is available in my LoopBack SDK that I just built there. 397 00:30:09,075 --> 00:30:13,830 So, you notice that how the LoopBack SDK Builder builds up 398 00:30:13,830 --> 00:30:19,430 the services and the models and everything that I need and in my Angular application, 399 00:30:19,430 --> 00:30:22,360 I'm just simply importing those and then making use 400 00:30:22,360 --> 00:30:25,450 of them to configure my Angular application. 401 00:30:25,450 --> 00:30:27,065 So, once I build 402 00:30:27,065 --> 00:30:32,510 the LoopBack SDK using the LoopBack SDK Builder all that I'm left with is 403 00:30:32,510 --> 00:30:40,545 implementing the components and their view templates that sit all the rest. 404 00:30:40,545 --> 00:30:45,480 The services are automatically built for me by the LoopBack SDK Builder, 405 00:30:45,480 --> 00:30:49,160 the models are automatically built for me and all that I need to do is 406 00:30:49,160 --> 00:30:54,060 just import those into all the components where I need to make use of them. 407 00:30:54,060 --> 00:31:01,775 So, notice how this Angular application has been updated to make use of the LoopBack SDK. 408 00:31:01,775 --> 00:31:06,520 Now if you want further information about how the LoopBack SDK should be used, 409 00:31:06,520 --> 00:31:11,465 you can also check out the documentation provided by the LoopBack SDK Builder. 410 00:31:11,465 --> 00:31:14,425 So, if you go to the LoopBack SDK Builder, 411 00:31:14,425 --> 00:31:19,440 a link to this is available in the additional resources for this lesson, 412 00:31:19,440 --> 00:31:21,820 and in the LoopBack SDK Builder, 413 00:31:21,820 --> 00:31:24,930 you would have all the information that you need 414 00:31:24,930 --> 00:31:31,830 for making use of the SDK that is built by the LoopBack SDK Builder. 415 00:31:31,830 --> 00:31:34,205 So if you go to the wiki documentation. 416 00:31:34,205 --> 00:31:39,830 In the wiki documentation a lot of explanation of how the LoopBack SDK Builder can 417 00:31:39,830 --> 00:31:46,050 be or the SDK generated by the LoopBack SDK Builder should be used is all given here. 418 00:31:46,050 --> 00:31:49,460 So, I just went through this documentation to figure out how to 419 00:31:49,460 --> 00:31:53,555 make use of the SDK that is built by the LoopBack SDK Builder, 420 00:31:53,555 --> 00:31:57,420 and then reconfigured my Angular application to make use of 421 00:31:57,420 --> 00:32:02,090 that to interact with my LoopBack server. 422 00:32:02,090 --> 00:32:06,715 So with this, I've quickly demonstrate it to you how 423 00:32:06,715 --> 00:32:11,140 you can build your Angular application and take 424 00:32:11,140 --> 00:32:15,270 advantage of the SDK built by the LoopBack SDK Builder in 425 00:32:15,270 --> 00:32:20,365 order to access your LoopBack server from within your Angular application. 426 00:32:20,365 --> 00:32:26,210 A similar approach will also be appropriate for your Ionic application. 427 00:32:26,210 --> 00:32:31,610 For the Native Script application you build the SDK with NG2 native in 428 00:32:31,610 --> 00:32:37,835 the command line instead of NG2 web as we used when we built this SDK. 429 00:32:37,835 --> 00:32:41,890 With this quick introduction to how we can make use of 430 00:32:41,890 --> 00:32:44,815 the LoopBack SDK Builder to build the SDK and 431 00:32:44,815 --> 00:32:47,980 then make use of it within our Angular application, 432 00:32:47,980 --> 00:32:52,300 they come to the end of this exercise.