Récemment, j’ai décidé de me replonger dans les applications mobiles. Mais cette fois ci, hors de question d’ouvrir Eclipse ou Visual Studio. L’idée c’est de faire du HTML 5 et d’exporter l’application dans les différentes plateformes. Pour y parvenir, il existe aujourd’hui plusieurs outils (XDK, Phonegap, Codiqua…).
L’outil que j’ai choisi est le XDK d’Intel.
C’est un éditeur en mode Dreamweaver (code + design) créé par Intel en 2013. Il est assez bien terminé, car il propose un export vers une multitude de plateformes:
– Android
– iOS
– Windows Phone
– Blackberry
– Tizen
– Amazon…
Plusieurs exemples sont disponibles et permettent de comprendre l’approche à avoir sur son projet. Au départ, vous aurez tendance à utiliser le mode design pour voir ce que l’éditeur a dans le ventre (listview, header, footer…). Une fois tout ça compris, Bye bye le design, et bonjour le code.
Les projets XDK peuvent être variés, vous pouvez ainsi ajouter des pages codés en XDK, jQuery Mobile, ou Twitter Bootstrap. Si vous restez sur du full XDK, le projet comprendra un répertoire app_framework qui possèdera principalement un fichier css, et un fichier js.
Le fichier JS ajoute un certain nombre de fonctionnalités, et permet notamment de gérer le cross plateforme. En lancant votre application, celui ci va ajouter une class au body qui indiquera s’il s’agit d’android, de windows …
Vous pouvez modifier ça à la main pour vous rendre compte de l’approche de votre application directement dans votre navigateur. Les classes utilisées étant contenus dans af.ui.min.css.
Astuce: Pour vous y retrouver dans ce fichier, faites donc un remplacer } par }\n dans notepad++.
Suivant le thème appliqué ou les widgets choisis, ce fichier va évoluer, et vous rajouter un certain nombre de lignes. Il peut même entrer en conflit avec index_main.less.css qui est un autre fichier css utilisé par le XDK.
Pour vous rendre compte du résultat d’un projet de ce type, vous pouvez consulter http://www.makozfriends/mobile.
Une fois l’architecture appréhendée, il devient facile de créer ses blocs, ses procédures json, et d’importer les contenus.
Si vous faites du JSON, n’oubliez pas d’ajouter la ligne PHP (sinon vos contenus seront bloqués)
header(‘Access-Control-Allow-Origin:*’);
Une fois votre projet terminé, une interface vous proposera d’exporter votre application dans les différentes plateformes. Avant cela, pensez à la tester via l’émulateur intégré. Vous verrez que l’astuce pour rajouter la class au body, vous permettra un bien meilleur débuggage.
Personnellement, j’ai du passé pas mal de temps à écraser la configuration CSS d’origine. En effet, les input windows avaient un fond noir, ou encore le body sous Android. Même chose pour les titres et aussi le header qui déconnait si il avait soit 2, soit 3 boutons . Pour l’uniformisation du résultat, il faudra encore repasser !
Une fois que vous avez un résultat cohérent partout, il faut reconnaitre que la création de l’application est très simple. L’écran splashscreen est géré nativement, et apparemment, il serait même possible de gérer des notifications (pas testé).
Un autre problème de taille, c’est l’exportation vers autre chose que Android.
Pour tester Windows, vous pouvez mettre: PUBLISHER ID et APP ID = c14e93aa-27d7-df11-a844-00237de2db9e
Mais dans la « vraie » vie, il vous faudra un compte sur le store. A noter que l’export est Windows Phone 8 (pas 7).
Pour tester iOS, il vous faudra un certificat p12 obtenue via votre compte développeur du store.
Pour Android, c’est très simple (il y a même une synchro temps réél pour tester l’application).
Conclusion:
Pour résumé, ce type d’éditeur est une vraie bonne idée. Cela permet de réutiliser les connaissances du HTML/JS/CSS (facile à trouver) pour développer des applications mobiles. Malheureusement les CSS ne sont pas encore adaptés correctement, et on perd du temps à vérifier/corriger le résultat sur chacune des plateformes. Je terminerais par dire que même si ca peut simplifier la vie pour ceux qui veulent à tout prix une application mobile, il ne faut pas oublier qu’une appli mobile pour réussir doit apporter une vraie valeur ajoutée, et pas seulement se contenter de recopier le site standard. Si votre objectif est uniquement une duplication, le responsive design me parait une bien meilleure idée…
