Creare pacchetti di applicazioni web come applicazioni native per dispositivi mobili (CS 5.5)

L'integrazione di Dreamweaver con jQuery Mobile e PhoneGap consente di creare e compilare applicazioni Web da distribuire su Android™ e su dispositivi iOS. Dreamweaver usa i kit SDK PhoneGap per creare il pacchetto (file .apk per Android e/o .xcodeproj per iPhone/iPad).

Una volta compilato il pacchetto di un applicazione per dispositivi mobili con Dreamweaver, potete visualizzare l'applicazione con un emulatore di dispositivo oppure trasferirla direttamente su un vostro dispositivo.

Nota:

l'applicazione per dispositivi mobili compilata con Dreamweaver è utilizzabile solo per il debug. Può essere eseguita negli emulatori Android e iOS oppure su un dispositivo mobile personale (dopo averla trasferita su tale dispositivo), ma non potete caricare le app mobili di debug nei negozi online Apple e Android. Per caricare app iOS o Android, dovete effettuare un ulteriore passaggio, ovvero firmarle al di fuori di Dreamweaver. Per ulteriori informazioni sul caricamento di applicazioni sui negozi online Apple e Android, consultate la documentazione di Android o la Program User Guide sul portale Apple iOS Provisioning Portal. (Per poter accedere a Apple iOS Provisioning Portal, dovete essere iscritti sia al programma per sviluppatori Apple [gratuito] che al programma per sviluppatori iOS [soggetto a tariffa annuale].)

Creare un'applicazione Web utilizzando la pagina di avvio

Potete utilizzare le pagine di avvio disponibili in Dreamweaver per iniziare a creare la vostra applicazione Web. Tuttavia, se l'applicazione Web, una volta distribuita come applicazione per dispositivi mobili, avrà accesso a funzioni native dei dispositivi mobili, scegliete la pagina jQuery Mobile (PhoneGap).

La pagina di avvio jQuery Mobile (PhoneGap) contiene il file phonegap.js file oltre agli altri file jQuery Mobile. Questo file contiene le API necessarie per sfruttare le funzioni native dei dispositivi mobili quali il GPS, l'accelerometro, la fotocamera e così via.

  1. Selezionate File > Nuovo.

  2. Selezionate Pagina da esempio > Impostazioni di avvio per applicazioni mobili > jQuery Mobile (PhoneGap).

  3. Fate clic su Crea.

  4. Nel pannello Inserisci (Finestra > Inserisci), selezionate jQuery Mobile. Vengono visualizzati i componenti che potete aggiungere all'applicazione Web.

  5. In vista Progettazione, inserite il cursore nella posizione in cui volete inserire il componente, quindi fate clic sul componente nel pannello Inserisci. Nella finestra di dialogo visualizzata, personalizzate i componenti utilizzando le opzioni disponibili.

    Nota:

    per modificare il file PhoneGap.js, configurate il framework applicazione e le impostazioni dell'applicazione. Per ulteriori informazioni, vedete gli argomenti relativi alla creazione dei pacchetti delle applicazioni.

Visualizzate l'anteprima della pagina nella vista Dal vivo. Alcune delle classi CSS, infatti, vengono applicate solo in vista Dal vivo.

Requisiti di sistema per la compilazione di applicazioni

Prima di procedere alla compilazione di un'applicazione, verificate che siano rispettati i seguenti requisiti di sistema.

MAC OS - iOS

  • Mac OS X Snow Leopard versione 10.6.x o successiva

  • Xcode 3.2.x con iOS SDK (istruzioni di installazione di seguito)

MAC OS - Android

  • Mac OS X 10.5.8 o successivo (solo x86)

  • Android SDK (istruzioni di installazione di seguito)

Windows - iOS

  • iOS è disponibile solo per gli utenti che dispongono di un computer Apple

Windows - Android

  • Windows XP (32 bit), Vista (32 bit o 64 bit) o Windows 7 (32 bit o 64 bit)

  • Android SDK (istruzioni di installazione di seguito)

Creare un pacchetto di applicazione (Windows)

Per informazioni sulla creazione di un'applicazione Web e per ottenere file di esempio, vedete questa esercitazione nel Centro per sviluppatori Dreamweaver.

  1. Aprite l'applicazione Web che volete convertire in applicazione per dispositivi mobili. Verificate che l'applicazione Web sia configurata come sito in Dreamweaver e che le dimensioni del sito siano inferiori a 25 MB.

    Nota:

    verificate inoltre che l'applicazione contenga solo file HTML5, CSS e JavaScript.

  2. Selezionate Sito > Applicazioni mobili > Configura Application Framework.

  3. Fate clic su Easy Install per installare Android SDK.

    Nota:

    se la procedura Easy Install fallisce, vedete la nota tecnica 90408.

  4. Selezionate una posizione in cui installare i file del kit SDK, quindi fate clic su Seleziona. Una volta completata l'installazione, fate clic su Salva.

  5. Selezionate Sito > Applicazioni mobili > Impostazioni applicazione.

  6. Per ID pacchetto, immettete un nome per il pacchetto utilizzando le informazioni visualizzate nella finestra di dialogo.

  7. Immettete un nome per l'applicazione e il nome della persona che l'ha progettata.

  8. Facoltativamente, specificate quanto segue:

    1. In PNG icona applicazione, specificate un file PNG da utilizzare come icona dell'applicazione. Se necessario, Dreamweaver ridimensiona l'icona per farla corrispondere alle dimensioni standard.

    2. Specificate un percorso target per il pacchetto.

    3. Per scaricare e installare gli ultimi componenti SDK da Google, fate clic su Gestisci AVD. Utilizzate Android SDK e AVD Manager per aggiornare Android SDK. Per ulteriori informazioni sull'uso di Extension Manager, vedete http://developer.android.com/sdk/adding-components.html.

      Nota:

      quando fate clic su Salva, il file phonegap.js viene copiato nella cartella principale del sito.

  9. Effettuate una delle operazioni seguenti:

    • Se state distribuendo l'applicazione direttamente su un dispositivo, selezionate Sito > Applicazioni mobili > Crea. Selezionate una piattaforma/un dispositivo per l'operazione.

    • Se volete verificare il risultato della compilazione su un emulatore prima di creare l'applicazione, selezionate Sito > Applicazioni mobili > Emula e crea.

Creare un pacchetto di applicazione (Mac OS)

Per un'esercitazione sulla creazione di un'applicazione web, inclusi file di esempio, vedete questo articolo nel Centro per sviluppatori Dreamweaver.

  1. Aprite l'applicazione Web che volete convertire in applicazione per dispositivi mobili. Verificate che l'applicazione Web sia configurata come sito in Dreamweaver e che le dimensioni del sito siano inferiori a 25 MB.

    Nota:

    verificate inoltre che l'applicazione contenga solo file HTML5, CSS e JavaScript.

  2. Selezionate Sito > Applicazioni mobili > Configura Application Framework.

  3. Installate il kit SDK per iOS o Android in base alle vostre esigenze:

    • Fate clic sul collegamento Apple iOS Dev Center per scaricare e installare xcode e iOS SDK. Per impostazione predefinita l'applicazione viene installata nella directory OS <numero versione >/developer.

      Accedete a Dev Center utilizzando il vostro ID Apple. L'iscrizione è gratuita. Create un account, se non siete già un utente registrato.

    Nota:

    potete usare il pacchetto SDK scaricato da Apple Dev Center per effettuare il test dell'applicazione. Tuttavia, per caricare l'applicazione su Apple App Store, dovete registrarvi come sviluppatore Apple dopo aver pagato la tariffa d'iscrizione prevista.  

    • Fate clic su Easy Install per installare Android SDK.

    Nota:

    se la procedura Easy Install fallisce, vedete la nota tecnica 90408.

  4. Fate clic su Salva.

  5. Selezionate Sito > Applicazioni mobili > Impostazioni applicazione.

  6. In ID pacchetto, immettete un nome per il pacchetto utilizzando le informazioni visualizzate nella finestra di dialogo.

  7. Immettete un nome per l'applicazione e il nome della persona che l'ha progettata.

  8. Facoltativamente, effettuate le operazioni seguenti:

    • (Android) In PNG icona applicazione, specificate un file PNG da utilizzare come icona dell'applicazione Android. Se necessario, Dreamweaver ridimensiona l'icona per farla corrispondere alle dimensioni standard.

    • (Mac® OS 10.6.x) In PNG schermata di avvio, specificate un file PNG da utilizzare come icona dell'applicazione iOS. Se necessario, Dreamweaver ridimensiona l'icona per farla corrispondere alle dimensioni standard.

    • (Mac OS 10.6.x) Selezionate la versione di iPhone/iPod Touch/iPad per la quale state creando il pacchetto.

    • Specificate un percorso target diverso per il pacchetto.

    Nota:

    quando fate clic su Salva, il file phonegap.js viene copiato nella cartella principale del sito.

  9. Effettuate una delle operazioni seguenti:

    • Se state distribuendo l'applicazione direttamente su un dispositivo, selezionate Sito > Applicazioni mobili > Crea. Selezionate una piattaforma/un dispositivo per l'operazione.

    • Se volete verificare il risultato della compilazione su un emulatore prima di creare l'applicazione, selezionate Sito > Applicazioni mobili > Emula e crea.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online