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.» Da Wikipedia, l'enciclopedia libera.
In pratica le applicazioni 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 jquery-mobile .

In questo articolo vedremo come realizzare un'applicazione per Android.

Per prima cosa è necessario installare 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 :

#Android SDK
PATH=$PATH:[Mio percorso SDK]/android-sdk-linux/tools

Installare anche l'interprete Nodejs .

Procediamo con l'installazione di Phonegap da terminale:

sudo npm install -g phonegap

Inserire sudo solo su sistemi unix.

Se il processo di installazione è andato a buon fine è possibile creare lo scheletro della nostra applicazione con il comando:

phonegap create my-app 

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 .

Esistono vari modi per testare l'applicazione, eccone alcuni.

Installare Phonegap Developer App nel nostro dispositivo mobile e poi impartire nel computer il seguente comando:

phonegap serve listening localhost:3000

che lancera' un server sul nostro pc al quale ci collegheremo con Phonegap Developer App .

In questo caso collegare il dispositivo al computer tramite cavo usb e abilitare la modalita' debug dal dispositivo. In seguito impartire il seguente comando:

cordova run android

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

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:

$ phonegap remote build android

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:

1. Installare nella nostra app i plugin di Phonegap per i vari tipi di permessi;
2. Inserire in config.xml le direttive esatte per il caricamento dei plugins (se richieste dal plugin);
3. Inserire (nel caso di Android) le direttive per i permessi in AndroidManifest.xml;

Entrare nella root della nostra applicazione e lanciare il comando:

cordova plugin add org.apache.cordova.[PLUGIN]

dove al [PLUGIN] va messo il plugin da includere.

fonte : developer.telerik.com

Se il plugin richiede alcune direttive di configurazione, si aggiungeranno in config.xml .Un esempio di direttive possono essere le seguenti:

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

Aggiungere le direttive che ci servono seguendo questa guida: Elenco permessi includibili in AndroidManifest.xml

index.html

<!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>

pag1.html

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

dialog.html

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