Passez vos applications HTML5 sur Android

Publié le 18/04/2011, par Raymond Chenon dans Mobile, Tutoriel | 5 Commentaires

Avec la croissance fulgurante ( à 3 chiffres annuel ) des ventes aussi bien sur iPhone que sur Android, les demandes en application mobile natives sont fortes.

Le développement natif a l’avantage d’ une interface utilisateur fluide. Néanmoins la montée en compétence exige au moins quelques mois d’expérience pour des projets relativement courts (en semaines ). Chaque plateforme est spécifique, une expérience sur iPhone n’est pas forcément transférable sur Android et vice versa.

L’ idéal pour le développement multi-plateforme reste l’HTML5 rendu sur le navigateur de l’OS : webkit pour iOS et Android, Firefox pour Meego, Internet Explorer Mobile pour Windows Phone 7. HTML5 reste une solution universelle pour le front-end . Les coûts sont factorisés par le nombre d’OS ciblé.

Il existe des solutions multi plateforme tel que PhoneGap, App Titanium qui mimiquent l’interface utilisateur natif . A la différence de ces outils ,  ce tutorial vous laisse libre sur le choix de votre librairie JavaScript. Les librairies utilisées sont  iUI Project de Joe Hewitt , iWebKit de Jonathan Stark , JQTouch de David Kaneda .

Tutorial

Ce tutorial expose comment utiliser un “wrapper” de l’HTML5 sur Android. En d’autres termes , ce projet embarque de l’ HTML5  dans une application Android .

Commencez un nouveau projet Android sous Eclipse à partir d’android 2.0 ( SDK API >=5 ). Vous disposez déjà d’une application web qui tourne sans serveur. Déposez le dans le répertoire “assets” , c’est ici où tout le site web se trouve avec ses références JavaScript, CSS …

Créez un  nouveau layout “main” où on va introduire une webview . Le layout réprésente la view dans le modèle MVC . Cette webview sera la fenêtre d’entrée pour notre application HTML5 .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
 
<WebView    android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"    />
 
</LinearLayout>

Dans le code source , créez une classe NaviRay qui hérite d’ Activity . Si vous n’êtes pas familier avec la notion d’activity,  je vous recommande de comprendre son cycle de vie .
La méthode  onCreate initialise le layout “main”  . La  webview pointe dans le dossier assets vers la page index.html

public class NaviRay extends Activity{
 
	private WebView browser;
 
	/** Called when the activity is first created. */
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		browser  = (WebView) findViewById(R.id.webview);
		browser.getSettings().setJavaScriptEnabled(true);	
		browser.loadUrl("file:///android_asset/index.html");
	}
}

Dans le manifest , rajoutez la permission android.permission.INTERNET

Ca y est, on peut maintenant accéder à notre site web en local.

Options

Cette application ne comporte qu’une seule Activity . Dans le code source ,  la gestion de l’historique du bouton “back” et le menu sont inclus .

Appels natifs

L’une des restrictions de l’HTML est sans aucun doute l ‘ impossibilité d’utiliser des fonctions natives (GPS , accélèromètre , contacts … ) . Quoi que on peut toujours appeler.
Sans utiliser d’intent , il est possible de passer un appel téléphonique ou d’envoyer des SMS juste avec de l’HTML ( testé sous iPhone et Android )

Pour téléphoner vers

<a href="tel:33-123-456-7891">

Pour envoyer un SMS

<a href="sms:12345678">

Pour envoyer un email

<a href="mailto:ray@ray.com?cc=ex@x.com,lisa@x.com&amp;subject=Sujet HTML5 sur Android!&ampbody=Je viens de tester!">

Code source

Le code source de l’application est disponible à cette url http://code.google.com/p/navray/source
Note : le source est géré sous Mercurial Hg . Pour ceux qui ne l’utilisent pas , le source peut être téléchargé à partir de navray_src_01.zip http://code.google.com/p/navray/downloads/list

Vous pouvez utiliser à différentes expérimentations, il ne reste plus qu’à modifier le contenu du dossier “assets”.

Si vous publiez une application à partir de ce source,  merci de modifier le nom de package Java. En effet le package sert d’identifiant pour une application publiée sur l’Android market.