Exercise (Video): Notifying the User

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

93 notes

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

93 notes

Cours 4 sur 5 dans 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

À partir de la leçon

Accessing Native Capabilities of Devices: NativeScript Plugins

In this module you will explore NativeScript Plugins that enable you to access the native capabilities of the mobile devices. You will use a few plugins in order to understand the general concepts and the patterns for using these plugins within your NativeScript application

NativeScript Plugins16:00

Exercise (Video): Notifying the User7:26

Rencontrer les enseignants

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

Local notifications is a convenient way of keeping

the user informed without disturbing the actions of the user.

The notifications are put into the notification bar and will

be seen by the user when he or she wishes to.

Now, in NativeScript we can leverage

the NativeScript local notifications plug-in in order to

access the notifications capability on the mobile devices,

and put in notification into the notification bar.

In this exercise we will look at how we can leverage this to alert the user

whenever a dish is added to that list of favorites for the user.

This is a simple use case where I am demonstrating the use of local notifications.

You can leverage local notifications together with

server side push notifications in order to alert

users about events or actions that take place behind the scenes.

But in this case I will show you a simple way of

making use of local notifications in your application.

To make use of local notifications in your application

the first step is to install the NativeScript plugin.

So I type tns plugin add nativescript local notifications.

And let the plugin get installed.

Once the plugin is successfully installed then go to

your code and open favorite.service.ts file.

Going to our code.

Let me now open the favorite.service.ts file. And then in here.

First we will import * as localNotifications from 'nativescript-local-notifications.'

So we are importing all the exports from

the nativescript-local-notification NPM module into our application.

And then once that is done what we would like to do is

whenever we add an item to the list of favorites,

we want to deliver a local notification to the device.

So right there inside the addFavorite method

there let's leverage localNotifications.schedule.

So the schedule allows you to schedule a local notification.

The local notification has many options that are available.

You can schedule the notification to be delivered at a later time.

You can also configure various aspects of the local notification.

In this example I'm going to illustrate

a very simple way of leveraging the local notification.

And this has to be enclosed inside square brackets here.

So this is an array of objects that we are going to deliver here.

So inside here you will configure the JavaScript object with the

id as the id of the device that we are just adding to our list of favorites.

Then I will configure the title as favorites and

body as 'dish' + id + 'added successfully'.

We can also give the title as conFusion favorites to be more specific.

And this will return a promise to indicate whether the notification has been added or not.

So I will add that then.

And let me just do a console log.

With notification scheduled.

And if there is an error,

then console.log (' Error showing notification').

And I will add error into the application there.

So this simple way of configuring the local notification.

Now, there are many other options for local notification that

you can set up in the documentation.

There is more clear description of those.

But this simple set up is sufficient enough

to put the notification into the notification bar.

So with this we have completed updates.

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

Once the application is applied to the device after the project gets recompiled then

let's go to the menu and to a specific.

Let's add those to our favorites.

So when we add to our favorites,

you'll immediately see that a notification is put into the notification bar.

So when you drag down the notification,

you immediately see that notification in the notification bar of your device here.

Similarly, let's add one more to our list of favorites by using the action dialog.

So let me add one more to the list of favorites.

And you'll see the notification sound that you have configured on your device,

the default notification sound being sounded.

And the notification gets put into the notification bar.

So you can now see that we have one more notification up in the notification bar there.

With this, we complete this simple exercise where we have seen how we can use

that NativeScript notification plugin in order

to put local notifications into our notification bar.

This is a good time for you to do a Git-commit with the message local notifications.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play