Sommario. Le App di oggi. Idee e primi prototipi. Un esempio di Hybrid Application: «SmartApp Salerno» per i Beni Culturali

Transcript

1 «Le migliori applicazioni per Android non sono ancora pronte, questo perché sarete voi, insieme ad altri sviluppatori come voi, a crearle.» (Sergey Brin, Google Centro ICT per i Beni Culturali Relatori: Ing. Saverio Lemma Ing. Marco Lombardi 2016

2 Sommario Le App di oggi Introduzione Native o ibride? Hybrid App?...Il caso di Facebook Hybrid App?...Il caso di BBC Linee guida: come creare app di successo Guadagnare con le App Idee e primi prototipi le vostre App! Un esempio di Hybrid Application: «SmartApp Salerno» per i Beni Culturali la nostra App! Uno sguardo a IONIC FRAMEWORK

3 Le App di oggi: introduzione (1) L Italia è al primo posto in Europa per il numero di smartphone posseduti dalla popolazione. Secondo il decimo Rapporto Censis/Ucsi 2012 l'utenza degli smartphone è cresciuta del 10% e il 54,8% dei giovani italiani ne possiede uno. In particolare, tra il 2009 e il 2012 è avvenuto un vero e proprio boom degli smartphone che sono passati dal 15% al 27,7% della popolazione. L'anno cruciale è stato il 2011: è infatti questo l anno in cui è avvenuto lo storico sorpasso dei dispositivi mobili sui pc. I 100 milioni di device mobili venduti in tutto il mondo, contro i 93 milioni di pc, non rappresentano solamente una semplice inversione di tendenza a livello di mercato, ma una vera e propria svolta tecnologica e sociale, l inizio di una nuova era. Cambiano modalità di fruizione e contenuti, cambia il modo di pensare degli utenti, di interagire tra loro, di effettuare tutte quelle operazioni quotidiane che prima richiedevano, se non la presenza fisica in un determinato luogo, almeno l utilizzo di un dispositivo fisso o relativamente ingombrante come computer e notebook. Lo smartphone, tecnicamente definito come un telefono cellulare munito di browser che offre avanzate funzionalità di gestione dei dati personali, entra prepotentemente nella vita degli individui e li accompagna 24 ore su 24, 7 giorni su 7. La forza dei nuovi dispositivi mobili sta proprio qui, nella capacità di essere a portata di mano in qualsiasi momento e di dare all utente la possibilità di gestire operazioni e consultare informazioni che fino a pochi anni fa implicavano una modalità di fruizione totalmente diversa.

4 Le App di oggi: introduzione (2) Il successo dei dispositivi mobili si diffonde di pari passo con la crescita delle cosiddette app, sostantivo questo che è ormai entrato a far parte del vocabolario comune di milioni di persone, nonostante fino a pochi anni fa non avesse alcun genere di significato rilevante. App deriva dal termine application e tecnicamente si tratta di applicazioni di vario genere, gratuite o meno, scaricabili dagli application store ed incluse in smartphone e tablet. Il punto di forza di questi piccoli software è sicuramente la facilità di utilizzo: per poter fruire dell applicazione desiderata è sufficiente scaricarla dallo store, installarla sul proprio dispositivo ed utilizzarla in qualsiasi momento lo si voglia; molte sono gratuite, per quelle a pagamento invece il prezzo medio si aggira tra i 0,79 euro e gli 1,50 euro. Come possono resistere gli utenti al forte appeal di programmi, giochi, guide e quant altro gli sviluppatori siano riusciti a trasformare in un app, il tutto caratterizzato da una semplice fruibilità, un basso prezzo, una coinvolgente componente ludica e, in molti casi, anche un elevato grado di utilità? Indubbiamente in alcun modo. E ciò si traduce nel successo travolgente che le app stanno riscuotendo, nel grande movimento di denaro che hanno messo in atto, così rilevante che addirittura gli esperti del settore hanno ritenuto fosse opportuno coniare il termine app economy per definire questo fenomeno inaspettatamente redditizio.

5 Le App di oggi: native o ibride? Entro il 2016 oltre il 50% delle applicazioni sviluppate per dispositivi mobili sarà di tipo ibrido. Lo sostiene Gartner Inc., una società multinazionale leader mondiale nella consulenza strategica, ricerca e analisi nel campo dell'information Technology con oltre clienti nel mondo. tattiche tradizionali nelle aree più vaste dell attivazione delle tecnologie e delle architetture d impresa. Le imprese si stanno rendendo conto di avere sempre più bisogno di piattaforme di supporto multiple, specialmente ora che è il momento del Byod (bring your own device), ovvero la consuetudine a usare per lavoro il dispositivo mobile personale. Secondo la società di ricerche Gartner, le hybrid app avranno successo perché manager e dipendenti chiedono con sempre maggiore insistenza alle proprie aziende di sviluppare e mettere a disposizione mobile app in grado di adattarsi alle abitudini lavorative in mobilità. Per rispondere quindi al crescente bisogno di La mobilità ha spiegato Ken Dulaney, vicepresidente applicazioni per mobile, le aziende stanno cercando di e analista di Gartner - è stata sempre considerata una usare le stesse app attraverso differenti piattaforme, questione a parte dai professionisti dell IT, invece ed ecco i vantaggi dell architettura ibrida. adesso sta contribuendo a modificare le strategie e

6 Hybrid App?...Il caso di Facebook Facebook è stato l'esempio per eccellenza che ha messo in evidenza i limiti di una hybrid app. The biggest mistake we ve made as a company is betting on HTML5 over native. (Mark Zuckerberg) Inizialmente è stata sviluppata l'applicazione in HTML5, interna ad una involucro nativo, così che l'utente potesse trovarla e scaricarla direttamente dagli store. In seguito Facebook decise di sviluppare un app nativa per ogni piattaforma: i problemi principali furono la velocità e la reattività. Le prestazione offerte da un applicazioni ibrida, infatti, non erano sufficienti a garantire il livello di userexperience richiesto dagli utenti (esempio, navigare la timeline strisciando il dito sullo schermo doveva garantire una risposta quasi istantanea). Pertanto l'applicazione è stata riscritta interamente in codice nativo, passando da 2 a 4 stelle, come valutazione utente, in sole 3 settimane. N.B. Prima di emulare l'esperienza e le scelte di Facebook scartando a priori l'approccio ibrido, bisogna, però, ricordare che i problemi di Facebook erano su una scala differente da qualsiasi altro scenario.

7 Hybrid App?...Il caso di BBC BBC rappresenta un caso di successo nell'utilizzo delle hybrid app. BBC, infatti, concretizza la propria necessità di fornire una applicazione relativa allo sport con la realizzazione della hybrid app, BBC Sport. L'applicazione fornisce i contenuti presenti sul sito e l'aggiunta di funzionalità che sfruttano il wrapper nativo. BBC conferma, reduce dal successo della hybrid app BBC Olympics, questa tipologia di app come la soluzione alle proprie esigenze.

8 L economia delle App e le killer application L economia delle App L'economia delle app è definibile come l'insieme delle attività di ideazione, produzione e distribuzione che coinvolgono in maniera diretta le mobile application. Le App hanno radicalmente trasformato il modo di intendere e far e business, non solo nei settori relativi all'high-tech, e creato enormi opportunità imprenditoriali. Il prepotente ingresso delle app nell'economia globale, ma anche nella nostra quotidianità, ha dato vita ad un nuovo ed dinamico ecosistema, i cui numerosi attori si contendono un ruolo da protagonista. Killer application Le applicazioni contribuiscono a trasformare i progressi della tecnologia da semplici curiosità in miglioramenti indispensabili ed economicamente redditizi. Una killer application (o in breve killer app) è una prerogativa collaterale di una tecnologia che si dimostra così interessante da animare eccezionalmente il mercato e da far considerare alla gente un prodotto assolutamente indispensabile.

9 App Economy Nel prospetto informativo finalizzato alla propria quotazione al Nasdaq, Zynga (una tra le principali società che realizzano mobile applications) ha così definito l'economia delle app: "Al fine di offrire agli utenti una vasta gamma di esperienze coinvolgenti, i social network ed i sistemi operativi mobile hanno aperto le proprie piattaforme agli sviluppatori, trasformando la creazione, la distribuzione ed il consumo di contenuti digitali. Ci riferiamo a questo fenomeno come App Economy. Nell'economia delle app, gli sviluppatori possono creare applicazioni disponendo di caratteristiche uniche della piattaforma, distribuire applicazioni in via digitale ad un vasto pubblico ed aggiornare regolarmente applicazioni esistenti."

10 Linee guida: come creare app di successo (1) Creare app innovative Se la tua app nasce da un idea così originale da sbaragliare le vaste schiere dei software di tutto il mondo, è fatta. O quasi. Ti manca solo di verificare l inesistenza di un applicazione simile sui vari App Store, digitando le parole chiave relative alle sue caratteristiche, e di stabilire come il tuo genio possa essere concretamente elaborato. Per fare questo ti serve rispondere a tre specifiche domande. I. Primo: qual è il beneficio o l innovazione per l utente II. III. della tua app? Secondo: chi è questo utente? E, infine, come si configura la sua esperienza con la tua app? Se i vantaggi concreti esistono, se il target è facilmente individuabile e se il discorso esperienziale fila, questa volta è fatta davvero. Creare app migliorative Questa categoria di software è estremamente affollata, specie negli ambiti dell Entertainment e del gaming e comprende sostanzialmente applicazioni ideate a miglioramento delle funzionalità di un altra. Sarà bene quindi ricercare un senso alla realizzazione della tua app in modo che sia davvero migliore di quelle già esistenti. Dapprima è utile confrontare tutte le altre applicazioni sorelle disponibili negli Store e, poi, individuare con estrema convinzione le funzionalità nuove da introdurre e i reali benefici relativi. Sciolto questo nodo cruciale è importante capire perché l utente dovrebbe essere interessato a scaricare la tua app. Se non riesci a immaginare perché qualcuno dovrebbe farlo, conviene allora ripensarci un po su.

11 Linee guida: come creare app di successo (2) Creare app sequel Se hai intenzione di creare un app di questo tipo, probabilmente sei già un esperto nella realizzazione di software per mobile. Questo perché i Sequel sono sostanzialmente versioni successive di un applicazione preesistente. Dopo aver lanciato la tua app, può infatti capitarti di volerne rilasciare un aggiornamento, con migliorie negli aspetti tecnici e novità funzionali. Creare app sponsorizzate Le app di questo tipo, lo dice il nome, sono quelle che sfruttano un marchio, un brand, un etichetta a fini rappresentativi o commerciali. Appartengono senza dubbio alla categoria tutte le app proprietarie legate a un prodotto o a un azienda, quelle che semplicemente ruotano attorno a un brand e quelle che si servono di un vero e proprio copyright. Le questioni da mettere a punto, in questo caso, sono molto concrete. Preliminarmente è bene chiedersi e stabilire con esattezza se e perché è necessario sviluppare un Sequel. Se l utilità di un aggiornamento è tangibile è bene individuare il segmento di utenti da soddisfare. Ricordati inoltre di non trascurare gli utenti della versione precedente e di stabilire per questa cerchia un trattamento specifico che non crei confusione. Nel caso delle app sponsorizzate è necessario chiedersi qual è il prezzo da pagare per l utilizzo del brand, quanti e quali contenuti offre, come si intende usarli e a quali fini. Da ultimo è utile pensare a quali sono le funzionalità che distinguono la tua app dalla mischia dei competitor e, infine, darsi da fare per realizzarla.

12 Guadagnare con le App

13 Guadagnare con le App: Tecniche (1) App a pagamento E la modalità più classica e quella che comporta un minore sforzo da parte del programmatore. L'app viene semplicemente messa in vendita nel PlayStore (Android) e gli utenti possono scaricarla pagando. Dal prezzo imposto va tolta la percentuale che resta a Google. Pubblicità in-app Inserendo banner pubblicitari all'interno delle app è possibile ottenere dei guadagni. Per avere buoni guadagni occorre realizzare tantissimi click. Prodotti in-app Distribuire gratuitamente l'app con delle funzioni base e poi vendere a pagamento delle funzioni aggiuntive o temporanee. Ad esempio il Mighty Eagle di Angry Birds permette di superare il livello in corso dietro il pagamento di un cifra irrisoria. Questo modello si applica bene ai giochi.

14 Guadagnare con le App: Tecniche (2) Donazioni Non è una vera e propria tecnica remunerativa ma permette di ripagarsi un po degli sforzi fatti per la programmazione. Tramite un pulsante, di solito inserito tra le opzioni, è possibile fare una piccola donazione (50 centesimi, 1euro,..) allo sviluppatore come ringraziamento e incoraggiamento allo sviluppo di altre app. Le ricerche dimostrano che gli utenti Android sono più propensi a scaricare App gratuitamente, mentre gli utenti Apple non si fanno problemi a spendere soldi per ottenere l'app che desiderano. Conviene quindi, delle tre tecniche proposte, adottare la terza: non introduce fastidiose pubblicità e se l'app è veramente utile si prospettano grandi guadagni ma d'altro canto ci vuole un ulteriore sforzo in programmazione.

15 Guadagnare con le App: Pubblicizzare l App Scegliere una buona tecnica remunerativa non è abbastanza per avere successo con la vendita di app: bisogna farsi conoscere e farla conoscere. Tecniche: Pubblicarla nello Store (Google Play) Segnalare l'app ai vari blog che nella rete parlano di Android Pubblicizzarla su Facebook e Twitter E importante, quando si pubblica un'app, scegliere con cura la categoria a cui appartiene: giochi, fotografie, sport e tempo libero sono solo alcune tra le categorie presenti nel negozio. Chi invece non vuole utilizzare le categorie, può utilizzare la funzione di ricerca. Inserendo il nome dell'applicazione o delle parole chiave si possono cercare tutte le applicazioni che contengono quelle parole. E importante allora, durante la fase di pubblicazione, assegnare dei tag appropriati alla propria app. Android facilita anche la promozione delle app nelle pagine Web degli utenti. Chi possiede infatti un sito Web o un blog, può fare uso di una funzione disponibile sul sito Android Developers che consente di creare una sorta di badge per promuovere la propria app.

16 Guadagnare con le App: Controllare le distribuzioni (1) Controllare la visibilità della propria applicazione potrebbe essere una buona strategia di marketing: si può infatti scegliere, durante la fase di pubblicazione, quali paesi potranno avere accesso a questa app e quali terminali la potranno scaricare. Distribuzione geografica Scegliere attentamente i paesi in cui l'app sarà disponibile è una buona strategia. Infatti, pubblicare app in un paese straniero, sarebbe da fare solo se la propria app è stata tradotta anche nella lingua parlata in quel paese. Restrizione sui dispositivi E possibile stabilire anche quali dispositivi potranno installare l'app. Il motivo di escludere alcuni dispositivi potrebbe risiedere, per esempio, in qualche problema hardware riscontrato con un tipo particolare di dispositivo o nel fatto che si è deciso di non supportare certe risoluzioni di schermi e quindi si vogliono escludere i dispositivi che le montano.

17 Guadagnare con le App: Controllare le distribuzioni (2) Statistiche Per tenere sotto controllo l'andamento dei download nel tempo, sono disponibili delle statistiche che tengono conto di quante volte l'app viene installata, aggiornata o disinstallata.

18 Guadagnare con le App: Controllare le distribuzioni (3) Distribuzione avanzata E sempre utile avere un feedback dagli utenti, specialmente prima del lancio dell'app. Con il Google Play è possibile distribuire delle versioni ancora in fase di sviluppo a piccoli gruppi di tester, magari sparsi nel mondo. APK multipli Nella maggior parte dei casi è più facile creare un'app che supporti tutte le risoluzioni di schermi e versioni in un singolo file APK. E altamente raccomandato distribuire il singolo APK agli utenti, perché é il modo più facile per controllare e gestire al meglio l'app. Ma potrebbe essere necessario avere degli APK diversi per categorie diverse di dispositivi ed anche questa soluzione e realizzabile grazie al Google Play. E presente infatti un'opzione chiamata «APK multipli» che permette di creare diversi APK con lo stesso nome ma che differiscono, ad esempio, nel formato di compressione delle texture, nelle risoluzioni di schermi supportate o nelle versioni di Android supportate. Gli APK vengono caricati nello store online come un singolo APK ma, al momento del download, Android sceglie automaticamente quello più adatto al dispositivo.

19 Guadagnare con le App: Controllare le distribuzioni (4) Proteggere l app 1. Licenza Google Play: un servizio online che va implementato nell'app. Con questo servizio, l'app interroga periodicamente un server particolare di Google per determinare se l'app ha una licenza corretta. Questo strumento è applicabile sia per applicazioni a pagamento che applicazioni gratuite. 2. Servizio di crittografia per proteggere le app a pagamento: quando l'app viene scaricata da un dispositivo (con versione Android 4.1 o successive), Google cifra l'app in modo che possa essere eseguita solo dall'utente che l'aveva scaricata e solo sul dispositivo con cui l'aveva scaricata. Questo strumento non ha bisogno di ulteriore sforzo da parte del programmatore, in quanto lo strumento si attiva automaticamente quando l'app viene resa a pagamento.

20 Idee e primi prototipi le vostre App! Your App Idea

21 SmartApp Salerno la nostra Hybrid App!

22 SmartApp Salerno: Introduzione SmartApp Salerno è un applicazione contestuale per la città di Salerno, che consente all utente di ottenere contenuti e servizi su misura, in particolare sulla base dei suoi interessi, ed al momento giusto, in base alla sua posizione geografica. «Punti di interesse, servizi, descrizioni, itinerari, notizie muoverti a Salerno è come farlo a casa tua!!!»

23 SmartApp Salerno: Interfaccia Schermata di benvenuto Registrazione dell utente al sistema Login classico al sistema o mediante Facebook/Google+ Menu laterale (dopo il login)

24 SmartApp Salerno: Aree e Punti di interesse Quando l'utente si trova nei pressi di un area/regione di interesse (ROI) visualizza alcune informazioni di base relative ai punti di interesse (POI) presenti (rating, telefono, indirizzo e sito Web). L'utente registrato (turista o esperto) può "approfondire" e visualizzare descrizioni, immagini, servizi e contenuti contestualizzati, relativi al punto di interesse selezionato e determinati sulla base del proprio profilo. Ottenimento delle informazioni generali sui POI trovati in una determinata area con possibilità di approfondire

25 SmartApp Salerno: Descrizioni e immagini (semplici) Entrambe le tipologie di utente hanno a disposizione delle descrizioni semplici del luogo corrente e delle immagini con didascalie. Approfondimento del POI con descrizioni e immagini semplici

26 SmartApp Salerno: Descrizioni e immagini (dettagliate) L utente esperto può ulteriormente approfondire il POI corrente ottenendo una descrizione più dettagliata, così come per le immagini; mentre l utente turista riceve dall app un messaggio di notifica per segnalargli che il contenuto è relativo esclusivamente ad utenti esperti. 1. Messaggio visualizzato da utenti registrati come turisti per le descrizioni. 2. Messaggio visualizzato da utenti registrati come turisti per le immagini. 3. Descrizione approfondita per il POI corrente.

27 SmartApp Salerno: Servizi Scegliendo un particolare interesse in fase di registrazione, sarà possibile ottenere uno o più servizi per un determinato punto di interesse (ad esempio, per un ristorante, il servizio del menu legato all'interesse "cibo"; oppure, per un Bed&Breakfast, il servizio di TripAdvisor legato all interesse "turismo"). Quindi, per lo stesso POI, utenti con interessi differenti otteranno servizi diversi. 1. Servizi del POI corrente associati agli interessi scelti nel profilo utente. 2. Esempio di apertura di un servizio.

28 SmartApp Salerno: mappa La mappa consente di visualizzare: la posizione corrente dell utente; i punti di interesse culturali (punti per i quali si dispone di contenuti esclusivi); l itinerario eventualmente calcolato [vedi Pianificazione itinerario]; i POI ottenuti automaticamente da Google nelle vicinanze secondo le esigenze dell utente [vedi Ricerca POI]. 1. Mappa con visualizzazione della posizione utente. 2. Menu disponibile per la mappa.

29 SmartApp Salerno: POI culturali I punti di interesse culturali sono raffigurati da marker specifici a secondo del POI in questione. Con un tap su uno di questi marker si ottiene il nome del relativo POI; con doppio tap, invece, si può attivare il navigatore per raggiungere quel determinato punto di interesse. 1. Visualizzazione dei POI culturali utilizzando il menu a tendina della mappa. 2. Tap su un marker con relativa visualizzazione del nome del POI culturale corrispondente. 3. Doppio tap su un marker con corrispondente avvio del navigatore.

30 SmartApp Salerno: Pianificazione itinerario La funzione pianifica itinerario permette di ottenere e personalizzare un itinerario: calcolato sulla base degli interessi dell utente (ciascun POI è associato ad un interesse che viene confrontato con quelli dell utente); religioso; turistico. L utente deve specificare: Il punto di partenza (ottenuto dalla posizione corrente o inserito manualmente specificando punto di interesse/indirizzo seguito dalla città in cui l utente desidera trovarsi); quanto desidera spostarsi dalla posizione iniziale; la tipologia di itinerario preferita. Scelta delle preferenze di pianificazione dell itinerario Itinerario calcolato e personalizzabile

31 SmartApp Salerno: Itinerario su mappa Viene proposto il percorso ottimizzato più veloce, rappresentato da marcatori che seguono l ordine alfabetico. La posizione corrente è rappresentata mediante il marcatore segnato con la lettera A, mentre la destinazione finale attraverso il marcatore rosso. Rappresentazione grafica dell itinerario proposto

32 SmartApp Salerno: Itinerario testuale L utente può ottenere anche il percorso testuale dell itinerario appena calcolato, in cui vengono descritte le indicazioni per visitare tutti i POI presenti. Rappresentazione grafica dell itinerario proposto

33 SmartApp Salerno: Esplorazione dintorni L esplora dintorni permette di ottenere un elenco, ordinato per distanza, dei punti di interesse attorno alla posizione corrente dell utente. Ciascun POI è raggiungibile mediante l integrazione nell app SmartApp Salerno del navigatore presente sul proprio smartphone. Esplorazione nei dintorni dell utente

34 SmartApp Salerno: Ricerca automatica Google POI (1) Ricerca Google POI Scelta centro e raggio della ricerca Scelta categoria di interesse POI della categoria scelta trovati Possibilità di visualizzare i POI trovati come lista o su mappa

35 SmartApp Salerno: Ricerca automatica Google POI (2) Lista POI trovati POI trovati su mappa

36 SmartApp Salerno: Condivisione POI visitati Una volta raggiunto un POI, è possibile salvarlo e aggiungerlo in una lista personale, che può essere condivisa su Facebook, Twitter e WhatsApp. Condivisione dei POI visitati sui social network

37 SmartApp Salerno: Lettore QR code L'utente registrato può avviare il lettore di QR Code, situati prevalentemente in ambienti indoor, per ottenere ulteriori servizi/contenuti. ATTENZIONE: questi codici possono essere letti solo attraverso l'applicazione SmartApp! Utilizzando altri lettori, infatti, l'utente visualizzerà un messaggio che lo invita a scaricare l'app "SmartApp Salerno per i Beni Culturali" per accedere alle informazioni. Inoltre, l'app SmartApp è abilitata solo alla lettura dei QR Code creati appositamente per i punti di interesse inseriti nel sistema. Schermata di selezione del QR Code Reader dal menu

38 SmartApp Salerno: Alcune delle ulteriori funzionalità Tutorial Multilingua Link a meteo e notizie di Salerno

39 SmartApp Salerno: Gestore App (1) Problema: Inserire e gestire i dati fruibili lato App. Soluzione: Utilizzare una piattaforma lato Back-end. Il gestore dell app è stato realizzato con l obiettivo di ottenere un elevata usabilità ed una maggiore efficienza per popolare la base di dati del sistema. In particolare, il back-end consente la gestione dei punti di interesse, dei servizi e degli utenti. Relativamente ad un POI, si può effettuare una ricerca manuale mediante nome o indirizzo, una ricerca sulla base degli interessi delimitando una zona geografica su mappa oppure un inserimento manuale direttamente su mappa. Nei primi due casi, è stata realizzata un integrazione con Google Maps ed in particolare una mappatura tra gli interessi scelti nell app con i tipi di Google (una volta individuato un POI, è possibile inserirlo direttamente nel nostro sistema).

40 SmartApp Salerno: Gestore App (2) Selezione degli interessi e dell area geografica su cui effettuare una ricerca dei POI (mediante Google) Risultato della ricerca per interessi su un area delimitata

41 SmartApp Salerno: Gestore App (3) Visualizzazione delle aree (in blu) e dei POI (in rosa) presenti nell App mediante l utilizzo del back-end E possibile, infine, associare dei servizi ad un POI presente nel database e visualizzare una lista degli utenti registrati.

42 SmartApp Salerno: Ulteriori informazioni App ibrida sviluppata per Android e ios, disponibile sui relativi Store. Lingue disponibili: Italiano Inglese Work in progress StoryTelling Apprendimento automatico

43 SmartApp Salerno: Curiosità L evoluzione di SmartApp: da Apache Cordova e Jquery Mobile a Ionic Framework Home (prima) Home (dopo)

44 SmartApp Salerno: Curiosità L evoluzione di SmartApp: da Apache Cordova e Jquery Mobile a Ionic Framework Menu laterale Sezione Contatti Impostazioni

45 SmartApp Salerno: Curiosità L evoluzione di SmartApp: da Apache Cordova e Jquery Mobile a Ionic Framework Login Registrazione

46 SmartApp Salerno: Curiosità L evoluzione di SmartApp: da Apache Cordova e Jquery Mobile a Ionic Framework Notifica di un POI trovato Approfondimento di un POI

47 SmartApp Salerno: Curiosità L evoluzione di SmartApp: da Apache Cordova e Jquery Mobile a Ionic Framework POI su mappa POI intorno

48 SmartApp Salerno: CONTATTI Colace Francesco De Santo Massimo Greco Luca Lemma Saverio Lombardi Marco SITO WEB PAGINA FACEBOOK LINK PLAY STORE =com.ionicframework.smartappsalerno &hl=it LINK APP STORE

49 Uno sguardo a IONIC: Perché Ionic? Ionic è un framework che consente di realizzare App ibride. Come gran parte di questi framework utilizza Apache Cordova (PhoneGap) per interagire con le API della piattaforma specifica. DOMANDA N.1: Quindi, se si tratta dell ennesimo framework HTML5, cosa ha di tanto speciale? Per quale motivo dovremmo preferirlo agli altri? 1. La prima risposta è che Ionic promette performance mai viste, sfruttando la leggerezza del framework, minima manipolazione del DOM e accelerazione Hardware. 2. Un altro aspetto che lo contraddistingue è che si tratta di un framework Angular friendly, ovvero studiato appositamente per essere utilizzato insieme ad AngularJS, il potentissimo frontend framework di Google che sta guadagnando sempre più consensi fra gli sviluppatori. DOMANDA N.2: Perché non abbiamo parlato subito di Ionic? 1. La conoscenza di AngularJS è un requisito importante per sfruttare al meglio questo framework.

50 IONIC: il Bootstrap per le applicazioni ibride Advanced HTML5 Hybrid Mobile App Framework Ionic è un framework che consente di sfruttare al meglio le tecnologie Web per creare applicazioni mobile con look and feel simile a quelle native* e in questo ambito si rivela tra le soluzioni di maggior successo. (*) Come abbiamo già detto, uno dei problemi principali delle applicazioni Web e ibride è la mancata o difficile integrazione dell aspetto grafico di un app con il layout della piattaforma ospite. Il risultato può essere un aspetto totalmente difforme da quello atteso in una certa piattaforma mobile. I loro autori hanno raccolto le migliori best practice per lo sviluppo di interfacce mobile con tecnologie Web e le hanno codificate in questo framework, evitando quindi che ogni sviluppatore riparta da zero nello sviluppo dell interfaccia di una nuova applicazione.

51 IONIC: Punti di forza Performance e reattività Fra gli aspetti molto importanti nello sviluppo di applicazioni mobile vi sono le performance, la velocità e la reattività del prodotto finale. Ionic è costruito per garantire alte prestazioni e reattività sui dispositivi mobili di ultima generazione. Il framework elimina la necessità della modifica diretta del DOM ed, inoltre, rimuove completamente il bisogno di usare jquery o altre librerie di terze parti per la creazione di animazioni e transizioni. Grazie al supporto dell accelerazione grafica hardware, Ionic permette di creare applicazioni che in maniera molto fluida ed apprezzabile eseguono animazioni grafiche, rendendo molto gradevole l esperienza d uso dell utente. Combinazione perfetta con AngularJS Ionic utilizza AngularJS per la gestione della business logic dell applicazione. Unendo le potenzialità offerte da AngularJS con le ricche funzionalità grafiche messe a disposizione da Ionic in ambito mobile, si ottiene come risultato finale uno degli strumenti più adatti alla creazione di applicazioni mobili. Orientamento nativo Le componenti grafiche di Ionic sono state pensate e create per assomigliare il più possibile a quelle native delle piattaforme mobili, permettendo, così, di dare all applicazione un look&feel molto simile a quello di un applicazione nativa. Inoltre, tutte le componenti fornite da Ionic permettono al programmatore di non doversi preoccupare dell aspetto che avranno sui vari dispositivi mobili, in quanto sono progettate per adattarsi al meglio alle varie dimensione dei display. Command Line-Interface (CLI) dedicata Ionic permette di eseguire numerose funzioni attraverso la digitazione di semplici comandi nella CLI dedicata. Operazioni come la creazione di un nuovo progetto, l anteprima dell applicazione nel browser o la compilazione di un progetto già esistente vengono effettuate da riga di comando.

52 IONIC: AngularJS (1) AngularJS è un framework Javascript per lo sviluppo di applicazioni web lato client. Se, da un lato, esalta l approccio dichiarativo dell HTML nella definizione dell interfaccia grafica, dall altro fornisce strumenti per la costruzione di un architettura modulare della logica applicativa. Angular fornisce tutto quanto occorre per creare applicazioni moderne che sfruttano le più recenti tecnologie, come le Single Page Application, cioè applicazioni le cui risorse vengono caricate dinamicamente su richiesta, senza la necessità di caricare l intera pagina. Tra le principali funzionalità di cui dispone il framework si hanno: supporto al pattern MVC e conseguente separazione delle competenze; two-way data binding*; direttive. (*) Con il termine data binding si intende la sincronizzazione automatica dei dati tra i componenti del model e della view. Il modo con cui Angular implementa il data binding fa sì che ogni modifica almodello dei dati si rifletta automaticamente sulla view, e viceversa (da qui la terminologia two way data binding ).

53 IONIC: AngularJS (2) Le principali componenti che caratterizzano il framework sono: Modules: si può pensare ad un modulo come ad un contenitore per le differenti componenti che costituiscono l applicazione. L utilizzo dei moduli permette di modularizzare l applicazione, gestendo in maniera più semplice le dipendenze ed aiutando nell inserimento di librerie esterne oltre che nella riusabilità delle parti. Services: i services danno un implementazione ai meccanismi di organizzazione, reperimento e condivisione di dati e condivisione di classi tra i componenti dell applicazione. Controllers: gestiscono le operazioni e la logica applicativa delle pagine. Directives: sono dei marcatori nell HTML utilizzati nelle view; permettono in fase di compilazione di attribuire un diverso comportamento all elemento o di trasformarlo. Filters: filtrano i dati provenienti dal model direttamente nella view, prendendo in input un array e fornendo in output un sottoinsieme di elementi dell array di partenza.

54 IONIC: ngcordova Si tratta di una serie di servizi AngularJS che wrappano le chiamate al dispositivo fatte da Cordova o dai suoi plugin. Ad esempio, il service $cordovacamera permette di utilizzare la fotocamera del cellulare con una sisntassi alla Angular Way. Una cosa interessante da notare è che ngcordova non è in alcun modo legato all utilizzo di Ionic. Potete infatti utilizzarlo in un applicazione Cordova+AngularJS la quale però non prevede la presenza di Ionic. ngcordova si propone quindi di agevolare quindi le attività di build, test e deploy delle applicazioni sviluppate con Cordova/PhoneGap ed AngularJS.

55 IONIC: Impostare l Ambiente di Sviluppo Scaricare e installare Node.js Da terminale: npm install -g cordova ionic Con questo passaggio installiamo Ionic e relative dipendenze (tra cui Cordova).

56 IONIC: Primi passi Ionic permette di installare alcuni modelli di layout basici al fine di velocizzare lo sviluppo. Ecco un elenco con preview: ionic start myapp blank --> Versione vuota ionic start myapp tabs --> Versione con tab ionic start myapp sidemenu --> Versione con slidemenu cd myapp ionic platform add android ionic build android / ionic emulate android

57 IONIC: Test nel browser e Debug Per visualizzare l applicazione all interno di un browser per valutare l impatto grafico, basta lanciare il comando: ionic serve N.B. La visualizzazione all interno di un browser è molto comoda e rapida, e rappresenta un approccio valido per valutare immediatamente l effetto delle nostre modifiche sul codice dell applicazione. Tanto più che le modifiche salvate sui file sorgente vengono immediatamente caricate e mostrate sul browser senza il nostro intervento. Come accennato in precedenza Ionic si basa su Cordova, quindi la vostra applicazione gira all interno di una WebView. Questo fa sì che il debug di queste applicazioni sia estremamente semplice. Basta infatti collegare il vostro dispositivo, lanciare l applicazione e aprire il browser (Chrome per Android e Safari per ios) attivando la modalità inspect. Su Chrome ad esempio basta visitare l URL chrome://inspect/#devices, dopo aver abilitato il debug USB sul vostro dispositivo, e vi troverete davanti ad una schermata come la seguente: Cliccando appunto su inspect apriremo il Developer Tools di Chrome, il quale però punterà alla WebView della nostra app. Procedura del tutto analoga è attiva su Safari per i dispositivi ios.

58 IONIC: Debug

59 IONIC: Struttura App Ecco il contenuto della cartella myapp creata in seguito all esecuzione del comando: ionic start myapp Oltre ad alcuni file e cartelle di configurazione di Cordova, troviamo alcuni elementi specifici di Ionic. In particolare abbiamo: il file ionic.project che contiene la configurazione di Ionic per il progetto corrente, la cartella scss che contiene il codice SASS per la generazione dei CSS, la cartella www che conterrà il codice HTML, JavaScript, CSS e tutto l occorrente per definire la nostra app ibrida. N.B. Quando avremo una maggiore conoscenza di Ionic potremo modificare questi file con il nostro editor preferito.

60 IONIC: Creazione icone e splash screen Come tutti i programmatori mobile sanno, creare icone e splash screen per ogni risoluzione/form factor può essere un operazione particolarmente noiosa. Con Ionic, è presente una comoda utility che fa questo lavoro al posto vostro! Basta lanciare il comando: ionic resources Ionic invierà le immagini ad un server che si occuperà della conversione delle immagini. Una volta completata l operazione, il sistema aggiornerà anche autonomamente il file config.xml in modo che l applicazione utilizzi le immagini appena generate.

61 IONIC: Ionic Creator Ionic Creator è un editor WYSIWYG (What You See Is What You Get - "quello che vedi è quello che è") Web che vi permette di creare velocemente degli stub per le vostre applicazioni. La cosa interessante è che in pochissimi secondi potete avere l applicazione funzionante sul vostro device. Il sistema infatti assegna al vostro progetto un id univoco e potete scaricare e lanciare il progetto con il seguente script. La possibilità di vedere la vostra applicazione live con il tempo in cui di solito si realizza un mockup fa un certo effetto, e probabilmente farà effetto anche ad un eventuale cliente/fornitore. ionic start MyIonicApp creator:#idionic cd MyIonicApp ionic run android

62 IONIC: Documentazione Sulla documentazione ufficiale si può dare uno sguardo al gran numero di widget e utility di UI che avete a disposizione: liste, forms, cards, bottoni, tabs, icone, colori e così via. Nella sezione Javascript invece troverete tutto il necessario a gestire l interazione con l utente, quindi gestures, modal, spinners, navigazione tra le view e molto altro. CSS Components: Javascript:

63 IONIC: Conclusioni Quello che il team di Ionic sta cercando di fare non è semplicemente un framework per costruire UI, ma un vero e proprio ecosistema che aiuterà gli sviluppatori dalla creazione dell app fino alla sua pubblicazione sugli store. DOMANDA: Quindi, conviene imparare a lavorare con Ionic? RISPOSTA: Perché no, è ottimo e promette molto bene! Il consiglio migliore però è di consultare comunque tutti gli altri framework per trovare quello che piu si adatta al vostro stile, alle vostre esigenze.

64 Domande?

65 Grazie per l attenzione!