Creare pacchetti di applicazioni Web come applicazioni native per dispositivi mobili con PhoneGap Build

Cerca

Ultimo aggiornamento il | Valido anche per Adobe Dreamweaver CS6

PhoneGap Build è un servizio basato sul cloud che permette di compilare applicazioni Web come applicazioni native per dispositivi mobili. PhoneGap Build supporta la compilazione di applicazioni native per i seguenti sistemi operativi per dispositivi mobili:

iOS
Android
BlackBerry
webOS
Symbian
Windows Phone 8

Per ulteriori informazioni sul servizio PhoneGap Build, visitate il sito Web PhoneGap.

Per informazioni di aiuto sul servizio PhoneGap Build, consultate la documentazione di PhoneGap Build.

L'integrazione diretta di Dreamweaver con PhoneGap Build per la compilazione di applicazioni non è supportata nell'ultimo aggiornamento dell'edizione 2014 di Dreamweaver CC (ottobre 2014) e nelle versioni successive. Tuttavia, potete accedere direttamente al servizio PhoneGap Build online e utilizzare gli ultimi aggiornamenti delle funzioni per creare i pacchetti delle vostre applicazioni Web.

Utilizzare il servizio PhoneGap Build in Dreamweaver CC (ottobre 2014 e versioni successive)

Accedete al servizio PhoneGap Build. Potete continuare a utilizzare il vostro Adobe ID attuale.
Dopo l'accesso, verrete reindirizzati alla sezione “App” del sito. Caricate le risorse Web in un file ZIP contenente i file HTML, CSS e JavaScript, oppure fate riferimento a un archivio Git o SVN.

Sezione App del servizio PhoneGap Build
Il servizio PhoneGap Build compila il contenuto e crea il pacchetto nel giro di pochi minuti, quindi riceverete i collegamenti di download per tutte le piattaforme mobili.

Per assistenza nell'uso del servizio PhoneGap Build, visitate la pagina dell'assistenza o il forum della community.

Usare il servizio PhoneGap Build in Dreamweaver CC (giugno 2014)

Creare un account di servizio PhoneGap Build

Non è possibile utilizzare PhoneGap Build e Dreamweaver senza un account di servizio PhoneGap Build. Gli account sono gratuiti e semplici da configurare. Per crearne uno, visitate il sito Web PhoneGap Build.

Per rendere attivo l'account, dovrete convalidarlo mediante un messaggio e-mail di conferma.

Configurare l'ambiente di sviluppo

A seconda dei tipi di applicazioni che desiderate creare e dei dispositivi sui quali volete testarle, dovrete eseguire varie operazioni di configurazione prima di procedere alla compilazione dell'applicazione. A seconda dei casi, potrete scegliere di impostare alcune, tutte o nessuna delle seguenti opzioni:

Android SDK Se intendete provare le applicazioni Android sul computer locale utilizzando un emulatore Android, dovrete scaricare e installare Android SDK. Per istruzioni, consultate la documentazione di Android.

Una volta installato Android SDK, è necessario avviare sia l'SDK che gli AVD Manager e selezionare gli strumenti Android con i quali intendete lavorare localmente sul computer. Dreamweaver utilizza le informazioni che selezionate durante questa configurazione iniziale per compilare le impostazioni dell'emulatore Android nel pannello Servizio PhoneGap Build. Per maggiori informazioni su come specificare queste impostazioni, consultate la documentazione di Android.

IMPORTANTE: se desiderate utilizzare un emulatore Android per provare l'applicazione localmente, dovete fare in modo che l'emulatore funzioni nel modo desiderato indipendentemente da Dreamweaver prima di effettuare la prova.

webOS SDK/PDK Per provare le applicazioni webOS sul computer locale utilizzando un emulatore webOS, è necessario scaricare e installare webOS SDK/PDK.

Lettori di codici QR (Quick Response) Se desiderate trasferire facilmente il pacchetto di un'applicazione sul dispositivo, vi servirà un lettore di codici QR. (Quando create il pacchetto di un'applicazione utilizzando Dreamweaver, ricevete un codice QR per l'applicazione, che viene visualizzato nel pannello PhoneGap Build al termine della compilazione dell'applicazione.) Vari lettori di codici sono disponibili gratuitamente da diverse fonti. Per ulteriori informazioni, cercate in Google “QR code reader”.

Installare l'add-on PhoneGap Build

Prima di utilizzare il servizio PhoneGap Build da Dreamweaver, è necessario installare il relativo add-on.

Per installare l'add-on, selezionate Finestra > Consulta Add-ons. Viene visualizzata la pagina Add-Ons di Adobe Creative Cloud. Cercate l'add-on PhoneGap Build e seguite le istruzioni visualizzate per installarlo.

Importante: prima di installare add-on, accertatevi di aver abilitato la sincronizzazione dei file per il vostro account Adobe Creative Cloud. Per maggiori dettagli, vedete Abilitare la sincronizzazione dei file su Adobe Creative Cloud.

Creare pacchetti di applicazioni per dispositivi mobili con PhoneGap Build

Assicuratevi di aver creato un sito Dreamweaver con una pagina index.html (solitamente si tratta della pagina iniziale dell'applicazione).

Nota: PhoneGap Build supporta solo i file HTML, CSS e JavaScript. Il sito non può contenere pagine server, quali PHP, CFM o altri tipi di pagine basate su server.
Scegliete Sito > Servizio PhoneGap Build > Servizio PhoneGap Build.
Immettete i vostri dati di login e accedete a PhoneGap Build. Se non avete creato un account PhoneGap Build, vedete Creare un account di servizio PhoneGap Build.
Lasciate selezionato Crea come nuovo progetto e fate clic su Continua.
Per i sistemi operativi di destinazione, immettete la chiave e la password richieste. Le informazioni della chiave di firma sono richieste solo per Android, iOS e BlackBerry.

Se non riuscite a creare più di un'applicazione, è possibile che non siate abbonati al servizio PhoneGap.

Nota:

se immettete informazioni non corrette, la compilazione ha esito negativo e un messaggio di errore indica che avete inserito una chiave o una password errata. Se non specificate nulla, la compilazione in iOS non riesce e un messaggio di errore segnala che non è stata immessa la chiave di firma richiesta. Le app Android e Blackberry vengono compilate utilizzando i certificati di debug.

Per i sistemi operativi di destinazione, immettete la chiave e la password richieste.
Noterete che Dreamweaver aggiunge un file denominato ProjectSettings alla cartella principale del sito. (Potrebbe essere necessario aggiornare il pannello File per visualizzarlo.) Questo file è molto importante perché consente al servizio PhoneGap Build di tenere traccia dell'applicazione.

Dreamweaver aggiunge anche un file config.xml nella cartella principale del sito. Fate doppio clic su questo semplice file XML per aprirlo.

File config.xml

Modificando il contenuto del file potete personalizzare l'identità dell'applicazione. Se non lo fate, tutte le applicazioni avranno lo stesso nome applicazione predefinito.

Per ulteriori informazioni sull'uso del file config.xml, consultate la documentazione di PhoneGap Build.
Salvate il file config.xml modificato, chiudetelo e fate clic su Ricompila applicazione nel pannello Servizio PhoneGap Build. Quando PhoneGap Build ha terminato di compilare l'applicazione per ciascuna piattaforma, vengono visualizzati dei messaggi che segnalano il completamento della compilazione.

Il pannello Servizio PhoneGap indica quando la compilazione viene completata.

Nota:

per compilare una build per Windows 8, dovete accedere direttamente a https://build.phonegap.com, caricare i file necessari e compilare la build.
Per impostazione predefinita, Dreamweaver utilizza PhoneGap Build versione 2.9.0. Per utilizzare la versione più recente di PhoneGap Build, seguite la procedura descritta:
1. Rimuovete la seguente riga dal file config.xml nella cartella principale del sito:
2. Salvate il file.
3. Ricompilate il progetto.
Quando le build compilate sono complete, avete a disposizione una serie di opzioni. Potete scaricare i file dell'applicazione sul computer, eseguire la scansione del codice QR di una build per trasferire l'applicazione sul dispositivo di destinazione oppure emulare l'applicazione utilizzando un emulatore (solo per Android e webOS).

Scaricare i file dell'applicazione

Per scaricare un'applicazione da PhoneGap Build, fate clic sul pulsante Scarica applicazione (freccia verso il basso) nel pannello Servizio PhoneGap Build.

Nota: il download non è disponibile per le applicazioni iOS prive di una chiave di firma. Per ulteriori informazioni, consultate la documentazione di PhoneGap Build.

I nomi dei file di applicazione scaricati sono i seguenti:

iOS - app.ipa
Android - app.apk
BlackBerry - app.jad
webOS - app.ipk
Symbian- app.wgz

Eseguire la scansione di un codice QR per trasferire un'applicazione su un dispositivo

Dovete disporre di un lettore di codici QR sul dispositivo per poter procedere. Per ulteriori informazioni, vedete Configurare l'ambiente di sviluppo.

Nota: i codici QR non sono disponibili per le applicazioni iOS prive di una chiave di firma. Per ulteriori informazioni, consultate la documentazione di PhoneGap Build.

Nel pannello Servizio PhoneGap Build, fate clic sul codice QR dell'applicazione da scaricare.
Avviate il lettore di codici QR del dispositivo mobile ed eseguite la scansione del codice QR.
Una volta che l'applicazione è stata scaricata, potete avviarla direttamente sul dispositivo.
Tornate all'elenco delle build facendo sul pulsante Torna al pannello di compilazione.

Nota: i codici QR non sono disponibili per le applicazioni iOS prive di una chiave di firma.

Emulare un'applicazione (solo Android e webOS)

IMPORTANTE: dovete avere Android SDK e/o webOS SDK/PDK installato prima di continuare. È inoltre necessario aver specificato tutte le informazioni SDK/AVD di cui desiderate disporre localmente dall'interno delle applicazioni SDK. Per ulteriori informazioni, vedete Configurare l'ambiente di sviluppo.

Aprite il pannello Impostazioni PhoneGap Build scegliendo Sito > Servizio PhoneGap Build > Impostazioni PhoneGap Build.
Specificate le posizioni degli SDK Android e/o webOS e fate clic su Salva. Tali posizioni indicano a Dreamweaver dove trovare le informazioni di cui necessita per inviare l'applicazione agli emulatori.
Nel pannello Servizio PhoneGap Build (Sito > Servizio PhoneGap Build > Servizio PhoneGap Build), fate clic sul pulsante Emula (in posizione laterale) per l'applicazione da emulare.
Se in precedenza avete specificato le informazioni SDK/AVD dalle applicazioni SDK, dovrebbe apparire una finestra precompilata con le informazioni necessarie.
Scegliete l'istanza di SDK/AVD da utilizzare per l'emulazione e fate clic su Avvia.

Nota: gli emulatori possono essere lenti nell'esecuzione. L'avvio e il caricamento dell'applicazione potrebbero richiedere tempo.

Creare e distribuire un'app Android con PhoneGap e Dreamweaver

Kevin Hoyt - divulgatore Adobe esperto di sviluppo

Creare e distribuire un'app iOS con PhoneGap