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
Exercise (Video): FAB and Favorites
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova
193 个评分
The Hong Kong University of Science and Technology
193 个评分
课程 3（共 5 门，Specialization Full Stack Web and Multiplatform Mobile App Development）
从本节课中
Ionic Components
This module explores the Ionic support for forms. Advanced features of Ionic lists are discussed. In addition all the different methods of overlaying information on the screen like modals, popups, popovers, action sheets, and loading are examined. Ionic support for gestures is also briefly considered.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
Continuing with our exercises on floating action buttons, in this exercise,
we're gonna modify our application to enable users to
mark certain dishes as their favorites.
And we would have a provider that will enable us to keep track of
the favorites and then also retrieve the list of favorites when required.
In this exercise, we're going to add in
the support for keeping track of the favorites and then also
use a floating action button to enable the user to mark
a specific dish as his or her favorite.
So let's go ahead to use FABs along with a favorite provider in this exercise.
In order to keep track of a user's favorite dishes,
we're gonna add in a new provider into our Ionic application called favorite.
So to do that, at the prompt,
type ionic g provider favorite and then add in the new provider to our application.
Once the provider is added,
we'll go to our application and start working on that new provider.
So let's open the favorite.ts file for our provider.
And then within this file,
we're going to add in the support for keeping track of our favorites.
At this point, I'm going to simply use
a - an array within my favorite provider to keep track of the favorites.
Obviously, if you are going to develop a real application,
you want to be able to keep track of the favorites of a specific user on the server side.
But right now, we don't have the ability for authenticating a user,
nor do we have the ability to store the favorites on a server.
We're gonna add in that kind of support in the last course of this specialization.
But for the moment, I'm gonna keep track of the favorites of a user right within
the FavoriteProvider by using an array where we will keep
track of the IDs of the favorite dishes of a user.
So after adding in this variable called favorites,
which is an array of any type,
within the constructor I'm going to add
in the initialization for the favorites as an empty array.
And we will add in two methods into this FavoriteProvider;
one called as addFavorite,
obviously, where id would be the ID of the dish which needs to be
added to their favorite and
the second method that I'm going to add in is called isFavorite,
which will be used to check if a given dish is a user's favorite.
Now, the isFavorite will return a Boolean value;
the addFavorite also will return a Boolean value to
confirm that the dish had been added to their favorites.
So in here, we will say this.favorites.push and then we'll push the ID into the array.
And that's about it - and then return true.
So with this method,
we are able to now push the favorites to the favorites array.
Later on, we can modify this method to be able to do the same action on a server side,
but the interface to the component will remain exactly the same as we defined here.
For the isFavorite method,
I'm going to take advantage of an array method called as some.
The some method checks to see if a specific dish is in the array or not.
So to do that, I am just going to check an element of the array to see
if that element is the same as the ID that has been supplied as the parameter.
And this will return either true or false.
If this condition turns out to be true,
then it'll return true;
otherwise, it'll return false.
So this is an easy way of checking to see whether
a specific dish is already among the favorites for the user.
With these changes, we have updated the favorites.
Now, we're gonna make use of this FavoritesProvider in our DishdetailPage.
There we will allow the user to select a dish
as his or her favorite and also be able to display this information.
Going to dishdetail.ts file here,
I'm going to inject the FavoriteProvider into the DishdetailPage.
And so let me first import the FavoriteProvider
into the DishdetailPage and then we will go ahead and inject that as a service.
So we'll say private favoriteservice
and this is the FavoriteProvider.
In addition, I'm also going to introduce another variable called favorite,
which I will initialize as false.
Now, what I will do is whenever the DishdetailPage is constructed,
I will check to see if this dish is already the user's favorite dish.
So, I'll say this.favoriteservice.isFavorite
and then we'll check with
the dish ID; this.dish.id.
So this way, the variable favorite here
will keep track of whether this particular dish is the favorite of the user or not.
We'll also add another function here called addToFavorites,
which we can invoke from the template in order to add a specific dish to the favorite.
So just to verify,
I will do a console log of
the dish ID and then I'll say
this.favorite
equal to this.favoriteservice.addFavorite
and then pass in the dish ID as a parameter to that method here.
So with this, we will be able to add
the dish to the favorites and the addFavorite method will return
a Boolean to confirm that the addition is - is
successful and so that will be assigned to the favorite variable here.
Now, going to the dishdetail.html page,
I'm going to add in a floating action button here.
Now here, we will add in two different floating action buttons,
depending upon whether the dish is already a user's favorite or not.
We will display one of these two buttons.
So I'll say ion-fab bottom
right and I'll say hidden.
So this particular button will be displayed only if
the dish is not already the user's favorite.
And so here I will introduce a ion-fab button and then when this is clicked,
I will initiate a call to addToFavorites method,
what we have already introduced and the button here.
Now, you must be wondering why
this ion-fab is assigned to a button and included inside an ion-fab.
This outer ion-fab is just used as a container for a fab button here.
So if we use it this way,
then this button will be at a fixed location in the view.
If we just include a button ion-fab - just this
part - then this button will be scrollable;
so as the view scrolls,
the button will also scroll.
But in this case,
I want this button to be fixed at the bottom right corner of my view,
so that's the reason why we enclose this inside an ion-fab here.
So this particular button,
I will display only when this dish is not already the user's favorite.
So in this case,
I will use heart-outline as the icon for this button here.
So as you see,
this button will be displayed when the user has
not yet selected this dish as his or her favorite.
But suppose the dish is already selected as the favorite?
Then in that case,
I will use a different button.
So in this case, I will say *ngIf.
So you notice that this button, the upper button,
will be displayed if this dish is not already the user's favorite;
the lower button will be used as a floating action button
if this dish is already the user's favorite.
So that is where I'm using the ngIf and the hidden to decide which button to display.
And if the dish is already the user's favorite,
I'm going to use a heart,
which is a filled heart,
to use as the icon for this button.
And also when this button is clicked,
I will do nothing - I just want that button to just show that
this dish is already selected as the favorite by the user.
So with this, we have added in the floating action button into our view here.
So let's save all the changes and then go and take a look at our application.
Going to our application in the browser,
let me bring up the menu.
And from the menu,
let me select a dish.
So when I select a dish,
you can see that, at the bottom here,
you have this floating action button with a unfilled heart.
If I click on this,
then you notice that the heart turns from unfilled to filled to indicate that
this dish has been selected as the favorite by the user.
In addition, this dish would have been added into
the favorites by calling the addFavorite method of the FavoriteProvider.
Now going back, we can go to
another dish and then you see that this is not added to the favorite.
We can always return to that dish and you will see that the dish will be always
marked as the favorite because we have already selecting that dish as our favorite dish.
So this is one way you can keep track of the favorite dishes of
a user by using the favorite factoring
and also provide a floating action button to enable the user to
select a particular dish as his or her favorite.
With this, we've completed this exercise.
This is a good time for you to do a get commit with the message FAB favorite.
