Exercise (Video): Angular Application using Loopback as BaaS

Loading...

Из курса от партнера The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

500 оценки

The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

500 оценки

Курс 4 из 4 — Specialization Full-Stack Web Development with React

This course deals with all things server-side. We base the entire course around the NodeJS platform. We start with a brief overview of the Web protocols: HTTP and HTTPS. We examine NodeJS and NodeJS modules: Express for building web servers. On the database side, we review basic CRUD operations, NoSQL databases, in particular MongoDB and Mongoose for accessing MongoDB from NodeJS. We examine the REST concepts and building a RESTful API. We touch upon authentication and security. Finally we review backend as a service (BaaS) approaches, including mobile BaaS, both open-source and commercial BaaS services. At the end of this course, you will be able to: - Demonstrate an understanding of server-side concepts, CRUD and REST - Build and configure a backend server using NodeJS framework - Build a RESTful API for the front-end to access backend services

Из урока

Backend as a Service (BaaS)

In this module we learn about Mongoose population, a way of cross-referencing documents and populating the documents from other documents. We then review secure communication using HTTPS. We look at Backend as a Service (BaaS) and take a brief look at Loopback.

Exercise (Video): Getting Started with Loopback14:21

Exercise (Video): Loopback Data Sources and Access Control44:27

Exercise (Video): Loopback Relations35:43

Exercise (Video): Angular Application using Loopback as BaaS32:57

Exercise (Video): React Application using Loopback as BaaS11:04

Познакомьтесь с преподавателями

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

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.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2019 Все права защищены.

Загрузить из App Store

Загрузить в Google Play