edito-cinnk-magazine-decembre-2015

6 mois déjà !

Avec ce numéro 5 (le sixième), Cinnk magazine à 6 mois !

Application smartphone et Joomla!

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!

Application smartphone et Joomla!

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 :

http://appcarvers.com/api-releases/api_installer/api_installer-1-6/ac_api_installer_v1-6zip?format=raw

Le code source est également disponible sur github :

Une fois le package installé dans votre site joomla et le plugin activé, votre site est prêt à dialoguer.

4. Tester votre application

Application smartphone et Joomla

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.

archive-decompressee


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

compiler 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.

Notez cet article:
6
Le sondage du mois
Déjà 6 mois ! Merci !

Commentaires 13

 
fynhooft le mardi 1 décembre 2015 17:22

Bonjour,

Est-ce que l'application smartphone du forum de joomla.fr a été réalisé avec cette méthode ?
Sinon comment ?
Merci d'avance pour la réponse.

Bonjour, Est-ce que l'application smartphone du forum de joomla.fr a été réalisé avec cette méthode ? Sinon comment ? Merci d'avance pour la réponse.
fynhooft le mardi 1 décembre 2015 21:22

... à l'étape 1 (TELECHARGEMENT), il est précisé qu'il faut téléchargé le fichier "download.zip". Ce dernier fichier ne contient qu'un fichier "readme.md" lui-même dans un unique dossier !
Ne manquerait-il pas les fichiers essentiels ?

... à l'étape 1 (TELECHARGEMENT), il est précisé qu'il faut téléchargé le fichier "download.zip". Ce dernier fichier ne contient qu'un fichier "readme.md" lui-même dans un unique dossier ! Ne manquerait-il pas les fichiers essentiels ?
Yann Gomiero le mercredi 2 décembre 2015 06:32

Bonjour, comme indiqué dans le readme de github, vous pouvez télécharger l'exemple avec les catégories de la JED : https://github.com/JoomGap/JGJEDStarter ou le modèle équivalent vierge : https://github.com/JoomGap/JGBoilerplate ... Parti de la solution JGBoilerplate, la version aura peu de différence et sera disponible dans peu de temps.

Bonjour, comme indiqué dans le readme de github, vous pouvez télécharger l'exemple avec les catégories de la JED : https://github.com/JoomGap/JGJEDStarter ou le modèle équivalent vierge : https://github.com/JoomGap/JGBoilerplate ... Parti de la solution JGBoilerplate, la version aura peu de différence et sera disponible dans peu de temps.
Yann Gomiero le mercredi 2 décembre 2015 06:39

Bonjour, la compilation se fait sous licence propriétaire de tapatalk pour les forums et c'est vbulletin qui est utilisé comme forum de joomla.fr

Bonjour, la compilation se fait sous licence propriétaire de tapatalk pour les forums et c'est vbulletin qui est utilisé comme forum de joomla.fr
dumpeur le mercredi 2 décembre 2015 05:49

Bonjour

Sujet très intéressant !
Mais je confirme qu'il doit manquer quelque chose à l'archive.

Merci

Bonjour Sujet très intéressant ! Mais je confirme qu'il doit manquer quelque chose à l'archive. Merci
Yann Gomiero le mercredi 2 décembre 2015 06:42

Réponse indiquée dans le "readme" de github. L'archive sera publiée prochainement mais vous pouvez tester avec https://github.com/JoomGap/JGJEDStarter - Si vous avez des difficultés sur les étapes ( par exemple pour importer les licences google ou ios ), vous pouvez laisser un message sur le forum de cinnk : http://cinnk.com/forum

Réponse indiquée dans le "readme" de github. L'archive sera publiée prochainement mais vous pouvez tester avec https://github.com/JoomGap/JGJEDStarter - Si vous avez des difficultés sur les étapes ( par exemple pour importer les licences google ou ios ), vous pouvez laisser un message sur le forum de cinnk : http://cinnk.com/forum
Ewil79 le lundi 18 avril 2016 10:44

Voilà une solution des plus intéressantes et des plus utiles même si je ne l'ai pas encore tester. A quand une série sur le sujet? ;)

Voilà une solution des plus intéressantes et des plus utiles même si je ne l'ai pas encore tester. A quand une série sur le sujet? ;)
Casper17 le mardi 15 novembre 2016 13:28

Bonjour

cela prend il en charge les forum KUNENA ?

merci pour l'article

Bonjour cela prend il en charge les forum KUNENA ? merci pour l'article
Yann Gomiero le mardi 15 novembre 2016 13:45

On peut tout à fait créer une appli phonegap compatible iOS et Android, connectée à kunena / joomla via l'extension https://www.hoicoimasti.com/products/8-joomla-extension/3-joomla-api-for-mobile-apps-android,-iphone-ipad-external-site.html

On peut tout à fait créer une appli phonegap compatible iOS et Android, connectée à kunena / joomla via l'extension https://www.hoicoimasti.com/products/8-joomla-extension/3-joomla-api-for-mobile-apps-android,-iphone-ipad-external-site.html
Casper17 le mardi 15 novembre 2016 13:56

Merci Yann pour ces informations !

Merci Yann pour ces informations !
Casper17 le mardi 15 novembre 2016 13:58

Je vais abuser mais, si tu connais un tuto je suis preneur ;) ;)

Je vais abuser mais, si tu connais un tuto je suis preneur ;) ;)
Yann Gomiero le mardi 15 novembre 2016 17:16

Je propose des formations à ce sujet et un tutoriel video en français est en préparation. Il sera actualisé car les outils se sont considérablement amélioré depuis la publication de cet article.

Je propose des formations à ce sujet et un tutoriel video en français est en préparation. Il sera actualisé car les outils se sont considérablement amélioré depuis la publication de cet article.
Casper17 le mardi 15 novembre 2016 19:30

J'ai hâte de voir tout ça ;)

J'ai hâte de voir tout ça ;)
Déjà inscrit ? Connectez-vous ici
Guest
dimanche 24 septembre 2017
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.