Exercise (Video): Ionic and Angular

Loading...

Do curso por The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

171 classificação

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

171 classificação

Curso 3 de 5 em Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing multiplatform mobile applications using the Web technologies (HTML5, CSS and Javascript). In particular we make use of the Cordova hybrid application framework to develop and target multiple mobile platforms with a single codebase. We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile application frameworks, that is built with mobile-optimized HTML5 and CSS based components and Angular. You will learn about UI development with Ionic and then using Cordova's modules to access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your HTML5, CSS, Javascript and Angular skills, and (c) Use various features of the Ionic framework to build hybrid mobile applications

Na lição

Hybrid Mobile App Development Frameworks: An Introduction

This module introduces you to hybrid mobile application development. You will learn about the Ionic framework and explore some of the features of the Ionic framework to implement an Ionic app based on the Angular application that was implemented in the previous course on Angular.

Ionic and Angular21:59

Exercise (Video): Getting Started with your Ionic App23:15

Exercise (Video): Ionic and Angular56:00

Conheça os instrutores

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

[MUSIC]

We will continue to explore the close link between Ionic and

Angular in this exercise.

So as we have learned, Ionic and Angular are two piece in a part.

So Ionic leverages a lot of support from Angular in order to develop the Ionic

application.

And so in this exercise, we will look at borrowing a lot of details

from the previous Angular course, where we doubled up our Angular application.

So we'll look at taking some of the code that we have done in the previous Angular

course, and then using it within our Angular application.

We'll also, at the same time, explore the Ionic card component, and

make use of that in our home page that we have in our Ionic application.

We will also look at the use of Ionic providers, which are nothing but

Angular services, and how we can add in Ionic providers to our application.

And then build it out to be able to communicate with the server using

the Angular HTTP module support.

Continuing with our exercise, we will go, first, to their source folder.

And then in the source folder we will create a subfolder named shared.

And then store a set of files that we share across the entire Ionic

application in the shared folder.

We had done a similar step in our Angular course also.

So within the shared folder, the first thing that

I'm going to create is a file named baseurl.ts.

From the Angular course, you know what we are going to be storing here.

So we are going to be using this baseurl to export the URL for

our server, from which we're going to access the data for our Ionic application.

So I'm going to set up a constant that I'm going to explore,

File here, so the base URL is localhost:3000/.

So as you recognized, this is nothing but the URL of the JSON

server that we have already started in one of the previous exercises.

In addition, we're going to create here few new files,

where we will create a JavaScript interface here.

So the first file that I'm going to create is called comment.ts.

And within the comment.ts,

I'm going to Create a TypeScript

interface called Comment.

And if you have taken the Angular course,

you would have seen that I have used class for the comment.

Now, here I am demonstrating the use of a JavaScript or

TypeScript interface inside of a class here.

So this interface contains rating, which is a number.

And comment, which is a string.

Then author, And

date, which is also a string here.

So this is the interface that I'm going to export from that comment.ts file.

The use of interface in TypeScript is one of the core principles where

type checking focuses on the shape that values have.

So previously, we have seen the use of the standard primitive types,

like the number string, and other types that we use.

And also the use of any in TypeScript.

Interface helps us to define a structure, or

what we call as duck typing in TypeScript, or

structural subtyping in TypeScript.

So the interface allows us to define a structure,

which defines a newly defined type that we can use to attribute

to specific variables that we use within our TypeScript code here.

So that is the use of a comment here.

Now, class, of course, has both the instance

variables, and also the methods here.

Now in this case, I'm not going to have any methods.

So instead,

I'm just going to use an interface instead of defining an entire class.

Now, if you are more comfortable using classes,

then what we have done in the previous course with Angular,

where we defined the same thing as a class, is just as acceptable.

Next, I am going to define another file called dish.ts.

And inside here, we will define a interface called Dish.

So here, we will first import the Comment from,

The comment.tsfile here.

And then we will make use of that when we define our Dish interface here.

And for the Dish interface,

I will define an id, then name, and image.

Category, Label,

Price, Featured,

which is a boolean, and description, which is a string.

And finally comments, which is an array of comments.

If you look at the Dish JavaScript object that is being supplied from

the server, you will see that the format of this interface

matches exactly the format of the data that we obtain from the server side.

So that's the reason why I defined this interface here.

Similarly, we'll define a few more interfaces here.

The next one is feedback.

Now, since I am starting on this application,

I am defining all the interfaces that I would need within this application

right within this exercise.

So that we can have everything set up to proceed forward.

So the next interface is called Feedback,

which I will use later on for, Defining a form.

So for the Feedback, I will have firstname, which is a string.

Lastname, which is a string.

Then, Telnum, which is also a string.

Email, string,

agree boolean.

Later on, we will see,

How we make use of this in our form.

And message, also string.

So the Feedback interface has all these properties.

In addition I'm going to, Export a constant, which is

An array of strings here.

The array of strings contains three strings here,

'None', 'Tel'.

And 'Email'.

So we are doing a lot of house keeping at this point in order to get our application

into a stage where we can start implementing a lot of the functionality.

Now I'll also define another

interface called as leader.ts, and

inside here I will define a interface

named Leader which contains id:

name: image:

designation: abbreviation:

Featured, which is a boolean, and

description, which is a string.

And finally, the last one,

which is, promotion.ts file.

There we will define, The Promotion interface.

And as you'll see, these structures match the structure of the adjacent

data within our servers that we have already started on.

So for the promotion, we have the id, which is a number.

name: string; image: string.

Label: string.

Price: string; featured: boolean.

And finally, description: which is a string.

So with these we have all of our interfaces

set up for our Ionic application.

Let's save all the changes.

Now, the next step, we're going to define a bunch of Ionic Providers.

So we'll have four new Ionic Providers which will go and

fetch the data from our JSON server.

So the four providers that we're going to be using, they will use

the Ionic CLI to scuff out this provider data and

then go and modify the code within these providers.

So going to the terminal at the terminal

we will use the Ionic's CLI to,

Scaffold out four providers, the first one called Dish,

and then the second one, Called Leader.

The third one called.

Promotion, and

last one called ProcessHttpmsg.

So these four providers will be scaffolded out by using the Ionic CLI.

Now it is time to go and configure that four providers.

Going to our application, you will see that when we scaffold out the providers,

Ionic CLI adds a new folder named providers within

which the four provides that we have scaffolded out are stored here.

So we have the dish leader,

the process-httpmsg and the promotion provider here.

In addition, you will that when you go to the appmodule.ts file,

the Ionic CLI has already imported the full providers into the appmodule.ts file.

Since ionic has already done the work for us, so

we don't have to worry too much about it.

And also going into the NG module decorator here, so

this is the NG module decorator here.

So you see that the provider's property has already been

updated to add in the four new providers that we have scaffolded out.

So that part is all set up for us already.

So now, our next step is to go and

update the code for their four providers in order to let them

provide the functionality that we need within our Ionic application.

We will start with the ProcessHttpmsgProvider.

So if you have knowledge of angular and how

angular uses the HTTP module to support HTTP

support, then you'll see that angular makes use of the observables.

So we are going to import { Observable }

into the Process-httpmsg.ts file,

and this is imported from rxjs/ Observable.

So if you had taken a previous course on Angular, you know how this thing works.

So in addition we first import Observable, and

then along with Http, I'm going to also import Response

from the angular http library, and also I will import

the throw

Method, and because this is used to throw an error.

So here we have the ProcessHttpmsgProvider already, so this has been scaffolded out.

Let's build up this ProcessHttpmsgProvider here.

So in this, I'm going to include two new Methods here.

The first one called extractData,

which is going to construct a response from the reply that this provider gets.

So I'm not going into the details of how the score is implemented,

because if you've taken the angular

course then you have seen this in there.

So I'm simply going to used the code directly

from that particular course there.

So we have one method called extractData which is going to take the response and

process the response and extract the body from the response and

then return the body.

The next method that I will implement called

handleError which will process the incoming,

Error message.

So we'll say let, errMsg string and then we'll say if,

error is an instanceof Response.

So if this error is coming as a response from the server side,

that is the server is sending the response,

then we need to, Extract the,

Body from the response and then extract the,

So if the body contains an error property then that we will assign

to error otherwise we'll just stringify that entire body and

then include that as the message.

And then finally we'll construct the errMsg as note the use of back quotes,

it is important that here pay attention to the back quotes,

don't use the forward quotes otherwise this code will not work.

So we will say error.status.

So we are constructing the string by extracting information,

From the error,

error.statusText or empty string.

And then the err itself.

So it is important to remember that these are enclosed inside back quotes.

And so that is how we construct the errMsg.

Otherwise so that is where the else comes into the picture.

We'll say errMsg = error.message.

In case the error.message exist.

Otherwise we'll take the error and then turn that into

a string then include that as the error message here.

And after we do that we will return,

An observable and throw the error

using the errMsg as the string here.

If you want to you can also do a console log of

the errMsg within your JavaScript console of your browser so

that you can see this being called within your code.

So, this is the update that we do to the process HTTP message provider here.

So this is providing two methods which will be used by the remaining providers,

in order for them to process the incoming reply from the server side.

So now we'll go ahead and construct the remaining three providers.

So we'll start with the dish provider.

So going to the dish provider we already see the injectable imported here.

I'm going to import the Dish from,

Shared dish and we'll also have the observable.

Which we import from

rxjs/Observable.

And then we'll also import Http and also the Response from the Http module.

Then we will import,

baseURL which we have set up in the,

Shared baseurl file and then,

we'll also import the process HttpmsgProvider,

which we have just configured, In,

The process-httpmsg folder.

And then import a couple of additional operators which is the,

Delay operator and the,

Catch operate from the observable rxjs library.

Now let's go ahead and construct the Dish Provider.

So in this case, going to the dish provider,

we see that http has all ready been injected into the constructor.

I'm also going to inject,

processHttpmsgService which

is from the process HttpmsgProvider.

So these two will be injected in to the, Provider here.

And then we will now configure three methods here

called getDishes, which will return an observable,

An array of Dishes.

And then we'll have a getDish

method which will take a parameter,

the id of the Dish And

will return an Observable of the type Dish.

I'm going to fill in the code for this in a sharp one and

then getFeaturedDish which will return and

Observable<dish>.

So these three methods are going to be useful when we

implement our pages within our Ionic application.

So for the getDishes method,

I'm going to return by calling

this.http.get with the (baseURL + 'dishes').

So that is the endpoint on which I'm

going to call the HTTP method, and

then map that return to value by using.

The processHttpmsgService, and

then the extractData method after processHttpmsgService and

then process the returned results through that.

So that is how we would process the return result.

If it is an error, then we will catch the error,

and then process the error through.

HTTP message service and.

The handleError method was that.

And then pass the error as a parameter to that handleError method.

So that is how we implement the getDishes method here.

Now I'm going to simply copy this code,

because I just don't want to keep typing the same thing over and over again, and

for the getDish, you gotta use pretty much the similar code here.

So we'll say return http.get(baseURL

+ 'dishes/' + id) because that is

the rest API end point that we're going to be creating dish,

and then they'll extract the data, and

then also catch the error in exactly the same [INAUDIBLE],

so this two, the map and the catch will remain exactly the same.

And for the featured dish, we're going to be using again the same thing except that

in this case we're going to be [INAUDIBLE] the dishes along with a query parameter.

So we'll say dishes featured = true, so

will return only those dishes for which the featured flag is set to true.

So then we will get the map and

then we will return this process Httpmsg.extractData and

in this case this will return a JSON array, so

we will only extract the first one from that and then return that.

And way we handle the error is exactly the same.

So with this we have updated the Dish.tsfile.

If you have taken the angular course before you see that we had the same

methods implemented using exactly the same code in the angular course.

Now, the next step is to update the leader and the promotions methods to.

So to update the leader method, I'm going go to the leader.ts file.

Before that, I'm going to, instead of keeping on typing everything,

let me copy a few things from here.

And then, because we will be using exactly the same things in the leader.ts file,

so I'm just going to copy that and then paste it in here.

Importing the dish it will be importing the leader from the shared leader.

And the other ones we need them within there methods her.

Now along with the constructor, so again, I'll go to the dish and

simply copy this whole code because we're going to be implementing

the same matrix for the leader also.

So I'm just going to copy everything until the constructor.

And simply replace this code here.

And then we will go in, and edit the code here.

So for the constructor we will have the HTTP and

so this is leader provider,

and then instead of returning dishes we will return the leader objectory.

And then this will be getLeaders.

And the in point at which we're going to be doing the query is the leaders.

And the processing will be exactly the same.

And then for the second one we'll be returning a getLeader.

So you see that the structure of the providers are all the same for

my example here, so that's why.

It's easy to copy and paste the code and then get it done very quickly.

And last one would be the getFeaturedLeader.

Make sure you do all the updates correctly.

So it will say getFeaturedLeader(): Observable<Leader>.

And you have to query the leaders endpoint.

Not the dish endpoint and then we'll be extracting the data, and

returning the results exactly the same way here.

So with this, we have updated the leaders method.

Similarly we'll go to the promotion.

So before we go to the promotion let me just copy

this whole thing because we will need that for the promotion.

So going to the promotion.ts file.

I'm going to replace that code here and then here

we are going to be importing the promotion from the promotions.

Folder, and again going to the leader.ts file,

I'm going to copy everything.

Here, and then piece that into the Leaders,

and then also we will need to copy that part,

and then go to promotion.ts.

And then simply replace that.

And so we have getPromotion.ts file.

So here, we will be returning getPromotions and

so this would be, I type promotion.

And getLeader would be getPromotion, and

FeaturedLeader should be corrected to FeaturedPromotion.

And also the endpoints would be, promotions.

Please pay attention to update everything correctly otherwise

it's very hard to trace where the problem is within your code.

So remember to make all the updates.

Here you should not be using leader anywhere within this.

If you want to be sure that you have done the updates correctly,

one thing that I often use is just to search for

that to see that, that doesn't exist.

So that's one way I cross-check to make sure that I

have done all the updates correctly.

So with this, we have updated all the three

providers that we are using within our application.

Now in addition, we will have to go to the app.module.ts and

then import the HTTP module into our app.module.ts.

That has not been included here.

So I'm going to import

the HttpModule from

@angular/http library.

Fortunately, the Ionic CLI has already installed the NPM module for

us into the node modules folder.

So we know that it is available for us.

And then also we will be importing,

The baseURL from,

shared/baseurl, we also need this here.

And then we will be configuring one more value provider

inside that provider's property of the NgModule decorator.

So we'll go in and say provide:, BaseURL and

then useValue: baseURL.

And this way we have configured one more

value provider within our app.module.ts file.

One last update that I need to do but

I forgot is that inside the app.module.ts file here,

I also need to import the HTTP module.

If we forget that then your Ionic application will show an error.

So with this we have done all the housekeeping work and

now our application is all updated to communicate with the server and

then obtain the data from the server.

Now, we have not done yet,

we have prepared everything within our application.

Now it is time to start updating the pages to make use of the data that is obtained

from the server site.

We will start with the HomePage, and we're going to update the HomePage

to show some information, the featured dish, the featured leader, and

the featured promotion on the HomePage using the Ionics card component.

Save all the changes and then I am now going to go and

work on the home component page here the HomePage here.

So going to the HomePage, we'll open the home.ts file here.

And then in the home.ts file we're going to import,

The OnInit and Inject also from the @angular/core.

And then we already have the NavController from ionic-angular.

And then I will import the Dish interface from,

shared/dish.

And then also import the DishProvider,

From, providers/dish.

Now along with the Dish, we will also import the promotions.

So I'm just going to copy that and also the leaders.

So we have the DishProvider, and

then we'll import the Promotion from shared/promotion.

And then we'll have the PromotionProvider from,

the promotion.

And then the last one would be the Leader from shared/leader.

And the LeaderProvider from

providers/leader/leader.

So we have all the interfaces and

the providers imported here into our home.ts file.

So now we can then leverage this providers to go and

fetch the data from our server, and then use it within this page.

Which is nothing but an angular component.

So going into the HomePage,

we will also implement OnInit.

The OnInit as you know, is the lifecycle method of the component,

so we're going to be making use of that within our component.

And in addition, let's inject the,

Three providers.

So we'll inject the DishProvider.

And then,

The PromotonProvider.

The LeaderProvider and

also we're going to be using the Inject,

to Inject the BaseURL value what we have.

The value provider, and then configure this as BaseURL.

implements OnInit, not implement, implements OnInit.

And so we have now configured the constructor

correctly to make use of all the methods.

Now, I'm going to define a few local variables here.

Dish, which is of the type dish.

Promotion which is of the type promotion.

And then leader, which is of the type leader.

And then we'll define dish error message of the type string.

Promo error message of the type string.

So in case your provider returns an error value.

The error message will be initialized into this.

So leader error message which is of the type string.

So now we have three dish promotion and

leader variables which can be used within our template.

And also these three error message strings which will be initialized in

case that server returns error.

Now inside the ngOnInit,

Life cycle method, we will be calling

the Providers so

we'll call the dish service and we'll say getFeaturedDish.

And we know that this is going to be returning a,

Observable.

So we will subscribe to that observable here.

And then we will implement, inside the subscribe, we will implement,

Two methods, two functions,

which will handle the situation where the,

Server correctly returns the value,

or in case it returns error message,

then we'll say, this dishErrMess

is equal to any errmess here.

So this is how we're going to be handling the return value from the dish service.

Now the same structure I'm going to use for the,

Promotion, and also for the leader.

So here we are going to call the,

Promotion service and then we'll say getFeatured, Promotion and

then in this case when we subscribe, this will return a,

Promotion value.

And so we will initialize that promotion.

And the error message will be handled exactly the same as

the previous case, except that we will initialize the promo error message.

And the last one would be leaderservice and

then this we'll call the getFeaturedLeader.

And then when it returns the leader, we'll initialize

the leader to, That leader.

And if there is an error message, we will initialize the leader error message.

So with this, the home.ts file has

all been updated to get the data from the server through the providers.

And then make the data available for use within our template.

So the last step that is left for us Is to go and

update the template for our page.

So going to the home.html, you see that in

the home.html, we have a few things that are already included there.

So I'm going to simply cut this out because I don't need that.

And also I will remove this padding that we

are giving for our ion-content.

And then we will include the,

Dish promotion and error information, using Ionic cards there.

So I will use ion-card here.

So this is an ion-card, and

this ion-card, I will show

only when the dish is not null.

So that's where I will use the ng if structural directive to control that and

then I will construct the card by saying image source equal to,

BaseURL + dish.image.

So this is where I will display first the image in the card.

And then I'll define

ion-card-content.

So inside here, we will construct the way we display the content here.

So I'll say, ion-card-content, and

in here I will say ion-card-title.

So this helps me to define the title for my ionic card here.

So note that use of the ion card,

Component from ionic here.

So this starts with the ion card directive here.

And then inside where we have the ion-card-content inside where the actual

content is defined, and then inside where we have the ion card title.

Where we will define the title for this dish here.

And then the title would be given by saying dish.name.

And then pass it through the uppercase pipe of angular.

And then also we will include the,

Description for this dish in a P here.

So we'll say dish.description and that is it.

So now, we have our card for our dish constructed here.

Now if the dish is null.

Then I will use here

a div and

use the hidden property here.

And set this either dish or dishErrMess.

So if either the dish or the error message is defined then I'm going to hide this.

So this is where I will use another component

from ionic called as the ion-spinner.

So this will be showing a progress spinner in the view

of this page while the dish data is being fetched from the server.

So I would say loading and

please wait.

So this second part, this div,

will be shown while the data is being fetched from the server side.

And if the dish is correctly fetched, then the dish variable will be not null.

And in which case I will display the details of the dish using this

ion card that we have constructed here.

If we get the error message, then I'm going to use another div where

I will use the ngIf [INAUDIBLE] dish error message.

So I am going to display the error message here, inside another div here.

So this structured way of displaying the data is very, very

useful to define your view here.

So inside was div, I will use an h2 to display an error,

String in the.

Div here, so, we'll say, dishErrMess.

So, the dish error message that we received

will be displayed in this div here.

So, if there is an error that is written by the server or any other reason for

the error, then the error message will be displayed using this particular div here.

So see this structure here.

The information about the dish will be displayed.

If the dish is properly obtained by a component from

the server through the provider.

While it is fetching, you will display this

progress spinner using the ion spinner from ionic.

If there is an error then the error message will be displayed by this.

So this is how they will display the information about the specific dish.

I'm going to use exactly the same structure to display also

the promotion so I'm just going to copy this

code and paste it here and then keep updating this.

So we'll see ion-card promotion and

then promotion.image and promotion name and

promotion.description and

then this would be promotion and

promo error message.

And then this last one should be PromoErrMess,

PromoErrMess.

And the last card that I will display in my homepage is for the leader.

So I'll say leader, leader.image,

leader.name uppercase,

leader.description.

But for the leader,

I will also show the leaders designation on top of the description here.

So let me add in a new p here.

And then inside this p, I will use the other property, leader.

Designation, the designation for the leader here and the leader.description.

And then going down here, this should be leader.

LeaderErrMess, again, see how painstakingly,

you should make sure that everything is properly updated,

otherwise you'll end up showing the wrong things in your view here.

So now we have the leader card set up.

We have the promotion card set up here and then we have the dish card set up here.

That's it.

We have completed all the updates.

Let's save the changes and then go and

take a look at our application in the browser.

Going to our application in that browser, let me try and

again reload the application.

And you see the spinner there before the actual data is fetched and

then rendered in the browser here.

So once the data is fetched, you can see how the card component

is displaying the information about their featured dish,

their featured promotion and

the featured leader in the homepage view.

Same thing in the iOS site.

The three cards being shown in the home page.

So this is the start of our application.

So we are now seeing our application slowly taking shape.

Well, this may complete our exercise.

In this exercise,

we have upgraded our ionic application to include four new interfaces.

We also have updated with four new providers then

we have updated the homepage to be able to show the featured dish,

the feature promotion and the featured leaders in our homepage.

Through this exercise we have seen how we can leverage our knowledge from

angular to build our ionic application how we build the providers,

how we make use of the Angular Support for HTTP to communicate with our server and

then display the information within our pages of our ionic application.

With this we complete this exercise.

This is a good time for you to save all the files and

save them to your Git repository with the message ionic and angular.

[MUSIC]

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play