Comment développer une application mobile multiplate-forme ?

Comment développer une application mobile multiplate-forme ?

Avec la sortie de HTML5, le web fait le plus grand bond en avant en une génération. Il est maintenant possible de soutenir le stockage local de données structurées, média riches…, à l’aide d’un navigateur.

Sencha Touch, le nouveau Framework vient bousculer les solutions du marché de développement d’applications mobiles

Sencha Touch s’appuie sur un SDK (Software Development Kit ou devkit) puissant qui permet, grâce aux normes HTML 5 et CSS3, de créer des applications riches sans avoir à dépendre d’une plate-forme propriétaire.

Il fournit un cadre rebuste préconfiguré pour favoriser l’évolutivité et la maintenabilité de vos applications suivant le pattern Modèle-Vue-Controller (MVC). Sencha Touch vous permet donc de faire du développement en parallèle grâce à la puissance du principe MVC.

Nous allons vous présenter comment créer une application mobile multiplate-forme à l’aide du Framework Sencha Touch.

Que faut-il avoir pour démarrer avec Sencha Touch ?

  1. Un serveur web ;
  2. Un navigateur Web de préférence : Google Chrome, sinon Safari ;
  3. Le SDK Sencha Touch et le framework Sencha Touch 2.0 (version commerciale ou Open source) que vous pouvez télécharger ici : http://www.sencha.com/products/touch/download/

Vous devez installer le SDK et désarchiver Sencha Touch 2.0 dans un répertoire sur votre disque.

Vous pouvez utiliser votre IDE Eclipse en créant un projet web dynamique dans lequel il vous faudra ajouter le contenu de votre projet Sencha Touch. Dans ce cas, vous devez utiliser un conteneur web de type Tomcat ou celui d’un serveur d’application JEE.

Si vous optez pour un serveur Apache, pour l’exécution de votre application, nous vous proposons donc d’installer cet éditeur : e-texteditor que vous pouvez télécharger ici : http://www.e-texteditor.com.

Pour développer et exécuter l’application en téléchargement, nous optons pour l’éditeur de texte e-texteditor pour le développement sous Windows, et un serveur Apache pour l’exécution de l’application. Pour pré-visualiser l’application sur l’ordinateur avant de l’installer sur une plate-forme mobile, vous pouvez utiliser le navigateur Chrome.

Comment créer un projet avec le framework Sencha ?

Etape 1 : générer le projet

Le framework Sencha Touch fournit des commandes qui vous permettent de générer l’architecture complète de votre projet ainsi que les fichiers nécessaires pour le démarrage. Ces commandes sont également utilisées pour générer ou mettre à jour des fichiers supplémentaires : controller, js … Je vous invite à les étudier dans la documentation du produit.

Cette commande permet de générer le projet app :

>sencha generate app MyAPP ../../project/mobile/app

MyAPP : le nom de votre application

../ ../projects/mobile/app = chemin+ nom du répertoire source de votre projet.

La sortie de console après la génération :

Sencha Touch : sortie de console après la génération

Etape: 2 : importer le projet

Après la génération, vous devez importer le projet sous e-texteditor en faisant : File -> Open dir As Project. Pour ceux qui développent sous Eclipse, il faudra alors ajouter vos fichiers dans le répertoire web de votre application.

Sencha Touch et e-texteditor

Le fichier : index.html contient la définition du CSS applicable à vos différentes vues. Vous pouvez bien sûr adapter le style défini par défaut.

Voici un projet simple que je vous invite à télécharger. Il peut vous servir de base pour monter en compétence sur ce Framework qui permet de développer des applications mobiles assez performantes et riches pour tous les secteurs d’activité.

Voici le rendu de l’exemple depuis un navigateur Chrome.

Sencha Touch : rendu de l'application mobile sous Google Chrome

Lien de téléchargement de la démo : softsenchademo

Dans notre prochain article, nous vous présenterons à partir de cet exemple comment débuguer l’application, la tunner et l’installer sur un iPhone.

Il existe un Designer avec une licence commerciale pour développer rapidement des applications mobiles en mode RAD.

Personnellement, je préfère le mode que je viens de vous présenter qui vous donne totalement la main sur votre projet. En effet, avec le designer, le code est en mode « read only » et généré à la volée via les drags and drops de composants.

Ecrire un commentaire

* Name, Email, Comment are Required