Diese Seite wurde von der Cloud Translation API übersetzt.

WebView-Workflow

Veröffentlicht: 28. Februar 2014

Eines der tollen Dinge an der Webentwicklung ist die große Auswahl an Tools, mit denen Sie Ihren Workflow verbessern können.

Ein Beispiel für eines dieser Tools ist Grunt, ein JavaScript-Task-Runner, mit dem Sie Aufgaben für Ihre Webanwendung definieren können, z. B. das Kompilieren von Sass und das Starten eines Liveservers, das Komprimieren von Bildern, das Minimieren von JavaScript und das Ausführen von JSHint, bevor Sie einen produktionsfertigen Build erstellen.

Yeoman ist ein Tool, mit dem Sie Webanwendungen erstellen, Boilerplate-Code generieren, Bibliotheken aus Bower und npm einbinden und eine Grunt-Datei mit vordefinierten Aufgaben erstellen können.

In dieser Anleitung erstellen Sie mit Yeoman eine neue einfache Webanwendung und integrieren dann das Android Studio-Build-System (Gradle) mit Grunt, um Ihre Webanwendung zu erstellen. Außerdem richten Sie Grunt-Aufgaben ein, um einen lokalen Live-Reload-Server zum Testen Ihrer Anwendung im Browser zu starten. So müssen Sie die Seite nicht jedes Mal manuell aktualisieren, wenn Sie eine HTML-, CSS- oder JavaScript-Datei ändern.

Vorbereitung

Bevor Sie beginnen, müssen Sie einige Voraussetzungen installieren:

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

Schritt 1: Neues Projekt mit einer WebView in Android Studio erstellen

Eine vollständige Anleitung dazu findest du im Startleitfaden.

Schritt 2: Unterverzeichnis für die Webanwendungsinhalte erstellen

Erstellen Sie nach dem Erstellen des Projekts ein neues Verzeichnis auf oberster Ebene. Klicken Sie in Android Studio mit der rechten Maustaste auf den Projektordner und wählen Sie Neu > Verzeichnis aus.

Geben Sie dem Verzeichnis den Namen webapp.

Schritt 3: Yeoman-Projekt in Ihrem neuen Verzeichnis erstellen

Wechseln Sie in einem Terminal zu cd im Verzeichnis webapp im Projekt.

cd <path-to-project>/webapp/

Erstellen Sie dann mit Yeoman eine neue Webanwendung:

yo webapp

Folgen Sie der Anleitung auf dem Bildschirm, um die Projektoptionen auszuwählen. Je nachdem, wie npm auf Ihrem Computer installiert ist, müssen Sie möglicherweise sudo npm install ausführen.

Bevor Sie mit dem nächsten Schritt fortfahren, testen Sie die App mit dem folgenden Befehl:

grunt server

In Ihrem Browser sollte ein neuer Tab geöffnet werden, der eine Verbindung zu einem lokalen Server herstellt, der von Grunt gestartet wurde. Wenn Sie eine der HTML-, CSS- oder JavaScript-Dateien im Projekt ändern, wird die Seite automatisch neu geladen und aktualisiert.

Wenn Sie grunt build ausführen, wird ein neues Verzeichnis dist erstellt und Ihre Webanwendung wird in diesem Ordner komprimiert, optimiert und in eine produktionsreife Version umgewandelt.

Schritt 4: Gradle-Build konfigurieren

Erstellen Sie im Verzeichnis webapp eine neue Datei mit dem Namen build.gradle.

Fügen Sie in der neuen build.gradle-Datei Folgendes hinzu:

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

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

Dadurch wird eine neue Aufgabe namens buildWebApp mit dem vordefinierten Typ Exec erstellt. Legen Sie dann die Variable executable in Exec auf den entsprechenden Grunt-Befehl fest, je nach aktuellem Betriebssystem. args sind auf "build" festgelegt, was bedeutet, dass grunt build in der Befehlszeile ausgeführt wird. Der Import oben soll schließlich Os.isFamily(Os.FAMILY_WINDOWS) verwenden.

Bevor wir diese neue Aufgabe verwenden können, müssen wir das Projekt auf die neue build.gradle-Datei aufmerksam machen.

Öffnen Sie settings.gradle im Stammverzeichnis und fügen Sie die folgende Zeile hinzu:

include ':webapp'

Schritt 5: Webanwendung beim Erstellen der Android-App erstellen

Rufen Sie die Web-App zum Erstellen ab und kopieren Sie sie in das Verzeichnis assets unserer Android-App.

Kopieren Sie Folgendes in die build.gradle-Datei der Android-Apps:

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
}

Sehen wir uns die einzelnen Teile an.

task copyWebApplication

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

Mit dieser Copy-Aufgabe wird Ihre Anwendung aus dem Verzeichnis webapp/dist kopiert. Wir möchten die Dateien nach src/main/assets/www kopieren. Bei dieser Aufgabe wird auch die erforderliche Dateistruktur erstellt, falls eines der erforderlichen Verzeichnisse nicht vorhanden ist.

task deleteWebApplication

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

Mit dieser Löschaufgabe werden alle Dateien im Verzeichnis assets/www gelöscht.

copyWebApplication.dependsOn

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

In der ersten Zeile wird angegeben, dass die copyWebApplication von der Aufgabe buildWebApp aus der build.gradle-Datei unserer Webanwendung abhängig ist.

Die zweite Zeile gibt an, dass es eine Abhängigkeit von der Aufgabe deleteWebApplication gibt.

Bevor wir also Dateien in das Verzeichnis assets kopieren, müssen wir die Webanwendung erstellen und den aktuellen Inhalt des Verzeichnisses assets löschen.

android.applicationVariants.all

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

In dieser Aufgabe werden die Abhängigkeiten für alle Builds Ihres Projekts für jede Version Ihrer App angegeben. Hier wird eine Abhängigkeit von den assemble-Aufgaben festgelegt, um copyWebApplication auszuführen.

Die assemble-Aufgaben stellen die Ausgabe des Projekts zusammen. Daher muss die Webanwendung zuerst in das Android-Projekt kopiert werden.

Schritt 6: Prüfen, ob alles funktioniert

In Android Studio sollte im Ordner src Ihrer Android-Anwendungen kein Verzeichnis assets vorhanden sein.

Legen Sie fest, dass die WebView die Seite index.html verwenden soll:

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

Klicken Sie auf Ausführen und lassen Sie die Anwendung erstellen. Im Unterverzeichnis www sollte ein Verzeichnis assets mit Ihrer Webanwendung angezeigt werden.

Schritt 7: Live-Server erstellen und Live-Neuladen

Das Live-Neuladen kann sehr nützlich sein, um schnell Änderungen an Ihren Webanwendungen vorzunehmen. Dazu können Sie zwei „Produktvarianten“ für Ihre App erstellen: eine Live-Serverversion und eine statische Version, bei der die Webinhalte in die Android-Anwendung verpackt werden.

Fügen Sie in der build.gradle-Datei Ihrer Android-App die folgenden Zeilen am Ende des android-Elements hinzu:

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

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

}

Mit Gradle können Sie jetzt eine Version Ihrer App mit einem Liveserver-Paketnamen und eine mit Ihrem normalen Paketnamen erstellen. Klicken Sie oben in der Leiste neben der Schaltfläche Ausführen auf Projekt mit Gradle-Dateien synchronisieren, um zu prüfen, ob die Änderungen übernommen wurden.

Sehen Sie sich dann die Build-Varianten an, die sich links unten in Android Studio befinden. Dort sehen Sie, welche Versionen Ihrer App Sie erstellen können.

Für jedes productFlavor gibt es Debug- und Release-Versionen, die standardmäßig vom Android-Plug-in für Gradle bereitgestellt werden. Damit wird festgelegt, ob es sich um einen Debug-Build oder einen Release-Build handelt, der für die Bereitstellung im Play Store geeignet ist.

Sie haben jetzt zwei Versionen, die aber noch nicht wirklich etwas anderes tun.

Schritt 8: Von einem Liveserver laden

Konfigurieren Sie nun Ihre Anwendung so, dass je nach erstellter Produktvariante eine andere URL geladen wird.

In Ihrer Android-Anwendung befinden sich die Dateien, die für alle Produktvarianten gemeinsam sind, unter src/main. Wenn Sie Code oder Ressourcen hinzufügen möchten, die für eine Produktvariante spezifisch sind, erstellen Sie unter src ein weiteres Verzeichnis mit demselben Namen wie productFlavor. Wenn Sie für diese Buildvariante einen Build erstellen, werden diese zusätzlichen Dateien von Gradle und dem Android-Plug-in mit den Dateien in src/main zusammengeführt.

Definieren Sie die URL als Stringressource und verwenden Sie diese Ressource in Ihrem Code anstelle einer hartcodierten URL.

Erstellen Sie die Ordner src/liveserver und src/staticbuild.
Erstellen Sie im Ordner liveserver einen neuen Ordner mit dem Namen res und einen Unterordner mit dem Namen values. Erstellen Sie darin eine Datei mit dem Namen config.xml. Wiederholen Sie diesen Vorgang für den Ordner staticbuild.

Fügen Sie in Ihren Konfigurationsdateien src/liveserver/res/values/config.xml die folgenden Zeilen hinzu:

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

Fügen Sie src/staticbuild/res/values/config.xml den folgenden Block hinzu:

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

Legen Sie fest, dass Ihre WebView die init_url aus diesen Konfigurationsdateien verwendet.
```
mWebView.loadUrl(getString(R.string.init_url));
```
Erstellen Sie in liveserver/AndroidManifest.xml eine neue Datei mit dem Namen AndroidManifest.xml und fügen Sie die folgenden Zeilen hinzu:
```
<?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>
```
Dadurch wird die Internetberechtigung für die liveserver-Builds hinzugefügt.

Suchen Sie in webapp/Gruntfile.js nach Folgendem:

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

Ersetzen Sie localhost durch 0.0.0.0, damit auf Ihren lokalen Server über das lokale Netzwerk zugegriffen werden kann:

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

So testen Sie Ihre Änderungen:

Starten Sie den Liveserver:
```
grunt server
```
Wählen Sie in Android Studio unter Build-Variante die Option LiveserverDebug aus. Klicken Sie dann auf Ausführen.

Sie sollten Ihre HTML-, CSS- und JavaScript-Inhalte bearbeiten und die Änderungen sofort im Browser sehen können.

Sie haben jetzt zwei Versionen Ihrer Anwendung: eine Entwicklungsversion mit Live-Neustart vom Grunt-Server und eine statische Version, die lokal in der Android-App verpackt ist.