====== Introduzione a Phonegap ======
Autore: **//Fabio Di Matteo//** \\ Ultima revisione: **//10/02/2015  - 12:02//** \\ \\

«PhoneGap è un framework cross-platform mobile che consente di sviluppare delle applicazioni native attraverso l’utilizzo di tecnologie web quali HTML, CSS e JavaScript. In altre parole, PhoneGap consente di "tradurre" le web application in mobile application.» [[https://it.wikipedia.org/wiki/PhoneGap|Da Wikipedia, l'enciclopedia libera.]] \\
In pratica le applicazioni [[http://phonegap.com/|Phonegap]] sono costituite da una particolare Webview che si occupa di intercettare e tradurre istruzioni javascript in chiamate ad api di sistema. La parte grafica dell'applicazione viene affidata all'html e css . Particolare attenzione andrebbe prestata anche ad alcune librerie javascript come jquery e jquery mobile UI, le quali possono essere impiegate rispettivamente per facilitare la stesura del codice javascript e per avere a disposizione un toolkit maturo e stabile per disegnare i controlli delle interfacce grafiche in stile "mobile" . Infatti esistono molteplici tipi di controlli in  [[http://jquerymobile.com/|jquery-mobile]] . \\ \\
//In questo articolo vedremo come realizzare un'applicazione per Android.//


===== Prerequisiti =====
Per prima cosa è necessario installare [[https://developer.android.com/sdk/installing/index.html|SDK Android]]. Fatto cio' assicuriamoci di avere "in Path" l'eseguibile ''Android'' contenuto in ''Tools/'' . 

**GNU/Linux**

Aggiungere a .bashrc la seguente riga per mettere in path l'SDK :
<file>
#Android SDK
PATH=$PATH:[Mio percorso SDK]/android-sdk-linux/tools
</file>

Installare anche l'interprete [[http://nodejs.org/|Nodejs]] . \\

====== Installazione ======
Procediamo con l'installazione di Phonegap da terminale:
<file>sudo npm install -g phonegap</file>
//Inserire sudo solo su sistemi unix.//

====== Creiamo la nostra applicazione ======
Se il processo di installazione è andato a buon fine è possibile creare lo scheletro della nostra applicazione con il comando:
<file>phonegap create my-app </file>
dove **my-app** è il nome dell'applicazione. \\
Fatto questo verra' creata una cartella di nome **my-app** contenente una cartelle di nome **www** dentro la quale metteremo tutto il nostro codice, ovvero file html, css, javascript, immagini, sottocartelle e tutto quello che vogliamo. Il primo file che avviera' l'applicazione è di solito **index.html** .

====== Testare l'applicazione ======
Esistono vari modi per testare l'applicazione, eccone alcuni.
===== Testare l'applicazione tramite l'applicazione Phonegap Developer =====
Installare [[http://app.phonegap.com/|Phonegap Developer App]] nel nostro dispositivo mobile e poi impartire nel computer il seguente comando:
<file>phonegap serve listening localhost:3000</file>
che lancera' un server sul nostro pc al quale ci collegheremo con [[http://app.phonegap.com/|Phonegap Developer App]] .

===== Testare l'applicazione sul nostro dispositivo mobile =====
In questo caso collegare il dispositivo al computer tramite cavo usb e abilitare la modalita' debug dal dispositivo. In seguito impartire il seguente comando:
<file>cordova run android</file>
E' possibile che il comando fallisca se non abbiamo installato la versione dell'SDK supportata da Phonegap. Il problema si risolve avviando l'interfaccia grafica per gestire i pacchetti SDK Android e installando la versione giusta. (Nel mio caso api 19). 

===== Testare la nostra app su build.phonegap.com  =====
Adobe mette a disposizione anche una piattaforma in rete per le compilazioni del nostro progetto su varie dispositivi. basta registrarsi su build.phonegap.com .Basta fare l'upload della nostra cartella zippata. Per facilitare la compilazione esiste anche un comando da terminale:
<file>$ phonegap remote build android</file>

====== Configurare il progetto ======
Il file nel quale vanno messe le preferenze per la configurazione è **config.xml** .In esso sono contenute molte preferenze in formato xml, dal titolo dell'app alle iconette .
Per la configurazione del nostro progetto **va prestata particolare attenzione ai permessi** da assegnare alla nostra app. Per assegnare i permessi per i vari accessi alle api del sistema si devono sostanzialmente fare 3 cose:
  - Installare nella nostra app i plugin di Phonegap per i vari tipi di permessi;
  - Inserire in **config.xml** le direttive esatte per il caricamento dei plugins (se richieste dal plugin);
  - Inserire (nel caso di Android) le direttive per i permessi in AndroidManifest.xml;

===== Installare nella nostra app i plugin di Phonegap =====
Entrare nella root della nostra applicazione e lanciare il comando:
<file>cordova plugin add org.apache.cordova.[PLUGIN]</file>
dove al [PLUGIN] va messo il plugin da includere.

^Nome plugin     ^Comando installazione      ^Descrizione^
|battery-status|cordova plugin add org.apache.cordova.battery-status|stato batteria|
|camera|cordova plugin add org.apache.cordova.camera|accesso alla camera|
|media-capture|cordova plugin add org.apache.cordova.media-capture|cattura audio e video|
|console|cordova plugin add org.apache.cordova.console|accesso alla cnsolole|
|contacts|cordova plugin add org.apache.cordova.contacts|modifica contatti|
|cordova.device|cordova plugin add org.apache.cordova.device|dati sul modello del dispositivo|
|device-motion|cordova plugin add org.apache.cordova.device-motion|accellerometro|
|device-orientation|cordova plugin add org.apache.cordova.device-orientation|compass|
|file|cordova plugin add org.apache.cordova.file|accesso filesystem|
|file-transfer|cordova plugin add org.apache.cordova.file-transfer|trasferimento file dal file system|
|cordova.geolocation|cordova plugin add org.apache.cordova.geolocation|geolocazione|
|globalization|cordova plugin add org.apache.cordova.globalization|localizzazione|
|inappbrowser|cordova plugin add org.apache.cordova.inappbrowser|browser in app|
|keyboard|cordova plugin add org.apache.cordova.keyboard|personalizzazione tastiera(solo ios)|
|media|cordova plugin add org.apache.cordova.media|playback media|
|network-information|cordova plugin add org.apache.cordova.network-information|info sullo stato della rete|
|dialogs|cordova plugin add org.apache.cordova.dialogs|Notifiche |
|splashscreen|cordova plugin add org.apache.cordova.splashscreen|splashscreen |
|statusbar|cordova plugin add org.apache.cordova.statusbar|statusbar (solo ios) |
|vibration|cordova plugin add org.apache.cordova.vibration|controllo vibrazione|

fonte : [[http://developer.telerik.com/featured/which-core-phonegapcordova-plugins-do-i-need/|developer.telerik.com]]


===== Inserire in config.xml le direttive per il caricamento dei plugins =====
Se il plugin richiede alcune direttive di configurazione, si aggiungeranno in **config.xml** .Un esempio di direttive possono essere le seguenti:
<code xml>
<feature name="Notification">
		<param name="android-package" value="org.apache.cordova.dialogs.Notification" />
	</feature>
	<feature name="Vibration">
		<param name="android-package" value="org.apache.cordova.vibration.Vibration" />
	</feature>
</code>


===== Inserire (nel caso di Android) le direttive per i permessi in AndroidManifest.xml =====
Aggiungere le direttive che ci servono seguendo questa guida: [[programmazione:android:elenco_permessi_androidmanifest.xml]]

====== Il codice della nostra app ======
**index.html**
<code javascript >
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 	
  <head>
    <title>Test</title>
	
	
	<!--Includo jquery, jquery mobile e css -->
	<link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" /> 
	<script src="js/jquery-1.8.0.min.js"></script> 
	<script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script> 
	
    <!-- Includo Apache Cordova(il file non lo metto io, ma sara' collocato automaticamente da Phonegap) -->
    <script src="cordova.js"></script>     
	  
	<script> <!-- Apache Cordova -->
		var app = {
			// Costruttore dell'applicazione
			initialize: function() {
				this.bindEvents();
			},
			
			// Associo alcuni eventi alle mie callbacks
			bindEvents: function() {
				document.addEventListener('deviceready', this.onDeviceReady, false);
				document.addEventListener('online', this.onOnline, false);
				document.addEventListener('offline', this.onOffline, false);
			},
			
			//Alcune callbacks 
			onDeviceReady: function() {
				app.receivedEvent('deviceready');
			},
			
			onOnline: function() {
				$('#statoConnessione').html('<span style="color: green">Siamo online</span>');
			},
			onOffline: function() {
				$('#statoConnessione').html('<span style="color: red">Siamo offline</span>');
			},
			
			
			//Stampo sulla console gli eventi ricevuti
			receivedEvent: function(id) {
				console.log('Ricevuto evento: ' + id);
			}
		};
		
		//Inizializzo l'applicazione
		app.initialize();
	</script>
	
	
	
	<!--Jquery e cordova in azione -->
	<script>
		
		function captureSuccess(mediaFiles) {    
			console.log('Capture success!');
			console.log('Salvato file '+mediaFiles[0]);
		}
		
		function captureError(error) {
			var msg = 'Errore cattura foto: ' + error.code;
			navigator.notification.alert(msg, null, 'Problemi cattura foto!');
		}
		
		
		
		//Non appena la pagina è pronta
		$( document ).ready(function() {
			var c=0;
			$('#mybutton0').click(function(){ //al click incrementa una variabile
				c++;
				$('#myLabel').text('Cliccato '+ c + ' volte.');
			    });
			
			$('#exit').click(function(){ //al click esce
					navigator.app.exitApp();
				});
			$('#mybutton1').click(function(){ //fa 2 beep
					navigator.notification.beep(2);
				});
			$('#mybutton2').click(function(){ //vibra 1 secondo
					navigator.notification.vibrate(1000);
				});	
			$('#mybutton3').click(function(){ 
						console.log('Tento di scattare una foto');
						// Al click lancia l'applicazine per scattare foto (solo 1) {limit: 1},
						// al successo dell'operazione viene avviata la callback "captureSuccess"
						// e se incontra un errore viene avviata "captureError" 
						navigator.device.capture.captureImage(captureSuccess, captureError, { limit: 1, quality: 50, destinationType: Camera.DestinationType.FILE_URI });
				});	
			
			
		});
		
    </script>
    </head>
    
    <body>
		<div data-role="page" id="pag0" class="pagine"> <!-- Home page -->
			<div data-role="header" data-position="fixed"> 
				 <h1 >Prove generali</h1>
			</div>
	 
			<div data-role="content">
				<img id="myImg" src="img/logo.png"> 
				<p id="myLabel" style="font-size: 34px">Stato connessione: <span id="statoConnessione">ummm...</span></p> 
				<p><a data-role="button" href="pag1.html">Apre una pagina</a></p>
				<p><a href="dialog.html" data-role="button" data-rel="dialog" data-transition="pop">Apre popup</a> </p>
				<p><button id="mybutton0" >Conta i click</button></p>
				<p><button id="mybutton1" >Beep, 2 volte</button></p>
				<p><button id="mybutton2" >Vibra</button></p>
				<p><button id="mybutton3" >Scatta una foto</button></p>
				<p>
					<h2>Testo libero</h2>

					Bla bla bla...in browsers that support CSS position:
					fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others),
					toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport,
					while the page content scrolls freely in between. In browsers that don't support fixed positioning,
					the toolbars will remain positioned in flow, at the top or bottom of the page. 
				</p>
				<p><button id="exit" >Esci</button></p>
			</div>
	 
			<div data-role="footer" data-position="fixed"> 
				<h4>footer</h4> 
			</div>
	</div><!-- fine prima pagina -->
	
	
		
		
		
	
    </body>
</html>


</code>

**pag1.html**
<code javascript>
<div data-role="page" id="pag1"> <!-- Seconda pagina -->
		<div data-role="header" data-position="fixed"> 
			<h1>Seconda pagina</h1> 
		</div>
	 
		<div data-role="content"> 
			<p>Questa è una pagina interna</p> 
			<p><a href="#pag0" data-role="button">Torna indietro</a></p> 
		</div>
	 
		<div data-role="footer" data-position="fixed"> 
			<h4>foooter</h4> 
		</div> <!-- Fine seconda pagina-->

</code> 

**dialog.html**
<code javascript>



<div data-role="page" id="popup">
		<div data-role="header" >
			<h1>Attenzione leggere tutto</h1>
		</div>

		
		<div data-role="content" >	
			<h2>Informazioni sul software</h2>
			<p>I have an id of "popup" on my page container and only look like a dialog because the link to me  attribute which gives me this inset look and a  attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>		
				
			<label for="mySelect">Chi sono io?</label>
			<select  id="mySelect" data-role="select">
				<option value="Pippo">Pippo</option>
				<option value="Pluto">Pluto</option>
				<option value="Fabio">Fabio</option>
			</select>
			<p><a href="" data-rel="back" data-role="button" data-inline="true" data-icon="back">Indietro</a></p>
		
		
		</div>
		
		<div data-role="footer">
			<h4>@Fabio DM</h4>
		</div>
		<script>
		
			$('#mySelect').change(function(){
				nome=$(this).val();
				$('#myLabel').text('Sei '+ nome);
			
		});
		</script>

</div><!-- /page popup -->

</code>