Ionic: Hybrid Mobile Apps... made simple

64
Kaleidoscope Srl KALEIDOSCOPE

Transcript of Ionic: Hybrid Mobile Apps... made simple

Page 1: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

KALEIDOSCOPE

Page 2: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Filippo Matteo Riggio

Co - Founder di Kaleidoscope Srl

Full Stack Developer

Page 3: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic Framework

Page 4: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Menù del giorno:

• Cosa è e perchè usare Ionic Framework? • Struttura di un app • Aggiungere funzionalità native • Utilizzare la piattaforma ionic.io • Strumenti utili per lo sviluppo • Il futuro?

Page 5: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Cosa è Ionic Framework?Ionic è un framework (un set di strumenti), con lo scopo di velocizzare lo sviluppo di applicazioni mobile ibride.

The beautiful, open source front-end SDK for developing hybrid mobile apps with HTML5.

Page 6: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Punti di forza - PerformancePerformance Il team di Ionic lo ha sviluppato puntando a questi obiettivi: - nessuna manipolazione del DOM, - no jQuery, - transizioni accelerate tramite l’hardware

Quindi rispetto ad altri tool per lo sviluppo di applicazioni mobile ibride, Ionic è molto performante, riducendo il più possibile il gap con le applicazioni native.

Page 7: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Punti di forza - AngularJSAngularJS Ionic si basa sul framework AngularJS, che permette di creare applicazioni web complesse, strutturandole in un’ottica MVC.

Inoltre, per chi conosce già lo strumento, il passaggio a Ionic sarà rapido e indolore.

Page 8: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Punti di forza - DesignDesign L’interfaccia visiva che si sviluppa con Ionic è molto facile da utilizzare, si integra perfettamente con il look-and-feel delle varie piattaforme ed è molto facile da personalizzare secondo il design della nostra app.

Page 9: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Punti di forza - CLIInterfaccia CLI - Command Line Interface L’interfaccia CLI di Ionic è forse il più grande punto di forza di questo strumento, contiene tutto il necessario per tutte quelle operazioni utili allo sviluppo dell’applicazione.

Page 10: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Altri strumenti disponibiliPerformance Linguaggio Componenti Plugin Generato Supporto Maturità

Xamarin Ottime C# Sì, ma costosi Sì, ma costosi Nativo iOS /

Android / WP Ottima

AppCelerator Ottime JS + XML Sì Sì Nativo iOS / Android / WP Ottima

React Native Ottime JS (React) Sì Sì, pochi Nativo iOS / Android Acerbo

Famous Buone HTML5 + CSS3 + JS Sì Sì,

Cordova WebView iOS / Android / WP Discreta

Intel XDK Pessime HTML5 + CSS3 + JS Sì, pochi Sì,

Cordova WebView iOS / Android / WP Acerbo

Mobile Angular UI Buone HTML5 +

CSS3 + JS Sì, pochi Sì, Cordova WebView iOS /

Android / WP Discreta

Sencha Touch Discrete HTML5 + CSS3 + JS Sì Sì,

Cordova WebView iOS / Android / WP Ottima

Kendo UI Discrete HTML5 + CSS3 + JS Sì Sì,

Cordova WebView iOS / Android / WP Ottima

Onsen UI Discrete HTML5 + CSS3 + JS Sì Sì,

Cordova WebView iOS / Android / WP Discreta

Trigger.IO Buone JS Sì, pochi Sì, pochi WebView iOS / Android / WP Acerbo

jQuery Mobile Pessime HTML5 + CSS3 + JS Sì Sì,

Cordova WebView iOS / Android / WP Ottima

Page 11: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Perchè usare Ionic Framework?

- CLI potente - Basato su AngularJS - Vasta gamma di componenti - Vasta gamma di plugin nativi - Ampia Community - Ottima Documentazione - Team di sviluppo molto attivo - Piattaforma Ionic.io che si integra perfettamente con l’app - Ionic Creator - Ionic Lab - Ionic View

Page 12: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Struttura di un App Ionic

Page 13: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Struttura di baseLa struttura di base di un app ionic sarà quella che userete generalmente su tutti i progetti. La struttura di file e cartelle viene generata in automatico tramite il comando ionic start. Iniziamo osservando il contenuto del file di partenza index.html.

Page 14: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Struttura delle cartelle

Page 15: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Struttura di base<!DOCTYPE html><html><head> <!-- compiled css output -->

<link href="css/ionic.app.css" rel="stylesheet">

<!-- ionic/angularjs js --><script src="lib/ionic/js/ionic.bundle.js"></script><script src="lib/angular-locale_it-it.js"></script>

<!-- cordova script (this will be a 404 during development) --><script src="cordova.js"></script>

<!-- your app's js --><script src="js/app.js"></script><script src=“js/controllers/app.js"></script>

[…]<script src=“js/services/utility.js"></script>

[…]<script src=“js/directives/calendar.js"></script>

[…]</head><body ng-app="carnetverona">

<ion-nav-view></ion-nav-view></body></html>

Page 16: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Struttura dell’app sideMenu<ion-side-menus enable-menu-with-back-views=“false">

<ion-side-menu side="left"><ion-content>

<ion-list><ion-item href="#/app/calendar" menu-close>Calendario Rifiuti</ion-item><ion-item href="#/app/dictionary" menu-close>Dizionario Rifiuti</ion-item><ion-item href="#/app/report" menu-close>Invio Segnalazioni</ion-item>

</ion-list></ion-content>

</ion-side-menu>

<ion-side-menu-content> <ion-nav-bar class="bar-positive">

<ion-nav-back-button></ion-nav-back-button><ion-nav-buttons side="right">

<button class="button button-icon button-clear ion-navicon-round" menu-toggle="left"></button>

</ion-nav-buttons></ion-nav-bar>

<ion-nav-view name="menuContent"></ion-nav-view>

</ion-side-menu-content></ion-side-menus>

Page 17: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

SideMenusLa direttiva sideMenus permette di specificare una serie di menù laterali (in genere a sx o dx) che possono essere aperti tramite swipe (disattivabile) o tramite bottone (specificando l’attributo menu-toggle). Il menù vero e proprio si trova all’interno del tag <ion-side-menu>, mentre il contenuto delle pagine si trova all’interno di <ion-side-menu-content>. Si può vedere come venga già integrato l’header, che viene gestito da Ionic in automatico. Il contenuto delle viste viene gestito tramite il tag: <ion-nav-view name=“menuContent”>, poi caricato tramite lo $stateProvider.

Page 18: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Angular UI RouterLo $stateProvider è un componente del framework UI router. UI router è un framework per il routing sviluppato dal team di AngularUI, che utilizza un approccio differente dal routing basato sulle URL, ma utilizza un sistema di routing basato sugli stati. In questo modo, non siamo obbligati a costruire l’app sulle URL del sito, ma sugli stati, quindi la nostra app potrebbe cambiare stato senza dover cambiare URL.

Page 19: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

SideMenus con UI router.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$stateProvider .state('app', {

url: ‘/app’, // Indica che questo stato verrà attivato quando uno degli stati

// figli vengono attivatiabstract: true,templateUrl: 'templates/menu.html',controller: 'AppController'

}) .state('app.index', {

url: '/index',views: { 'menuContent' :{

templateUrl: "templates/index/index.html",controller: 'IndexController'

}}

});

// if none of the above states are matched, use this as the fallback$urlRouterProvider.otherwise('/app/index');

// Overwrite Ionic Styles$ionicConfigProvider.backButton.text('').icon('ion-arrow-left-c');

})

Page 20: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

$ionicPlatform.ready( )!.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {// Hide the accessory bar by default

//(remove this to show the accessory bar above the keyboard// for form inputs)if (window.cordova && window.cordova.plugins.Keyboard) {

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if (window.StatusBar) {

// org.apache.cordova.statusbar required StatusBar.hide();

}});

});

La funzione run è l’ultima ad essere eseguita prima di rendere l’interfaccia disponibile all’utente. All’interno della funzione di run viene passato il servizio relativo a $ionicPlatform. All’interno viene aggiunto un listener .ready( ). Questo listener viene invocato quando viene eseguito l’evento device ready. Al suo interno possiamo eseguire quelle funzioni di setup di base dell’app.

Page 21: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

$ionicPlatformOltre all’evento ready, è possibile registrare altri eventi: .on(off)HardwareBackButton(callback) : permette di (de)registrare eventi sul bottone back dei device android. .on(type, callback) : permette di registrare eventi specifici legati al device, come pause, resume, volumedownbutton, batterylow, offline, ecc. (per la lista completa: https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html#Events)

Page 22: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Componenti Ionic

Page 23: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic ColorsIonic di base ha al suo interno un set di colori utili a creare un app gradevole a livello grafico fin da subito. Potete vedere un esempio dei colori nell’immagine qui di fianco.

Page 24: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

IoniconsIonic fornisce un altro utile tool per lo sviluppo dell’interfaccia: ionicons. Ionicons è un set di icone in formato font, che possono essere utilizzate per la parte di design. Basterà visitare il sito http://ionicons.com/ e cercare tra le tante icone presenti, copiare la classe relativa all’icona (ad esempio: ion-arrow-left-c), ed incollarla dove ci è più utile.

Page 25: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

HeaderL’header è una sezione dell’applicazione fissa in alto, generalmente popolata da un titolo, un bottone a destra e uno a sinistra. Ognuno dei quali può essere collegato ad un’azione.

<div class="bar bar-header bar-light"> <h1 class="title">bar-light</h1></div>

Page 26: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic LoadingUn altro componente che possiamo utilizzare è quello relativo ad un overlay di caricamento. Può essere gestito tramite un service chiamato $ionicLoading.

[…]$ionicLoading.show();// oppure$ionicLoading.hide();[…]

L’oggetto $ionicLoading può essere configurato sovrascrivendo la costante $ionicLoadingConfig.

[…].constant('$ionicLoadingConfig', {

template: 'Caricamento...'})[…]

Page 27: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic Popup$ionicPopup è un altro servizio che permette di far comparire 3 tipologie di popup: alert, confirm, prompt. Di base si può comunque utilizzare la “versione” show.

Page 28: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic Popup - Show$ionicPopup.show( ) permette di visualizzare un popup complesso. E’ il modello master di tutti i popup:

$ionicPopup.show({ title: '', // Stringa. Il titolo del popup cssClass: '', // Stringa, permette di specificare una classe aggiuntiva per il popup subTitle: '', // Stringa (opzionale). Sottotitolo del popup template: '', // Stringa (opzionale). Il template HTML da usare nel corpo del popup templateUrl: '', // Stringa (opzionale). L’URL del template HTML // dove si trova l’HTML del corpo del popup scope: null, // Scope (opzionale). Permette di specificare uno scope da usare nel template buttons: [{ // Array[Object] (opzionale). // Un array contentente i bottoni che verranno visualizzati nel footer del popup text: ‘Cancel', // Testo del botton type: ‘button-default', // Tipo di bottone onTap: function(e) { // e.preventDefault() stoppa il popup dall’essere chiuso quando tappato e.preventDefault(); } }, { text: 'OK', type: 'button-positive', onTap: function(e) { // Esegui qualche altra operazione return scope.data.response; } }]});

Page 29: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic Popup - Alert$ionicPopup.alert( ) mostra un popup con un messaggio e solo un bottone per chiudere il popup.

$ionicPopup.alert({ title: '', // Stringa. Il titolo del popup cssClass: '', // Stringa, permette di specificare una classe aggiuntiva per il popup subTitle: '', // Stringa (opzionale). Sottotitolo del popup template: '', // Stringa (opzionale). Il template HTML da usare nel corpo del popup templateUrl: '', // Stringa (opzionale). L’URL del template HTML // dove si trova l’HTML del corpo del popup okText: '', // Stringa (default: 'OK'). Il testo del bottone OK okType: '', // Stringa (default: 'button-positive'). Il tipo di bottone da visualizzare});

Page 30: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic Popup - Confirm$ionicPopup.confirm( ) mostra un popup con un messaggio, un bottone per confermare ed uno per annullare.

$ionicPopup.confirm({ title: '', // Stringa. Il titolo del popup cssClass: '', // Stringa, permette di specificare una classe aggiuntiva per il popup subTitle: '', // Stringa (opzionale). Sottotitolo del popup template: '', // Stringa (opzionale). Il template HTML da usare nel corpo del popup templateUrl: '', // Stringa (opzionale). L’URL del template HTML // dove si trova l’HTML del corpo del popup okText: '', // Stringa (default: 'OK'). Il testo del bottone OK okType: '', // Stringa (default: 'button-positive'). Il tipo di bottone da visualizzare cancelText: '', // Stringa (default: 'Cancel'). Il testo del bottone Annulla cancelType: '', // Stringa (default: 'button-default'). Il tipo di bottone per l’Annulla});

Page 31: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic Popup - Prompt$ionicPopup.prompt( ) mostra un popup con un input, un bottone per confermare ed uno per annullare. Risolve una promise con il valore del campo in caso di OK, con undefined nel caso di Cancel.

$ionicPopup.prompt({ title: ‘Controlla Password', template: ‘Inserisci la tua password', inputType: 'password', inputPlaceholder: 'Your password' }).then(function(res) { console.log(‘La tua password è : ’, res); });

Page 32: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Aggiungere funzionalità native

Page 33: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Più plugins per tutti!Come avrete visto, all’interno della funzione .run ( ), viene richiamata una funzione relativa a 2 plugin, il plugin della keyboard e quello della statusbar.[…]if (window.cordova && window.cordova.plugins.Keyboard) {

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if (window.StatusBar) {

// org.apache.cordova.statusbar requiredStatusBar.hide();

}[…]

Come si può notare, la funzionalità nativa viene associata alla proprietà javascript window.cordova, questa proprietà viene creata solamente quando compiliamo la nostra app. In particolare viene fornita da questo file:

<!-- cordova script (this will be a 404 during development) --><script src="cordova.js"></script>

Page 34: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Aggiungere/rimuovere un pluginAggiungere o rimuovere un plugin:

ionic plugin add|remove <NOME PLUGIN> [OPTIONS]

Di base, con il comando ionic start, la nostra app ha già al suo interno il plugin keyboard creato dal team di ionic. Lista dei plugin ufficiali (e testati) per le app ionic è: http://ngcordova.com/ I plugin relativi alla nostra app si trovano all’interno della cartella /plugins/ dove è presente anche un file json per relativa piattaforma (ios.json, android.json,ecc.).

Page 35: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Lista dei plugin installatiOltre a poter aggiungere o rimuovere un plugin, è possibile anche visualizzare quali plugin sono presenti all’interno della nostra app. Per farlo, basterà eseguire il comando:

ionic plugin list

Page 36: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Esempio: fotocameraionic plugin add cordova-plugin-camera

angular.module('carnetverona.test_controller', []).controller('TestController', function( $scope, $cordovaCamera ) {

$scope.openCamera = function(size) {var options = {

quality: 90,destinationType: Camera.DestinationType.DATA_URL,sourceType: Camera.PictureSourceType.CAMERA,allowEdit: false,cameraDirection: 0,encodingType: Camera.EncodingType.JPEG,correctOrientation: true,targetWidth: 300,targetHeight: 300,popoverOptions: CameraPopoverOptions,saveToPhotoAlbum: false

};

if (typeof size !== "undefined") {options.targetWidth = size;options.targetHeight = size;

}

return $cordovaCamera.getPicture(options).then(function(imageData) {return "data:image/jpeg;base64," + imageData;

});};

Page 37: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Esempio: native dialogsionic plugin add cordova-plugin-dialogs

angular.module('carnetverona.test_controller', []).controller('TestController', function( $scope, $cordovaDialogs) {

$scope.openDialog = function(message, title, btnName) { $cordovaDialogs.alert(message, title, btnName).then(function() { // callback success });};

});

Page 38: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Config.xml

Page 39: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Config.xmlOgni volta che creiamo un app con ionic, verrà creato un file xml, contenente la configurazione di base per l’app, la configurazione di base per ogni funzionalità nativa aggiunta tramite plugin e la configurazione delle risorse per ogni piattaforma utilizzata nell’app.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><widget id="com.kaleidoscope.carnetverona" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

<name>CarnetVerona</name><description>Applicazione CarnetVerona</description><author email="[email protected]" href="http://www.kaleidoscope.it/">Kaleidoscope</author>

<content src="index.html"/><access origin="*"/><preference name="webviewbounce" value="false"/><preference name="UIWebViewBounce" value="false"/><preference name="DisallowOverscroll" value="true"/><preference name="android-minSdkVersion" value="16"/><preference name="BackupWebStorage" value="none"/><preference name="SplashScreen" value="screen"/><preference name="SplashScreenDelay" value="3000"/>

Page 40: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Config.xml - Features (plugins)

Ogni plugin avrà una sua configurazione generica all’interno di questo file, poi declinata per ogni piattaforma nella relativa cartella del plugin.

<feature name="StatusBar"><param name="ios-package" value="CDVStatusBar" onload="true"/>

</feature>

Page 41: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Plugin.xml - Features (plugins)Quella che vedete di seguito, invece, è la configurazione del plugin:<plugin xmlns=“http://apache.org/cordova/ns/plugins/1.0" […] id=“org.apache.cordova.statusbar"> <name>StatusBar</name> <description>Cordova StatusBar Plugin</description> <engines> <engine name="cordova" version=">=3.0.0" /> </engines> <js-module src="www/statusbar.js" name="statusbar"> <clobbers target="window.StatusBar" /> </js-module> <platform name="ios"> <config-file target="config.xml" parent="/*"> <feature name="StatusBar"> <param name="ios-package" value="CDVStatusBar" /> <param name="onload" value="true" /> </feature> <preference name="StatusBarOverlaysWebView" value="true" /> <preference name="StatusBarStyle" value="lightcontent" /> </config-file> <header-file src="src/ios/CDVStatusBar.h" /> <source-file src="src/ios/CDVStatusBar.m" /> </platform> <platform name="android"> <source-file src="src/android/StatusBar.java" target-dir="src/org/apache/cordova/statusbar" /> <config-file target="res/xml/config.xml" parent="/*"> <feature name="StatusBar"> <param name="android-package" value="org.apache.cordova.statusbar.StatusBar" /> <param name="onload" value="true" /> </feature> </config-file> </platform></plugin>

Page 42: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Config.xml - ResourcesLa configurazione per le risorse, cioè quel set di immagini e icone usate in per l’app (splash, icone).

<platform name="ios"><icon src="resources/ios/icon/icon.png" width="57" height="57"/><splash src="resources/ios/splash/Default-568h@2x~iphone.png" height="1136" width="640"/>

</platform>

<platform name="android"><icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/><splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>

</platform>

Page 43: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

A real example: CarnetVerona

Page 44: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Integrazione con la piattaforma ionic.io

Page 45: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

ionic.ioIonic.io è un servizio all-in-one per la creazione di app mobile ibride scalabili.

Offre vari servizi ( a pagamento dopo certe soglie), quali Ionic Users, Push Notifications, Analytics, Deploy e Build.

Per farlo, dobbiamo creare un account sulla piattaforma.

Page 46: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

ionic.io - SetupDobbiamo come prima cosa procedere alla sincronizzazione dell’app con ionic.io, per farlo dobbiamo installare un web client che ci permetta di comunicare con la piattaforma:

ionic add ionic-platform-web-client

Dopodichè dobbiamo chiedere alla piattaforma di assegnarci un APP_ID e un API_KEY univoca, con il comando: ionic io init

Questa configurazione verrà successivamente salvata nel file ionic.project

Page 47: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Setup delle notifiche push con ionic.io

Page 48: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

ionic.io - Push notifications

Installiamo per prima cosa il plugin per il servizio di notifica:

ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"

Impostiamo le notifiche in modalità test : ionic config set dev_push true

Page 49: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

ionic.io - Push notificationsangular.module('starter', ['ionic','ionic.service.core', ‘ionic.service.push'])[…].run(function($ionicPlatform, $ionicPush) {

$ionicPlatform.ready(function() {

$ionicPush.init({'debug': true,'onNotification': function(notification) { // Callback in caso di notifica},'onRegister': function(data) {

push.saveToken(data); // Nota su ionic.io users},'pluginConfig': {

'ios': { ‘badge’: true,

'sound': true},

'android': { 'iconColor': '#343434'

}}

});$ionicPush.register(); // con GCM / APNs

});

Page 50: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

ionic.io - Send Push notifications

{ "tokens": ["your", "device", "tokens"], "profile": "my-security-profile", "notification": { "title": "Hi", "message": "Hello world!", "android": { "title": "Hey", "message": "Hello Android!" }, "ios": { "title": "Howdy", "message": "Hello iOS!" } }}

Per inviare le notifiche push, basterà inviare via POST, una richiesta all’endpoint: https://api.ionic.io/push/notifications con gli header:

Content-Type: application/jsonAuthorization: Bearer <your-authentication-token>

e con il seguente corpo della richiesta:

Page 51: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Strumenti Utili

Page 52: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic ServePer facilitare lo sviluppo dell’app, ionic fornisce un utile strumento, che ci permette di lanciare un server locale nodeJS, attraverso il comando:

ionic serve [options] <PLATFORM>

Le opzioni possono essere: - -consolelogs|-c : stampa i console log dell’app sulla shell - livereload req - -serverlogs|-s : stampa i log del dev server - livereload req - -port|-p : porta del dev server HTTP (default 8100) - livereload req - -livereload-port|-r : porta del server livereload (default 35729) - livereload req - -nolivereload|-d : non far partire la funzionalità di livereload - -noproxy|-x : non aggiungere proxy - -address : utilizza uno specifico indirizzo - -all|-a : metti in ascolto il server su tutti gli indirizzi - -browser|-w : specifica quale browser usare - -browseroption|-o : specifica il percorso da aprire (#/tab/dash) - -lab|-l : testa l’app su screen multipli - -nogulp: non utilizzare gulp - -platform|-t : effettua il serve con una specifica piattaforma (ios/android)

Page 53: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic Setup SassPer chi volesse utilizzare il precompilatore sass, è possibile utilizzare tramite questo comando:

ionic setup [options]

Le opzioni possono essere: sass: utilizza Sass (in futuro potranno essere utilizzati altri tool, come LESS, Compass, ecc.)

Page 54: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic ResourcesIonic fornisce un altro tool molto utile, che permette di effettuare il ritaglio di tutte le icone in un colpo solo. Basta inserire le immagini per l’icona e per la splash nella cartella resources del progetto e lanciare il comando:

ionic resources [OPTIONS]

Le immagini devono avere queste dimensioni: icona 192x192 pixel splash 2208x2208 pixel con l’immagine centrata

Page 55: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic ViewIonic View è un app mobile creata dal team di Ionic, che permette di testare e condividere le proprie app su vari dispositivi senza doverle compilare e distribuire. Per chi conoscesse TestFlight, il funzionamento è molto simile. Per utilizzare ionic view dobbiamo registrarci al sito: http://ionic.io, ed eseguire questo comando:

ionic upload

Saranno richieste le credenziali di accesso, dopodiché la nostra app sarà disponibile su ionic view. Per verificare, basta visitare la pagina: https://apps.ionic.io. Una volta caricata la nostra app su ionic view, possiamo condividerla con il comando:

ionic share <EMAIL>

Page 56: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ionic ViewUna volta caricata, apriamo l’app Ionic View dal nostro device, effettuiamo il login e potremo caricare l’app all’interno di Ionic View. Per uscire dall’app in corso, basterà effettuare lo swipe con 3 dita verso il basso. Se effettuate una modifica all’app, basterà rieffettuare l’operazione di upload ed aggiornare l’app su ionic view tramite il pulsante “Sync to latest” nel dettaglio dell’app. Un problema che si è riscontrato con Ionic View è la mancanza di supporto ad alcuni plugin di cordova. Ad ora, i plugin funzionanti sono: Brodysoft SQLitePlugin, Keyboard, BarcodeScanner, Battery, Camera, Console, Device, Device Motion, Device Orientation, Notification, Geolocation, Globalization, Network Information, Vibration, Zip.

Page 57: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Il futuro?

Page 58: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ci sarà sempre un app per tutto?

2008 : Apple rilascia l’App Store, il primo store in cui trovavamo tutte belle e impacchettate le nostre app. Il motivo del successo dell’App Store si deve a varie ragioni, di natura temporalistica e tecnologica: - supporto ad una connessione 3G - un’ambiente di sviluppo ben documentato e stabile - una bella grafica di impatto - un colosso di nome Apple alle spalle.

Bene, le persone non si preoccupano più di tanto di come funziona. Loro scaricano un app per lanciare uccelli ai maiali oppure scattarsi i selfie #nofilters.

Page 59: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ci sarà sempre un app per tutto?

Gli anni passano, il mercato delle app cresce in modo vertiginoso, ma i problemi che emergono sono delivery e discoverability dei contenuti.

Delivery “Companies want to deliver content and services to customers as fast and easily as possible, but the increasing reluctance for the perceived installation-barrier is putting up a delivery obstacle.”

Discoverability Molte app (ad es: instagram, The Daily, ecc.) iniziano fornendo contenuti che vivono in un’ecosistema chiuso. “A fragmented Internet where creative and original content are locked up in proprietary platforms is not the Internet we know and love.”

Page 60: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ci sarà sempre un app per tutto?

App Linking e Indexing L’app linking è quella funzionalità per la quale un app apre un’altra app che riesce a rappresentare il contenuto in una maniera migliore.

Per fare ciò, è però previsto un effort nella creazione di una versione web dell’app esistente, dimodochè il contenuto sia indicizzato dai motori di ricerca.

Immaginate ora il problema, apro un link dal motore di ricerca e mi viene richiesto di scaricare un app. “I want the content, not the damn app!”

Page 61: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ci sarà sempre un app per tutto?

Google App Streaming

4 mesi fa, Google rilascia App Streaming. Non ci sarà più bisogno di installare l’app, ma Google ci presenterà i risultati on-demand.

Page 62: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ci sarà sempre un app per tutto?Apple ODR (on-demand resources) Rilasciata con iOS9, questa tecnologia permette di scaricare il core della nostra app senza dover scaricare tutti gli assets necessari. Questo non replica l’idea di Google di indicizzare i contenuti dell’app, ma potrebbe (se adottata da molti dev) diventare uno strumento generico per la creazione di contenuti install-free.

Page 63: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Ci sarà sempre un app per tutto?Con l’impiego di Google App Streaming e di Apple ODR stiamo entrando in un’era dove le installazioni diverranno obsolete e il confine tra website e app nativa sempre più sovrapposto.

Arriveremo ad avere pagine web con funzionalità native, che renderanno obsolete le app che non necessitano di performance eccessive ed entreremo nell’era del Physical Web (https://google.github.io/physical-web/).

Page 64: Ionic: Hybrid Mobile Apps... made simple

Kaleidoscope Srl

Grazie.

[email protected] www.kaleidoscope.it