Flusso di lavoro di WebView

Data di pubblicazione: 28 febbraio 2014

Uno dei vantaggi dello sviluppo web è l'ampio set di strumenti che puoi utilizzare per migliorare il tuo flusso di lavoro.

Un esempio di uno di questi strumenti è Grunt, un task runner JavaScript che consente di definire le attività da eseguire sulla tua app web, dalla compilazione di Sass e dall'avvio di un server in tempo reale alla compressione delle immagini, alla minimizzazione di JavaScript e all'esecuzione di JSHint prima di creare una build pronta per la produzione.

Yeoman è uno strumento che aiuta a creare applicazioni web, generando boilerplate, importando librerie da Bower e npm e creando un file Grunt con attività predefinite.

In questo tutorial utilizzerai Yeoman per creare una nuova applicazione web di base, quindi integrerai il sistema di compilazione di Android Studio (Gradle) con Grunt per compilare la tua applicazione web. Configura anche le attività Grunt per avviare un server di ricarica dinamica locale per testare l'applicazione nel browser, in modo da non dover aggiornare manualmente la pagina ogni volta che modifichi un file HTML, CSS o JavaScript.

Prerequisiti

Prima di iniziare, devi installare alcuni prerequisiti:

  1. Installa Yeoman: https://github.com/yeoman/yeoman/wiki/Getting-Started
  2. Installa Android Studio: https://developer.android.com/sdk/installing/studio.html

Passaggio 1: Creare un nuovo progetto in Android Studio con una WebView

Puoi trovare istruzioni complete su come eseguire questa operazione nella guida introduttiva.

Passaggio 2: Crea una sottodirectory per i contenuti dell'app web

Dopo aver creato il progetto, crea una nuova directory di primo livello. In Android Studio, fai clic con il tasto destro del mouse sulla cartella del progetto e seleziona Nuovo > Directory.

Assegna alla directory il nome webapp.

Passaggio 3: Crea un progetto Yeoman nella nuova directory

In un terminale, cd alla directory webapp nel progetto.

cd <path-to-project>/webapp/

Quindi crea una nuova app web con Yeoman:

yo webapp

Segui le istruzioni sullo schermo per selezionare le opzioni del progetto. Potresti dover eseguire sudo npm install, a seconda di come npm è installato sul tuo computer.

Prima di procedere con il passaggio successivo, testa l'app eseguendo il seguente comando:

grunt server

Nel browser dovrebbe aprirsi una nuova scheda che si connette a un server locale avviato da Grunt. Se modifichi uno dei file HTML, CSS o JavaScript del progetto, la pagina viene ricaricata e aggiornata automaticamente.

Se esegui grunt build, viene creata una nuova directory, dist, e la tua app web viene compressa, ottimizzata e trasformata in una versione pronta per la produzione all'interno di questa cartella.

Passaggio 4: Configura la compilazione Gradle

Nella directory webapp, crea un nuovo file denominato build.gradle.

Nel nuovo file build.gradle, aggiungi quanto segue:

import org.apache.tools.ant.taskdefs.condition.Os

task buildWebApp(type: Exec) {
  executable = Os.isFamily(Os.FAMILY_WINDOWS) ? "grunt.cmd" : "grunt"
  args = ["build"]
}

Viene creata una nuova attività denominata buildWebApp con un tipo predefinito Exec. Imposta quindi la variabile executable in Exec sul comando grunt pertinente, a seconda del sistema operativo corrente. args sono impostati su "build", il che equivale a eseguire grunt build sulla riga di comando. Infine, l'importazione in alto è per utilizzare Os.isFamily(Os.FAMILY_WINDOWS).

Prima di poter utilizzare questa nuova attività, dobbiamo comunicare al progetto il nuovo build.gradle file.

Apri settings.gradle nella directory principale e aggiungi la seguente riga:

include ':webapp'

Passaggio 5: Creare l'app web quando viene creata l'app per Android

Crea la build dell'app web e poi copiala nella directory assets della nostra app per Android.

Copia quanto segue nel file build.gradle delle app per Android:

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

Esaminiamo ogni parte.

task copyWebApplication

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

Questa attività Copy copia l'applicazione dalla directory webapp/dist. Vogliamo copiare i file in src/main/assets/www. Questa operazione crea anche la struttura di file necessaria se una delle directory richieste non esiste.

task deleteWebApplication

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

Questa attività di eliminazione elimina tutti i file nella directory assets/www.

copyWebApplication.dependsOn

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

La prima riga indica che copyWebApplication ha una dipendenza dall'attività buildWebApp del file build.gradle della nostra app web.

La seconda riga indica che esiste una dipendenza dall'attività deleteWebApplication.

In altre parole, prima di copiare effettivamente i file nella directory assets, assicurati di compilare l'app web ed eliminare anche i contenuti attuali della directory assets.

android.applicationVariants.all

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

Questa attività specifica le dipendenze per tutte le build del progetto, per ogni versione dell'app. Qui imposta una dipendenza sulle attività assemble da eseguire copyWebApplication.

Le attività assemble assemblano l'output del progetto, quindi l'app web deve prima essere copiata nel progetto Android.

Passaggio 6: Verificare che tutto funzioni

In Android Studio, non deve essere presente alcuna directory assets nella cartella src delle applicazioni Android.

Imposta WebView in modo che utilizzi la pagina index.html:

mWebView.loadUrl("file:///android_asset/www/index.html");

Fai clic su Esegui e lascia che l'applicazione venga compilata. Nella sottodirectory www dovresti vedere una directory assets con la tua applicazione web.

Passaggio 7: Creare un server live e il ricaricamento in tempo reale

Il ricaricamento in tempo reale può essere molto utile per apportare modifiche rapide alle applicazioni web. Per abilitare questa funzionalità, puoi creare due "versioni del prodotto" per la tua app: una versione del server in tempo reale e una versione statica, in cui i contenuti web vengono pacchettizzati nell'applicazione Android.

In build.gradle dell'app per Android, aggiungi le seguenti righe alla fine dell'elemento android:

android {
  ...
  defaultConfig {
    ...
  }
  productFlavors {
    staticbuild {
      packageName "com.google.chrome.myapplication"
    }

    liveserver {
      packageName "com.google.chrome.myapplication.liveserver"
    }
  }

}

Ora Gradle ti offre la possibilità di creare una versione della tua app con un nome di pacchetto liveserver e una con il nome di pacchetto normale. Per verificare se la procedura è andata a buon fine, fai clic su Sincronizza progetto con i file Gradle (nella barra in alto accanto al pulsante Esegui).

Poi, visualizza le Varianti di build nell'angolo in basso a sinistra di Android Studio, che ti mostrano essenzialmente le versioni dell'app che puoi creare.

Per ogni productFlavor sono disponibili le versioni Debug e Release, che il plug-in Android per Gradle fornisce per impostazione predefinita. Questo determina se la build deve essere una build di debug o una release adatta al deployment sul Play Store.

Ora hai due versioni, ma non fanno ancora nulla di diverso.

Passaggio 8: Caricamento da un server attivo

Ora configura l'applicazione in modo che carichi un URL diverso a seconda della versione del prodotto che stai creando.

Nell'applicazione Android, i file comuni a tutti i tipi di prodotto si trovano in src/main. Per aggiungere codice o risorse specifiche per una versione del prodotto, crea un'altra directory in src con lo stesso nome di productFlavor. Quando effettui la compilazione per la variante di build, Gradle e il plug-in Android uniscono questi file aggiuntivi a quelli in src/main.

Definisci l'URL come risorsa stringa e utilizzala nel codice anziché un URL hardcoded.

  1. Crea le cartelle src/liveserver e src/staticbuild.

  2. Nella cartella liveserver, crea una nuova cartella denominata res con una sottocartella denominata values. Al suo interno, crea un file denominato config.xml. Ripeti questa procedura per la cartella staticbuild.

  3. All'interno dei file di configurazione, aggiungi le seguenti righe a src/liveserver/res/values/config.xml:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="init_url">https://<Your Local Machine IP Address>:9000</string>
</resources>

    Aggiungi il seguente blocco a src/staticbuild/res/values/config.xml:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="init_url">file:///android_asset/www/index.html</string>
</resources>

  4. Imposta WebView in modo che utilizzi init_url da questi file di configurazione.

    mWebView.loadUrl(getString(R.string.init_url));

  5. Crea un nuovo file denominato AndroidManifest.xml in liveserver/AndroidManifest.xml e aggiungi le seguenti righe:

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>

    Viene aggiunta l'autorizzazione di accesso a internet per le build di liveserver.

  6. In webapp/Gruntfile.js, cerca:

    connect: {
  options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: **'localhost'**
  },
  ...
}

    Sostituisci localhost con 0.0.0.0 in modo che il server locale sia accessibile dalla rete locale:

    connect: {
  options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: '**0.0.0.0'**
  },
  ...
}

Per testare le modifiche:

  1. Avvia il server live:

    grunt server

  2. In Android Studio, seleziona LiveserverDebug nella selezione Variante di build. Fai clic su Esegui.

    Dovresti essere in grado di modificare i contenuti HTML, CSS e JavaScript e visualizzarli immediatamente nel browser.

Ora hai due versioni dell'applicazione: una versione di sviluppo con il ricaricamento in tempo reale dal server Grunt e una versione statica, pacchettizzata localmente nell'app Android.