Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile App Development: Primi passi con NativeScript e Angular 2

291 views

Published on

Una breve panoramica dello strumento NativeScript e di come utilizzarlo per lo sviluppo di app mobile.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Mobile App Development: Primi passi con NativeScript e Angular 2

  1. 1. Mobile App Development: Primi passi con NativeScript e Angular 2
  2. 2. Who Am I ? Filippo Matteo Riggio Full Stack Dev CTO @ Kaleidoscope @FMRiggio
  3. 3. Scenario Nativo Swift / Java Cordova App che si appoggiano ad una web-view (ionic, famous7, ecc.) Soluzioni cross React Native NativeScript Xamarin AppCelerator
  4. 4. Altri strumenti disponibili
  5. 5. Come scegliere?
  6. 6. Grafico innovativo superca**uto. GHE SCHEI GHE TEMPO NO GHE SCHEI NO GHE TEMPO
  7. 7. 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.
  8. 8. 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();
  9. 9. Gotta catch em all! L'esempio userà le API prese da pokeapi.co
  10. 10. Installazione npm install -g nativescript tns --version
  11. 11. Creare un nuovo progetto tns create pokeproject --ng --appid it.kaleidoscope.pokeproject tns platform add ios tns platform add android
  12. 12. Data, data, data! /** ---- app.module.ts ---- **/ // Import the library import { NativeScriptHttpModule } from "nativescript-angular/http"; // Inject the module @NgModule({ [...] imports: [NativeScriptModule, NativeScriptHttpModule] })
  13. 13. 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>) { ... } }
  14. 14. Gotta catch em all! /** ---- app.component.ts ---- **/ // Imports import { Http } from "@angular/http"; import "rxjs/Rx"; export class AppComponent implements OnInit { 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); }); } }
  15. 15. User Interface /** ---- app.component.html ---- **/ <ActionBar title="PokeProject"></ActionBar> <StackLayout> </StackLayout> Docs: https://docs.nativescript.org/ui/basics
  16. 16. User Interface - Grid Layout /** ---- app.component.html ---- **/ <GridLayout rows="auto" columns="auto, *, auto"> </GridLayout> Docs: https://docs.nativescript.org/cookbook/ui/layouts/grid-layout
  17. 17. User Interface - ListView /** ---- app.component.html ---- **/ <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>
  18. 18. 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); } }
  19. 19. Aggiungere un event listener. /** ---- app.component.html ---- **/ <GridLayout [...] (tap)="showInformation(index+1)"> [...] </GridLayout> /** ---- app.component.ts ---- **/ public showInformation(index: number) { this.http.get("https://pokeapi.co/api/v2/pokemon/" + index) .map(result => result.json()) .flatMap(result => result.types) .map(result => (<any> result).type.name) .toArray() .subscribe(result => { this.showDialog(result); }, error => { console.error(error); }); }
  20. 20. Native Dialogs /** ---- app.component.ts ---- **/ // 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" }); }
  21. 21. Native Plugins tns plugin add nativescript-couchbase /// <reference path="./node_modules/nativescript-couchbase/couchbase.d.ts" /> Plugins disponibili: http://plugins.nativescript.org/
  22. 22. 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); });
  23. 23. 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; } } /** ---- app.component.ts ---- **/ @Component({ selector: "my-app", templateUrl: "app.component.html", providers: [Database] }) export class AppComponent implements OnInit { public constructor(private http: Http, private database: Database) { [...] } }
  24. 24. NoSQL MapReduce View /** ---- database.ts ---- **/ [...] public constructor() { this.db = new Couchbase("db"); this.db.createView("pokemon", "1", (document, emitter) => { emitter.emit(document._id, document); }); } [...]
  25. 25. Caching dei dati /** ---- app.component.ts ---- **/ public ngOnInit() { let rows = this.database.getDatabase().executeQuery("pokemon"); if (rows.length == 0) { 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); }); } else { for (let i = 0; i < rows.length; i++) { this.pokemon.push(rows[i]); } } }
  26. 26. 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; }
  27. 27. Comandi utili tns prepare [ios|android] tns build [ios|android] tns deploy [ios|android] tns emulator [ios|android] tns livesync [ios|android] --watch
  28. 28. 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
  29. 29. Domande?
  30. 30. Bonus pack!
  31. 31. factotum A Laravel-based CMS, from web artisans to web artisans. We love KISSing the DRY PIE. https://factotum.kaleidoscope.it
  32. 32. 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.
  33. 33. 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.
  34. 34. Main features Media You can manage all the media that you need. Multilanguage Yes, ready for supporting abroad users. JSON APIs (Soon)
  35. 35. ...ora è davvero finito. Grazie! :)

×