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

U
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
1 sur 10

Recommandé

Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android par
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidBosco Basabana
5.4K vues34 diapositives
Développer des applications mobiles avec phonegap par
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapMakina Corpus
2K vues16 diapositives
jQuery mobile / PhoneGap : contenus dynamiques client-side par
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
6.3K vues36 diapositives
Phonegap par
PhonegapPhonegap
PhonegapVISEO
1.9K vues18 diapositives
Tuto Phonegap par
Tuto PhonegapTuto Phonegap
Tuto PhonegapSUN
1.4K vues16 diapositives
[FR] Présentation de PhoneGap par
[FR] Présentation de PhoneGap[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGapThomas Bassetto
3K vues18 diapositives

Contenu connexe

Tendances

PhoneGap VS Appcelerator par
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS AppceleratorTiyab K.
14.2K vues26 diapositives
WordPress comme back office d'applications mobiles par
WordPress comme back office d'applications mobilesWordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobilesBenjamin LUPU
8.5K vues89 diapositives
Panorama des solutions mobile hybrides par
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybridesekino
4.4K vues79 diapositives
Réaliser une application mobile pour un groupe de presse avec PhoneGap par
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 PhoneGapBenjamin LUPU
5K vues26 diapositives
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS par
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 WORDPRESSEmilie LEBRUN
4.3K vues36 diapositives
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue par
 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 continueStéphane HULARD
4.1K vues35 diapositives

Tendances(20)

PhoneGap VS Appcelerator par Tiyab K.
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS Appcelerator
Tiyab K.14.2K vues
WordPress comme back office d'applications mobiles par Benjamin LUPU
WordPress comme back office d'applications mobilesWordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobiles
Benjamin LUPU8.5K vues
Panorama des solutions mobile hybrides par ekino
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
ekino4.4K vues
Réaliser une application mobile pour un groupe de presse avec PhoneGap par Benjamin LUPU
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 LUPU5K vues
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS par Emilie LEBRUN
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 LEBRUN4.3K vues
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue par Stéphane HULARD
 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 HULARD4.1K vues
MobileDay - Parcours 1 Hybride (Cordova) par Cellenza
MobileDay - Parcours 1 Hybride  (Cordova)MobileDay - Parcours 1 Hybride  (Cordova)
MobileDay - Parcours 1 Hybride (Cordova)
Cellenza928 vues
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks... par Raphaël Kueny
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 Kueny2K vues
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015 par Loïc Knuchel
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 Knuchel3.4K vues
Devoxx France 2015 - Introduction à Ionic framework par Stéphanie Moallic
Devoxx France 2015 - Introduction à Ionic frameworkDevoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic framework
Stéphanie Moallic1.9K vues
Introduction au développement Windows 8 avec XAML et .NET 4.5 par Microsoft
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
Microsoft975 vues
Kinect pour les développeurs Web par ekino
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
ekino2.3K vues

En vedette

Building a mobile app connected to WordPress with WP-AppKit par
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-AppKitBenjamin LUPU
2.4K vues82 diapositives
Buzzthebrand 2011 : Organiser le Digital en Interne par
Buzzthebrand 2011 : Organiser le Digital en InterneBuzzthebrand 2011 : Organiser le Digital en Interne
Buzzthebrand 2011 : Organiser le Digital en InternePhilippe Vidal
582 vues39 diapositives
Les outils du web atelier 1bis par
Les outils du web atelier 1bisLes outils du web atelier 1bis
Les outils du web atelier 1bisSéverine Alix
1K vues122 diapositives
Référencement et analyse site internet doc de travail par
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 travailSéverine Alix
1.5K vues115 diapositives
Créer un site internet ou un blog par
Créer un site internet ou un blogCréer un site internet ou un blog
Créer un site internet ou un blogSéverine Alix
1.8K vues184 diapositives
Dévelopement extensions WordPress par
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPressIZZA Samir
1.1K vues59 diapositives

En vedette(20)

Building a mobile app connected to WordPress with WP-AppKit par Benjamin LUPU
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 LUPU2.4K vues
Buzzthebrand 2011 : Organiser le Digital en Interne par Philippe Vidal
Buzzthebrand 2011 : Organiser le Digital en InterneBuzzthebrand 2011 : Organiser le Digital en Interne
Buzzthebrand 2011 : Organiser le Digital en Interne
Philippe Vidal582 vues
Référencement et analyse site internet doc de travail par Séverine Alix
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 Alix1.5K vues
Créer un site internet ou un blog par Séverine Alix
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 Alix1.8K vues
Dévelopement extensions WordPress par IZZA Samir
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPress
IZZA Samir1.1K vues
Internet & moi : le vocabulaire de base par CDI CLG Matisse
Internet & moi : le vocabulaire de baseInternet & moi : le vocabulaire de base
Internet & moi : le vocabulaire de base
CDI CLG Matisse2.6K vues
Gestion des donnees personnelles. par olivier
Gestion des donnees personnelles.Gestion des donnees personnelles.
Gestion des donnees personnelles.
olivier7.2K vues
Mise en place et utilisation d'une plateforme de travail collaboratif par Int... par CYB@RDECHE
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@RDECHE866 vues
Stratégies de présence et de marketing digital par Samir Bellik
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 Bellik1K vues
Booster votre visibilité sur les reseaux sociaux par Samir Bellik
Booster votre visibilité sur les reseaux sociauxBooster votre visibilité sur les reseaux sociaux
Booster votre visibilité sur les reseaux sociaux
Samir Bellik1.4K vues
Mobile Apps, Stratégies et Enjeux par Samir Bellik
Mobile Apps, Stratégies et EnjeuxMobile Apps, Stratégies et Enjeux
Mobile Apps, Stratégies et Enjeux
Samir Bellik1.1K vues
Les solutions mobiles (potentiel et enjeux) par SCALA
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
SCALA2K vues
Concevoir et déployer sa stratégie digitale par Quinchy Riya
Concevoir et déployer sa stratégie digitaleConcevoir et déployer sa stratégie digitale
Concevoir et déployer sa stratégie digitale
Quinchy Riya31.5K vues
Maintenance Matters (français) par Jenny Beaumont
Maintenance Matters (français)Maintenance Matters (français)
Maintenance Matters (français)
Jenny Beaumont3.3K vues
Pourquoi WordPress est le CMS le plus sécurisé ? par Boiteaweb
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é ?
Boiteaweb4.4K vues
8 secrets de productivité (développement personnel) par SmartsCube
8 secrets de productivité (développement personnel)8 secrets de productivité (développement personnel)
8 secrets de productivité (développement personnel)
SmartsCube1.5K vues
Usages internet adolescents par CToutNet
Usages internet adolescentsUsages internet adolescents
Usages internet adolescents
CToutNet18.8K vues

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

Gtug2 Mobile app with web technlogy par
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
496 vues28 diapositives
Support developpement applications mobiles avec ionic v3 et v4 par
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 v4ENSET, Université Hassan II Casablanca
14.9K vues84 diapositives
JavaScript Open Day - Migration Web To App par
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppSébastien Ollivier
3.1K vues15 diapositives
Construire une PWA connectée à WordPress par
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPressBenjamin LUPU
544 vues20 diapositives
Cours cordova & REST par
Cours cordova & RESTCours cordova & REST
Cours cordova & RESTChristophe Zome
416 vues120 diapositives
Conférence Titanium + Alloy au JUG Montpellier par
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierDamien Laureaux
6K vues128 diapositives

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

Construire une PWA connectée à WordPress par Benjamin LUPU
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
Benjamin LUPU544 vues
Conférence Titanium + Alloy au JUG Montpellier par Damien Laureaux
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
Damien Laureaux6K vues
Developpement mobile hybride avec Visual Studio, Apache Cordova par Microsoft
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
Microsoft2.3K vues
userADgents WWDC iOS 8 juin 2014 par USERADGENTS
userADgents WWDC iOS 8 juin 2014userADgents WWDC iOS 8 juin 2014
userADgents WWDC iOS 8 juin 2014
USERADGENTS4.7K vues
Wd601 g formation-developper-des-applications-mobiles-avec-ibm-worklight par CERTyou Formation
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 ? par NiceToMeetYou
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
NiceToMeetYou7.4K vues
Présentation GWT et HTML 5 pour l'Offline par DNG Consulting
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 Consulting2.2K vues
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj... par Philippe Beraud
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 Beraud1K vues
Passage aux applications mobiles par neuros
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
neuros783 vues
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ... par Xavier NOPRE
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 NOPRE1K vues
L'histoire d'HTML5 pour les développeurs Windows Phone 8 par Microsoft
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
Microsoft891 vues
Webinar - Comment intégrer des contenus riches et attractifs dans vos Apps par Rakuten Aquafadas
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 par Sébastien Ollivier
Le développement mobile multiplateforme avec cordovaLe développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordova

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