Applications mobiles hybrides
liées à WordPress

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

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

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 :

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

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 :

• GoodBarber
• Mobiloud
• AppPresser

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 :)