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 requests 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.
We'll 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 your convenient location on your computer.
So, here I'm in my Coursera Angular folder.
I'm going to clone the git repository by
typing git clone
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git,
and then clone this git repository.
Once the git repository is cloned,
then we will move into the conFusion Angular6 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 JS.
So, this has been modified in this Loopback SDK Builder
to support the Angular two 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.
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're 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.
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 have 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 setup 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 that LoopBack
SDK Builder.
Once the builder is installed,
let's go ahead and build the LoopBack SDK.
To build the LoopBack SDK,
we're going take the help of the LB-SDK command line tool that this LoopBack SDK module,
automatically configures for us.
So, to access that, we'll say,./node modules.
So, in the node modules,
there is a.bin folder that is automatically created whenever you
install various node modules into the folder there.
So, to go to the.bin folder,
we will access this LB-SDK command there,
that gets automatically installed,
then we will call this width 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 that part over.
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,
I'm going to type in the full path to this starting from my root folder in my mac.
If you are using their Windows,
make sure that this path indicates the complete path starting from C colon or D colon,
whichever drive you're installing it on your Windows machine.
So, the complete path to your angular LoopBack folder,
and then we'll say,
/SRC, the source folder there, and then app.
Then, we're going to be deploying the SDK into
the shared folder in the SDK subfolder there.
We want this LoopBack SDK Builder to
automatically deploy the NG2 web version of the SDK.
So, this is the version that will support
web applications and our Angular application in this case.
If you are constructing this for a native script application, then you will say,
NG2 native to build the SDK for the Native Script application.
Since I am building my Angular application,
I'll just say, NG2 web,
and then let the Loopback SDK Builder automatically
build the software development kit and then deploy it
into my Angular applications source app/shared/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 another 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, 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.
Then, now going to my LoopBack application,
let me open this application in
my Visual Studio code so that we can look at the source code.
Once my application is open in Visual Studio code,
let me take that into a new desktop Window.
Then, let me also start my Angular application deployment
by typing NGServe 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 checkout 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 deployed 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 log in, let me log in as a user and then I will be typing
in my username and a password here,
and then once I log in then you'll be able to see that when I go to My Favorites,
the 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 you have 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,
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 sub folder
named 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 in a 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 contains 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 see that I have 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 root.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 servers,
then it will simply serve up the servers LoopBack status and indeed,
that is what we saw our LoopBack server serving up
the uptime and the last restarted 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 its standard slash end points.
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 go into 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: and then an empty a brace here.
Now, into that empty brace here,
just add this code here,
which says loopback#static and it says params$!../client.
So, this will indicate to my LoopBack server
that the client folder that is available here
should be used as the static public folder for my LoopBack 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 server will be all configured to serve up the data including
the images which you're 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.
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 this 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 folder contents into the client folder here,
and then if you access the LoopBack server at
its standard root endpoint
then your Angular application will be automatically served up by your LoopBack server.
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 would see that there is a subfolder here named SDK and inside this SDK subfolder,
you'll find a whole bunch of files here,
lb.config.ts, index.ts and within the storage sockets,
the services, and inside the service,
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 we're implementing.
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
pass through these files to just see what is available there.
Make sure not to modify any of the files in
this SDK subfolder because this is
automatically built for you by the Loopback SDK Builder,
and this will contain everything configured so that
your LoopBack server can be accessed from your Angular application.
The services that I'm going to make use 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 update.
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 models that is automatically exported into
the SDK by my Loopback SDK Builder.
So, this is where my dishes model will be defined there.
So, I'm just going to leverage the dishes model.
Similarly, the service itself is available as this DishesAPI,
as you can see here and this DishesAPI is in the../shared/sdk/services folder here.
Similarly, the promotions and the promotions API,
and leaders and leaders API.
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 exported by the Loopback SDK Builder.
Also notice how I have reconfigured the three services here.
Now, my dish service is referring to dishes API,
promotion services referring to promotions API,
and leader service to API leaders API,
and also notice how I access the dish service here.
So, I'll say this dish service find one and where featured equal to true.
So, this is where you recall that in my LoopBack rest API 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, then supplied with this,
will find one item and then return that here,
and then that I am assigning each to this dish here and
the rest of my Angular application works exactly the same way as before.
Now, also notice that in the constructor,
note how I have configured this called the LoopBack config.
Now, to do the LoopBack config in every component that you are 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've updated this baseurl.ts file.
So in the base URL folder,
I have updated this to my name of my computer colon 3,000.
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 base URL 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'm importing this API version here and the 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've need to do these two statements here.
So, we'll say, "LoopBack set base URL
to base URL" which is the same as the one that I've just
injected there and then look back on set API Version 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 inputs of all the other services and instead I am importing
this here called import SDK Browser module from share SDK here.
SDK Browser module here,
and if you go down into the inputs here,
you will see that I have configured this SDK Browser module.forRoot here in the inputs.
So this SDK Browser module 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 am providing is the base URL here.
I've removed all the other ones from my app module.ts file here.
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 favorites component.ts file and and also the menu component.ts file.
So let's look at the menu component.ts file.
So you will see here again I'm importing this
four and then in my menu component I am saying,
Dish services dishes API and then I am
configuring the LoopBackConfig set baseURL setAPI version.
I've already done that in the Angular repository that I have provided for
you for my angular application for LoopBack server,
and also, you will see that I have 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 code should look familiar here except that here I call
dishes is equal to dishes and array of dishes here.
So that's the change that you will 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 would see that in the login component I am importing these two here,
the customer API which is the services that allow me to
do user authentication and logging in and logging out,
and also I am importing the customer model and
access token model and in the login component,
you would see that by Auth service now is nothing but customer API 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 customer API.
Recall when we tried to login using the LoopBack rest API explorer,
we were using the customer endpoint to login to the system.
So that is exactly what I'm doing in code here.
So we'll say this Authservice.login and here you see that
it takes these free parameters here,
the username and the password as the first JavaScript object here,
and then I am also specifying this user.remember.,.remember is the flag
from the remember me checkbox that we have in our login components dialogue there.
So, when the user checks that in the user's information will be
automatically persisted by the SDK.
The Auth service that is provided inside the SDK.
So, now you see that I don't need to
explicitly implement any authorization service that is
automatically available to me through
the customer API 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..user supplies the user's information for me and I'm
simply sending this over to my HeaderComponent here.
So going into the HeaderComponent.
So let's go into the header component,
and in the HeaderComponent.ts file,
you will see that again here I am importing the customer API and
customer here and also you will notice that in the customer API,
I specify here note that I'm saying
this customer is this authService getCachedCurrent.
So if a user is locked in the currently logged in
users information is cast in the authService which is nothing but the customer API.
So, when I call this getCachedCurrent 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.customer will
get the information about the customer that is loaded in.
The customer information including firstname, lastname,
the email and the other user's profile will be available to this object this.customer.
So, here I am checking to make sure that the this.customer is not null.
If it is not null then I will save the user name to
this.customer.username and that way when
the username is set then my header in
the toolbar in my HeaderComponent will reflect the user's name there.
Now, to logout the user all that I am doing is I am setting the username and
the customer variables to null and then I simply called authService.log,
authServices 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 this is taken care of automatically by the customer API 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 their view templates that sit all the rest.
The services are automatically built for me by the LoopBack SDK Builder,
the models 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,
and 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 this 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've quickly demonstrate it 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 web 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,
they come to the end of this exercise.