Cordova è la chiave di volta che consente agli sviluppatori web un ingresso rapido ed indolore negli store delle diverse piattaforme mobili. Vediamo come utilizzare questa chiave di volta sfruttando la potenza e semplicità del framework MVC di Google AngularJs ed utilizzando come collante il framework Ionic per ottenere rapidamente applicazioni performanti con un look and feel analogo alle app native.

1. Gabriele Gaggi
Brain-Sys Srl
Gabriele.Gaggi@Brain-Sys.it
@GabrieleGaggi
www.Brain-Sys.it
github.com/gaggiga
slideshare.net/GabrieleGaggi

2. @OverNetE

3. www.wpc2015.it

4. Il mercato del mobile:
un’opportunità in continua mutazione

5. Smartphone sempre più alla portata di tutti
• Diminuzione dei costi
• Aumento delle potenzialità
• Geolocalizzazione
• Giroscopio, accelerometro, ect
• Batteria
• Tecnologie di connettività (3G, 4G)
• Tempi di produzione più brevi

7. Non focalizzarsi su una sola piattaforma!
Blackbarry è passato
dall’essere il più diffuso, alla
quasi completa scomparsa!

8. Cross-platform: la soluzione al problema?

10. Apache Cordova
La soluzione per il riutilizzo del codice

11. Cos’è Cordova?
Creare App mobile native utilizzando l’approccio "Write once, run
anywhere" (WORA)
Riutilizzare le conoscenze e l’esperienza in ambito web e gli strumenti
di sviluppo che già conosciamo

12. Cos’è Cordova?
Da Wikipedia:
Cordova (in spagnolo Córdoba e in latino Cordŭba) è un comune
spagnolo di 328.841 abitanti situato nella comunità
autonoma dell'Andalusia, sulla riva delGuadalquivir e ai piedi
della Sierra Morena.

13. Cos’è Cordova?
Dal sito ufficiale cordova.apache.org:
Apache Cordova is a set of device APIs that allow a mobile app
developer to access native device function such as the camera or
accelerometer from JavaScript. Combined with a UI framework such as
jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a
smartphone app to be developed with just HTML, CSS, and JavaScript.

14. Cos’è Cordova?
Sempre dal sito ufficiale cordova.apache.org:
Cordova provides a set of uniform JavaScript libraries that can be
invoked, with device-specific native backing code for those JavaScript
libraries. Cordova is available for the following platforms: iOS, Android,
Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian.

15. Un po’ di storia
• Pensato e realizzato da Nitobi ad un evento iPhoneDevCamp con il nome di
PhoneGap.
• Nel 2009 vince il People's Choice Award alla conferenza O'Reilly Media's
2009 Web 2.0.
• Viene ufficialmente approvato da Apple nel 2010.
• Nitobi viene acquisita da Adobe nell’ottobre del 2011.
• Il codice di PhoneGap entra quindi a far parte della Apache Software
Foundation inizialmente con il nome di Apache Callback e successivamente
Apache Cordova.
• Adobe continua a distribuire la sua Build con il nome di PhoneGap.

16. Un passo indietro: Applicazioni native
• Specificamente create per ogni piattaforma
• Pieno controllo delle caratteristiche del device su cui gireranno
• Utilizzo delle notifiche
• Funzionameno offline

17. Un passo indietro: siti mobili
• Sono siti che presentano un look and feel analogo a quello delle
applicazioni native
• Vengono eseguite all’interno del browser, quindi hanno un accesso
molto limitato alle risorse del device
• Tipicamente sfruttano le funzionalità avanzate di Html5

18. Un passo indietro: Applicazioni ibride
• Appaiono all’utente come applicazioni native presenti nello store e
permettono l’interazione con le caratteristiche del dispositivo
• Utilizzano il concetto delle Web Application girando all’interno di
specifiche web view
• Sono cross platform
• Esistono diversi tools per realizzarle
• Utilizzo delle notifiche
• Funzionameno offline

19. Come funziona
Sistema operativo
Api Native
Web View Native
Html5 Css3 Javascript

20. Licenza di Apache Cordova
• Apache Cordova graduated in October 2012 as a top level project
within the Apache Software Foundation (ASF). Through the ASF,
future Cordova development will ensure open stewardship of the
project. It will always remain free and open source under the Apache
License, Version 2.0.
• http://www.apache.org/licenses/LICENSE-2.0.txt
• Usi commerciali ammessi, bisogna solo includere una copia della
licenza e mostrarla nella sezione «copyright» del proprio programma.

21. Cordova non è un framework
• Quindi è possibile utilizzare i framework che preferiamo

22. Plugin per la gestione delle funzionalità native
• Una delle caratteristiche principali di Cordova è la possibilità di
utilizzare le funzionalità native dei diversi device attraverso specifici
plugin (es. Geolocalizzazione, batteria).

23. AngularJs
Per estendere il vocabolario HTML

24. Cos’è?
AngularJS è un framework JavaScript, patrocinato da Google, utile a
semplificare la realizzazione di applicazioni Web single page: favorisce
un approccio dichiarativo allo sviluppo client-side, migliore per la
creazione di interfacce utente, laddove l’approccio imperativo è ideale
per realizzare la logica applicativa.
AngularJS si ispira al pattern MVC, come altri framework analoghi quali
Knockout o Ember.js. Ma rispetto ai diretti concorrenti, questo
framework è in grado di ridurre in maniera considerevole il codice
necessario a realizzare applicazioni HTML/JavaScript.

25. Si ma quindi?
E’ un framework javascript open-source per applicazioni web single
page.
Favorisce un approccio dichiarativo.
Prende ispirazione dal pattern MVC.

26. Model View Controller (MVC)
Controller
ViewModel

27. Model View Controller (MVC)
????
PresentazioneDati & Logica

28. Model View Controller (MVC)
Il controller non deve occuparsi di troppe cose, deve
occuparsi del caricamento del corretto model e della
corretta view.

29. Storia
• Iniziato a sviluppare nel 2009
• Vengono gestite due versioni:
• La 1.x.x:
• 1.3.15 rilasciata a marzo 2015
• 1.4.7 rilasciata a settembre 2015
• La 2.0:
• In developer preview da aprile 2015
• Più veloce della 1
• Non retrocompatibile
• Sviluppata da Google in collaborazione con Microsoft usando Typescript

30. Riassumendo
Implementa il pattern MVC per separare la presentazione, I dati e la
logica applicative. Utilizza la dependency injection.
• Rende il codice più chiaro
• Lo semplifica
• Lo rende più lineare
• Migliora le dipendenze
• Rende i componenti riutilizzabili

31. Create mobile apps
with the web technologies you love

32. Cos’è?
Ionic is a complete open-source SDK for hybrid mobile app
development. Built on top of AngularJS and Apache Cordova, Ionic
provides tools and services for developing hybrid mobile apps using
Web technologies like CSS, HTML5, and Sass. Apps can be built with
these Web technologies and then distributed through native app stores
to be installed on devices by leveraging Cordova. Ionic was created by
Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013, and is
used by software developers around the World.

33. Cos’è?
Ionic
AngularJs Cordova

34. Cos’è?
Tool per
velocizzare lo sviluppo
Stili CSS specificatamente
pensati per il mobile
API Javascript
controllers e servizi utili
Un font contenente
più di 500 icone
Componenti Html5
dedicati al mondo del mobile

35. Tool per velocizzare lo sviluppo
start – Creazione progetto
serve – Esecuzione progetto su server locale
platform – Configurazione delle piattaforme di destinazione
build – Compilazione per specifica piattaforma
emulate – Emulazione nei simulatori delle piattaforme
run – Esecuzione su un device collegato al pc
I
O
N
I
C

36. Stili CSS specificatamente pensati per il mobile

37. Un font contenente più di 500 icone

38. Componenti Html5 dedicati al mondo del
mobile

39. Link utili
• Per iniziare con Ionic:
http://ionicframework.com/docs/guide/
• Visual Studio Code:
https://code.visualstudio.com/Docs
• Mobile Hybrid Apps with VS Code and Ionic:
http://blogs.msdn.com/b/vscode/archive/2015/06/05/mobile-hybrid-apps-with-vs-code-and-ionic.aspx
• Node, Grunt, Bower and Yeoman - A Modern web dev's Toolkit:
http://juristr.com/blog/2014/08/node-grunt-yeoman-bower/
• Get Up and Running With Node and Visual Studio:
http://www.johnpapa.net/get-up-and-running-with-node-and-visual-studio/
• Angular Style Guide:
https://github.com/johnpapa/angular-styleguide
• Esempio Angular:
https://github.com/johnpapa/ng-demos/tree/master/modular/src/client

40. Gabriele Gaggi
Brain-Sys Srl
Gabriele.Gaggi@Brain-Sys.it
@GabrieleGaggi
www.Brain-Sys.it
Slide
slideshare.net/GabrieleGaggi
Repository GitHub
github.com/gaggiga