Démarrer un projet web mobile HTML5/JavaScript avec Sencha Touch 2 : la commande Sencha

Depuis la sortie de Sencha Touch 2, je m’y suis beaucoup penché afin de mettre à jour le livre que j’ai co-écris et ainsi que sur plusieurs projets. J’ai également reçu beaucoup de mails de demande d’aide sur le démarrage et la structure à adopter. Je vais dans cet article vous montrer comment bien démarrer votre projet avec Sencha Touch 2.

Prérequis :

Il faut évidemment une bonne connaissance du JavaScript, un serveur web (*AMP, node..) ainsi qu’avoir installé les Sencha SDK Tools sur votre ordinateur. Ceux-ci permettent d’avoir accès à la commande sencha, riche en outils.

Génération de la structure de notre application avec la ligne de commande Sencha

Dans cette deuxième version du framework, Sencha livre un outil très pratique, la commande sencha. Une fois positionné dans votre terminal à l’intérieur du dossier du framework, vous pourrez l’utiliser. Celle-ci nous permet de générer une application simple :

Création d'une application Sencha Touch 2 MVC

Création d’une application Sencha Touch 2 MVC

Structure de notre application Sencha Touch 2 MVC

Vous verrez ensuite que votre dossier (ici FlxST2App) a été créé, ainsi que toutes les ressources Js, SASS, images et html.

Architecture d'une application Sencha Touch 2 MVC

Architecture d’une application Sencha Touch 2 MVC

Si vous lancez votre application, vous verrez une application basique avec un TabPanel, et deux onglets. Le deuxième est particulièrement intéressant pour ceux qui débutent, c’est une vidéo d’explication de Sencha Touch 2.

Ajout de controlleurs

Vous pouvez ensuite ajouter des controllers très facilement à votre application grâce à cette commande :

Ajout d'un controller dans un projet Sencha Touch 2 MVC

Ajout d’un controller dans un projet Sencha Touch 2 MVC

Sencha va alors créer le fichier contenant le controller avec le même namespace que notre application, puis ajouter dans notre app.js la référence à celui-ci.Tout est automatisé !

Packager l’application en production web

Pourquoi je dis production web ? Car vous allez voir deux façons de pouvoir packager votre application. La première, la plus simple, et de garder vos fichiers web et de les compresser pour n’avoir qu’un seul fichier css, un seul fichier JS et un seul fichier html, s’ajoutant le fichier manifest HTML5 permettant de tout cacher côté client notre application. (j’expliquerai les mises à jour distantes dans un prochain article).

Pour pouvoir avoir notre application en mode production, la commande est elle encore très simple :

Packager en production une application Sencha Touch 2 MVC

Packager en production une application Sencha Touch 2 MVC

Packager dans une application native

Cette fonctionnalité est très riche et sera détaillée dans un prochain article. Elle permet de créer des applications natives (contenant une webview qui lance votre application HTML5) pour iOS et Android, que ce soit sous Windows ou sous Mac.

Vous voilà prêt !