Blog

Application android WebView open source

Écrit le 27 02 2017 par Kévin MET _

DISCLAIMER : Ce tutoriel est écrit par un sysadmin, si certaines façons de faire vous choquent, vous pouvez le dire en commentaire tout en gardant à l’esprit que je suis ouvert à la critique mais que le développement n’est pas mon métier de base 😉

Introduction

Un article un peu inhabituel sur ce blog qui est plutôt orienté sysadmin car aujourd’hui on va parler de Java et plus précisément d’une application Android. Il s’agit d’une application que j’ai écrit l’été dernier pour porter le site https://mad-rabbit.com/ directement dans une application Android. Vous vous demandez pourquoi je vous parle de cela ? Tout simplement car j’ai passé beaucoup de temps sur ce projet et qu’il ne me sert pas vraiment (seulement 200 utilisateurs réguliers) et que cela peut sûrement servir à d’autres et j’ai donc décidé de mettre le code de l’appli sur github dans un dépôt public (il faut que j’ajoute une licence mais en gros, vous pouvez utiliser tout sauf le logo). Alors si vous êtes fâché avec Java, Android où tout ce qui touche au développement de près ou de loin, je vous conseille de vite partir avant d’avoir la gerbe ;)

Pour avoir un aperçu de l’application : Mad Rabbit Videos

Le projet sur github : https://github.com/nierdz/MadRabbitAndroid

Prérequis

Pour commencer, il faut que votre site soit déjà responsive car cette application ne fait pas vraiment de magie, si votre site ne passe déjà pas sur un mobile, cela ne changera rien. En fait, j’utilise AdvancedWebView qui étend la classe WebView et est un genre de mini navigateur intégré à votre app.

Il faut également connaître un peu le dev sous Android ou en tout cas, vouloir y passer quelques heures pour se familiariser avec le framework afin de faire des modifications.

Il faut utiliser Android Studio qui est compatible avec Linux, Windows et MacOS. Je l’utilise personnellement sur une Debian Sid et tout se passe très bien. J’ai utilisé l’installeur disponible sur android.com, il installe tout dans /opt et dans ~/Android.

Et enfin, il faut avoir le JDK de Java même si ça doit marcher avec OpenJDK.

Fonctionnement

Comme je l’expliquais précédemment, j’utilise AdvancedWebView pour gérer la navigation internet et OneSignal pour la gestion des notifications. Pour OneSignal il vous faudra créer un compte chez eux ainsi qu’un compte sur Firebase, tout est très bien expliqué dans la documentation d’installation de OneSignal.

Un détail qui a son importance, j’utilise ExoMedia pour lire les vidéos dans un player intégré dans l’application car c’est beaucoup plus fluide que le lecteur directement dans la WebView. Cette partie n’est pas forcément utile à tout le monde vous pouvez donc supprimer tout ce qui s’y rapporte pour alléger l’application. Si vous ne le supprimez pas, cela n’aura pas d’incidence sur votre application mis à part le poids du fichier APK.

Utilisation

Là on attaque le gros morceau de l’article car il y a pas mal de choses à voir avant de pouvoir compiler et de publier cette application sur le Play Store.

Pour commencer, il faut cloner l’application avec git :


git clone https://github.com/nierdz/MadRabbitAndroid.git

Ensuite, il faut renommer l’application dans le fichier mobile/src/main/res/values/strings.xml :


<string name="app_name">Mad Rabbit Videos</string>

Ensuite il faut changer le nom du package qui est par défaut com.madrabbit et qui doit être unique pour chaque application Android. Pour cela, il faut passer par plusieurs étapes :

  • Créer un nouveau package dans le dossier java avec le nom de votre package « com.exemple.android » en faisant un clic droit sur le dossier java et New → Package
  • Faire glisser tous les fichiers et dossiers du package com.madrabbit vers le votre. Il faut confirmer en cliquant sur Refactor et Do Refactor
  • Supprimer l’ancien package
  • Éditer le fichier mobile/src/main/AndroidManifest.xml et changer le nom du package :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.madrabbit"
	android:installLocation="auto">
  • Lancer un Clean Project dans Build → Clean Project
  • Remplacer toutes les occurrences de com.madrabbit par votre propre nom de package. Pour cela il faut faire un clic droit sur le dossier mobile et Replace in Path
  • Lancer un Clean Project dans Build → Clean Project
  • Lancer un Sync en faisant Tools → Android → Sync Project with Gradle Files

Si vous êtes sous linux, il se peut que le sync ne fonctionne pas depuis Android Studio. J’ai rencontré plusieurs fois ce problème. Dans ce cas il faut sortir de l’IDE et vous mettre dans le dossier du projet puis lancer un :


bash gradlew clean

puis un :


bash gradlew build

Ensuite il va falloir changer l’icône du launcher car par défaut il s’agit du logo de mad-rabbit, à savoir un lapin fou :) Les différentes tailles de logo sont dans les dossiers mobile/src/main/res/mipmap-*/ic_launcher.png. Si vous n’avez pas de graphiste sous la main et que vous voulez faire un truc en speed, je vous recommande l’excellent Android Asset Studio.

Il faut ensuite créer un fichier contenant votre google server api key et votre OneSignal api key. Pour faire cela, je vous conseille de suivre ce tutoriel : https://documentation.onesignal.com/docs/generate-a-google-server-api-key Ce fichier doit se trouver à la racine du projet et se nommer gradle.properties. Il contient les éléments suivants :


keystore.file=extras/keystore/madrabbit.jks
keystore.properties=extras/keystore/madrabbit.properties
onesignal_app_id="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
onesignal_google_project_number="XXXXXXXXXXXX"

On va ensuite voir comment créer les fichiers madrabbit.jks et madrabbit.properties. Pour info, le fichier jks contient votre clé qui servira à signer votre application pour prouver qu’elle vient bien de vous et vous permettre de la publier sur le store. Le fichier madrabbit.properties contient les identifiants de la clé qui seront utilisé lors de la compilation par gradle. Pour générer votre clé, je vous conseille de suivre ce tutoriel : https://developer.android.com/studio/publish/app-signing.html

Il faudra noter vos identifiants (alias et password) dans le fichier extras/keystore/madrabbit.properties et mettre votre jks dans ce même dossier. Voici le contenu de mon fichier extras/keystore/madrabbit.properties :


keystore.store.password=************
keystore.key.alias=madrabbit
keystore.key.password=************

Et voilà, vous êtes prêt à compiler votre application en lançant :


bash gradlew assembleRelease

Vous pouvez voir la liste des taches de gradlew en faisant :


bash gradlew tasks

Exomedia (la partie player video)

Comme je vous le disais précédemment, vous pouvez supprimer cette partie dans le code pour gagner en poids. Si jamais vous en avez besoin, voilà une rapide explication pour montrer comment je procède. Dans l’application, ce bout de code :


// webview javascriptinterface to load exoplayer
mWebView.addJavascriptInterface(new WebAppInterface(getContext()), "Android");
private class WebAppInterface {
	Context mContext;
	WebAppInterface(Context c) {
		mContext = c;
	}
	@JavascriptInterface
	public void loadPlayer(String url) {
		Intent intent = new Intent(getActivity(), VideoPlayerActivity.class);
		intent.putExtra(VIDEO_URL, url);
		MainFragment.this.startActivity(intent);
	}
}

permet d’accéder à un objet Java depuis Javascript. Or je déclare un user agent particulier dans mon application en utilisant :


mWebView.getSettings().setUserAgentString("MadRabbitVideosWebView" + " " + BuildConfig.VERSION_NAME);

Ce qui me permet donc de détecter cet user agent et de charger le player android au bon moment avec ce javascript :


<script type="text/javascript">
jQuery(function () {
	jQuery(".tmtkplayer").flowplayer({
		key: '$11979942230833',
		fullscreen: true,
		splash: true
	});
	if( navigator.userAgent.match(/MadRabbitVideosWebView/i) ) {
		var api = flowplayer();
		api.on("ready", function (e, api, video) {
			api.unload();
			Android.loadPlayer(video.sources[0].src);
		});
	}
});
</script>

J’utilise FlowPlayer mais ce bout de JS est assez générique pour être utilisé avec n’importe quel type de player qui peut être manipulé en JS.

Explications : Si le JS détecte MadRabbitVideosWebView dans le user agent, il va lancer la méthode loadPlayer avec en argument l’url vers la vidéo et décharger le player en js dans la WebView lors du click sur le player. Cette méthode va ensuite lancer une nouvelle activité contenant le player.

Conclusion

Tout ceci est assez particulier à ma situation mais je pense qu’en ne connaissant pas Android et en utilisant ce « template », on peut faire sa propre application en moins d’une semaine en bricolant avec la doc Android et stackoverflow. Bien entendu, je parle du point de vue d’un sysadmin donc si vous êtes habitué à faire du dev vous irez sûrement plus vite et ferez sûrement quelque chose de mieux mais à mon petit niveau, je ne suis pas mécontent du résultat ;)

Si jamais vous utilisez cette appli et que vous trouvez des bugs ou que vous avez une amélioration à ajouter, n’hésitez pas à faire une PR sur github. Et si vous vous en servez de base pour faire votre application, laissez un lien vers le play store dans les commentaires pour que je vois le résultat, ça fait toujours de plaisir de savoir qu’on a aidé...

Dans les futures versions, je vais essayer d'ajouter pas mal de commentaires et un gros fichier README.md pour décrire un peu le fonctionnement de l'appli, des classes, etc. En anglais par contre...

♥ Partage sur tes réseaux sociaux ♥
Kévin MET
Kévin MET

Auteur de ce blog et gérant de la société MNT-TECH, je publie sur ce blog lorsque le temps me le permet et lorsqu'un sujet qui me parait intéressant n'a pas encore été abordé en français. Toutes les informations techniques présentes sur cette page peuvent être réutilisées moyennant le fait de citer la source.