Exercise (Video): Application Settings

Loading...

Do curso por The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

83 classificações

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

83 classificações

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

This course focuses on developing truly cross-platform, native iOS and Android apps using NativeScript (Ver 3.x). The framework uses Angular, TypeScript or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with NativeScript UI and layout support and 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 Angular, TypeScript and Javascript skills, and (c) Use various features of the NativeScript framework to build truly cross-platform mobile applications

Na lição

NativeScript Animations, Gestures, Storage and Image Resources

In this module we look at enhancing the user experience through the use of animations and support for gesture-based interaction. We also look at leveraging the storage for persisting data, and the customization of splash screens, icons and the use of other image resource in the app

Persisting Data: NativeScript Storage9:05

Exercise (Video): Application Settings12:23

Exercise (Video): NoSQL Storage with Couchbase Lite18:01

Conheça os instrutores

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

[MUSIC]

Application settings.

As we understood from the previous lecture,

it is a way that native script provides for us to store small amounts of

information related to the settings of our app within the application.

Now it provides a way of storing information using the key value based

storage and then enables us to retrieve the information and use it when required.

In this exercise, we'll look at the use of application settings as a way of storing

the login credentials for our application.

Also, we will see the use of the login dialog as a way of allowing the users

to type in their login credentials and log into other application.

Of course since we don't have a full-fledged server side at this moment,

we will not do the entire login processing but

we will show how we can capture the login credentials within our application.

When we build that server side in the last course we will hook

this up to the server side authentication in that course.

To get started on this exercise, go into the code,

we will configure where login dialog in the drawer component

in our application, because the drawer component is

presented in all the remaining pages of our application.

So, going into the drawer.component.ts file here,

in the drawer component, let me import login and

then LoginResult from ui/dialogs.

So the login allows us to open a login dialog,

the LoginResult is in object but stores the return value from

that login dialog that we passed back to our component.

Also, let's import the { getstring,

setstring } matters from,

Application-settings.

So this is where we will employ application settings to store

the user name and password for the user within our application and

then configure the login dialog automatically before we open it.

So once we import this tool in our drawer component,

let's include a method called displayLoginDialog which as

the name implies is a way of presenting the login dialog to the user.

So in here, let's set up the options for that login dialogue.

So the options include title, which I will present as Login.

And, Message,

Let's say, Type Your Login Credentials,

let me a bit more, Verbose here.

And then the third setting is the userName.

Note, userName with a capital N in between.

So you have to be very careful to make sure that that has a capital N here,

as shown here, userName.

This is the setting that is used in the login dialog, and

also the login result will return the value accordingly.

And here, we will use the getString method from application settings.

So in the getString method,

I will return the value by retrieving it using the key userName.

So I'm using exactly the same as here just for convenience.

You can of course specify anything else you want here, but

It makes more sense to specify exactly the same thing so

that we remember what we are trying to retrieve from the application settings.

And the default value would be an empty string here.

And let's set up the password also.

And in case we store the password,

We'll retrieve the password also from our, Application settings.

Of course,

in real life you should be encrypting the password before you store it.

Because this is a simple exercise I'm just like illustrating without encrypting

the password, but, We will be able to store the password like this here.

That should be a comma.

And OK button should display and

instead saying OK button will say Login here.

And the cancel button.

So as you, Expect, the login dialog will show two buttons here.

The login and the cancel, the OK and the Cancel buttons here.

Now once the, Options

are configured we can open a login dialog by saying login and

then pass in the options as a parameter to the login.

And this login will obviously return a promise.

And inside here, we will handle the promise accordingly.

So inside, where in the promise,

we will get a parameter for the call back here for

the resolve function of the promise of the type login result.

So when this parameter was delivered, so

that means that our application is passing back information to us.

So we will handle it inside the bend here.

And then we'll say at this moment, we'll simply

save the values of the userName and password here.

So, when you start out your application, your username and password will be empty.

But then, the first time the user logs in we will save that value and subsequently

the user will not have to type in this information in our application.

It will automatically fill in the information here.

So by doing this we are prefilling the login dialog with the saved username and

password for the user, and where do we save the values?

This is where we save the values,

using the setString method of the application settings.

And so here I will save the password also accordingly and then,

From the loginResult.password here.

So the loginResult object will contain the username and password as we see here.

So if this is successful, then this is where we handle the result.

We can of course handle that situation where it is cancelled so

we can present the other option here.

And we can say, At this moment we'll simply do,

A console.log of this.

In a real application, you don't need to do this actually, but

this is just a way for us to recognize that the user cancelled the login here.

And close that login configuration here.

So with this my drawer component is configured to show the login dialog.

Now in order to initiate the showing of the login dialog I need to go

into the draw component and configure one of the options in the side drawer here.

So let me copy this configuration here for the grid layout

from the earlier version, and I will display the login button

right here at the top of the remaining options in the menu.

So right there I will say GridLayout sidedrawer, all this just like before.

And then orientation horizontal nsRouterLink.

So this nsRouterLink doesn't exist here,

instead we will be opening the login dialog here.

So I'm going to cut out these two, so these two are irrelevant here.

And then orientation=horizontal.

And then when this is tapped I'm going to

call the display LoginDialog() method

that I just implemented in the drawer.component.ts file.

And then for the icon here, we will use

the icon as fa-sign-in, as the icon here.

And the text for the button here.

The label will be Login.

So this should show that Login option right at the top of that menu there.

With this, we have completed all the updates.

Let's save the changes and go and take a look at our application on the device.

When our application is shown on the device and

when you open the side drop, you now see the new option here for the login.

Clicking on the login should bring up the login dialog as shown here.

So when we type in our login credentials,

let me just type in my User ID and then the password,

and, Let me just type in a password here.

And then click on the Login button here,

then the login credentials will be saved in our application.

So when I click on the Login, then the login credentials will be saved.

So that subsequently when I again open the login dialog,

you would see that the login dialog will be prefilled

with the saved credentials that I have done before.

If I cancel then of course the login will be cancelled.

Again, one more time.

Presenting the login dialog you can see that the login credentials

are now saved in my application and

will always be prefilled into the login dialog whenever I open it.

With this, we complete this exercise.

In this exercise, we have seen how we can make use of the application settings to

store small amounts of information within our application.

We also saw the use of the login dialog for

enabling the user to type in their login credentials into our application.

This is a good time for

you to do a git commit with the message application settings.

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