Cette page a été traduite par l'API Cloud Translation.

Workflow WebView

Publié le 28 février 2014

L'un des avantages du développement Web est l'ensemble d'outils que vous pouvez utiliser pour améliorer votre workflow.

Grunt est un exemple d'outil de ce type. Il s'agit d'un outil de compilation de tâches JavaScript qui vous permet de définir des tâches à effectuer sur votre application Web, de la compilation de Sass et du démarrage d'un serveur en direct à la compression d'images, à la minification de JavaScript et à l'exécution de JSHint avant de créer un build prêt pour la production.

Yeoman est un outil qui permet de créer des applications Web, de générer du code standard, d'importer des bibliothèques de Bower et de npm, et de créer un fichier Grunt avec des tâches prédéfinies.

Dans ce tutoriel, vous allez utiliser Yeoman pour créer une application Web de base, puis intégrer le système de compilation Android Studio (Gradle) à Grunt pour compiler votre application Web. Vous allez également configurer des tâches Grunt pour lancer un serveur de rechargement en direct local afin de tester votre application dans le navigateur. Vous n'aurez donc pas à actualiser manuellement la page chaque fois que vous modifierez un fichier HTML, CSS ou JavaScript.

Prérequis

Avant de commencer, vous devez installer quelques éléments préalables:

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

Étape 1 : Créer un projet dans Android Studio avec une WebView

Pour savoir comment procéder, consultez le guide de démarrage.

Étape 2 : Créer un sous-répertoire pour le contenu de l'application Web

Une fois votre projet créé, créez un répertoire racine. Dans Android Studio, effectuez un clic droit sur le dossier du projet, puis sélectionnez New (Nouveau) > Directory (Répertoire).

Nommez le répertoire webapp.

Étape 3 : Créer un projet Yeoman dans votre nouveau répertoire

Dans un terminal, accédez au répertoire webapp du projet avec cd.

cd <path-to-project>/webapp/

Créez ensuite une application Web avec Yeoman:

yo webapp

Suivez les instructions à l'écran pour sélectionner les options de projet. Vous devrez peut-être exécuter sudo npm install, selon la manière dont npm est installé sur votre machine.

Avant de passer à l'étape suivante, testez l'application en exécutant la commande suivante:

grunt server

Un nouvel onglet doit s'ouvrir dans votre navigateur, se connectant à un serveur local démarré par Grunt. Si vous modifiez l'un des fichiers HTML, CSS ou JavaScript du projet, la page se recharge et se met à jour automatiquement.

Si vous exécutez grunt build, un nouveau répertoire, dist, est créé et votre application Web est compressée, optimisée et transformée en version prête à la production dans ce dossier.

Étape 4 : Configurer la compilation Gradle

Dans le répertoire webapp, créez un fichier nommé build.gradle.

Dans votre nouveau fichier build.gradle, ajoutez ce qui suit:

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

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

Cette opération crée une tâche appelée buildWebApp avec un type prédéfini Exec. Définissez ensuite la variable executable dans Exec sur la commande grunt appropriée en fonction de l'OS actuel. args sont définis sur "build", ce qui équivaut à l'exécution de grunt build sur la ligne de commande. Enfin, l'importation en haut permet d'utiliser Os.isFamily(Os.FAMILY_WINDOWS).

Avant de pouvoir utiliser cette nouvelle tâche, nous devons informer le projet du nouveau fichier build.gradle.

Ouvrez settings.gradle dans le répertoire racine et ajoutez la ligne suivante:

include ':webapp'

Étape 5 : Créer votre application Web lorsque vous créez l'application Android

Créez l'application Web, puis copiez-la dans le répertoire assets de notre application Android.

Copiez ce qui suit dans le fichier build.gradle des applications 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
}

Examinons chaque élément.

tâche copyWebApplication

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

Cette tâche Copy copie votre application à partir du répertoire webapp/dist. Nous voulons copier les fichiers dans src/main/assets/www. Cette tâche crée également la structure de fichiers nécessaire si l'un des répertoires requis n'existe pas.

task deleteWebApplication

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

Cette tâche de suppression supprime tous les fichiers du répertoire assets/www.

copyWebApplication.dependsOn

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

La première ligne indique que copyWebApplication dépend de la tâche buildWebApp du fichier build.gradle de notre application Web.

La deuxième ligne indique qu'il existe une dépendance sur la tâche deleteWebApplication.

En d'autres termes, avant de copier des fichiers dans le répertoire assets, assurez-vous de compiler l'application Web et de supprimer le contenu actuel du répertoire assets.

android.applicationVariants.all

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

Cette tâche spécifie les dépendances pour toutes les compilations de votre projet, pour chaque version de votre application. Ici, elle définit une dépendance sur les tâches assemble pour exécuter copyWebApplication.

Les tâches assemble assemblent la sortie du projet. L'application Web doit donc être copiée sur le projet Android en premier.

Étape 6 : Vérifier que tout fonctionne

Dans Android Studio, vous ne devriez pas avoir de répertoire assets dans le dossier src de vos applications Android.

Définissez la WebView pour qu'elle utilise la page index.html:

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

Cliquez sur Run (Exécuter) et laissez votre application se compiler. Un répertoire assets contenant votre application Web doit s'afficher dans le sous-répertoire www.

Étape 7 : Créer un serveur en direct et un rechargement en direct

Le rechargement en direct peut être très utile pour apporter des modifications rapides à vos applications Web. Pour ce faire, vous pouvez créer deux "saveurs de produit" pour votre application : une version de serveur en ligne et une version statique, dans laquelle le contenu Web est empaqueté dans l'application Android.

Dans le fichier build.gradle de votre application Android, ajoutez les lignes suivantes à la fin de l'élément android:

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

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

}

Gradle vous permet désormais de créer une version de votre application avec un nom de package liveserver et une autre avec votre nom de package normal. Pour vérifier si cela a fonctionné, cliquez sur Sync Project with Gradle Files (Synchroniser le projet avec les fichiers Gradle) dans la barre supérieure à côté du bouton Run (Exécuter).

Affichez ensuite les variantes de compilation situées en bas à gauche d'Android Studio. Elles vous indiquent essentiellement les versions de votre application que vous pouvez compiler.

Pour chaque productFlavor, il existe des versions Debug et Release, que le plug-in Android pour Gradle vous fournit par défaut. Cela détermine si le build doit être un build de débogage ou un build de publication adapté au déploiement sur le Play Store.

Vous disposez maintenant de deux versions, mais elles ne font pas encore grand-chose.

Étape 8 : Charger à partir d'un serveur en cours d'exécution

Configurez maintenant votre application pour qu'elle charge une URL différente en fonction du type de produit que vous créez.

Dans votre application Android, les fichiers communs à toutes les saveurs de produit se trouvent dans src/main. Pour ajouter du code ou des ressources spécifiques à un type de produit, créez un autre répertoire sous src avec le même nom que votre productFlavor. Lorsque vous effectuez une compilation pour cette variante de compilation, Gradle et le plug-in Android fusionnent ces fichiers supplémentaires au-dessus des fichiers de src/main.

Définissez l'URL en tant que ressource de chaîne et utilisez cette ressource dans votre code au lieu d'une URL codée en dur.

Créez les dossiers src/liveserver et src/staticbuild.
Dans le dossier liveserver, créez un dossier nommé res avec un sous-dossier nommé values. Créez un fichier nommé config.xml. Répétez ce processus pour le dossier staticbuild.

Dans vos fichiers de configuration, ajoutez les lignes suivantes à 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>

Ajoutez le bloc suivant à 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>

Définissez votre WebView pour qu'elle utilise le init_url à partir de ces fichiers de configuration.
```
mWebView.loadUrl(getString(R.string.init_url));
```

Créez un fichier nommé AndroidManifest.xml dans liveserver/AndroidManifest.xml et ajoutez les lignes suivantes:

<?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>

Cela ajoute l'autorisation Internet pour les builds liveserver.

Dans webapp/Gruntfile.js, recherchez les éléments suivants:

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

Remplacez localhost par 0.0.0.0 pour que votre serveur local soit accessible depuis le réseau local:

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

Pour tester vos modifications:

Démarrez le serveur en direct:
```
grunt server
```
Dans Android Studio, dans la sélection Build Variant (Variante de compilation), sélectionnez LiveserverDebug. Cliquez ensuite sur Exécuter.

Vous devriez pouvoir modifier votre contenu HTML, CSS et JavaScript et le voir immédiatement reflété dans le navigateur.

Vous disposez désormais de deux versions de votre application: une version de développement avec rechargement en direct à partir du serveur Grunt et une version statique, empaquetée localement dans l'application Android.