Mobile App Development: Primi passi con NativeScript e Angular 2

Mobile App
Development:
Primi passi con
NativeScript e Angular 2

Who Am I ?
Filippo Matteo Riggio
Full Stack Dev
CTO @ Kaleidoscope
@FMRiggio

Scenario
Nativo
Swift / Java
Cordova
App che si appoggiano
ad una web-view (ionic,
famous7, ecc.)
Soluzioni cross
React Native
NativeScript
Xamarin
AppCelerator

Grafico innovativo superca**uto.
GHE SCHEI
GHE TEMPO
NO GHE SCHEI
NO GHE TEMPO

NativeScript
Build amazing iOS and Android apps
with technology you already know
Open source framework for building truly
native mobile apps with Angular, TypeScript
or JavaScript.

NativeScript è davvero native!
var time = new android.text.format.Time(); // ⇐ questo è Java
time.set( 1, 0, 2015 );
console.log( time.format( "%D" ) ); // 01/01/2015
var alert = new UIAlertView(); // ⇐ Questo è un riferimento alla class Obj-C UIAlertView
alert.message = "Hello world!";
alert.addButtonWithTitle( "OK" );
alert.show();

Gotta catch em all!
L'esempio userà le API prese da pokeapi.co

Installazione
npm install -g nativescript
tns --version

Creare un nuovo progetto
tns create pokeproject --ng --appid it.kaleidoscope.pokeproject
tns platform add ios
tns platform add android

Data, data, data!
/** ---- app.module.ts ---- **/
// Import the library
import { NativeScriptHttpModule } from "nativescript-angular/http";
// Inject the module
@NgModule({
[...]
imports: [NativeScriptModule, NativeScriptHttpModule]
})

App Logic
/** ---- app.component.ts ---- **/
// Imports
import { Component, OnInit } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {
public constructor() { ... }
public ngOnInit() { ... }
public showInformation(index: number) { ... }
public showDialog(data: Array<string>) { ... }
}

Gotta catch em all!
// Imports
import { Http } from "@angular/http";
import "rxjs/Rx";
public pokemon: Array<any>;
public constructor(private http: Http) { ... }
public ngOnInit() {
this.http.get("https://pokeapi.co/api/v2/pokemon?limit=151")
.map(result => result.json())
.flatMap(result => result.results)
.subscribe(result => {
this.database.getDatabase().createDocument(result);
this.pokemon.push(result);
}, error => {
console.error(error);
});
}
}

User Interface
/** ---- app.component.html ---- **/
<ActionBar title="PokeProject"></ActionBar>
<StackLayout>
</StackLayout>
Docs: https://docs.nativescript.org/ui/basics

User Interface - Grid Layout
<GridLayout rows="auto" columns="auto, *, auto">
</GridLayout>
Docs: https://docs.nativescript.org/cookbook/ui/layouts/grid-layout

User Interface - ListView
<ListView [items]="pokemon">
<ng-template let-monster="item" let-index="index">
<GridLayout/>
</ng-template>
</ListView>
[...]
<GridLayout rows="auto" columns="auto, *, auto" margin="15">
<Label row="0" col="0" class="pokemon-number" text="{{ index + 1 }}." marginRight="10"></Label>
<Label row="0" col="1" class="pokemon-name" [text]="monster.name" ></Label>
<Image row="0" col="2" class="pokemon-image" src="~/images/{{index + 1}}.png" ></Image>
</GridLayout>

A bit of style!
/** ---- app.css ---- **/
.pokemon-number {
font-weight: bold;
}
.pokemon-name {
text-transform: capitalize;
}
.pokemon-image {
animation-name: pokemon-image;
animation-duration: 1s;
animation-delay: 1s;
opacity: 0;
}
@keyframes pokemon-image {
from { opacity: 0; transform: rotate(0deg); }
to { opacity: 1; transform: rotate(360deg); }
}

Aggiungere un event listener.
<GridLayout [...] (tap)="showInformation(index+1)">
[...]
</GridLayout>
public showInformation(index: number) {
this.http.get("https://pokeapi.co/api/v2/pokemon/" + index)
.flatMap(result => result.types)
.map(result => (<any> result).type.name)
.toArray()
this.showDialog(result);
}, error => {
});
}

Native Dialogs
// Import the library
// https://docs.nativescript.org/cookbook/ui/dialogs
import dialogs = require("ui/dialogs");
public showDialog(data: Array<string>) {
dialogs.alert({
title: "Information",
message: "Questo pokemon è del tipo " + data.join(", "),
okButtonText: "OK"
});
}

Native Plugins
tns plugin add nativescript-couchbase
/// <reference path="./node_modules/nativescript-couchbase/couchbase.d.ts" />
Plugins disponibili: http://plugins.nativescript.org/

Camera quick example
import * as camera from "nativescript-camera";
import { Image } from "ui/image";
var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options)
.then((imageAsset) => {
let image = new Image();
image.src = imageAsset;
console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio);
console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS");
}).catch((err) => {
console.log("Error -> " + err.message);
});

Couchbase DB provider
/** ---- database.ts ---- **/
import { Couchbase } from 'nativescript-couchbase';
export class Database {
private db: any;
public constructor() {
this.db = new Couchbase("db");
}
public getDatabase() {
return this.db;
}
}
@Component({
selector: "my-app",
templateUrl: "app.component.html",
providers: [Database]
})
public constructor(private http: Http, private database: Database) { [...] }
}

NoSQL MapReduce View
/** ---- database.ts ---- **/
[...]
public constructor() {
this.db = new Couchbase("db");
this.db.createView("pokemon", "1", (document, emitter) => {
emitter.emit(document._id, document);
});
}
[...]

Caching dei dati
public ngOnInit() {
let rows = this.database.getDatabase().executeQuery("pokemon");
if (rows.length == 0) {
this.http.get("https://pokeapi.co/api/v2/pokemon?limit=151")
.flatMap(result => result.results)
this.database.getDatabase().createDocument(result);
this.pokemon.push(result);
}, error => {
});
} else {
for (let i = 0; i < rows.length; i++) {
this.pokemon.push(rows[i]);
}
}
}

Accesso alle Api Native della UI
// NativeScript XML tag
<ActionBar title="Sign up"></ActionBar>
// Controller Obj-c (mappato in node_modules/tns-core-modules/ui/frame/frame.ios.js)
UINavigationController
// Componente UI Obj-c (mappato in node_modules/tns-core-modules/ui/action-bar/action-bar.ios.js)
UINavigationBar
// Modificare lo stile della ActionBar per iOS
if (page.ios) {
var navigationBar = frameModule.topmost().ios.controller.navigationBar;
navigationBar.barStyle = UIBarStyle.UIBarStyleBlack;
}

References
Documentazione di NativeScript
http://docs.nativescript.org
Lista dei plugins (certificati da Telerik)
http://plugins.nativescript.org
Plugin CouchBase
https://github.com/couchbaselabs/nativescript-couchbase
How NativeScript Works
http://developer.telerik.com/featured/nativescript-works/
Performances (web-view)
https://github.com/mlynch/pgday-eu-2017-perf/blob/master/web-perf-2017.pdf

factotum
A Laravel-based CMS,
from web artisans to web artisans.
We love KISSing the DRY PIE.
https://factotum.kaleidoscope.it

Main focus concepts
Laravel-based
No words needed on
why choosing a top
level framework like
Laravel
Blazing fast
Who loves slow CMS?
Soon some
benchmarks, but you
will see on your own if
you try it!
Flexible
Because the mind of
our clients is like a child
in a luna parks, junkie
by tons of sugar.

Main features
Users
You can have many
users, many roles and
capabilities as you
want.
Content Types
You can define many
content types as you
want. Do you need
news or an event?
Custom Fields
Every content type can
have many different
fields. Yes, because not
all the contents are the
same.

Main features
Media
You can manage all the
media that you need.
Multilanguage
Yes, ready for
supporting abroad
users.
JSON APIs
(Soon)

...ora è davvero finito.
Grazie! :)

Mobile App Development: Primi passi con NativeScript e Angular 2

More Related Content

What's hot (19)

Similar to Mobile App Development: Primi passi con NativeScript e Angular 2 (20)

Recently uploaded (20)

Mobile App Development: Primi passi con NativeScript e Angular 2

Editor's Notes