Julien Dollon | [HTML5] PhoneGap: une mauvaise idée? Applications iPhone, Android et WP7

A goal without a plan is just a wish

My blog in english is here.

Je m’appelle Julien, j'ai 27 ans et je suis un ingénieur logiciel et secondairement manager d'Hommes/projets. Je concois les produits et services de demain. J'ai entre autre participé au developpement de Windows, XBOX, Office, Surface chez Microsoft (Redmond) et je suis maintenant chez Amazon AWS (Seattle) pour Marketplace/EC2/Workspace.

Je travaille dur pour un jour avoir un grand impact sur ce monde.

Mais comme il n’y a pas de titans à combattre, que les monstres n’existent pas, je fais du dev sur des produits, qui je l’espère, vous apporteront de la joie.

Plus d'infos sur moi ici.

 

View Julien  Dollon's profile on LinkedIn

Tous les posts de ce blog ne reflètent que mon opinion et pas celui de mes employeurs et clients.

 

Service d'evaluation de competences et de creation de site webs sur cahors.

[HTML5] PhoneGap: une mauvaise idée? Applications iPhone, Android et WP7

Introduction

image

Vous le savez peut être, je suis un accro du développement XAML ! Mais ce coup-ci, j’ai souhaité proposer quelque chose de différent.
Apres avoir réalisé une
webtv HTML 5 et un petit combat Silverlight/HTML5 voici un article sur PhoneGap.


HTML5 est certes une bonne technologie pour le web, cela n’est plus à prouver.
Mais nous voyons arriver des technologies HTML5 pour développer des applications natives.

Microsoft propose d’ores-et-déjà le développement sur tablette Windows 8 avec HTML5 et très certainement pour WP8 qui se basera sur WinRT et pourquoi pas XBOX vNext sous forme d’un compilateur.

PhoneGap, un projet open-source, qui propose presque la même chose, mais pour 7 plateformes différentes (on ne parle plus de compilateur, voir ci-dessous).

Le concept est:

J’utilise les standards du web comme JavaScript, CSS3 et HTML5 pour développer.

image

J’utilise la technologie PhoneGap qui va compiler mon application de manière cross-platform et me donnera accès aux APIs du device.

image

Je déploie comme si j’étais un développeur lambda.

image

Au niveau de l’aspect expérience utilisateur, ce qui me dérange est que chaque plateforme possède son ergonomie et son design.

Proposer une application compatible iPhone et WP7 c’est faire une croix soit sur Metro soit sur le design Apple, soit les deux !

Ce qui pour moi me donne un mauvais apriori avant même de commencer, mais dans un second temps, mes compétences pro-Microsoft ne me permettent PAS d’attaquer le marché Android et iPhone, alors testons !

Pour cet article, je vais mêler l’utile à l’agréable, je vais créer l’application mobile officielle de ma nouvelle émission: www.areyoujohndoe.com.

Quelle plateforme cibler? Bonne question, d’après le tableau du site Phone Gap, cette technologie supporte de iOS à WP7:

image

J’ai besoin de tout ce qui est aspect media au minimum. Ce qui retire BlackBerry, WebOS, Symbian et Bada. A la limite ce n’est pas grave, je ne m’intéresse pas aux devices mort Smile (celui qui me parle de WP7, je le frappe !).

Mon application sera compatible iPhone (3G->4S), Android (toutes versions), WP7 (toutes versions).

Le prix

Le seul prix à payer est celui de la publication dans chaque marketplace, mais j’en parlerai au cas par cas.

Le design de l’application et ses fonctionnalités

L’application doit être basique. Un service OData (Atom/JSON) est disponible ici:

http://areyoujohndoe.com/JulienDollon.RuJD.Service/wcfdataservice.svc/Video

Il nous donne les dernières vidéos, leurs vignettes et le titre.

Un petit tour sous Photoshop (oui Photoshop ! Car je vais travailler avec des images, si j’étais en XAML j’aurais utilisé Illustrator):

Le logo:

logo

La SplashScreen:

splashscreen

La homepage:

homepage

Les fonctionnalités sont simples:

  • Affichage de la splashscreen
  • Communication en AJAX avec le service
  • Affichage des videos sous forme de vignette
  • Le touch sur une vignette lance une animation qui lance la video
  • Le bouton back du device nous fait revenir sur la page d’accueil
  • Le touch sur les logos du bas ouvre un navigateur vers les sites webs
  • Abonnement statistiques avec Flurry

Développement pour WP7

Etant le plus à l’aise avec cette plateforme, il est tout naturel que je commence par la!

Microsoft travaille en association avec les équipes de Phone Gap pour faire supporter WP7, ce qui est surement un gage de qualité.

La première chose que je commence par faire, est de m’inscrire sur le site de PhoneGap:

https://build.phonegap.com

Première surprise, le petit logo Adobe en bas de page! En fait PhoneGap a été créé par Nitobi Software, lui même racheté par Adobe.

Je continue en me procurant les outils de développement pour WP7, pour ça direction le blog de Soumow.

Une fois le tout installé, c’est parti, démarrons le projet !

Au niveau des technologies nous utiliserons bien évidemment HTML5 et CSS3. Pour le JavaScript, nous opterons pour jQuery. Pour nous faciliter la tâche, on peut opter pour un framework s’appuyant sur jQuery/HTML5/CSS3 comme Sencha Touch ou jQuery mobile.

Des frameworks comme http://www.kendoui.com/ ou http://www.99lime.com/how-it-works/ ou http://twitter.github.com/bootstrap/ peuvent etre interessant.

Pour notre projet, ça sera jQuery mobile.

Démarrons,

image

L’architecture du projet est de cette maniere:

image

Et la soudain, je me demande sur quelle merde je suis tombé! Mon rêve se brise! Je pensais avoir affaire à un projet HTML5 qui serait compile pour devenir du XAML ou de l’IL directement.

En fait non, notre application est composée d’un webbrowser (on a bien fait de choisir jQuery mobile qui est WP7 compliant, supporte dans VS11), ce webbrowser affiche le dossier www et permet au JS de faire des appels à l’API native.

J’ai déjà des frissons d’avance de la tronche de mon app. Bref ne soyons pas défaitiste. La différence entre un site mobile et une app PhoneGap réside dans le fait qu’on est en local. Cela nous ouvre des scenarii offline, database, requête http sans restrictions et accès aux APIs.

Le dossier www contiendra tous nos artifacts HTML/CSS/JS. index.html sera notre premiere page.

Je décide d’installer WebMatrix pour pouvoir éditer mes fichiers HTML5/CSS, et comme le moteur de rendu est IE9, je debug avec le navigateur du téléphone au lieu de faire F5 toutes les minutes pour voir le résultat.

image

Avant de commencer, j’intègre jQuery et jQuery mobile au projet, pour cela j’utilise la documentation sur le site officiel:

http://jquerymobile.com/demos/1.0.1/docs/pages/phonegap.html

Je mets le fond de l’application, je colle le logo du haut et le SuperGeek, les deux logos partenaires et les vidéos (je me suis permis quelque modification par rapport au design de base):

image

Je configure les icons et le titre de l’application dans les propriétés du projet:

image

Résultat:imageimage

image

Et j’exécute, deux problèmes apparaissent:

  • Une page blanche arrive deux secondes avant d’afficher mon application
  • Mon app n’a pas bien charge les images

Pour le premier problème, ceci est dû au temps que PhoneGap se charge. C’est carrément TROP moche. Si vous avez le temps, il faut aller bricoler dans MainPage.xaml,

Pour le second, il faut mettre le Build Action des images à “content”.

Et là, c’est le drame! Le rendu n’est pas le même entre le contrôle navigateur PhoneGap et le IE9 Mango:

image

Premier bug: le contrôle de PhoneGap ne détecte pas bien les marges du téléphone (surtout si on joue avec le systray), résultat un espace en bas tout moche persiste:

image

Du coup je suis obligé de jouer avec le XAML de MainPage pour corriger ca:

        <my:PGView HorizontalAlignment="Stretch" 
                   Margin="0,0,0,50" 
                   Name="PGView" 
                   VerticalAlignment="Stretch" />

Ensuite second bug, au chargement de jQuery mobile, le background de ma page disparait. Le problème est connu mais le projet est passe de Github à codeplex et toutes les ISSUES ont disparu !! Super leurs histoires…

Au moment où j’écris ces lignes j’aurai déjà fini mon application WP7 en XAML mais là je me retrouve avec un beau background.

Apres quelques hack css/js, j’arrive au même résultat que la version pour IE9 mango.

Il faut maintenant que je crée un datatemplate jQuery et faire une requête AJAX pour charger les vidéos du service tout en utilisant la deserialization odata.

function onDeviceReady() {
    $.support.cors = true;
    var query = "http://areyoujohndoe.com/JulienDollon.RuJD.
    Service/wcfdataservice.svc/Video?$top=3";

    $.ajax({
        dataType: "json", contentType: "application/json",
        url: query,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
        },
        error: function (xhr) {
            ShowData(xhr);

        },
        success: function (xhr) {
            ShowData(xhr);
        }
    });
}
        <script id="myTemplate" type="text/x-jquery-tmpl">
            <li style="background-color: rgba(255,255,255,0.5); width:100%; " data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c">
                            <div style="background-color: rgba(255,255,255,0.5);" class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                <a href="index.html" class="ui-link-inherit">
				            <img style="margin-top:7px" src="${image}" class="ui-li-thumb">
				            <h3 class="ui-li-heading">${title}</h3>
				            <p class="ui-li-desc">${description}</p>
			            </a></div></div></li>
        </script>

Premier appel natif: nous devons vérifier s’il existe une connexion internet grâce à l’API WP7.

En C# nous aurions fait:

if (!NetworkInterface.GetIsNetworkAvailable())
{
    MessageBox.Show("You need an internet connection to use this application");
    NavigationService.GoBack();
}

En PhoneGap (donc Javascript) nous faisons: Ah, bah en fait on ne fait pas. Oui car concrètement au tableau marketing du haut, ils oublient de préciser qu’il faut des plugins pour utiliser chaque spécificité. Or, des plug ins pour WP7 bah… il y en a pas ou presque !!

https://github.com/purplecabbage/phonegap-plugins/tree/master/WindowsPhone

Je vais donc, en JS, appeler une fonction C# de cette manière…:

window.external.Notify('verifConnection');

Et dans MainPage.xaml (…):

public MainPage()
{
    InitializeComponent();
    PGView.Browser.ScriptNotify +=new EventHandler<NotifyEventArgs>(Browser_ScriptNotify);
}

void Browser_ScriptNotify(object sender, NotifyEventArgs e)
{
    if (e.Value.Equals("verifConnection"))
    {
        if (!NetworkInterface.GetIsNetworkAvailable())
        {
            MessageBox.Show("You need an internet connection to use this application");
            NavigationService.GoBack();
        }
    }
}

L’une des best practices PhoneGap est d’utiliser une seule page pour les petites applications. On utilise JS ou CSS3 pour afficher/cacher des éléments de la page.

Lors du touch sur un élément de ma liste de vidéos, je vais déclencher une animation pour afficher l’épisode.

J’utilise d’habitude un framework d’animations CSS disponible ici: http://daneden.me/animate/#cta mais le navigateur de WP ne supporte pas WebKit and co.

Même jQuery mobile n’arrive pas a faire fonctionner les animations sous IE (http://jquerymobile.com/demos/1.0.1/docs/pages/page-transitions.html), je me serai attendu a du CSS3 et un équivalent JavaScript pour faire fonctionner le tout sur tous les mobiles...

J’opte donc pour une simple redirection vers la vidéo youtube.

Il ne manque plus que capter le bouton back pour éviter de quitter l’application quand on souhaite revenir à l’écran principal. Soumow montre comment utiliser le bouton back.

Le problème est que nous avons redirige vers la page youtube, c’est donc notre contrôle WebBrowser qui capte le back. La solution est de créer un wrapper C# qui capte l’évènement et le lève dans l’application PhoneGap.

A ce stade, l’application est terminée (ouf…). Je conseil, si vous souhaitez avoir des statistiques, d’installer Flurry pour HTML5.

Pour la soumission de l’application, c’est comme une app normale. Il faut payer un compter développeur de 100$ puis aller sur create.msdn.com et proposer l’application.

image

Résultat en image:

Au démarrage, la belle page blanche dont je vous ai parlé:

WP_000013

Puis l’application avec le chargement des videos:

WP_000011

WP_000014

Developpement pour iPhone

Le développement iPhone impose d’avoir un mac ! Heureusement que j’en ai unclip_image001[4]. Il faut se doter de la dernière version de mac OS X 10.6 et de xCode 4 (3 go) disponible sur le mac store.

Screen Shot 2012-02-09 at 8.12.28 PM

Apres l’installation du package PhoneGap, un nouveau type de projet fait son apparition dans xCode:

Screen Shot 2012-02-09 at 9.00.17 PM

Je crée donc un nouveau projet PhoneGap et intègre le code déjà réalisée pour WP7.

En moins de cinq minutes, le code passe exactement pareil sous iPhone! Là c’était vraiment un plaisir de ne pas avoir à tout adapter.

Je remarque au passage que l’expérience de développeur sous xCode est beaucoup plus sympa que sous VS Smile.

Screen Shot 2012-02-17 at 4.02.13 PM

Screen Shot 2012-02-17 at 4.03.46 PM

Screen Shot 2012-02-17 at 4.03.55 PM

Screen Shot 2012-02-17 at 4.38.18 PM

Le resultat sur un iPhone:

IMAG0261

Développement pour iPad

Un copier collé du projet pour iPhone avec adaptation des tailles et le tour est joué, maximum 5 minutes d’adaptation.

Développement pour Android

Je vous préviens à l’ avance, les outils pour Android ont été les plus chiants/long à installer… J’avais l’impression de revenir sous Linux… !! Et l’émulateur rame comme par permis.

La première chose est de télécharger et installer le JDK Java et le SDK Android.

image

Il faut ensuite initialiser l’emulateur Android. Pour cela, on ouvre le AVD Manager, on sélectionne Virtual Devices et on en cree un nouveau.

image

Apres cela, notre émulateur fonctionne:

image

Il faut ensuite installer Eclipse comme IDE ainsi que le plug in pour faciliter le développement mobile: Android Development Toolkit.

Puis installer Apache Ant et Ruby.

Il ne reste plus qu’à installer PhoneGap pour en finir! Il faut exécuter le fichier phonegap-xxxx.jar.

Si je n’ai pas été clair dans mes installations, voici un lien bien fournis.

Le développement pour Android et Android Tablet n’ont pas pris longtemps, le code pour iPhone fonctionnant parfaitement:

Conclusion

La partie installation est franchement chiante (autant que si on était en natif). Je m’attendais à la base a une sorte de compilateur qui permettrait de s’abstraire d’installer les SDK. Je pensais qu’on pourrait aussi s’abstraite du langage natif mais en fin de compte, il suffit de trouver un bug ou un plug in manquant et on est bon pour se taper du code C#/Objective-C/Java etc…

Les performances sont vraiment moyennes, et je ne pense pas qu’avoir un design uniforme sur toutes les plateformes soit une bonne chose. L’expérience utilisateur est clairement pauvre, on a vraiment l’impression d’être sur un site web installe dans une application. De quoi avoir de mauvaises reviews sur les marketplaces.

De plus, je n’ai pas réussi a débuguer le JavaScript et cela m’a couté pas mal de temps et ne travaillant pas en vectoriel le poids des applications est lourd.

Pour conclure, je dirai que, en tant que développeur Microsoft, je n’ai pas le temps ni l’envie d’apprendre le SDK Android et iPhone. Mais je ne vais pas pour autant utiliser PhoneGap pour faire mes “petites” applications ou PoC. Je vais plutôt m’orienter sur le développement web version mobile.

Et si j’ai besoin de faire appel à des API systèmes, j’assume et je fais du natif.

PhoneGap: une technologie à oublier très vite.

Posté le: Feb 11 2012, 00:28 | Commentaires
Catégorie(s): HTML5 | WP7

blog comments powered by Disqus
Anciens commentaires (archive):