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&subject=Sujet HTML5 sur Android!&body=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.
Hi really enjoyed reading your post.
How to learn more about iPhone and iPod secrets fonctions about photos, videos, and music ?
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é.
salut
intéressant tuto pour débutant. Comment accéder à des choses comme jouer des vidéos (HTML5) ? y a t il une librairie qui s’en charge ou faut il le faire à la main ?
Je débute et ça m’a bien aidé pour développer une petite application mobile de mon site web. Merci
Ah Ah, le commentaire du 05 Mai : du copié/collé de l’article! Spam sur WordPress ?
Bref, sinon, ENFIN un article qui parle de comment on réalise une appli HTML5 sans passer par des applications tierces fussent-elles connues et Open-Source. Autant commencer par le bon début
Thanks Valtech.