mobile app development...kaleidoscope webview-ed swift - objective c java - kotlin react native...
TRANSCRIPT
![Page 1: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/1.jpg)
Mobile App DevelopmentNativeScript e Angular 2+
Kaleidoscope
![Page 2: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/2.jpg)
filippoKale
idos
cope
Filippo Matteo Riggio CTO @Kaleidoscope Sviluppatore Full-Stack e Mobile
Kaleidoscope
![Page 3: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/3.jpg)
Kaleidoscope
Scenario
![Page 4: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/4.jpg)
Kaleidoscope
WebView-ed
Swift - Objective CJava - Kotlin
React NativeNativeScriptFlutter (new!)Xamarin AppCeleratortrigger.io
Ionic FrameworkFamous7Mobile Angular UIOnsen UIKendo UISencha TouchjQuery MobileIntel XDK
Scenario
Nativo Soluzioni cross -
from web to native
![Page 5: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/5.jpg)
![Page 6: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/6.jpg)
Come scegliere?
Kaleidoscope
![Page 7: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/7.jpg)
Time Budget Skills
![Page 8: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/8.jpg)
Nativo
+ +
Kaleidoscope
![Page 9: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/9.jpg)
Soluzioni WebView-ed / Cross
Kaleidoscope
![Page 10: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/10.jpg)
Build amazing iOS and Android appswith 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
![Page 11: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/11.jpg)
Kaleidoscope
NativeScript structure
![Page 12: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/12.jpg)
Kaleidoscope
NativeScript è davvero native!
![Page 13: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/13.jpg)
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!
![Page 14: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/14.jpg)
![Page 15: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/15.jpg)
Gotta catch em all!
Kaleidoscope
![Page 16: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/16.jpg)
Kaleidoscope
npm install -g nativescript
tns --version
Installazione
![Page 17: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/17.jpg)
tns create pokeproject --ng --appid it.kaleidoscope.pokeproject
tns platform add ios
tns platform add android
Creare un nuovo progetto
Kaleidoscope
![Page 18: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/18.jpg)
/** ---- app.module.ts ---- **/
// Import the library
import { NativeScriptHttpModule } from "nativescript-angular/http";
// Inject the module
@NgModule({
[...]
imports: [NativeScriptModule, NativeScriptHttpModule]
})
Data, data, data!
Kaleidoscope
![Page 19: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/19.jpg)
/** ---- 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
![Page 20: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/20.jpg)
/** ---- 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
![Page 21: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/21.jpg)
/** ---- app.component.html ---- **/
<ActionBar title="PokeProject"></ActionBar>
<StackLayout>
</StackLayout>
User interface
Docs: https://docs.nativescript.org/ui/basicsKaleidoscope
![Page 22: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/22.jpg)
/** ---- app.component.html ---- **/
<GridLayout rows="auto" columns="auto, *, auto">
</GridLayout>
User interface - grid layout
Docs: https://docs.nativescript.org/cookbook/ui/layouts/grid-layoutKaleidoscope
![Page 23: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/23.jpg)
/** ---- 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
![Page 24: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/24.jpg)
/** ---- 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); }
}
A bit of style!
Kaleidoscope
![Page 25: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/25.jpg)
/** ---- 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
![Page 26: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/26.jpg)
/** ---- 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"
});
}
Native Dialogs
Kaleidoscope
![Page 27: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/27.jpg)
tns plugin add nativescript-couchbase
/// <reference path="./node_modules/nativescript-couchbase/couchbase.d.ts" />
Native Plugins
Kaleidoscope
![Page 28: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/28.jpg)
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
![Page 29: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/29.jpg)
/** ---- 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
![Page 30: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/30.jpg)
/** ---- 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
![Page 31: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/31.jpg)
/** ---- 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
![Page 32: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/32.jpg)
// 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
![Page 33: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/33.jpg)
tns prepare [ios|android]
tns build [ios|android]
tns deploy [ios|android]
tns emulator [ios|android]
tns run [ios|android]
Comandi utili
Kaleidoscope
![Page 34: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/34.jpg)
References
Documentazione di NativeScript http://docs.nativescript.org
Lista dei plugins (certificati da Telerik) http://plugins.nativescript.org
How NativeScript Workshttp://developer.telerik.com/featured/nativescript-works/
Performances (web-view) https://github.com/mlynch/pgday-eu-2017-perf/blob/master/web-perf-2017.pdf
Kaleidoscope
![Page 35: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/35.jpg)
Questions
Kaleidoscope
![Page 36: Mobile App Development...Kaleidoscope WebView-ed Swift - Objective C Java - Kotlin React Native NativeScript Flutter (new!) Xamarin AppCelerator trigger.io Ionic Framework Famous7](https://reader030.vdocuments.mx/reader030/viewer/2022040319/5e3f9b3106ae7115297e4e81/html5/thumbnails/36.jpg)
Kaleidoscope
Thank youFilippo Matteo Riggio CTO @kaleidoscope
@FMRiggio