Now that we have completed developing a full-fledged REST API server using LoopBack,

the immediate next question that will arise in your mind is,

how do we adapt the Angular Application to make use of this REST API server?

As we have done in the previous cases,

we will also need to reconfigure our Angular Application

to specifically make use of the REST API endpoints,

and the various REST API request as exposed by our LoopBack server.

Now, this is where we will take advantage of a LoopBack SDK

that can be automatically built for us using a node module,

which will look at our LoopBack servers,

various REST API endpoints and automatically construct

the SDK which we can then incorporate into our Angular Application,

and then be able to communicate with our LoopBack server,

both for authentication and also to be able to exchange data.

To get started on this exercise, first,

clone the git repository that contains

a partially completed Angular Application that communicates with our LoopBack server.

So to do that, go to a convenient location on your computer.

So here I am in my Coursera Angular folder.

I'm going to clone the git repository by typing

git clone https://github.com/jmuppala/

conFusion-Angular4-Loopback.git,

and then clone this git repository.

Once the git repository is cloned,

then we will move into the conFusion Angular4 Loopback folder,

and then perform an NPM install,

to install all the node modules for this partially completed Angular Application.

To automatically build the LoopBack software development kit for our LoopBack server,

we're going to take the help of this LoopBack SDK Builder node module.

So this LoopBack SDK Builder,

is a community driven node module that is actually developed from

the official LoopBack SDK Angular which LoopBack developers had released.

The LoopBack SDK Angular supported Angular Geass.

So, this has been modified in this LoopBack SDK Builder

to support Angular 2 based applications,

or the Angular 2 and about applications.

So the LoopBack SDK Builder,

the node module itself,

once it is installed into your server project folder,

then you can make use of the LoopBack SDK Builder to

automatically pass through your LoopBack application that you have already built,

and this will automatically build

everything we need to get started on our Angular Application.

So, it builds the software development kit.

So, within the software development kit,

the LoopBack SDK Builder exports all the interfaces,

all the models for

the various data that we are going to be storing on our LoopBack server.

And also, all the API services that can be used within your Angular Application.

So, your models and your services automatically come for the ride once you build the SDK.

Now, it's just a matter of incorporating this SDK into

our Angular Application and then quickly getting

started to configure our Angular Application.

Since we have already built our Angular Application in a previous course,

I'm going to retrofit that application to make use of

the LoopBack SDK that we will export from this LoopBack SDK Builder.

In the previous step,

you had just installed

the partially completed Angular Application

which has already been adapted to make use of the LoopBack SDK.

So, let's go ahead and

construct the LoopBack SDK and then deploy it into our Angular Application,

and then go ahead and compile our Angular Application and get started with it.

To set up the LoopBack SDK,

go to the LoopBack server folder in your terminal tab,

or in your command window.

So, here I am in my LoopBack server folder.

So in this folder,

let me go ahead and install

the

LoopBack

SDK Builder.

Once the Builder is installed,

so which you can see is currently 2.1.0 release candidate number 14.

So, that is the version that I'm using in this course.

Let's go ahead and build the LoopBack SDK.

To build the LoopBack SDK, we're going to take the help of

the LBSDK command line tool

that this LoopBack SDK module automatically configures for us.

So to access that,

we'll say dot slash node modules.

So in the node modules there is a dot bin folder that is automatically

created whenever you install various node modules into the folder there.

So to go to the dot bin folder,

we will access this lbsdk command there,

that gets automatically installed,

then we will call this with server/server.js,

and we need to specify the path to the Angular Application that we have just configured.

So, my Angular Application is currently in my documents

Coursera Angular conFusion Angular LoopBack folder.

So, let me copy the path over and then,

let me go into my terminal or the command window

where I am trying to configure my LoopBack SDK.

So, at the prompt,

since it is in my documents folder,

so I'm going to type in the full path to this starting from my root folder in my Mac.

If you are using the Windows make sure that this path

indicates the complete paths starting from C colon,

or D colon whichever drive you are installing it on your Windows machine.

So the complete path to your Angular LoopBack folder,

and then we'll say slash src,

the source folder there,

and then app, and then we're going to be deploying the SDK into

the shared folder in the SDK subfolder there.

And we want this LoopBack SDK Builder to

automatically deploy the ng2web version of the SDK.

So, this is the version that will support

web applications or Angular Application in this case.

If you are constructing this for a native script application,

then you will say ng2native to build the SDK for the native script application.

Since I am building my Angular Application,

so I'll just say ng2web and then let

the LoopBack SDK Builder automatically build the software development kit,

and then deploy it into my Angular Applications source

app slash SDK folder there.

So, after a few seconds,

the SDK is built and deployed to my Angular Application.

Now, before I start up my Angular Application,

let me start up my LoopBack server.

And before I do that,

I will go to the terminal tab here,

and then start up my MongoDB server.

So well, I'll say mongod --dbpath=data.

And then start up my MongoDB server first,

then let me start up my LoopBack server.

So, at the prompt npm start,

and my LoopBack server should be up and running in a short while.

And then now, going to my LoopBack application.

Let me open this application in

my Visual Studio Code so that they can look at the source code.

And once my application is open in Visual Studio Code,

let me take that into a new desktop window.

And then, let me also start my Angular Application deployment

by typing ng serve at the prompt and wait for my Angular Application to get compiled.

Once my Angular Application is compiled and applied,

let me go to a browser and then first check out this Angular Application.

Going to the browser,

let me open a new tab here,

and then type in localhost:4200 and you will see

the Angular Application deploy to this browser window here.

And you can see that the home,

the about us page with all the data,

then the menu and also the my favorites.

Currently which is not

showing anything because no user is logged in and the contact page just like before.

So, to login, let me login as a user,

and then I will be typing in my username and a password here.

And then once I login,

then you'd be able to see that when I go to my favorites,

favorites of this particular user will be displayed here just like before.

We can type comments,

and then submit comments,

and then also add items to the favorites and so on.

All the functionality that we've seen with the earlier versions of

the Angular Application are also supported in this version of the Angular Application.

Also for your loopback server to be able to serve up images

and all this data will be stored in

your server code in the client folder of the server code.

So in the client folder of my loopback server,

notice that I have created this subfolder names,

images and then stored all the images into the subfolder.

Now in order for these images to be served and also for

the client folder to be used as the public folder for my loopback server,

then there're couple of changes that I need to make to my loopback server.

Now the first thing that you need to do is go into the boot folder.

And in the boot folder you would see this root.js file here,

which contained this information here.

Now you can either delete the root.js file

or simply rename the root.js file to something else.

So here you'll see that I've renamed this file to root.jsold with the extension jsold.

Now this file should not contain the.js extension anymore.

So anything other than the.js extension is fine.

So what this means is that in this case, my loopback server,

when it starts up will not execute the code in this folder.

Now when you look at the code in the roo.js file which was configured earlier,

you saw that the router was configured such that,

when you access the slash,

which is the root folder of your server,

then it will simply serve up the servers loopback status.

And indeed that is what we saw,

our loopback servers serving up the uptime and the last restart time for our server.

We don't want it to do that.

Instead, we want our loopback server to be able to use

whatever we put in the client folder as the public folder.

And so any client application can be deployed to

the client folder of my loopback server and should

be accessed when we access the loopback server at it's standard slash endpoint.

So that is the root of the server folder.

So to do that, first thing that you need to do is to

change this root.js files name to root.,

for example, you can just simply rename that to root.jsold.

Or you can just delete that file.

That file will not be needed in this version of my loopback server.

Now not only that.

The second part that you need to reconfigure is

to going to the middleware.json file here.

The middleware.json file.

In the middleware.json file,

if you scroll down,

you will see that in here,

originally this will just simply contain files,

colon and then an empty brace here.

Now into that empty brace here,

just add this code here.

Which is loopback shop static.

And it says, "params" "$!../client."

So this will indicate to my loopback server that,

that client folder that is available here should be used

as the static public folder for my lookback server.

So anything put in the client folder can be accessed from my server.

So this is the additional change that you need to do to the middleware.json file.

So once you do these two changes,

then your loopback sever will be all configured to serve up the data including

the images which you are going to put into

the images subfolder under the client folder here.

So make sure to copy the images into the client folder here.

And the second one is to go to the middleware.json file

in the server folder and then update this part.

And once we do that,

then these images can be accessed by simply accessing the /images/,

the image file name to access these images because our dishes,

leaders, and the promotions will require these image files.

And so that will be available for us from

the loopback server and also whatever you put in the client folder.

So for example, you can prepare the distribution folder

for your angular application and simply copy

the entire distribution for the contents into the client folder here.

And then if you access the loopback server at its standard route endpoint,

then your angler application will be automatically served up by your loopback.

So these are the two changes that you need to make to your loopback server.

Of course you must be curious about how exactly is this SDK built,

where exactly is this SDK and how am I actually

going to make use of it within my angular application?

So to do that, let's go to our angular application,

and in the source folder,

under source app folder.

Now, when you open the shared folder,

you will see that there is a subfolder here named SDK.

And inside this SDK subfolder you will find a whole bunch of files here.

Lb.config.ts, index.ts, I've the written the storage, sockets, the services.

And inside the services you have custom services and core services

here and the various models that are deployed here.

The models actually contain the model structures

for our various models that are implemented.

Now this is the loopback SDK.

This code is automatically built for you and if you want to,

you can simply go in and then

parse through these files to just see what is available there.

Make sure not to modify any of the files in

this SDK subfolder cause this is automatically built for you by the loopback SDK builder.

And this will contain everything configured so that

your looback server can be accessed from your angular application.

You'll also notice load that within my angular application,

I have completely removed the services folder because I

no longer use the services that I built earlier.

Instead, I am simply going to leverage the services that have been

built by the loopback SDK builder in this SDK folder.

So the services that I'm going to make use of are all available in here.

Now how do we make use of this?

So to help you understand how we make use of this,

let's visit our home component and then see how the home component is now updated.

So when you go to the home component,

you will notice that I am now importing dishes from../shared/sdk/models.

So this is the model that is automatically exported into

the SDK by my loopback SDK builder.

So this is where my dishes model will be defined this.

So I'm just going to leverage the dished model.

Similarly, the service itself is available as this DishesApi as you can see here.

And these DishesApi is in the../share/sdk/services folder here.

Similarly, the promotions and the PromotionsApi and leaders and LeadersApi.

So these are all built automatically for me by the loopback SDK builder.

Now then, you go into the code.

You will now notice that I will declare the dish as Dishes,

promotion as Promotions, and leader as /Leaders.

These three are the models that are exploited by the loopback SDK builder.

Also notice how I have reconfigured the free services here.

Now my dish service is referring to DishesApi,

promotion service is referring to PromotionsApi,

and leader service to LeadersApi.

And also notice how I accessed the dish service here.

So I'll say, this.dishservice.findone and where feature equal to true.

So this is where you recall that in my loopback RestApi explorer I had

typed this into the filter there then I tried to find the dishes there.

So that is exactly what I'm doing here also in my code here.

So this findone when supplied with this,

will find one item and then return back

here and then back here I am assigning it to this dish here.

And the rest of my angular application looks exactly the same way as before.

Also notice that in the constructor,

note how I have configured this,

called the loopback conflig.

Now to do the loopback config,

in every component that you're making use of,

you need to import this loopback config from this shared SDK folder here.

And also, this API version that I declare,

I am going to update this baseurl.ts file.

So in the baseURL folder,

I have updated this to my name of my computer code3000.

So this one, make sure to replace this with

the IP address or the name of your specific computer on which you are running.

So make sure to update the baseURL here.

And the API version here is simply a string saying, API here.

So these two are going to be used in my home component.ts file.

So I am importing this API version here and LoopBackConfig.

The baseURL I am already injecting

into my constructor here so that is already available here.

And then in my constructor of my component,

I need to do these two statements here.

So I'll say, LoopBack setBaseURL to

BaseURL which is the same as the one that I just injected there.

And then LoopBackConfig.setApiVersion to API_ VERSION here.

So these two I need to configure in my home component

and also any other component where I am accessing my loopback server,

I need to configure this.

Now loopback SDK builder suggests that we need to do

this in every single one of the components here.

Also, you will notice that if you go to

the app.module.ts file, in the app.module.ts file,

I have removed all the imports of all the other services and instead,

I am importing this here called import SDKBrowserModule from shared/sdk here.

SDKBrowserModule here.

If you go down into the imports here,

you will see that I have configured this SDKBrowserModule.forRoot here in the imports.

So this SDKBrowserModule is automatically configured when we build our LoopBack SDK.

And we just need to import that into our app module.ts file.

And also notice that the providers,

this is where we configured our services,

doesn't contain any of the services anymore because that

comes as part of my LoopBack SDK.

So the only thing that I'm providing is the BaseURL here.

I have removed all the other ones from my app module.ts file.

So, that is one change that you will notice.

So similarly if you go to the about component.ts file,

the dishdetail component.ts file,

the favourites component.ts file,

and also the menu component.ts file.

So lets look at the menu component.ts file.

So you will see here again I'm importing these four and then,

in my menu component I'm saying dishService is DishesApi.

And then I am configuring the LoopBackConfig setBaseURL and setApiVersion.

I wanted it done but in the angular repository that I provided for you,

for my angular application for LoopBack server.

And also, you will see that I've just made some modification here.

So if you want to find all the items from the dish service,

so you simply say dishService.find and that'll return

all the dishes that are there in my LoopBack server here.

So that's what I'm retrieving here.

So the rest of the core should look familiar here except

that here I call dishes is equal to dishes,

an array of dishes here.

So that's the change that you'll see in menu component.

Now, you must be wondering how does user authentication work in this case?

For user authentication, let me draw your attention to

two places where I am making use of the user authentication.

Let's first go to the login component.

So, in the login component,

you will see that in the login component,

I am importing these two here.

The CustomerApi, which is the services that allow me to do user authentication,

and logging in and logging out.

And also, I am importing the customer module and access token module.

And in the login component,

you would see that my authService now is nothing but CustomerApi.

And also, you will notice that in the login component,

when the login form is submitted,

I call this authService.login.

This login function that is available through the CustomerApi.

Recall when we tried to login using the LoopBackrestApi explorer,

we were using the customer endpoint to login to the system.

So that is exactly what I am doing in code here.

So we'll say this.authService.login,

and here you'll see that it takes these three parameters here,

the username, and password as the first JavaScript object here.

And then, I am also specifying this.user.remember.

Remember is the flag from the remember me check box,

that we have in our login components dialog there.

So when the user checks that in,

the user's information will be automatically persisted by the SDK,

the authService that is provided inside the SDK.

So, now you'll see that I don't need to explicitly implement any authorization service.

That is automatically available to me,

through the CustomerApi that is available as a service here.

So that is how I login the user here.

And when the user logs in,

this will return a JavaScript object.

And from the JavaScript object I get the res.user.

Dot user supplies the user's information for me,

and I'm simply sending this over to my header component here.

So, going into the header component,

so let's go into the header component.

And in the header component.ts file,

you'll see that again here I am importing the CustomerApi and customer here.

And also, you will notice that in the CustomerApi, I specify here.

Note that I'm saying this customer is this.authService.getCachedCurrent.

So if a user is logged in,

the currently logged in user's information is cached in the authService,

which is nothing but the CustomerApi.

So when I call this getCatchedCurrent,

this will return the currently logged in user.

If no user is logged in, this will return null.

So that is one way I can check to see if a user is currently logged in or not.

So if the user is currently logged in,

then this dot customer will get the information about the customer that is loaded in.

The customer information including first name,

last name, the email,

and the other user's profile will be available to this object called this.customer.

So, here I am checking to make sure that the this.customer is not null.

If it is not null, then I'll save the username to this.customer.username.

And that way when the user name is set,

then the toolbar in my header component,

will reflect the user's name there.

Now, to log out a user,

all that I'm going as I am setting the user name and the customer variables to null.

And then I simply call auth.Service.logout.

AuthService is customerApi.logout, and that's how I log out the user.

When the user logs out,

his or her credentials is all destroyed.

Now all of this is taken care of automatically by the customerApi service

that is available in my LoopBack SDK that I just built there.

So, you notice that how the Loopback SDK Builder,

builds up the services,

and the models, and everything that I need.

And in my angular application,

I'm just simply importing those,

and then making use of them to configure my angular application.

So, once I build the LoopBack SDK using the LoopBack SDK builder,

all that I'm left with is implementing the components,

and the view templates, that's it.

All the rest, the services are automatically built for me by the LoopBack SDK Builder.

The modules are automatically built for me, and all that I need to do is

just import those into all the components where I need to make use of them.

So, notice how this angular application has been updated to make use of the LoopBack SDK.

Now, if you want further information about how the LoopBack SDK should be used,

you can also check out the documentation provided by the LoopBack SDK Builder.

So if you go to the LoopBack SDK Builder,

a link to this is available in the additional resources for this lesson.

In the LoopBack SDK Builder,

you would have all the information that you need for

making use of the SDK that is built by the LoopBack SDK Builder.

So if you go to the wiki documentation,

in the wiki documentation,

a lot of explanation of how the LoopBack SDK Builder can be,

or the SDK generated by the LoopBack SDK Builder should be used, is all given here.

So, I just went through the documentation to figure out how to make use

of the SDK that is built by the LoopBack SDK Builder,

and then reconfigured my angular application to make use of

that to interact with my LoopBack server.

So with this, I quickly demonstrated to you,

how you can build your angular application

and take advantage of the SDK built by the LoopBack SDK Builder,

in order to access your LoopBack server from within your angular application.

A similar approach will also be appropriate for your ionic application.

For the native script application,

you build the SDK with ng2-native in the command line,

instead of ng2-vep as we used when we built this SDK.

With this quick introduction to how we can make use of the LoopBack SDK Builder

to build the SDK and then make use of it within our angular application,

we come to the end of this exercise.

Exercise (Video): Angular Application using Loopback as BaaS

Server-side Development with NodeJS, Express and MongoDB

Rencontrer les enseignants