PhoneGap 3.3 prepariamo l’ambiente di sviluppo

Phonegap è ormai maturo.
Per usarlo però serve un programmatore altrettanto maturo e un po’ smanettone, altrimenti non si arriva da nessuna parte. In questo articolo impareremo a utilizzare Phonegap su Windows per produrre applicazioni per Android.
Per fare questo dobbiamo seguire rigorosamente i seguenti passi:
1. installare la JDK
2. installare Eclispe
3. installare nodejs
4. installare Phonegap
5. creare un progetto di base
6. importare il progetto in Eclipse

Eh si, dobbiamo fare tutte queste cose (almeno!).
Pronti?

1. installare la JDK

Andiamo qui, scegliamo “Accept License Agreement” e scarichiamo la versione che più ci interessa. Finito il download eseguiamo l’installazione come amministratori e seguiamo la procedura guidata. Terminata l’installazione dobbiamo verificare che le cose siano andate come previsto. Per fare questo apriamo una finestra del prompt di ms-dos e digitiamo
java -version
Il risultato deve darci la versione di java installata sulla nostra macchina.
Ecco un tipico risultato di tale comando.

2. installare Eclispe

Se e soltanto se l’installazione di java è andata a buon fine, possiamo installare Eclipse. Si, ma quale versione?
Nel 2013, finalmente, gli sviluppatori di Android hanno un ambiente già pronto e configurato, risparmiando così tempo e fatica.
Una volta arrivati sulla pagina di download ci basta cliccare su “Download the SDK”, accettare la licenza, scegliere se scaricare la piattaforma a 32 o 64 bit e… attendere! Sono circa 400MB 😀
Decomprimendo il .zip ci troveremo due cartelle e un file

• eclipse
• sdk
• SDK Manager.exe

La cartella “eclipse” conterrà l’ambiente di sviluppo il quale però non partirà se non abbiamo installato java! Ma java dovremmo averlo già installato, giusto? 🙂
Quindi possiamo lanciare Eclipse.
Per fare questo entriamo nella cartella “eclipse” ed eseguiamo il file “eclipse.exe”. Appena lanciato ci verrà chiesto dove vogliamo salvare i nostri futuri progetti. Scegliamo la cartella che conterrà tutti i nostri progetti, mettiamo la spunta in basso e premiamo “OK”
Dopo un po’, ci troveremo di fronte a qualcosa del genere.

Il sistema di sviluppo si presenta con una piccola guida per indicarci tutto quello che ci serve a iniziare lo sviluppo.
Possiamo quindi chiudere la finestra “Android IDE” e approdare sul sistema di sviluppo vero e proprio…
Per creare il nostro primo progetto Phonegap però, abbiamo bisogno di Phopnegap! Per ottenere Phonegap abbiamo bisogno di nodejs.

3. installare nodejs

Se abbiamo Google Chrome usiamo questo Browser e rechiamoci sul sito ufficiale di nodejs.
Clicchiamo su “INSTALL” e procediamo con l’installazione. Terminata l’installazione verifichiamo che sia andata a buon fine. Per fare questo apriamo un prompt di ms-dos e digitiamo
npm
Ci dovrebbe venir fuori qualcosa del genere

Bene.

4. installare Phonegap

Apriamo il prompt dei comandi e digitiamo
npm install -g phonegap
Attendiamo che abbia finito…

5. creare un progetto di base

Apriamo il prompt dei comandi e portiamoci nella cartella in cui vogliamo creare il nostro progetto e digitiamo
phonegap create my-app it.nomeazienda.nomeprogetto
in cui my-app è il nome della nostra applicazione e it.nomeazienda.nomeprogetto è il package (si può omettere).
Attendiamo che abbia finito.
Poi digitiamo
phonegap build android
e attendiamo ancora…

6. importare il progetto in Eclipse

Adesso in Eclipse dobbiamo cliccare sul bottone indicato nella seguente figura ed eseguire l’update di tutto ciò che è aggiornabile.

Dopo e soltanto dopo aver effettuato tutti gli aggiornamenti, possiamo importare il nostro progetto.
Per fare questo scegliamo “File/Import…” e poi “Android/Existing Android code Into Workspace…”. A questo punto rechiamoci nella cartella in cui abbiamo creato il nostro progetto ed entriamo nella sotto-cartella “platforms/android”. Clicchiamo su “OK”.
Eclispe ci proporrà due progetti. Dobbiamo importarli entrambi! Quindi selezioniamo entrambi i progetti e premiamo “Finish”.
A questo punto i due progetti avranno, quasi certamente, la crocetta rossa (e mica poteva essere semplice!).
Ecco cosa fare:

1. Click col destro sul progetto
2. Selezioniamo “Properties” e poi “Android”
3. Selezioniamo la API di livello maggiore (ad esempio 19)
4. Click su OK
5. Ora click sulla voce di menù “Project” e poi “Clean”