Introduction:

Sencha est un framework HTML5 pour créer des application mobiles multiplateformes. L’intérêt de celui-ci est de faire, à partir d’un projet HTML et de code JSON, une même application mobile sur plusieurs plateformes, un gain de temps incroyable si le code s’y tient. Nous allons voir les premiers pas d’une application à partir de Sencha.

Installation:

Il vous faudra télécharger Sencha Touch 2 SDK et le SDK Tools. Le premier correspond aux outils de développement que nous allons mettre en place, le deuxième correspond à l’outil permettant de générer nos applications par la suite en interprétant notre code. Il faut que la documentation Sencha Touch soit installé dans un dossier accessible via le web (http://localhost/Sencha/sencha-touch-2.1.0-gpl/docs/).

Vous pouvez installer Sencha Cmd, un toolkit qui s’utilise en ligne de commande pour différentes taches (générer un projet, le compiler, etc.).

Un serveur web local ainsi qu’un navigateur web sont obligatoires pour l’utilisation de ce framework.

Ces différents outils une fois installés, nous allons vérifier notre environnement en tappant la commande “sencha” dans un terminal. Voici mon résultat:

Benoit-$ sencha
Sencha Cmd v3.0.2.288

Options
  * --debug, -d - Sets log level to higher verbosity
  * --plain, -p - enables plain logging output (no highlighting)
  * --quiet, -q - Sets log level to warnings and errors only
  * --sdk-path, -s - sets the path to the target framework

Categories
  * app - Perform various application build processes
  * compile - Compile sources to produce concatenated output and metadata
  * fs - A set of useful utility actions to work with files.
  * generate - Generates models, controllers, etc. or an entire application
  * manifest - Extract class metadata
  * theme - Builds a set of theme images from a given html page

Commands
  * ant - Invoke Ant with helpful properties back to Sencha Command
  * build - Builds a project from a JSB3 file.
  * config - Loads a config file or sets a configuration property
  * help - Displays help for commands
  * js - Executes arbitrary JavaScript file(s)
  * which - Displays the path to the current version of Sencha Cmd

On voit que la commande existe, on nous retourne la version de Sencha Cmd, ainsi que différentes aides pour d’autres commandes.

En cas d’erreur, je vous conseille la documentation Sencha Touch très complète: documentation.

Nouveau projet:

Nous allons installer un nouveau projet. Pour cela, je me suis placé dans mon dossier de développement Sencha via l’invité de commande. Entrez ensuite la commande suivante:

Benoit-$ sencha generate app WeatherApp WeatherApp

Cela me génère un dossier WeatherApp avec tout le contenu d’une application par défaut. Si j’accède au dossier via mon navigateur web, cela me renvoie un premier resultat:

Le dossier se structure avec 3 parties:

  • app: c’est là où nous travaillerons principalement, on reconnait la structure MVC (Modèle-Vue-Controleur). Il intègre deux autres parties supplémentaires  “Store” et “Profile”.
  • resources: c’est ici que vous ajouterez toutes vos ressources (images, vidéos, css).
  • touch: c’est le dossier des sources Sencha, il permet de faire les rendus html entre autres.
Revenons sur la partie application:
  • “Store” correspond à la partie qui va être responsable du chargement de donnée. Il faudra l’utiliser pour gérer une base de donnée locale dans l’application ou pour faire des requêtes sur une API distante.
  • “Profile”  vous permettra de personnaliser l’aspect graphique de votre application que ce soit sur smartphone ou tablettes.
Générer son application:

En me basant sur des examples simples de la documentation j’ai réussi à généré un formulaire, mais cette fois-ci nous allons voir comment la générer sur mobile.
Sencha Touch se base sur le fichier “packager.json” pour construire l’application finale. Il permet de sélectionner les sources du projet, d’indiquer la destination du package, ainsi que sur quel mobile il sera généré (iOS, Android, etc.).
Après avoir configuré mon propre fichier “packager.json”, j’execute la commande suivante pour l’envoyer sur simulateur.
Benoit-$ sencha app package run WeatherApp/packager.json

Et voici mon résultat:

Conclusion:

Sencha Touch est assez intéressant à première vue, mais ce ne sont pas des applications natives qu’il génère, il embarque tous les outils Sencha et rend l’application plus lourde qu’une native.

De plus, les requêtes dans le store sont limitées, il ne peut avoir qu’une source gérée automatiquement, soit une base de donnée locale, soit un appel de service web. Pour pouvoir en gérer plusieurs il faudra faire le traitement par soi même.

Enfin, l’idée d’une application hybride, en intégrant du code natif et Sencha Touch est fortement déconseillé.

Cependant ce framework respecte ces différents engagements à savoir le portage sur les différents systèmes pour mobile. Il possède une documentation détaillée, une forte communauté ainsi que certaines mises en avant intéressantes comme un concours basé sur Sencha, jusqu’à 10 000€ à gagner ainsi que le dernier péripherique pour chaque plateforme.