nativescript + push notifications

24
Let's talk NativeScript This changes everything! By

Upload: lohith-goudagere-nagaraj

Post on 16-Apr-2017

1.383 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: NativeScript + Push Notifications

Let's talk NativeScriptThis changes

everything!

By

Page 2: NativeScript + Push Notifications

About Me

Technical EvangelistMicrosoft MVP (ASP.NET/IIS)

[email protected]

@kashyapahttp://www.kashyapas.com

http://www.telerikhelper.net

Lohith G N

http://www.telerik.com

Page 3: NativeScript + Push Notifications

Agenda

• NativeScript

• Push Notification

• Telerik Backend

• NativeScript + Push

Page 4: NativeScript + Push Notifications

You're Welcome!

NativeScript

{}

Native iOS / Andoid / Windows Phone*

Apps Built with JavaScript + CSS + XMLSingle Code Base *Coming

Soon

Page 5: NativeScript + Push Notifications

What?{N} is built from ground up

No DOM

No Cross-Compilation

No Plugins Required

{N} is straight-up JS | Running as Native App

Page 6: NativeScript + Push Notifications

Under the hood{N} works over an abstraction - a very smart one

Runs JavaScript in a Virtual Machine

JavaScriptCore VM on

iOS V8 VM on Android

JavaScriptCore* VM on Win Mobile 10 *Tentati

ve

Page 7: NativeScript + Push Notifications

You write JavaScript{N} utilizes a bridge

Has full access to Native APIs- That's all of iOS + Android APIs!

Uses Reflection to look up Native APIs List of APIs for each Platform Metadata pre-generatedInjected into App package @ Build time

Page 8: NativeScript + Push Notifications

Plug & Play?{N} is very flexible

Allows reuse of skills & assets

Use native libraries for each platform

Use JS libraries without DOM dependency

Shared UI styles through CSS

Full TypeScript Support

Page 9: NativeScript + Push Notifications

How do I start?{N} Command Line Interface makes

it easy Grab the NativeScript CLI:npm install -g nativescript

tns create MyApptns platform add android

Create Project & Add Platforms:

tns run androidtns run android --emulator

Run Project on Device or Emulator:

Page 10: NativeScript + Push Notifications

Choice of IDE?{N} aims to give you flexibility

Sublime Text | With complete Workflow

VS Code | Best for

TypeScript Most other

JS/CSS text editors

Page 11: NativeScript + Push Notifications

Demo

Page 12: NativeScript + Push Notifications

Why {N} again?

Page 13: NativeScript + Push Notifications

Push Notifications

Page 14: NativeScript + Push Notifications

What is Push Notification• Send Some Data to your App

• Convenient, Battery Friendly

• App need not be running

• Used as Marketing Campaigns, Promos, etc

Page 15: NativeScript + Push Notifications

Architectural Overview

APNS

WNS

Android/iOS/WP

Page 16: NativeScript + Push Notifications

Procedure• Register Your App with respective

Notification Service

• Use an App Server to communicate with Notification Server

• Handle Push Notification message on your device

Page 17: NativeScript + Push Notifications

DemoRegistering with GCM

Page 18: NativeScript + Push Notifications

Telerik BackendThink of it as an App Server

Page 19: NativeScript + Push Notifications

Push in Telerik Backend• Effortless Integration with

iOS/WP/Android

• Isolates Platform Differences• Different notification servers• Different devices• Different OS Versions

• Powerful Targeting

• Easy device integration• Hybrid or Native

Page 20: NativeScript + Push Notifications

DemoTelerik Backend Push Settings

Page 21: NativeScript + Push Notifications

Push with NativeScript

Page 22: NativeScript + Push Notifications

Process

• Create a NativeScript App

• Include NativeScript Push Plugin

• Register the device with your App Server

• Listen for Push Notification callback

• Handle Push Notification

Page 23: NativeScript + Push Notifications

DemoNativeScript + Push Notification

Page 24: NativeScript + Push Notifications

By

Native X-Platform Mobile with JS

NativeScript Blog | @NativeScript

Go build your dream app!