Workshop AngularJs, Cordova, Ionic - Politecnico di Milano

Gabriele GaggiBrain-Sys SrlGabriele.Gaggi@Brain-Sys.it@GabrieleGaggiwww.Brain-Sys.it

github.com/gaggiga

slideshare.net/GabrieleGaggi

@OverNetE

www.wpc2015.it

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

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

Non focalizzarsi su una sola piattaforma!

Blackbarry è passato dall’essere il più diffuso, alla quasi completa scomparsa!

Cross-platform: la soluzione al problema?

Apache CordovaLa soluzione per il riutilizzo del codice

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

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.

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.

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.

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.

Un passo indietro: Applicazioni native

• Specificamente create per ogni piattaforma• Pieno controllo delle caratteristiche del device su cui gireranno• Utilizzo delle notifiche• Funzionameno offline

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

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

Come funziona

Sistema operativo

Api Native

Web View Native

Html5 Css3 Javascript

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.

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

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).

AngularJsPer estendere il vocabolario

HTML

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.

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

Model View Controller (MVC)

Controller

ViewModel

Model View Controller (MVC)

????

Presentazione

Dati & Logica

Model View Controller (MVC)

Il controller non deve occuparsi di troppe cose, deve occuparsi del caricamento del corretto model e della corretta view.

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

RiassumendoImplementa 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

Create mobile apps with the web technologies you

love

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.

Cos’è?

Ionic

AngularJs Cordova

Cos’è?

Tool per velocizzare lo sviluppo

Stili CSS specificatamente pensati per il mobile

API Javascriptcontrollers e servizi utili

Un font contenentepiù di 500 icone

Componenti Html5dedicati al mondo del mobile

Tool per velocizzare lo sviluppostart – 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

IONIC

Stili CSS specificatamente pensati per il mobile

Un font contenente più di 500 icone

Componenti Html5 dedicati al mondo del mobile

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

Gabriele GaggiBrain-Sys SrlGabriele.Gaggi@Brain-Sys.it@GabrieleGaggiwww.Brain-Sys.it

Slide

slideshare.net/GabrieleGaggi

Repository GitHub

github.com/gaggiga