[MUSIC]

We have just learned that ionic storage provides a easy way of

storing data in the form of t value pairs, and adjacent objects.

We also learned that storage provides a way of dealing with

the variety of underlying storage engines that are available on various platforms,

but still providing a uniform API for our application to make use of.

In this exercise, we will employ storage to store data and

in the process learn how to use the ionic storage within our application.

To help us understand how to make use of storage, we will create a new page

within our ionic application called the login page which enables users to log in.

The way we will use storage is to remember the username and password for

the user within our application, and automatically fill in

this data if the information has been saved by the user in our application.

So to get started, at the prompt type Ionic

g page login, and

once the page is created then they will move onto update our application.

Going to our application in the editor.

The first step is to go in and

update the app module.ts file to include the U page,

so we will import the login page,

From log in.

And then going into the declarations,

Included in the declarations and

also the entry components, part of the app module.

We want to use the login page as a module within our application and

display it when the user needs to log into our application.

So to set that up, we will go into the app component to our TS files.

And then import that login page into our app component.

So, Import the login page from,

From the login page, and then we note that the support for modal is already

included within our app component, because we already created other modal,

so we had the modal controller already Important into our application.

So all that we need to do is to setup a function here called,

openLogin, which will open the login page as a modal.

So within this we'll say, Let modal,

this, ModalCtrl.create,

LoginPage and, Modal.present.

And of course we go to app.html and

add in a button which will trigger the showing of the modal.

So going into that app.html page right there at the top,

I will add in the new button.

Let me simply copy the reserve table button there, and

then paste it in there, because the basic functionality is still the same.

So button color, primary-pale, menuClose,

ion-item, and this will open the login page.

And the ion icon and the main icon is log-in.

And then we will use Login as the text within that.

But so with this our app component and app module are all set up.

Our next step is to add in the support for using storage within our application.

So to do that we'll, again, switch to the app module.ts.

And then right there I

will import the IonicStorage

from @ionic/storage.

Now as part of the IonicStorageModule from ionic storage.

As part of the scaffolding out of initial application via ionic CLI,

the ionic storage is automatically included into our application.

So you can check the package.json file that notice that is

already included and installed within our node module.

And so, once we configure that then,

going into NG modules in the imports after the ionic module,

we will import the ionic storage module.

And for root, now once we are done with that,

then we need to setup our login page to show the information.

So to setup the login page,

let me go into the shared folder and

then create a new file named user.ts.

And this will export an interface named

user which at the moment will contain username and password.

We can later on add in additional properties into the user interface.

Then switching to the login.ts file, so

going to login.ts file, here.

We will update at log.ts file to serve as our modal for

letting the users login to our application.

So in here, along with the component, we have important IonicPage,

the NavController, NavParameters.

And since this is going to act as a modal, so

I will import the view controller also into our application and then,

Since I'm going to be using forms within this application,

so I will set up for the reactive forms.

So I'll import Validators,

FormBuilder, FormGroup,

from angular forms And

then, in order to use this storage module,

we need to import Storage from ionic/storage.

And also import the User interface that we just created, from.

Shared user.

Then, going down into our application,

let's start configuring our application to display the fall.

So, going into that login page, I'm going to create

a LoginForm of the type FormGroup.

So this is the one that stores the form that we use in our application.

And then a User which will be of the type User, and

then I will initialize this to username and

empty string password and empty string.

So, we have setup for the LoginForm, and username, and password.

Then, going into our constructive, along with the NavParams.

We will import.

The ViewController and then we'll inject.

That FormBuilder.

And also.

Storage.

Once we have injected all these into our constructor,

then we can set up our application to show that more.

So here within the constructor, I'm going to create the LoginForm which is

FormBuilder.group, as you would expect.

So inside the formBuilder.group, we will setup three properties, username.

Which would be starting out as an MT, and

then I will setup the validators required for the username.

So the username will be required.

Password similarly.

Set up as an empty string.

And validators.required.

And, we will use a Boolean variable called remember, which we will set to true.

And this would be linked to a check box in our phone,

which when click will enable our application to save

the username and password, within our storage.

Now, also if the application is already

having the information about the user.

Then, we want to be able to fix the information from the storage.

So this is where we will see storage.get ('user').

And since this supports a promise interface,

so I will say .then and inside of then,

we will either get the user value.

If you get the user value,

then you can act upon the available information about that user.

Now, if the user turns out to be not null,

then of course, we have the user what is obtained from storage.

So if it so happens that your application is just starting out,

then the user value is not in your storage.

And will return a null value.

Then, that means that the users information is not within our storage.

Similarly, if the user decides not to store the username and

password withing your application,

then the username information will not be available within the storage.

So we should deem to the fact that the user information,

is not available and correspondingly, not initialize the font.

But if the user information is available within our storage, and

it is fetched by the storage kit method.

Then, we will setup the two fields within

our form, the login form, the username and

password to be equal to the value that we get from our storage.

So, within this storage, so

we'll say if (user), which means that the user is available.

So, then we'll say this.user = user.

And then, we will use the patch.

PatchValue function of our.

Reactive form, to patch in the new values for our application.

So, in the previous course, we had talked about the setValue and

the patchValue, as way of setting up the initial values written the form.

So we'll say, patchValue username this.user.username.

So notice that we are setting up that username.

And then, we'll set up the password

also as this.user.password.

So they'll patch in the value if it is available from the user.

Otherwise.

The user value is not available.

So, just to remind myself,

let me do a console.log.

This is not essential.

You can delete this, once you know that your application is working correctly.

Sometimes I used the console.log just to keep tract,

to see how my application is responding in this situation.

So that's the reason why I'm using console.log.

So, within the storage.get method, notice that their promise that this return

is handled Inside here, so the promise will return the user value.

And then, if the user is not null then we will patch in the value to the forms and

if not, then we'll just do a console log saying user not defined.

And then, we need a way of dismissing the form,

so we'll say dismiss and

this.viewCtrl.dismiss.

So this is a way of dismissing the modal.

And also, we'll have to.

Implement in onSubmit method, which will handle the form submission.

So when the form is submitted, what are we do?

So we'll say, this.user.username

= this.loginForm.get('username').

So you know that this is how we can get.

The username field from the loginForm, so value.

And this.user.password,

this.loginForm.get('password').

And value, and, Now,

we will also have a checkbox within our form which

when ticked by the user will tell us that we need to see the username and

password within our application.

So, this is where the remember that we created here within our form.

So in our form, we have the this Boolean variable remember,

it should be tied to a check box.

So, if that is true then, I need to store this,

User information within our storage.

So we'll say, this.storage.set('user').

So recall that this is the way that you will save values to your storage.

So and save this.user,

so if the information needs to be stored

then we store the user and also the else part.

So if the check box is not ticked, then I should also remove,

The user information from my storage.

So if the check box is not ticked,

then I will dribble the user information from the storage.

So notice that how we handle the case where the check box for

the remember is ticked or not ticked here.

And then once we are done with this then we'll say this.viewCtrl.dismiss and

then close that model at this point.

So with this, my login form is set up in my application.

So all that we are left with is going into the login.html page and

set up the login form within this page.

So, for the login form, let me set up the button

in the nav bar to close the module.

So what I'm going to do is I'm going to copy this part from

the reservation.html page.

So this is where we setup our toolbar for our module.

So I'm going to copy that part going to login and paste that in there.

And give it the title as login with a capital L.

Then close off the, Ion-toolbar here.

So this will setup the Close button or

the Cancel button in the toolbar which will enable us to close the model.

And within the content we'll create the form which,

Is tied to that formGroup,

the loginForm formGroup in our TypeScript code,

and then we'll say ngSubmit, which should

be tied in to onSubmit method that we have implemented.

Inside our application and then close off the form here.

Now this form as you expect, Contains three items.

So I'm going to create, one, just

copy that, two and three items.

So the first one would be a,

Ion item to allow the user to type in the user name.

And so we'll set up the ion-label for this ion item as a floating label.

And then we'll say ion-input.

type="text" because the user may miss text and

then set up the formControlName

as username from our login form.

And that will set up the username and the password in the second one.

And the ion-input

type="password" and,

formControlName="password"

And close after.

So we have the username and password fields in there.

And the third one that I'm going to set up is the check box.

So I'll say ion-label.

Remember Me.

You have seen these kinds of login forms on many websites and applications.

So same thing that we are using here.

And then we'll say, ion-checkbox

color will be primary color.

FormControl\Name will be remember,

and we will see that if the box

is checked="true" and

close off the ion checkbox

And of course we need a button to submit.

So we'll create a button of the type ion-button.

Submit button, and we will disable this.

If, loginForm is not valid.

Disabled this loginForm is not valid and

type the Login button here.

With this, my form is all set up.

Let's save all the changes that we have made and

then let's go look at our ionic application.

Go into the browser.

We'll now notice that within the side menu,

we now see a new button called Login button.

When we click on that, the Login form will open up.

And as you expect, you see the Username and Password, and

the check box here called Remember Me set up here and

the Login button which will become active only when the form is valid.

So let me type a username.

And the password.

And we'll leave the Remember Me as checked in, and

you'll notice that the Login button becomes valid.

And when you click on the Login button,

the login information is submitted to our application.

In order to be sure that it is submitted and

saved in our storage, we can go to the developer tools.

And within the developer tools, let me drag the developer tools up here.

And within the developer tools we can go into the application and

then on the left side you will see the storage being shown here.

In the storage for the browser,

the Ionic storage will make use of the IndexedDB storage.

So if you click on the ionickv here, you will notice that inside

this storage here, in the IndexDB storage here you will see the key,

user, and the value, object, being stored here.

And you'll see the username and

password information being stored within our database.

Of course, if you are implementing this as a real application,

I would strongly suggest that you encrypt the password and store it there.

You should not be storing it as a text file.

But again, since I'm just illustrating this to you,

I am storing it as an unencrypted password there.

Similarly, on the iOS site you see that when you bring up

the form you see the information within the form is already filled in for you.

Because our application has retrieved this information from the storage and

automatically filled the form for you.

Same thing on the Android side, when you now click the login form,

you see that the username and password is automatically filled in for us.

Now, if I click on don't remember and then I turn off this,

and then do a submission of the font.

If I bring up the form now, you will notice that the form is unfilled here.

So clicking on the, Checkbox

here ensures that the form information is stored in your storage.

If you uncheck the box,

then the form information is not stored within your local storage.

With this, we complete this exercise.

In this exercise, we have seen the use of the Ionic Storage support, and

we leverage that to be able to store the username and password for our application.

With this, we completed the exercise, this is a good time for

you to do a git commit with the message storage.

[MUSIC]

Exercise (Video): Ionic Storage

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

与讲师见面