Application Android avec PhoneGap 3 et Sencha Touch 2 1/5

Cet atelier vous montre comment développer une application mobile Android en utilisant les frameworks PhoneGap dans sa version 3, et Sencha Touch dans sa version 2. Nous allons démarrer la partie 1/5, qui est une introduction à PhoneGap.

Vous pouvez obtenir une copie PDF de ce document en participant au quiz situé en bas de page.

Partie 1: Introduction à PhoneGap

Durant cette séance, vous allez:

  • Découvrir le développement mobile hybride;
  • Découvrir le développement mobile multi-plateforme.

Avant de commencer, vérifiez la check-list:

Le marché du développement mobile est l’un des plus prolifiques en ce moment, comme le montre cette infographie de supermonitoring.com. Je l’ai découpé en diapositives pour la circonstance.

Pour un développeur ou une entreprise disposant de ressources limitées, produire une application mobile aussi simple qu’une calculette requiert:

  • La maîtrise de chacun des principaux systèmes d’exploitation mobile;
  • La mise en place d’un environnement de développement dédié pour chaque système visé;
  • La maîtrise de différents langages de programmation.

Pour dépasser cette fragmentation, le projet PhoneGap a vu le jour. Initialement développé par la société Nitoby, puis acquis par Adobe en 2011 sous le nom Cordova, PhoneGap est un framework qui permet de développer des applications mobiles à partir d’un seul code de base. Ce dernier peut ensuite être ensuite déployé sur diverses plateformes mobiles.

 

1 Types d’application mobile

Il y a généralement 2 manières de développer une application mobile:

  • Avec du langage natif: cela signifie utiliser un langage de programmation qui peut directement communiquer avec le système logiciel ou matériel sous-jacent, par exemple le Java pour Android. L’avantage indéniable est l’accès à toutes les fonctionnalités (autorisées par le constructeur) du mobile. Egalement, l’application s’exécute dans les meilleures performances possibles de l’appareil. Mais le principal inconvénient est la nécessité d’apprendre tout un langage de programmation pour chaque plateforme visée;
  • Avec des langages du Web: il est aujourd’hui courant de développer des applications Web semblables aux applications de bureau, par exemple Google Docs. Ces applications ont la particularité de s’exécuter au sein d’un navigateur Web. L’avantage ici est de pouvoir écrire du code une seule fois (en suivant les standards), et de le voir s’exécuter sur tous les navigateurs modernes (Chrome 4+, Safari 4+, Firefox 3.5+, Opera 10+, Internet Explorer 10+). Le principal inconvénient est qu’une telle application  ne peut accéder ni au système d’exploitation, ni au matériel sur lequel il tourne.

Il existe enfin une toute récente façon de faire, qui est également la raison d’être de PhoneGap: le développement mobile hybride. Entendez par là le croisement  des 2 précédentes techniques, afin de pouvoir bénéficier de tous les avantages possibles, et de se libérer des inconvénients. Donc en développement mobile hybride, on utilise des langages standards du Web, pour développer des applications mobiles natives! Nous allons voir dans quelques instants comment cela peut être possible.

 

2 Write Once, Run Anywhere

Si vous avez déjà pratiqué du Java, vous avez peut-être rencontré cette expression. C’est un slogan popularisé par Sun Microsystems pour montrer l’avantage du langage Java pour le développement multi-plateforme. Çà pourrait se traduire en «Ecrivez une fois, exécutez n’importe où»! Concrètement, l’idée est d’écrire le code de son application une seule fois, et de pouvoir la faire exécuter sur toutes les plateformes mobiles (Android, iOS…).

Je vous montrerai un peu plus tard l’architecture de PhoneGap au sein d’une plateforme mobile telle qu’Android. Mais déjà, vous pouvez comprendre qu’une application PhoneGap est en réalité un navigateur Web! La seule particularité de ce navigateur est de ne pouvoir afficher qu’un site à la fois (l’application proprement dite). L’important ici est de voir que, si une application PhoneGap est un navigateur Web et que toutes les plateformes mobiles (modernes) en sont équipées, nous sommes bien partie pour faire du développement multi-plateforme en codant une seule fois! Et ce n’est pas tout, la plupart de ces navigateurs utilisent le moteur Webkit (Android, iOS, BlackBerry, Nokia…), contrairement à celui de Windows Phone qui a son propre moteur basé sur Internet Explorer. Cela signifie qu’en respectant les standards de programmation Web, vous n’aurez qu’à tester sur 2 plateformes au minimum. N’est-ce pas formidable?

Mais je vous arrête tout de suite, nous n’allons pas développer un navigateur Web! Nous allons plutôt en utilisé un qui est fourni par toutes les plateformes mobiles, appelé le Webview. Les développeurs en langage natif le connaissent très bien, car il leur permet d’intégrer un navigateur dans leurs applications, par exemple pour afficher une page d’aide rédigée en langage HTML. Alors nous allons nous aussi nous en servir pour afficher notre application.

Maintenant vient la question de comment utiliser les fonctionnalités du téléphone dans notre application, comme prendre une photo par exemple? Souvenez-vous, le navigateur n’a normalement pas accès à la plateforme sur laquelle il tourne: imaginez-vous si un site web pouvait accéder à votre disque dur? Encore une fois, nous allons remercier le Webview. Chaque plateforme donne la possibilité à ce navigateur, de pouvoir utiliser le matériel ou le logiciel sous-jacent via le langage JavaScript. Ainsi pour prendre une photo depuis l’application, il faudra appeler une fonction JavaScript qui elle, va appeler la fonction correspondante en Java (sur Android par exemple). Cette dernière lancera la prise de la photo, et la retournera à la première qui pourra poursuivre son traitement. La communication entre les deux entités se fait via le format de données JSON.

De tout ce qui précède, la partie la plus importante pour nous en tant que développeur d’applications hybrides, c’est le codage même de l’application à l’aide des langages du Web, c’est-à-dire le HTML, le CSS et le JavaScript. C’est là que nous allons coder l’interface graphique, la logique métier et le stockage des données de l’application. Si vous avez déjà développé un site Internet ou quelque chose de semblable, vous n’avez besoin de rien de particulier pour développer sur Android avec PhoneGap. Je termine comme promis avec l’illustration qui résume tout ce que je viens de dire.

Architecture d'une application PhoneGap sur Android

Architecture d’une application PhoneGap sur Android

Fin de la séance!

La prochaine fois, nous verrons comment configurer un environnement de développement pour PhoneGap. Restez informé en suivant la page Facebook.

Vous avez aimé cette séance? Recommandez-la à vos amis 

Références:

Quiz:

Avez-vous compris l’essentiel de cette séance? Faîtes le test et obtenez par email sa version .PDF avec des astuces et des informations utiles en bonus.

PhoneGap permet de développer des applications ...
Une application mobile hybride est...
Le développement mobile multi-plateforme est possible grâce...

NomEmail

 

Vous avez une question? une correction ou une suggestion à me faire? Vous voulez partager votre propre expérience à ce propos? Ou simplement dire merci!? Laissez un commentaire tout juste en bas.

2 Commentaires

  1. Fritz FLA

    Dans ton diaporama au-dessus, on ne voit pas bien les statistiques de Mai 2013 au sujet des téléphones portables, nous sommes obligés de faire un calcul mental. Sinon il est bien ton Blog, merci pour toutes ces infos.

    Répondre
    1. rv (Auteur de l'article)

      Salut Fritz,
      Je pense avoir effectué les corrections nécessaires sur la diapo. Merci!

      Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *