SlideShare une entreprise Scribd logo
40 minutes pour construire une application mobile
reliée à WordPress avec WP-AppKit
Atelier WordCamp Lyon
5 juin 2015
Prérequis technique :
connaissez-vous les fortune cookies ?
A Lyon, on connaît ça
avec la papillote ;)
En poursuivant votre écoute de cet atelier, vous acceptez l’utilisation des fortune cookies.
Notre volonté :
Übériser le marché des fortune cookies
Un usage des
smartphones de plus en
plus présent
3 milliards de biscuits
fabriqués chaque année
Chaque village de France
possède un PMU... et un
restaurant chinois
WordPress pour les contenus : chaque
message est un post de type “Fortune
Cookie”.
Plugin WP-AppKit : définition des
composants et du thème de l’appli, gestion
des web services et export pour
Cordova/PhoneGap
Cordova / Phonegap / Phonegap Build :
compilation pour téléphones iOS et
Android.
Cordova / PhoneGap / PhoneGap Build
Applications mobiles hybrides
● Cordova = la techno (Apache) | PhoneGap = le produit (Adobe)
● PhoneGap Build = PhoneGap dans le cloud
Application Hybride :
● WebApp HTML/CSS/JS encapsulée dans une coque native
● API Javascript pour accéder aux fonctionnalités du téléphone (photos, géoloc …)
● Compilation > exécutable (.apk, .ipa) prêt pour distribution sur App Stores
WebApp
HTML
CSS
Javascript (accès
téléphone par
l’API JS Cordova )
Cordova / PhoneGap
Icônes
SplashScreen
Plugins
Méta données de l’app
Compilation
Téléphone
Android
iOS
...
WP-AppKit
Construire des applications mobiles connectées à WordPress
● Plugin WordPress open source d’UncatCrea (version beta 0.3)
● https://github.com/uncatcrea/wp-appkit et bientôt sur le repo WordPress.org
● Construction de l’application en BO, à partir des contenus du WordPress.
● Mise à disposition des web services de récupération de ces contenus.
● Noyau applicatif de type WebApp (HTML / CSS / JS, pas de PHP) basé
sur BackboneJS et RequireJS.
● Logique de thèmes HTML / CSS / JS indépendants des thèmes
WordPress, avec mini framework JS pour dialoguer avec le noyau de l’app
depuis les thèmes.
● Export sous forme d’un projet Cordova/PhoneGap
L’application Fortune Cookies
Tu secoues, t’as un cookie, tu partages...
Principe de l’application
1. Récupération des
messages
2. Secouage = affichage
du message
3. Partage du message
via les applis disponibles
C’est parti !
Le thème de l’appli de cette démo est disponible ici :
https://github.com/uncatcrea/wpak-theme-fortune-cookie
Slides de la présentation :
http://uncategorized-creations.com/presentations/wordcamps/lyon-20150605/
Merci ! :)
Collectif UncatCrea
http://uncategorized-creations.com
https://github.com/uncatcrea/wp-appkit
Lionel Pointet @lpointet
Mathieu Le Roi @mat_lr
Benjamin Lupu @benjaminlupu

Contenu connexe

Tendances

PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS Appcelerator
Tiyab K.
 
WordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobilesWordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobiles
Benjamin LUPU
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
ekino
 
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Benjamin LUPU
 
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESSTÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
Emilie LEBRUN
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
Stéphane HULARD
 
MobileDay - Parcours 1 Hybride (Cordova)
MobileDay - Parcours 1 Hybride  (Cordova)MobileDay - Parcours 1 Hybride  (Cordova)
MobileDay - Parcours 1 Hybride (Cordova)
Cellenza
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
Martin Arvisais
 
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Raphaël Kueny
 
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Loïc Knuchel
 
Devoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic frameworkDevoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic framework
Stéphanie Moallic
 
Native script
Native scriptNative script
Native script
Neticoa Sénégal
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic Framework
Stéphanie Moallic
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
CocoaHeads France
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
Abdoulaye Dieng
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
Jean David Olekhnovitch
 
Devoxx 2015, ionic chat
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chat
Loïc Knuchel
 
Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5
Microsoft
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
ekino
 
Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentation
CocoaHeads France
 

Tendances (20)

PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS Appcelerator
 
WordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobilesWordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobiles
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
 
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGap
 
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESSTÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
MobileDay - Parcours 1 Hybride (Cordova)
MobileDay - Parcours 1 Hybride  (Cordova)MobileDay - Parcours 1 Hybride  (Cordova)
MobileDay - Parcours 1 Hybride (Cordova)
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
 
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
 
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
 
Devoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic frameworkDevoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic framework
 
Native script
Native scriptNative script
Native script
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic Framework
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
 
Devoxx 2015, ionic chat
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chat
 
Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
 
Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentation
 

En vedette

Building a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKitBuilding a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKit
Benjamin LUPU
 
Buzzthebrand 2011 : Organiser le Digital en Interne
Buzzthebrand 2011 : Organiser le Digital en InterneBuzzthebrand 2011 : Organiser le Digital en Interne
Buzzthebrand 2011 : Organiser le Digital en Interne
Philippe Vidal
 
Les outils du web atelier 1bis
Les outils du web atelier 1bisLes outils du web atelier 1bis
Les outils du web atelier 1bis
Séverine Alix
 
Référencement et analyse site internet doc de travail
Référencement et analyse site internet doc de travailRéférencement et analyse site internet doc de travail
Référencement et analyse site internet doc de travail
Séverine Alix
 
Créer un site internet ou un blog
Créer un site internet ou un blogCréer un site internet ou un blog
Créer un site internet ou un blog
Séverine Alix
 
Dévelopement extensions WordPress
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPress
IZZA Samir
 
Internet & moi : le vocabulaire de base
Internet & moi : le vocabulaire de baseInternet & moi : le vocabulaire de base
Internet & moi : le vocabulaire de base
CDI CLG Matisse
 
Gestion des donnees personnelles.
Gestion des donnees personnelles.Gestion des donnees personnelles.
Gestion des donnees personnelles.
olivier
 
Mise en place et utilisation d'une plateforme de travail collaboratif par Int...
Mise en place et utilisation d'une plateforme de travail collaboratif par Int...Mise en place et utilisation d'une plateforme de travail collaboratif par Int...
Mise en place et utilisation d'une plateforme de travail collaboratif par Int...
CYB@RDECHE
 
Les nouveaux outils du travail interministériel : la dématérialisation
Les nouveaux outils du travail interministériel : la dématérialisationLes nouveaux outils du travail interministériel : la dématérialisation
Les nouveaux outils du travail interministériel : la dématérialisation
Conseil constitutionnel, Constitutional Council, France
 
Stratégies de présence et de marketing digital
Stratégies de présence et de marketing digitalStratégies de présence et de marketing digital
Stratégies de présence et de marketing digital
Samir Bellik
 
Booster votre visibilité sur les reseaux sociaux
Booster votre visibilité sur les reseaux sociauxBooster votre visibilité sur les reseaux sociaux
Booster votre visibilité sur les reseaux sociaux
Samir Bellik
 
Mobile Apps, Stratégies et Enjeux
Mobile Apps, Stratégies et EnjeuxMobile Apps, Stratégies et Enjeux
Mobile Apps, Stratégies et Enjeux
Samir Bellik
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
SCALA
 
Business Plan d’une application mobile
Business Plan d’une application mobileBusiness Plan d’une application mobile
Business Plan d’une application mobile
ODC Orange Developer Center
 
Concevoir et déployer sa stratégie digitale
Concevoir et déployer sa stratégie digitaleConcevoir et déployer sa stratégie digitale
Concevoir et déployer sa stratégie digitale
Quinchy Riya
 
Maintenance Matters (français)
Maintenance Matters (français)Maintenance Matters (français)
Maintenance Matters (français)
Jenny Beaumont
 
Pourquoi WordPress est le CMS le plus sécurisé ?
Pourquoi WordPress est le CMS le plus sécurisé ?Pourquoi WordPress est le CMS le plus sécurisé ?
Pourquoi WordPress est le CMS le plus sécurisé ?
Boiteaweb
 
8 secrets de productivité (développement personnel)
8 secrets de productivité (développement personnel)8 secrets de productivité (développement personnel)
8 secrets de productivité (développement personnel)
SmartsCube
 
Usages internet adolescents
Usages internet adolescentsUsages internet adolescents
Usages internet adolescents
CToutNet
 

En vedette (20)

Building a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKitBuilding a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKit
 
Buzzthebrand 2011 : Organiser le Digital en Interne
Buzzthebrand 2011 : Organiser le Digital en InterneBuzzthebrand 2011 : Organiser le Digital en Interne
Buzzthebrand 2011 : Organiser le Digital en Interne
 
Les outils du web atelier 1bis
Les outils du web atelier 1bisLes outils du web atelier 1bis
Les outils du web atelier 1bis
 
Référencement et analyse site internet doc de travail
Référencement et analyse site internet doc de travailRéférencement et analyse site internet doc de travail
Référencement et analyse site internet doc de travail
 
Créer un site internet ou un blog
Créer un site internet ou un blogCréer un site internet ou un blog
Créer un site internet ou un blog
 
Dévelopement extensions WordPress
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPress
 
Internet & moi : le vocabulaire de base
Internet & moi : le vocabulaire de baseInternet & moi : le vocabulaire de base
Internet & moi : le vocabulaire de base
 
Gestion des donnees personnelles.
Gestion des donnees personnelles.Gestion des donnees personnelles.
Gestion des donnees personnelles.
 
Mise en place et utilisation d'une plateforme de travail collaboratif par Int...
Mise en place et utilisation d'une plateforme de travail collaboratif par Int...Mise en place et utilisation d'une plateforme de travail collaboratif par Int...
Mise en place et utilisation d'une plateforme de travail collaboratif par Int...
 
Les nouveaux outils du travail interministériel : la dématérialisation
Les nouveaux outils du travail interministériel : la dématérialisationLes nouveaux outils du travail interministériel : la dématérialisation
Les nouveaux outils du travail interministériel : la dématérialisation
 
Stratégies de présence et de marketing digital
Stratégies de présence et de marketing digitalStratégies de présence et de marketing digital
Stratégies de présence et de marketing digital
 
Booster votre visibilité sur les reseaux sociaux
Booster votre visibilité sur les reseaux sociauxBooster votre visibilité sur les reseaux sociaux
Booster votre visibilité sur les reseaux sociaux
 
Mobile Apps, Stratégies et Enjeux
Mobile Apps, Stratégies et EnjeuxMobile Apps, Stratégies et Enjeux
Mobile Apps, Stratégies et Enjeux
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Business Plan d’une application mobile
Business Plan d’une application mobileBusiness Plan d’une application mobile
Business Plan d’une application mobile
 
Concevoir et déployer sa stratégie digitale
Concevoir et déployer sa stratégie digitaleConcevoir et déployer sa stratégie digitale
Concevoir et déployer sa stratégie digitale
 
Maintenance Matters (français)
Maintenance Matters (français)Maintenance Matters (français)
Maintenance Matters (français)
 
Pourquoi WordPress est le CMS le plus sécurisé ?
Pourquoi WordPress est le CMS le plus sécurisé ?Pourquoi WordPress est le CMS le plus sécurisé ?
Pourquoi WordPress est le CMS le plus sécurisé ?
 
8 secrets de productivité (développement personnel)
8 secrets de productivité (développement personnel)8 secrets de productivité (développement personnel)
8 secrets de productivité (développement personnel)
 
Usages internet adolescents
Usages internet adolescentsUsages internet adolescents
Usages internet adolescents
 

Similaire à Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit

Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
Sacha Leprêtre
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
Sébastien Ollivier
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
Benjamin LUPU
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
Christophe Zome
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
Damien Laureaux
 
Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
Microsoft
 
userADgents WWDC iOS 8 juin 2014
userADgents WWDC iOS 8 juin 2014userADgents WWDC iOS 8 juin 2014
userADgents WWDC iOS 8 juin 2014
USERADGENTS
 
Wd601 g formation-developper-des-applications-mobiles-avec-ibm-worklight
Wd601 g formation-developper-des-applications-mobiles-avec-ibm-worklightWd601 g formation-developper-des-applications-mobiles-avec-ibm-worklight
Wd601 g formation-developper-des-applications-mobiles-avec-ibm-worklight
CERTyou Formation
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
NiceToMeetYou
 
Liste des stages 07 02 2017
Liste des stages 07 02 2017Liste des stages 07 02 2017
Liste des stages 07 02 2017
Arnaud GROSSHOLTZ
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
DNG Consulting
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Philippe Beraud
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
neuros
 
iGraal et les webextensions
iGraal et les webextensionsiGraal et les webextensions
iGraal et les webextensions
Christophe Fernandes
 
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Xavier NOPRE
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
Microsoft
 
Webinar - Comment intégrer des contenus riches et attractifs dans vos Apps
Webinar - Comment intégrer des contenus riches et attractifs dans vos AppsWebinar - Comment intégrer des contenus riches et attractifs dans vos Apps
Webinar - Comment intégrer des contenus riches et attractifs dans vos Apps
Rakuten Aquafadas
 
Le développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordovaLe développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordova
Sébastien Ollivier
 

Similaire à Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit (20)

Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
 
userADgents WWDC iOS 8 juin 2014
userADgents WWDC iOS 8 juin 2014userADgents WWDC iOS 8 juin 2014
userADgents WWDC iOS 8 juin 2014
 
Wd601 g formation-developper-des-applications-mobiles-avec-ibm-worklight
Wd601 g formation-developper-des-applications-mobiles-avec-ibm-worklightWd601 g formation-developper-des-applications-mobiles-avec-ibm-worklight
Wd601 g formation-developper-des-applications-mobiles-avec-ibm-worklight
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Liste des stages 07 02 2017
Liste des stages 07 02 2017Liste des stages 07 02 2017
Liste des stages 07 02 2017
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
 
iGraal et les webextensions
iGraal et les webextensionsiGraal et les webextensions
iGraal et les webextensions
 
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
 
Webinar - Comment intégrer des contenus riches et attractifs dans vos Apps
Webinar - Comment intégrer des contenus riches et attractifs dans vos AppsWebinar - Comment intégrer des contenus riches et attractifs dans vos Apps
Webinar - Comment intégrer des contenus riches et attractifs dans vos Apps
 
Le développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordovaLe développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordova
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 

Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit

  • 1. 40 minutes pour construire une application mobile reliée à WordPress avec WP-AppKit Atelier WordCamp Lyon 5 juin 2015
  • 3. A Lyon, on connaît ça avec la papillote ;) En poursuivant votre écoute de cet atelier, vous acceptez l’utilisation des fortune cookies.
  • 4. Notre volonté : Übériser le marché des fortune cookies Un usage des smartphones de plus en plus présent 3 milliards de biscuits fabriqués chaque année Chaque village de France possède un PMU... et un restaurant chinois
  • 5. WordPress pour les contenus : chaque message est un post de type “Fortune Cookie”. Plugin WP-AppKit : définition des composants et du thème de l’appli, gestion des web services et export pour Cordova/PhoneGap Cordova / Phonegap / Phonegap Build : compilation pour téléphones iOS et Android.
  • 6. Cordova / PhoneGap / PhoneGap Build Applications mobiles hybrides ● Cordova = la techno (Apache) | PhoneGap = le produit (Adobe) ● PhoneGap Build = PhoneGap dans le cloud Application Hybride : ● WebApp HTML/CSS/JS encapsulée dans une coque native ● API Javascript pour accéder aux fonctionnalités du téléphone (photos, géoloc …) ● Compilation > exécutable (.apk, .ipa) prêt pour distribution sur App Stores WebApp HTML CSS Javascript (accès téléphone par l’API JS Cordova ) Cordova / PhoneGap Icônes SplashScreen Plugins Méta données de l’app Compilation Téléphone Android iOS ...
  • 7. WP-AppKit Construire des applications mobiles connectées à WordPress ● Plugin WordPress open source d’UncatCrea (version beta 0.3) ● https://github.com/uncatcrea/wp-appkit et bientôt sur le repo WordPress.org ● Construction de l’application en BO, à partir des contenus du WordPress. ● Mise à disposition des web services de récupération de ces contenus. ● Noyau applicatif de type WebApp (HTML / CSS / JS, pas de PHP) basé sur BackboneJS et RequireJS. ● Logique de thèmes HTML / CSS / JS indépendants des thèmes WordPress, avec mini framework JS pour dialoguer avec le noyau de l’app depuis les thèmes. ● Export sous forme d’un projet Cordova/PhoneGap
  • 8. L’application Fortune Cookies Tu secoues, t’as un cookie, tu partages... Principe de l’application 1. Récupération des messages 2. Secouage = affichage du message 3. Partage du message via les applis disponibles
  • 10. Le thème de l’appli de cette démo est disponible ici : https://github.com/uncatcrea/wpak-theme-fortune-cookie Slides de la présentation : http://uncategorized-creations.com/presentations/wordcamps/lyon-20150605/ Merci ! :) Collectif UncatCrea http://uncategorized-creations.com https://github.com/uncatcrea/wp-appkit Lionel Pointet @lpointet Mathieu Le Roi @mat_lr Benjamin Lupu @benjaminlupu