Développer des

Applications mobiles hybrides
liées à WordPress

Atelier Meetup WordPress Lyon - 26 février 2015
Mathieu Le Roi

Présentations

Mathieu Le Roi, développeur web freelance sur Lyon.

  • Spécialisé en développement PHP / WordPress backend :
    plugins, développements custom, APIs, Web services...
  • Depuis quelques années des projets pro m'ont amené au dévelopement d'applications mobiles hybrides permettant de réutiliser mes compétences web JS / HTML5 / CSS et APIs serveur sous un nouvel angle.
  • Tweeter perso @mat_lr.
  • Je fais partie du collectif UncatCrea : plugins WordPress Advanced Page Manager et WP AppKit
  • Twitter @UncatCrea : veille techno sur l'écosystème des applis mobiles.
  • Mes deux compères d'UncatCrea : Benjamin Lupu @benjaminlupu et Lionel Pointet @lpointet

Qu'est ce qu'une
application mobile hybride?

Une WebApp encapsulée dans une coque native

Construction d'une WebApp :

  1. Technos web : HTML / Javascript / CSS
  2. "Single Page App"
  3. Contenus (WordPress) récupérés par AJAX via web services (=API) serveur
Codova / PhoneGap / PhoneGap Build

Cordova / Phonegap :

  1. API Javascript pour accéder aux fonctionnalités du téléphone depuis la WebApp
  2. Compilation de la WebApp pour l'OS mobile ciblé (Android, iOS, Windows Phone ...)

Le résultat est un exécutable prêt pour distribution sur les stores.

Technos web : vraiment ?

HTML5 / CSS : oui ! En se mettant à jour sur quelques spécifités CSS, on est bon avec notre bagage HTML/CSS de dev web.

Mais en Javascript, on est bien loin de l'accordéon jQuery...
Au delà de la manipulation du DOM :

  • gestion des interactions mobiles
  • gestion de projets Javascripts conséquents

> Prévoir une certaine courbe d'apprentissage!

Technos web augmentées

Bon par nostalgie rendons quand même un dernier hommage à notre vieil accordéon ;)

Ensuite, il faut faire le pas vers le développement Javascript applicatif :

Organisation du code Javascript

Problématique "Single page App"

  • Routing : re-création de la logique d'url dans une single page app
  • Templating : séparation des modèles de données et de leur rendu
  • Historique des déplacements dans la WebApp
  • Mémorisation / Stockage des données : HTML5 Local Storage

Touch & Gesture events, Animations "mobile like"

  • Bon vieux .click() remplacé par touchstart, touchend, touchcancel, touchleave, touchmove...
  • Des librairies comme Hammer.js existent pour faciliter cette gestion de touch events
  • Pour les animations : une référence : Velocity.js

Frameworks qui tentent d'intégrer plus ou moins toutes les couches

Récupération des contenus WordPress

Côté WordPress, on expose les contenus par des web services JSON.
Typiquement, un plugin qui crée des endpoints que la WebApp vient interroger.

  • REST : opération CRUD via entêtes HTTP, avec format d'urls du type
    http://monsite.com/rest/posts
    http://monsite.com/rest/posts/[id_article]
  • La WP REST API qui doit être intégrée au core, très attendue, mais qui a du retard. Un bon article qui résume la situation.
  • A noter : le principe REST pur n'est pas suffisant pour construire une appli mobile : il faut souvent aussi pouvoir gérer une récupération globale de plusieurs types de contenus et données sans faire de multiples appels HTTP (on est sur mobile!)
  • Sécurisation des données transmises : oAuth est la référence mais n'est pas trivial à mettre en place.

Cordova / PhoneGap / PhoneGap Build

Codova / PhoneGap / PhoneGap Build

Une bonne introduction pour aborder PhoneGap ici.

Cordova = la techno (Apache)
PhoneGap = le produit (Adobe)
PhoneGap Build = PhoneGap dans le cloud

> Avec PhoneGap Build, aucun environnement à installer sur sa machine : tout en ligne.

PhoneGap

L'API javascript fournie par PhoneGap permet d'accéder aux fonctionnalités du téléphone en Javascript depuis la WebApp. Entre autres :

  • Prendre une photo :
    navigator.camera.getPicture( cameraSuccess, cameraError, cameraOptions );
  • Géolocalisation fine :
    navigator.geolocation.getCurrentPosition( geolocationSuccess );
  • Accès aux contacts :
    var myContact = navigator.contacts.create({"displayName": "Test User"});

Compilation

  • A la main en mode CLI : installer sur sa machine l'environnement PhoneGap ET les environnements des OS Mobiles.
  • Délégation à PhoneGap Build : on envoie les sources de notre WebApp + un fichier de config, la compilation se fait en ligne et l'exécutable natif mis à disposition pour téléchargement.

Solutions du moment

Apps Builders en vogue pour créer des applis liées à WordPress :

WP AppKit :

  • Projet d'UncatCrea
  • Plugin WordPress, Version Bêta 0.2
  • https://github.com/uncatcrea/wp-app-kit
  • Sur le repo WordPress.org très bientôt
  • Core open source et le restera (support premium à venir)
  • Testez, cassez, pull requestez, faites des applis mobiles avec vos mains de devs web :)
Exemple avec

WP AppKit

Construction d'une appli mobile :
  • Choix des contenus de l'app en BO WordPress
  • Preview de l'app dans le navigateur
  • Changement de thème, modification d'un template de l'application
  • Compilation avec PhoneGap Build
  • Installation sur téléphones
  • Test sur téléphone : mode offline, synchro avec WordPress