sviluppo di app cross-platform con cordova e html5
TRANSCRIPT
Gabriele Gaggi
Brain-Sys Srl
@GabrieleGaggi
www.Brain-Sys.it
Sviluppo di App cross-platform
con Cordova e HTML5
Il problema che vogliamo risolvere
Creare App mobile native utilizzando l’approccio "Write once, run anywhere" (WORA)
Riutilizzare le conoscenze e l’esperienza in ambito web e glistrumenti di sviluppo che già conosciamo (Visual Studio)
ponzi ponzi po po po
Una soluzione: Windows Universal App
Universal App: HTML5 CSS3 Javascript (WinJS)
Una soluzione: Windows Universal App
App native con le medesime prestazione di App scritte in C#
Vedasi le slide del Webinar «Sviluppo di App Windows Universal» tenuto da Alessandro Scardova: http://www.slideshare.net/ascardova
E il resto del mondo?
Apache Cordova: Cos’è
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.
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.
Apache Cordova: Cos’è
Non è un’applicazione nativa…
Non è un’applicazione Web…
E’ un’applicazione Ibrida!
Apache Cordova: Cos’è
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.
iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian.
Apache Cordova: 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.
Apache Cordova: ma quanto mi costi?
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.
Fantastico… e Visual Studio?
Visual Studio Tools for Apache Cordova (CTP3)
http://www.visualstudio.com/en-us/explore/cordova-vs.aspx
Funziona esclusivamente con Visual Studio 2013 Update 4
….preparatevi ad avere pazienza…
….tanta pazienza…
Fantastico… e Visual Studio?
….veramente tanta pazienza…
Visual Studio Tools for Apache Cordova:
Installazione
Cosa viene installato:
Joyent Node.js
Framework javascript event-driven, consente a Visual Studio
Di integrarsi con l’interfaccia a riga di comando (CLI) di
Cordova e dell’emulatore Apache Ripple.
Google Chrome
Browser Web, necessario per eseguire l’emulatore Apache
Ripple per iOs ed Android.
Git Command Line Tools
Necessario se si desidera aggiungere manualmente indirizzi a specifici plugin
Cordova
Apache Ant
Software per l’automazione dei processi di Build, necessario per la build di
Android.
Oracle Java 7
JDK Java, necessario per la build di Android.
Visual Studio Tools for Apache Cordova:
Installazione
Android SDK
L’SDK di Android, necessario per la build di Android.
Apple iTunes
Necessario per il deploy dell’app ad un device iOS connesso al proprio PC.
SQLite
Necessario per poter aggiungere un motore di database alle applicazioni
Windows.
WebSocket4Net
Necessario esclusivamente se si sviluppa su un pc dotato del sistema operativo
Windows 7.
Visual Studio Tools for Apache Cordova:
Installazione
L’installazione potrebbe bloccarsi (è pur sempre una CTP). In questo caso annotarsi l’elemento che ha bloccato l’installazione, interrompere con il pulsante cancel, installare l’elemento bloccante manualmente e rifar partire l’installazione escludendo l’elemento bloccante.http://msdn.microsoft.com/en-us/library/dn757054.aspx#ThirdParty
Al completamente dell’installazione riavviare il PC.
A seguito del riavvio, aprire Visual Studio, selezionare Tools, Extensions and Updates ed infine Updates, per ricercare eventuali aggiornamenti disponibili.
Alla prima build effettuata sul pc Visual Studio scaricherà ed installerà i tools Cordova.
Prima di poter eseguire l’app nel simulatore iOs o su un dispositivo iOsconnesso al pc è necessario installare l’agente remoto su un computer Mac.http://msdn.microsoft.com/en-us/library/dn771551.aspx
http://www.visualstudio.com/en-us/explore/cordova-known-issues-vs.aspx
Visual Studio Tools for Apache Cordova:
Installazione
La vita del programmatore è veramente dura…
eh si, immagino!
Demo
Impossibile non cominciare con il classico «Hello World!»
Posso utilizzare un framework JavaScript?
Cordova permette di utilizzare qualunque framework JavaScript
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).
Connessione a servizi esterni (Azure, Office 365)
Visual Studio Services Manager per servizi connessi permette
l’integrazione di servizi Microsoft come gli Azure Mobile Services,
Office 365 e altri servizi nelle applicazioni sviluppate con Cordova.
Testare la propria applicazione
Il debug delle applicazioni scritte con il framework Cordova in Visual
Studio avviene esattamente come con le altre tipologie di progetto
che gestiamo normalmente in Visual Studio.
Possiamo effettuare il debug mentre le app girano o nell’emulatore
o su un device reale connesso al pc.
Predisporre i pacchetti da pubblicare
Attraverso il file config.xml possiamo impostare i diversi settaggi per
poter pubblicare la nostra applicazione.
I diversi asset dovranno essere inseriti nella cartella res nelle
diverse sottocartelle
Pubblicare l’app nei diversi store
Prendere i package generati all’interno della folder bin e…
sottometterli nei diversi store!
Q&A
Se avete domande fatele ora…
…o scrivetemi una mail!
Link utili
Punto di partenza:
http://www.visualstudio.com/en-us/explore/cordova-vs.aspx
Pagina ufficiale di Apache Cordova:
http://cordova.apache.org/
Pagina ufficiale di PhoneGap:
http://phonegap.com/
Pagina relativa a WinJS:
https://github.com/winjs/winjs
Issues installing iTunes for Windows:
http://support.apple.com/en-us/HT201668
Sito ufficiale Len:
http://lenformazione.it/
Sito ufficiale Mind Flower:
http://www.mindflower.it/