Awesome native apps with NativeScript and Angular!

Awesome native apps with NativeScript and Angular!

Web developer mood coaster

web developer in natural habitat

web developer • HTML • CSS • JavaScript • Sass • Node Package Manager Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 7/145

web developer on native iOS / Android

web developer & native • App stores • Provisioning files • Java or Kotlin for Android • Objective-C or Swift for iOS Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 10/145

web developer with nativescript

web developer & nativescript • App stores • Provisioning files • NativeScript • HTML • CSS • JavaScript • Sass • Node Package Manager Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 13/145

web developer ❤ nativescript

who?

Rowdy Rabouw @rowdyrabouw Gouda, The Netherlands I ❤ superhero movies Freelance web and app developer Lead developer Nationale-Nederlanden Pension App Progress Developer Expert for Nativescript Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 17/145

Mobile App framework decision guide

Mobile App framework decision guide Do you want/need a native User Interface and native performance? No Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw Yes 20/145

Mobile App framework decision guide Do you want/need a native User Interface and native performance? No Yes Phonegap / Cordova with Ionic • WebView • DOM to manipulate • HTML styled like native Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 21/145

Mobile App framework decision guide Do you want/need a native User Interface and native performance? No Phonegap / Cordova with Ionic Yes continue • WebView • DOM to manipulate • HTML styled like native Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 22/145

Mobile App framework decision guide Do you have too much money and time? Yes Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw No 23/145

Mobile App framework decision guide Do you have too much money and time? Yes No Native iOS and Android • Twice the work Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 24/145

Mobile App framework decision guide Do you have too much money and time? Yes Native iOS and Android No continue • Twice the work Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 25/145

Mobile App framework decision guide Do you potentially want/need to share code with the web? Or do you want/need to use web technologies? No Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw Yes 26/145

Mobile App framework decision guide Do you potentially want/need to share code with the web? Or do you want/need to use web technologies? No Yes Xamarin • .NET or C# • Cross compiling • Bindings to access native APIs Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 27/145

Mobile App framework decision guide Do you potentially want/need to share code with the web? Or do you want/need to use web technologies? No Yes Flutter • Dart • Cross compiling • Beta Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 28/145

Mobile App framework decision guide Do you potentially want/need to share code with the web? Or do you want/need to use web technologies? No Flutter Yes continue • Dart • Cross compiling • Beta Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 29/145

Mobile App framework decision guide Do you want to use modern JavaScript? No Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw Yes 30/145

Mobile App framework decision guide Do you want to use modern JavaScript? No Yes Titanium • No ES6+/ES2015+ support • Can't use NPM • Old MVC framework (Alloy) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 31/145

Mobile App framework decision guide Do you want to use modern JavaScript? No Titanium Yes continue • No ES6+/ES2015+ support • Can't use NPM • Old MVC framework (Alloy) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 32/145

Mobile App framework decision guide Do you know and like React? Yes Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw No 33/145

Mobile App framework decision guide Do you know and like React? Yes No React Native • React • Native code to access APIs • Version 0.57 Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 34/145

Mobile App framework decision guide Do you know and like React? Yes React Native No continue • React • Native code to access APIs • Version 0.57 Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 35/145

NATIVESCRIPT

NATIVESCRIPT

What is NativeScript? • Open source framework for building truly native mobile apps • JavaScript, markup (XML/HTML) and CSS • Native code inside your JavaScript if you want and dare • Cross Platform: one codebase for iOS and Android • Backed by software company Progress • Android 4.2 or a later stable official release • iOS 7.0 or later stable official release Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 39/145

How to start?

docs.nativescript.org

nativescript.org/get-the-nativescript-book

nativescriptcommunity.slack.com

nativescript.org/nativescript-sidekick

play.nativescript.org

nativescripting.com

markup like on the web

Markup http://2xr.nl/markup https://docs.nativescript.org/ui/components <ActionBar title="Native elements"/> <StackLayout> <Button text="Button" tap="{{ onButtonTap }}"/> <Switch checked="false"/> <SegmentedBar items="{{ segmentedBarItems }}"/> <Progress value="0" maxValue="100"/> <Slider value="0" minValue="0" maxValue="100"/> <DatePicker year="2018" month="1" day="1" minDate="1970-01-01" maxDate="2100-12-31"/> </StackLayout> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 50/145

TextField https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField/> <TextField text=""/> <TextField hint="Enter your name"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 52/145

TextField: autocapitalization https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField autocapitalizationType="allCharacters"/> <TextField autocapitalizationType="sentences"/> <TextField autocapitalizationType="words"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 53/145

TextField: autocapitalization https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField autocapitalizationType="allCharacters"/> <TextField autocapitalizationType="sentences"/> <TextField autocapitalizationType="words"/> <TextField autocapitalizationType="none"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 54/145

TextField: autocorrect https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField autocorrect="true"/> <TextField autocorrect="false"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 55/145

TextField: keyboardType http://2xr.nl/keyboardType https://docs.nativescript.org/api-reference/modules/ui_enums.keyboardtype <TextField keyboardType="number"/> <TextField keyboardType="datetime"/> <TextField keyboardType="phone"/> <TextField keyboardType="email"/> <TextField keyboardType="url"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 56/145

TextField: more attributes https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField textAlignment=""/> <TextField visibility=""/> <TextField width=""/> <TextField maxLength=""/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 58/145

Layouts https://docs.nativescript.org/ui/layouts Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 59/145

Layouts https://docs.nativescript.org/ui/layouts Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 60/145

DockLayout https://docs.nativescript.org/ui/layouts <DockLayout height="100%" stretchLastChild="true"> <Label <Label <Label <Label text="1" text="2" text="3" text="4" dock="top"/> dock="bottom"/> dock="right"/> dock="left"/> </DockLayout> <!-1 + 2 have fixed height 3 has fixed width 4 will get all remaining space --> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 61/145

GridLayout https://docs.nativescript.org/ui/layouts <GridLayout rows="100, auto, *" columns="100, auto, *"> <Label text="1" row="0" <Label text="2" row="0" colSpan="2"/> <Label text="3" row="1" rowSpan="2"/> <Label text="4" row="1" <Label text="5" row="1" <Label text="6" row="2" <Label text="7" row="2" </GridLayout> col="0"> col="1" col="0" col="1"/> col="2"/> col="1"/> col="2"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 62/145

Cascading Style Sheets

Cascading Style Sheets https://docs.nativescript.org/ui/styling • a large subset of CSS properties is supported • device-independent pixels • application-wide, page-specific or inline • platform-specific possible • animations • SASS Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 65/145

{N} Core Themes https://docs.nativescript.org/ui/theme • ready to use color schemes • tailored for iOS and Android Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw

NativeScript Theme Builder https://www.nativescriptthemebuilder.com Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 67/145

TabView <TabView height="100%"> <StackLayout *tabItem="{title: 'Rocket Raccoon'}" class="full rocket"/> <StackLayout *tabItem="{title: 'Harley Quinn'}" class="full harley"/> <StackLayout *tabItem="{title: 'Hulk'}" class="full hulk"/> </TabView> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 68/145

TabView .full { background-size: cover; background-position: center; background-repeat: no-repeat; } .rocket { background-image: url("~/images/rocket-raccoon.jpg"); } .harley { background-image: url("~/images/harley-quinn.jpg"); } .hulk { background-image: url("~/images/hulk.jpg"); } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 69/145

4 Fantastic Choices

JavaScript

TypeScript

Vue.js

Angular

Angular • Opinionated JavaScript framework • Typescript • Full-featured routing • Dependency injection • Data binding • Seperate core team for Angular • nativescript-schematics for easy code sharing Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 77/145

Angular import { NgModule } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { Routes } from "@angular/router"; const routes: Routes = [ { path: "", redirectTo: "/start", pathMatch: "full" }, { path: "start", loadChildren: "./components/startseite/startseite.module#StartSeiteModule" }, { path: "super", loadChildren: "./components/superhelden/superhelden.module#SuperHeldenModule" } ]; @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule] }) export class AppRoutingModule {} Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 78/145

Angular import { NgModule } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { Routes } from "@angular/router"; const routes: Routes = [ { path: "", redirectTo: "/start", pathMatch: "full" }, { path: "start", loadChildren: "./components/startseite/startseite.module#StartSeiteModule" }, { path: "super", loadChildren: "./components/superhelden/superhelden.module#SuperHeldenModule" } ]; @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule] }) export class AppRoutingModule {} Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 79/145

Angular import { SprachDienst } from "./dienste/sprach.dienst"; export class StartSeiteComponent { constructor(private sprachDienst: SprachDienst) {} spracheAndern(sprache: string) { this.sprachDienst.SpracheEinstellen(sprache); } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 80/145

Angular one-way data binding <Label [text]="text"></Label> <Label text="{{text}}"></Label> text: string = "Hallo München!"; Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 81/145

Angular two-way data binding <TextField keyboardType="number" (focus)="OnInputFocus($event)" (blur)="OnInputBlur($event)" [maxLength]="maxLengthSalary" [(ngModel)]="salary"> </TextField> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 82/145

Angular two-way data binding: ! ! " <TextField keyboardType="number" (focus)="OnInputFocus($event)" (blur)="OnInputBlur($event)" [maxLength]="maxLengthSalary" [(ngModel)]="salary"> </TextField> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 83/145

Angular links <!-- Angular --> <a routerLink="/next">Next</a> <!-- NativeScript Angular --> <Button text="Next" [nsRouterLink]="['/next']"></Button> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 84/145

Angular checkbox / switch <!-- Angular --> <input type="checkbox"> <input type="checkbox" /> <!-- NativeScript Angular: no self-closing tags allowed --> <Switch></Switch> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 85/145

Bad Performance

Catwoman “ I want to thank Warner Bros. for casting me in this piece-of-sh*t, godawful movie. ” Halle Berry

Angular: Performance • Uglify • code minification • reduces names of local variables • Webpack • traverses your source tree via module imports • only include modules that are used Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 90/145

Angular: Performance • Ahead-of-Time compilation • pre-compiles application components and templates • Angular compiler not included in bundle • Lazy-Load modules • not all modules are needed at startup • pre-load in background Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 91/145

Native Code

{N} Angular directory structure app/components/slider/ slider.component.html slider.component.ts slider.component.css slider-routing.module.ts slider-module.ts Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 94/145

slider.component.html <ActionBar title="Slider"></ActionBar> <StackLayout> <Slider value="70"></Slider> </StackLayout> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 95/145

slider.component.ts import { Component } from "@angular/core"; @Component({ selector: "app-slider", moduleId: module.id, templateUrl: "slider.component.html", styleUrls: ["slider.component.css"] }) export class SliderComponent { constructor() {} } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 96/145

slider.component.css ActionBar { color: white; background-color: red; } StackLayout { padding: 50; } Slider { background-color: red; } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 97/145

Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 98/145

slider.component.html <ActionBar title="Slider"></ActionBar> <StackLayout> <Slider slider-icon value="70"></Slider> </StackLayout> • attribute directive • changes the appearance or behavior of an element Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 99/145

slider.directive.ts import { Directive, ElementRef } from "@angular/core"; import { isIOS } from "platform"; @Directive({ selector: "[slider-icon]" }) export class SliderIconDirective { constructor(private el: ElementRef) { if (isIOS) { let uiSlider = this.el.nativeElement.ios; uiSlider.setThumbImageForState( UIImage.imageNamed("image.png"), UIControlState.Normal); } } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 100/145

slider.directive.ts import { Directive, ElementRef } from "@angular/core"; import { isIOS } from "platform"; @Directive({ selector: "[slider-icon]" }) export class SliderIconDirective { constructor(private el: ElementRef) { if (isIOS) { let uiSlider = this.el.nativeElement.ios; uiSlider.setThumbImageForState( UIImage.imageNamed("image.png"), UIControlState.Normal); } } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 101/145

slider.directive.ts import { Directive, ElementRef } from "@angular/core"; import { isIOS } from "platform"; @Directive({ selector: "[slider-icon]" }) export class SliderIconDirective { constructor(private el: ElementRef) { if (isIOS) { let uiSlider = this.el.nativeElement.ios; uiSlider.setThumbImageForState( UIImage.imageNamed("image.png"), UIControlState.Normal); } } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 102/145

slider.module.ts import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptModule } from "nativescript-angular/nativescript.module"; import { SliderIconDirective } from "./slider.directive"; import { SliderRoutingModule } from "./slider-routing.module"; import { SliderComponent } from "./slider.component"; @NgModule({ imports: [NativeScriptModule, SliderRoutingModule], declarations: [SliderComponent, SliderIconDirective], schemas: [NO_ERRORS_SCHEMA] }) export class SliderModule {} Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 103/145

104/145

slider.component.html <StackLayout> <AbsoluteLayout> <StackLayout #background class="captain" top="0" left="0"></StackLayout> <FlexboxLayout class="flexcontainer" top="0" left="0"> <Slider slider-icon (valueChange)="onSliderChange($event)"></Slider> </FlexboxLayout> </AbsoluteLayout> </StackLayout> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 105/145

slider.component.css .captain { background-image: url("~/assets/images/captain-america.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%; width: 100%; opacity: 0; } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 106/145

slider.component.css .flexcontainer { justify-content: center; align-items: center; height: 100%; width: 100%; } Slider { width: 80%; background-color: #BC1A0F; } ActionBar { background-color: #FFFFFF; } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 107/145

slider.component.ts import import import import import { { { { { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; Page } from "ui/page"; Slider } from "ui/slider"; StackLayout } from "ui/layouts/stack-layout"; TNSPlayer } from "nativescript-audio"; @Component({ selector: "app-slider", moduleId: module.id, templateUrl: "slider.component.html", styleUrls: ["slider.component.css"] }) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 108/145

slider.component.ts export class SliderComponent implements OnInit { @ViewChild("background") background: ElementRef; private viewStack: StackLayout; private player: TNSPlayer; constructor(private page: Page) {} ngOnInit() { this.page.actionBarHidden = true; this.viewStack = this.background.nativeElement; this.player = new TNSPlayer(); this.player.initFromFile({ audioFile: "~/assets/audio/captain.mp3", loop: false }); } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 109/145

slider.component.ts onSliderValueChange(args) { let slider = <Slider>args.object; // opacity and volume range is 0 - 1 let sliderValue = slider.value / 100; this.viewStack.opacity = sliderValue; if (Math.round(slider.value) > 0) { this.player.play(); this.player.volume = sliderValue; } else { this.player.seekTo(0); this.player.pause(); } } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 110/145

Packages & Libraries

Node Package Manager • commonly known as npm • ready to use JavaScript modules • about 650.000 packages of free, reusable code Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 113/145

Android Arsenal • libraries for Android (Java / Kotlin) Cocoapods • libraries for iOS (Objective-C / Swift) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 114/145

Multilingual: ngx-translate

Multilingual: ngx-translate • Matthias Drescher: Lokalisierung in Angular (mit ngx-translate) • internationalization library for Angular 2+ • define translations in different languages • switch between them easily • no hardcoded text/labels, all in one place • start directly, even with one language Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 117/145

Multilingual: ngx-translate { "HOME": { "TITLE": "Hello WDC Munich!", "TEXT": "It's great to be here and introduce NativeScript to you.", "SLIDER": "Slider", "ENGLISH": "English", "FOREIGN": "German", "MIP": "WowWee MiP", "SPEECH_RECOGNITION": "Speech recognition!" } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 118/145

Multilingual: ngx-translate <ActionBar [title]="'HOME.TITLE' | translate"> </ActionBar> <Button [text]="'HOME.FOREIGN' | translate" (tap)="changeLanguage('de')"> </Button> [] = one way data binding in Angular | = display-value transformations Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 119/145

120/145

NativeScript Plugins

What are {N} plugins? When the NativeScript core modules do not provide the native device or platform capability that you need, you can use plugins. • usually for both iOS and Android • JavaScript interface to native platform code Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 123/145

Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 124/145

Nativescript plugins • nativescript-bluetooth • nativescript-accelerometer • nativescript-speech-recognition Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 125/145

Nativescript plugins • nativescript-texttospeech • nativescript-directions • nativescript-videoplayer Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 126/145

{N} Plugins (live) demo

Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 128/145

WowWee Mip Robot 129/145

nativescript-bluetooth import * as bluetooth from "nativescript-bluetooth"; bluetooth.startScanning({ seconds: 4, onDiscovered: peripheral => { if (peripheral.UUID == "CA9F644C-1920-4572-8833-1D137A6T2A05") { bluetooth.connect({ UUID: peripheral.UUID, onConnected: peripheral => { bluetooth.stopScanning(); // do stuff } }); } } }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 130/145

nativescript-accelerometer import { startAccelerometerUpdates } from "nativescript-accelerometer"; startAccelerometerUpdates(data => { // lean left (0 to -1) / right (0 to 1) let leftOrRight = data.x; // lean forward (0 to -1) / back (0 to 1) let forwardOrBack = data.y; // do stuff }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 131/145

Introduction 132/145

nativescript-speech-recognition import { SpeechRecognition, SpeechRecognitionTranscription } from "nativescript-speech-recognition"; private speechRecognition = new SpeechRecognition(); this.speechRecognition.available().then( (available: boolean) => console.log(available ? "YES!" : "NO"), (err: string) => console.log(err) ); this.speechRecognition.requestPermission().then((granted: boolean) => { console.log("Granted? " + granted); }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 133/145

nativescript-speech-recognition this.speechRecognition.startListening({ locale: "en-US", returnPartialResults: true, onResult: (transcription: SpeechRecognitionTranscription) => { console.log(User said: ${transcription.text}); } }); this.speechRecognition.stopListening().then(() => { // do something with the recognized text }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 134/145

nativescript-texttospeech import { TNSTextToSpeech, SpeakOptions } from "nativescript-texttospeech"; let textToSpeech = new TNSTextToSpeech(); let speakOptions: SpeakOptions = { text: "Hello world!", locale: "en-US", speakRate: 0.5, pitch: 0.8 }; textToSpeech.speak(speakOptions); . Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 135/145

Weather 136/145

Angular httpClient const apiUrl = "https://api.darksky.net/forecast/...../"; const city = { name: "Gouda", country: "The Netherlands", latitude: 52.0115205, longitude: 4.7104633 }; let params = city.latitude + "," + city.longitude; this.httpClient.get(apiUrl + params).subscribe(res => { // do something with the json data }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 137/145

Directions 138/145

nativescript-directions import { Directions } from "nativescript-directions"; let directions = new Directions(); directions.navigate({ // optional, default "current location" from: { lat: 48.1294915, lng: 11.5886514 }, // if an Array is passed, the last item is the destination, // the addresses in between are "waypoints" to: [{ address: "Frauenplatz 12, 80331 München, Germany", // Frauenkirche }, { address: "Marienplatz 1, 80331 München, Germany" }], ios: { preferGoogleMaps: true, allowGoogleMapsWeb: true } }) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 139/145

Movie trailer 140/145

nativescript-videoplayer <VideoPlayer src="video.mp4" controls="true" loop="true" autoplay="false"> </VideoPlayer> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 141/145

2xr.nl/wdc Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw

Danke schön Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw

Links Native elements playground: http://2xr.nl/markup keyboardType playground: http://2xr.nl/keyboardType TabView playground: http://2xr.nl/TabView Plugin demo app: https://github.com/rowdyrabouw/NativeScriptTalk/tree/WDC Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 145/145