Si la majorité des sites sont compatibles smartphone, les utilisateurs préfèrent de loin les applications dédiées. Nous vous proposons pour ce mois de décembre d'associer le contenu de votre site Joomla à votre première création d'application!
En 5 étapes, développer, compiler et tester une application pour le système de votre choix : ios, android, windows phone ! Pour aller à l'essentiel, la solution choisie sera hybride et se connectera à la liste des articles en vedette.
Quand on évoque les solutions hybrides, Phonegap est l'une des plus connues. C'est aussi un framework racheté par Adobe puis donné à la fondation Apache assurant la continuité du projet sous le nom de Cordova. Adobe a conservé le nom Phonegap pour développer un ensemble de fonctionnalités autour de Cordova. En résumé, ne vous étonnez pas que l'on parle de Cordova ou de Phonegap, c'est le même univers.
1. Téléchargement
Une application sous Phonegap est composée à la fois de pages html/css, de frameworks javascript, de plugins pour accéder à des fonctionnalités spécifiques de l'appareil (caméra, librairie photo, gps...) ainsi qu'un fichier de configuration (config.xml) et d'autres ressources media : images, icônes, etc... De A à Z, La création peut se faire en ligne de commande via la plateforme javascript NodeJS et on peut trouver de nombreux tutoriels sur le sujet.
Pour cette première, nous vous proposons de télécharger l'archive zip qui servira de modèle.
https://github.com/cinnk/application
Cliquer sur "download zip" pour télécharger l'archive à décompresser sur votre ordinateur.
2. Personnalisation de l'application
Une fois l'archive décompressée, vous pouvez modifier sa présentation en remplaçant les images et icônes existantes. Vu le nombre de format nécessaire, vous pouvez vous aider d'un générateur d'icônes comme : https://makeappicon.com
Attention à respecter le format, la taille et le nom des images d'origine. Le fichier config.xml est éditable avec un éditeur commenotepad++ sur pc outextwrangler sur mac, vous pouvez préciser vos coordonnées ainsi que le nom de l'application.
Le fichier index.html contenu dans le répertoire www contient le gabarit (template) qui affichera les données provenant de votre site, il suffit de lui préciser l'url de connexion vers votre site Joomla.
3. Configuration de Joomla
Pour connecter l'application, vous devez ouvrir votre site au dialogue en créant une API. Joomla pourra fournir une API RESTful dans la prochaine version mais sur les versions actuelles, on peut utiliser une extension tierce.
Techjoomla, éditeur d'Easysocial, Eayblog met à disposition gratuitement son extension API avec un composant et de nombreux plugins pour ouvrir au dialogue chaque type de contenu : liste des utilisateurs, du contenu d'articles et bien évidemment ses propres extensions.
Télécharger le package complet API Installer depuis leur site appcarvers.com dédié à leurs applications connectées à Joomla :
Le code source est également disponible sur github :
- https://github.com/techjoomla/com_api
- https://github.com/techjoomla/com_api-plugins/tree/master/articles
Une fois le package installé dans votre site joomla et le plugin activé, votre site est prêt à dialoguer.
4. Tester votre application
Afin de vérifier que tout fonctionne, Adobe met à disposition un formidable outil de test utilisant votre réseau local. Pour cela, votre smartphone doit être connecté à votre wifi au même réseau que votre ordinateur.
Télécharger et installer le logiciel Phonegap APP
version Mac :
https://github.com/phonegap/phonegap-app-desktop/releases/download/0.2.0/PhoneGapDesktop.dmg
Version Windows :
https://github.com/phonegap/phonegap-app-desktop/releases/download/0.2.0/PhoneGapSetup-win32.exe
puis indiquer le répertoire de l'archive zip décompressée.
Installez ensuite l'application Phonegap sur votre smartphone
ios, disponible sur itunes :
https://itunes.apple.com/app/id843536693
Android, disponible sur Googleplay :
https://play.google.com/store/apps/details?id=com.adobe.phonegap.app
Windows phone, disponible sur windows phone store :
http://www.windowsphone.com/en-us/store/app/phonegap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3
Lancez l'application et indiquez l'ip suivi du port 3000. Si la connexion n'est pas bloquée par votre antivirus/firewall, votre réalisation apparaît directement sur votre smartphone ou tablette.
Cet outil donne l'avantage de pouvoir tester sur un véritable appareil et non une simulation. Vous pouvez ainsi tester le modèle proposé et appliquer vos modifications sans passer par une compilation. Ce travail et l'affichage en temps offre un gain de temps appréciable.
5. Compiler pour votre smartphone
En théorie, il faudrait ajouter le choix de la plateforme puis compiler avec les outils des différents systèmes (Xcode pour Ios, Android SDK). En pratique, nous pouvons gagner du temps en utilisant Build Phonegap, la plateforme de compilation d'Adobe. Gratuit pour une première application, elle est disponible également en illimité pour les abonnés d'un compte cloud de l'éditeur.
Pour réussir l'opération, vous devez archiver préalablement au format zip le répertoire contenant le modèle personnalisé puis connectez-vous sur https://build.phonegap.com pour transférer l'archive et lancer la compilation.
Par défaut, build phonegap propose les 3 plateformes mais chacune sera directement en erreur. Pour finaliser, on doit fournir le certificat pour la plateforme de notre choix, notamment pour ios qui en demande deux (une pour le poste de développement, l'autre est le fichier de provision fourni par le portail Apple Developper).
Une fois l'application compilée, scanner le QR code affiché pour installer directement l'application sur votre smartphone ou tablette.
En résumé, créer une application smartphone hybride est plus facile aujourd’hui car les outils disponibles simplifient le développement et on ne peut ignorer le marché que représente les applications. 2016 devrait être l'avènement de cette solution notamment par l’intégration native des API REST dans Joomla.
Pour Cinnk, cette présentation d’application connectée à votre site n’est que le début et nous vous donnons rendez-vous en 2016 pour aller plus loin dans cette aventure.
