AWESOME NATIVE APPS WITH

NATIVESCRIPT AND ANGULAR!

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 SENIOR SOFTWARE ENGINEER NATIONALE-NEDERLANDEN FREELANCE WEB AND APP DEVELOPER DOUBLE-R WEBDEVELOPMENT CURATOR NATIVESCRIPT.NL TELERIK DEVELOPER EXPERT FOR NATIVESCRIPT ROWDY RABOUW

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT OPEN SOURCE FRAMEWORK FOR BUILDING TRULY NATIVE MOBILE APPS WITH JAVASCRIPT AND NATIVE CODE IF YOU WANT TOGETHER WITH MARKUP (XML/HTML) AND CSS CROSS PLATFORM : ONE CODEBASE FOR IOS AND ANDROID

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NOT PHONEGAP OR IONIC • NO DOM TO MANIPULATE • NOT HTML ELEMENTS STYLED LIKE NATIVE COMPONENTS

• REAL NATIVE COMPONENTS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NOT REACT NATIVE • NO WRITING OBJECTIVEC, SWIFT OR JAVA • {N} JAVASCRIPT HAS 100% ACCESS TO NATIVE APIS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NOT XAMARIN • NO CROSS COMPILING • 100% ACCESS TO NATIVE APIS WITHOUT WRITING BINDINGS • NO .NET OR C#

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 JAVASCRIPT

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 ANGULAR 2 • OPINIONATED JAVASCRIPT FRAMEWORK

• OBJECT ORIENTED
• CLASSES • TYPESCRIPT • FULL-FEATURED ROUTING

• DEPENDENCY INJECTION

• DATA BINDING • DOCUMENTATION • COMMUNITY

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 HOW DOES NATIVESCRIPT WORK? APPLICATION CODE NATIVESCRIPT MODULES NATIVESCRIPT RUNTIME ANDROID IOS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT HISTORY JUNE 2014: NATIVESCRIPT IS ANNOUNCED BY TELERIK MAY 2015: VERSION 1.0 LAUNCHED MAY 2016: VERSION 2.0 LAUNCHED (TIGHT ANGULAR 2 INTEGRATION ) MAY 2017: VERSION 3.0 LAUNCHED DECEMBER 2014: TELERIK IS ACQUIRED BY PROGRESS SOFTWARE

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NPM

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NODE PACKAGE MANAGER LOTS OF PREBUILT CODE OVER 530.000 NPM PACKAGES ANDROID ARSENAL COCOAPODS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 HOW TO START? INSTALL NODE.JS INSTALL IOS AND ANDROID REQUIREMENTS (SCRIPT)

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https:// www.nativescript.org/setup/win'))"

ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

npm install -g nativescript INSTALL N ATIVESCRIPT CLI tns doctor VERIFY THE SETUP

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT CLI

tns create HelloWorld --ng CREATING APPS

cd HelloWorld

tns run ios tns run android RUNNING APPS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 LAYOUTS & NATIVE ELEMENTS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 MARKUP < ActionBar

title

"Mobilization7"

</ ActionBar

< StackLayout

< Label

text

"Hello Ł ÓD Ź "

</ Label

</ StackLayout

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 CSS Actionbar {

background-color : yellow ; } Stacklayout {

padding : 40 ;

text-align : center ; } Label {

font-size : 20 ;

color : red ; }

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 STACKLAYOUT < StackLayout

orientation

"horizontal"

< Label

text

"1"

</ Label

< Label

text

"2"

</ Label

< Label

text

"3"

</ Label

< Label

text

"4"

</ Label

</ StackLayout

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 ABSOLUTELAYOUT < AbsoluteLayout

< Label

left

"40"

top

"30"

</ Label

< Label

left

"70"

top

"80"

</ Label

</ AbsoluteLayout

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 DOCKLAYOUT < DockLayout

stretchLastChild

"true"

< Label

dock

"top"

</ Label

< Label

dock

"bottom"

</ Label

< Label

dock

"right"

</ Label

< Label

dock

"left"

</ Label

</ DockLayout

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 GRIDLAYOUT < GridLayou t

columns

"100, auto, *"

rows

"100, auto, *"

< Label

text

"1"

row

"0"

col

"0"

</ Label

< Label

text

"2"

row

"0"

col

"1"

colSpan

"2"

</ Label

< Label

text

"3"

row

"1"

col

"0"

rowSpan

"2"

</ Label

< Label

text

"4"

row

"1"

col

"1"

</ Label

< Label

text

"5"

row

"1"

col

"2"

</ Label

< Label

text

"6"

row

"2"

col

"1"

</ Label

< Label

text

"7"

row

"2"

col

"2"

</ Label

</ GridLayout

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 WRAPLAYOUT < WrapLayout

orientation

"vertical"

< Label

text

"1"

</ Label

< Label

text

"2"

</ Label

< Label

text

"3"

</ Label

< Label

text

"4"

</ Label

</ WrapLayout

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 FLEXBOXLAYOUT < FlexboxLayout

flexDirection

"row-reverse"

< Label

text

"1"

flexGrow

"1"

</ Label

< Label

text

"2"

flexGrow

"2"

</ Label

< Label

text

"3"

flexGrow

"3"

</ Label

< Label

text

"4"

flexGrow

"4"

</ Label

< Label

text

"5"

flexGrow

"5"

</ Label

< Label

text

"6"

flexGrow

"6"

</ Label

</ FlexboxLayout

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 LIVE CODING ! LAYOUTS & NATIVE ELEMENTS & NATIVE CODE

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 MULTILINGUAL

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NGX-TRANSLATE IS AN INTERNATIONALIZATION LIBRARY FOR ANGULAR 2+

DEFINE TRANSLATIONS FOR YOUR CONTENT IN DIFFERENT LANGUAGES

AND SWITCH BETWEEN THEM EASILY MULTILINGUAL

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 MULTILINGUAL {

"HOME" : {

"TITLE" : "Mobilization7" ,

"TAGLINE" : "Whoever wins... we win!"

},

"SLIDERS" : {

"TITLE" : "Sliders" ,

"HEADER" : "Default Slider" ,

"HEADER_CUSTOM" : "Custom iOS Slider"

},

"VIDEO" : {

"TITLE" : "Video"

},

"SOUNDBOARD" : {

"TITLE" : "Soundboard"

}

}

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 MULTILINGUAL < StackLayout

< Label [ text ]= "'HOME.TAGLINE' | translate"

</ Label

</ StackLayout

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 LIVE CODING ! MULTILINGUAL

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT VIDEO PLAYER PLUGINS • ANDROID: MEDIAPLAYER • IOS: AVPLAYER < VideoPlayer

src

"[source]"

autoplay

"true"

height

"300"

/> TNS PLUGIN ADD NATIVESCRIPT-VIDEOPLAYER

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 DEMO " NATIVESCRIPT VIDEO PLAYER

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT TEXT TO SPEECH PLUGINS • ANDROID: TEXTTOSPEECH

• IOS: AVSPEECHSYNTHESIZER let

TTS

new

TNSTextToSpeech ();

let

speakOptions : SpeakOptions = {

text:

'Hello world!' ,

speakRate:

0.5 , // optional - default is 1.0

pitch:

1.0 , // optional - default is 1.0

volume:

1.0 , // optional - default is 1.0

locale:

"en-GB" ,
// optional - default is system locale,

}

TTS . speak ( speakOptions ); TNS PLUGIN ADD NATIVESCRIPT-TEXTTOSPEECH

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 DEMO

NATIVESCRIPT TEXT TO SPEECH

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT AUDIO PLUGINS • ANDROID: MEDIAPLAYER / MEDIARECORDER

• IOS: AVAUDIOPLAYER / AVAUDIORECORDER this . _player

new

TNSPlayer ();

this . _player . initFromFile ({

audioFile:

“[source]" ,

loop:

false

});

this . _player . play (); TNS PLUGIN ADD NATIVESCRIPT-AUDIO

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 DEMO $ NATIVESCRIPT AUDIO

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT FINGERPRINT AUTHENTICATION PLUGINS doVerifyFingerprint (): void {

this . fingerprintAuth

.

verifyFingerprint ({

message:

"Scan your finger"

// optional

})

.

then (

  ()

=> { alert ({ title:

"Fingerprint / passcode OK" }) },

  ()

=> { alert ({ title:

"Fingerprint NOT OK / canceled" }) }

);

} • ALSO WORKS WITH FACE ID ON IPHONE X TNS PLUGIN ADD NATIVESCRIPT-FINGERPRINT-AUTH

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 DEMO % NATIVESCRIPT FINGERPRINT AUTHENTICATION

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT SPEECH RECOGNITION PLUGINS • ANDROID: SPEECHRECOGNIZER • IOS: SFSPEECHRECOGNIZER this . speechRecognition

. startListening ({

locale:

"en-US" ,

returnPartialResults:

true ,

onResult: ( transcription : SpeechRecognitionTranscription ) => {

this . zone . run (() => ( this . recognizedText

transcription . text ));

}

}) TNS PLUGIN ADD NATIVESCRIPT-SPEECH-RECOGNITION

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 DEMO & NATIVESCRIPT SPEECH RECOGNITION

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 ALIEN ³

  • MURPHY IN THE YEAR 7510 IF GOD'S A COMING, HE OUGHTA MAKE IT BY THEN MAYBE HE'LL LOOK AROUND HIMSELF AND SAY GUESS IT'S TIME FOR THE JUDGEMENT DAY ZAGER & EVANS IN THE YEAR 2525

(1969)

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT BLUETOOTH LOW ENERGY PLUGINS TNS PLUGIN ADD NATIVESCRIPT-MIP-BLE

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 DEMO ' NATIVESCRIPT BLUETOOTH LOW ENERGY

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 RESOURCES

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 FREE NATIVESCRIPT BOOK

450 PAGES, 17 CHAPTERS, AND TONS OF CODE SAMPLES RESOURCES WRITTEN BY NATIVESCRIPT EXPERTS MIKE BRANSTEIN AND NICK BRANSTEIN

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT.NL

RESOURCES COURSES, TOOLS AND TIPS TO HELP YOU CODE AWESOME APPS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT MARKETPLACE

RESOURCES HIGH QUALITY PLUGINS, TEMPLATES AND TOOLS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT AIR

RESOURCES • IMPROVING PERFORMANCE OF A NATIVESCRIPT APP WITH STANIMIRA VLAEVA

• LAYOUTING A NATIVESCRIPT APP WITH BRAD MARTIN

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT ANGULAR BOOK

200 PAGES RESOURCES WRITTEN BY NATIVESCRIPT EXPERTS NATHAN WALKER AND NATHANAEL ANDERSON

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT PLAYGROUND

RESOURCES QUICKLY AND EASILY TEST YOUR NATIVESCRIPT CODE

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT THEME BUILDER

RESOURCES LOAD AND EDIT CUSTOM COLOR SCHEMES FOR NATIVESCRIPT

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT SIDEKICK

RESOURCES RICH STARTER TEMPLATES, VERIFIED PLUGINS, CLOUD BUILDS, AND DEBUGGING

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT DOCS

RESOURCES NATIVESCRIPT CORE NATIVESCRIPT WITH ANGULAR API REFERENCE NATIVESCRIPT SIDEKICK NATIVESCRIPT FORUM NATIVESCRIPT SLACK CHANNEL VISUAL STUDIO CODE PLUGIN

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 STANDARDS • ENTRY LEVEL 15” MACBOOK PRO (INTEL I7 PROCESSOR AND 16GB RAM) @ROWDYRABOUW

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 STANDARDS • ENTRY LEVEL 15” MACBOOK PRO (INTEL I7 PROCESSOR AND 16GB RAM) @ROWDYRABOUW DZI Ę KUJ Ę CI BARDZO

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-BARCODESCANNER

EDDY VERBRUGGEN (BULK)SCAN QR OR BARCODES PLUGINS NATIVESCRIPT- TOAST TOBIAS HENNIG

CONTRIBUTIONS BY EDDY VERBRUGGEN FEEDBACK IN A SMALL POPUP

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-APPVERSION

EDDY VERBRUGGEN RETRIEVE YOUR APP'S PACKAGE ID AND CURRENT VERSION

PLUGINS

@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!

MOBILIZATION 7 NATIVESCRIPT-EMAIL

EDDY VERBRUGGEN CREATING DRAFT E-MAILS

PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-PLUGIN-FIREBASE

EDDY VERBRUGGEN ANALYTICS PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-TELERIK-UI

PROGRESS LISTVIEW AND SIDEDRAWER PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-IQKEYBOARDMANAGER

TJ VANTOLL

CONTRIBUTIONS BY EDDY VERBRUGGEN WRAPPER FOR THE POPULAR IQKEYBOARDMANAGER IOS FRAMEWORK PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 CRYPTO-JS

EVAN VOSBERG

CRYPTOGRAPHY STANDARDS PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 LODASH

LODASH

TAKING THE HASSLE OUT OF WORKING WITH ARRAYS, OBJECTS, STRINGS, ETC PLUGINS