Workshop AngularJs, Cordova, Ionic - Politecnico di Milano
-
Upload
gabriele-gaggi -
Category
Software
-
view
503 -
download
3
Transcript of Workshop AngularJs, Cordova, Ionic - Politecnico di Milano
Gabriele GaggiBrain-Sys [email protected]@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 [email protected]@GabrieleGaggiwww.Brain-Sys.it
Slide
slideshare.net/GabrieleGaggi
Repository GitHub
github.com/gaggiga