[DEV] Tutorial PhoneGap Android: Hello World ed introduzione alla libreria

Pubblicato da Mauro Rocco il feb 12, 2011 in Tutorial | 1 commento

Tweet

Oggi voglio introdurvi PhoneGap, una libreria con altissimo potenziale ed in forte sviluppo.
L’idea di base è semplice e allettante: scrivere un solo codice sorgente che giri senza cambiare una virgola sulle principali piattaforme mobile, per di più utilizzando HTML/CSS e Javascript.
Certo, ci sono dei limiti alla portabilità e alla funzionalità del framework, ma questo è comunque normale per un progetto in piena crescita.

Anche per tale ragione, gli sviluppatori hanno implementato un sistema di plugin che permette di sviluppare funzionalità particolari in codice nativo, nel caso di Android in java, ed utilizzarli con chiamate javascript.
In futuro approfondiremo meglio la creazione di plugin phonegap per android, ora passiamo a creare il nostro Hello World.

Questo tutorial è rivolto a chi abbia già un’ infarinatura di android (eseguito con successo il primo HelloWorld Android) e quindi do per scontato che sul vostro PC abbiate già l’android SDK e l’ADT plugin per Eclipse.
Prima di iniziare scaricate l’ultima versione di phonegap dal sito ufficiale e mettetela da parte, in seguito naturalmente ci servirà.

Aprite Eclipse e  create un nuovo progetto Android

Ora nella root del progetto create una directory libs e nella cartella assets una directory www.

Copiate il file phonegap.js che trovate nella cartella android del framework nella directory assets/www e il file phonegap.jar nella cartella /libs.

Prima di proseguire dobbiamo permettere ad eclipse di conoscere il package phonegap, quindi aggiungiamo alla build path del nostro progetto il file phonegap.jar, in questo modo eclipse non ci darà errore quando importeremo il package phonegap.

Fatto ciò dobbiamo apportare alcuni aggiustamenti alla nostra main class del progetto android, infatti essa dovrà estendere la classe DroidGap invece di Activity e chiamare il metodo loadUrl invece di setContextView.
Il codice sorgente finale della nostra activity sarà come il seguente: se anche nel vostro progetto avete chiamato la classe principale App potete fare copia e incola .

package con.nexuslab.phonegap;

import android.os.Bundle;
import com.phonegap.*;

public class App extends DroidGap {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 super.loadUrl("file:///android_asset/www/index.html");
 }
}

Ora modifichiamo il file AndroidManifest.xml aggiungendo i seguenti permessi

<supports-screens
 android:largeScreens="true"
 android:normalScreens="true"
 android:smallScreens="true"
 android:resizeable="true"
 android:anyDensity="true"
 />
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.VIBRATE" />
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
 <uses-permission android:name="android.permission.READ_PHONE_STATE" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.RECEIVE_SMS" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.READ_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Aggiungiamo anche l’attributo android:configChanges=”orientation|keyboardHidden” nel tag activity della nostra app, il nostro AndroidManifest completo dovrebbe essere simile al seguente.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="con.nexuslab.phonegap"
 android:versionCode="1"
 android:versionName="1.0">

 <supports-screens
 android:largeScreens="true"
 android:normalScreens="true"
 android:smallScreens="true"
 android:resizeable="true"
 android:anyDensity="true"
 />
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.VIBRATE" />
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
 <uses-permission android:name="android.permission.READ_PHONE_STATE" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.RECEIVE_SMS" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.READ_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

 <application android:icon="@drawable/icon" android:label="@string/app_name">
 <activity android:name=".App"
 android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>

 </application>
</manifest>

Bene ora non resta che creare un file chiamato index.html nella cartella assets/www con il seguente contenuto

<!DOCTYPE HTML>
<html>
<head>
<title>La mia pria app PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello Nexus Lab</h1>
</body>
</html>

Ora non dovete fare altro che lanciare la vostra applicazione android come fate di solito, Run as -> Android Application ed il risultato dovrebbe essere simile al seguente.

Bene, ora potete includere CSS e creare delle belle pagine usando tutte le potenzialità dei CSS3 (sfumature,bordi arrotondati).
Ricordate che la vostra app andrà su device con schermi diversi, quindi cercate sempre di non utilizzare i pixel ma dimensioni relative, come gli “em” per la dimensione dei font e le percentuali per gli elementi HTML.
Nel prossimo tutorial approfondiremo le funzionalità di phonegap cominciando a scrivere un pò di javascript.
Per ora potete approfondire consultando la documentazione ufficiale della libreria http://www.phonegap.com/docs

In caso di domande o problemi vi prego di utilizzare l’apposita sezione nel forum, incollare codice nei commenti del blog non è la soluzione migliore.

Alla prossima settimana