Mobile App Development NativeScript e Angular 2+ Kaleidoscope - - PowerPoint PPT Presentation

▶
mobile app development
SMART_READER_LITE
LIVE PREVIEW

Mobile App Development NativeScript e Angular 2+ Kaleidoscope - - PowerPoint PPT Presentation

Oct 15, 2022 187 likes •558 views

Mobile App Development NativeScript e Angular 2+ Kaleidoscope Kaleidoscope filippo Filippo Matteo Riggio CTO @Kaleidoscope Sviluppatore Full-Stack e Mobile Kaleidoscope Scenario Kaleidoscope Scenario Soluzioni cross - WebView-ed

slide-1
SLIDE 1

Mobile App Development


NativeScript e Angular 2+ Kaleidoscope
slide-2
SLIDE 2

filippo

Kaleidoscope Filippo Matteo Riggio CTO @Kaleidoscope Sviluppatore Full-Stack e Mobile Kaleidoscope
slide-3
SLIDE 3 Kaleidoscope

Scenario

slide-4
SLIDE 4 Kaleidoscope WebView-ed Swift - Objective C
 Java - Kotlin React Native
 NativeScript
 Flutter (new!)
 Xamarin 
 AppCelerator
 trigger.io Ionic Framework
 Famous7
 Mobile Angular UI
 Onsen UI
 Kendo UI
 Sencha Touch
 jQuery Mobile
 Intel XDK Scenario Nativo Soluzioni cross - from web to native
slide-5
SLIDE 5
slide-6
SLIDE 6

Come scegliere?

Kaleidoscope
slide-7
SLIDE 7

Time Budget Skills

slide-8
SLIDE 8 Nativo

+ +

Kaleidoscope
slide-9
SLIDE 9 Soluzioni WebView-ed / Cross Kaleidoscope
slide-10
SLIDE 10 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. Now also Vue.js is supported! Kaleidoscope NativeScript
slide-11
SLIDE 11 Kaleidoscope NativeScript structure
slide-12
SLIDE 12 Kaleidoscope

NativeScript è davvero native!

slide-13
SLIDE 13 Kaleidoscope var time = new android.text.format.Time(); // Oggetto Time in 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() NativeScript è davvero native!
slide-14
SLIDE 14
slide-15
SLIDE 15

Gotta catch em all!

Kaleidoscope
slide-16
SLIDE 16 Kaleidoscope npm install -g nativescript
 
 tns --version Installazione
slide-17
SLIDE 17 tns create pokeproject --ng --appid it.kaleidoscope.pokeproject
 
 tns platform add ios
 tns platform add android Creare un nuovo progetto Kaleidoscope
slide-18
SLIDE 18 /** ---- app.module.ts ---- **/
 
 // Import the library
 import { NativeScriptHttpModule } from "nativescript-angular/http";
 
 // Inject the module
 @NgModule({
 [...]
 imports: [NativeScriptModule, NativeScriptHttpModule]
 }) Data, data, data! Kaleidoscope
slide-19
SLIDE 19 /** ---- 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>) { ... }
 } App logic Kaleidoscope
slide-20
SLIDE 20 /** ---- 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);
 });
 }
 } Gotta catch em all! Kaleidoscope
slide-21
SLIDE 21 /** ---- app.component.html ---- **/
 
 <ActionBar title="PokeProject"></ActionBar>
 
 <StackLayout>
 </StackLayout> User interface Docs: https://docs.nativescript.org/ui/basics Kaleidoscope
slide-22
SLIDE 22 /** ---- app.component.html ---- **/
 
 <GridLayout rows="auto" columns="auto, *, auto">
 
 </GridLayout> User interface - grid layout Docs: https://docs.nativescript.org/cookbook/ui/layouts/grid-layout Kaleidoscope
slide-23
SLIDE 23 /** ---- 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> User interface - list view Kaleidoscope
slide-24
SLIDE 24 /** ---- app.css ---- **/
 .pokemon-number {
 font-weight: bold;
 }
 .pokemon-name {
 text-transform: capitalize;
 }
 .pokemon-image {
 animation-name: pokemon-image;
 animation-duration: 1s;
 animation-delay: 1s;

  • pacity: 0;

}
 @keyframes pokemon-image {
 from { opacity: 0; transform: rotate(0deg); }
 to { opacity: 1; transform: rotate(360deg); }
 } A bit of style! Kaleidoscope
slide-25
SLIDE 25 /** ---- 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);
 });
 } Aggiungere un event listener Kaleidoscope
slide-26
SLIDE 26 /** ---- 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(", "),

  • kButtonText: "OK"

});
 } Native Dialogs Kaleidoscope
slide-27
SLIDE 27 tns plugin add nativescript-couchbase /// <reference path="./node_modules/nativescript-couchbase/couchbase.d.ts" />
 Native Plugins Kaleidoscope
slide-28
SLIDE 28 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);
 }); Camera quick example Kaleidoscope
slide-29
SLIDE 29 /** ---- 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) { [...] }
 } Couchbase DB provider Kaleidoscope
slide-30
SLIDE 30 /** ---- database.ts ---- **/
 
 [...]
 public constructor() {
 this.db = new Couchbase("db");
 this.db.createView("pokemon", "1", (document, emitter) => {
 emitter.emit(document._id, document);
 });
 }
 [...] NoSQL MapReduce View Kaleidoscope
slide-31
SLIDE 31 /** ---- 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]);
 }
 }
 } Caching dei dati Kaleidoscope
slide-32
SLIDE 32 // 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;
 } Accesso alle Api Native della UI Kaleidoscope
slide-33
SLIDE 33 tns prepare [ios|android] tns build [ios|android] tns deploy [ios|android]
 
 tns emulator [ios|android] 
 tns run [ios|android] Comandi utili Kaleidoscope
slide-34
SLIDE 34 References Documentazione di NativeScript http://docs.nativescript.org Lista dei plugins (certificati da Telerik) http://plugins.nativescript.org 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 Kaleidoscope
slide-35
SLIDE 35

Questions

Kaleidoscope
slide-36
SLIDE 36 Kaleidoscope

Thank you

Filippo Matteo Riggio CTO @kaleidoscope @FMRiggio