Workshop AngularJs, Cordova, Ionic - Politecnico di Milano
Download as PPTX, PDF1 like796 views
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.
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to Workshop AngularJs, Cordova, Ionic - Politecnico di Milano (20)
Workshop AngularJs, Cordova, Ionic - Politecnico di Milano
- 2. @OverNetE
- 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.
- 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