Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WP AppKit
A WordPress plugin to create mobile applications connected to WordPress
WP AppKit
• A crazy idea born at WordCamp Paris 2014
• A tool to use WordPress as a back office for mobile apps
• Done by ...
WP AppKit
How it works
WP AppKit
A WordPress plugin that:
• Allows to configure and export application sources ready to be
compiled
• Provide a t...
WP AppKit
Compiled?
WP AppKit
website workflow != application workflow
WP AppKit
Creating the application
WP AppKit
Components
Menu
Icons and
splashscreens
Theme
Project Archive App Installation File
WP AppKit
Components
Menu
Icons and
splashscreens
Theme
Project Archive App Installation File
It all happens in WordPress
WP AppKit
Components
Menu
Icons and
splashscreens
Theme
Project Archive App Installation File
Bundled as a .zip
WP AppKit
Components
Menu
Icons and
splashscreens
Theme
Project Archive App Installation File
Compilation
here
WP AppKit
Components
Menu
Icons and
splashscreens
Theme
Project Archive App Installation File
There’s several ways to do t...
WP AppKit
Components
Menu
Icons and
splashscreens
Theme
Project Archive App Installation File
You’ve got an .apk or .ipa r...
WP AppKit
When you’re finished
WP AppKit
App Installation File
Phone
Installed App
WordPress
Web Services
3rd Party Services
WP AppKit
App Installation File
Uploaded to app stores
Phone
Installed App
WordPress
Web Services
3rd Party Services
WP AppKit
App Installation File
Downloaded and
installed
Phone
Installed App
WordPress
Web Services
3rd Party Services
WP AppKit
App Installation File
Provided by WP-AppKit
Phone
Installed App
WordPress
Web Services
3rd Party Services
WP AppKit
App Installation File
e.g. accessing camera,
network status…Phone
Installed App
WordPress
Web Services
3rd Party...
WP AppKit
App Installation File
Think of Google
Analytics, push
notifications…
Phone
Installed App
WordPress
Web Services
...
WP AppKit
Enough theory 
WP AppKit
WP-AppKit plugin is available on
GitHub
https://github.com/uncatcrea/wp-appkit
After installation, you’ll see a ...
WP AppKit
WP AppKit
• Title is only used in WordPress
• 1 application per platform (iOS/Android)
• 1 application per version (⚠ a ne...
WP AppKit
The My Project metabox guides you through the configuration
process highlighting which steps you finished before...
WP AppKit
Help me links in each metabox show help texts
WP AppKit
Components
WP AppKit
• You put together components to assemble your app
• Typical component: data source (e.g. posts from a specific
...
WP AppKit
Theme
WP AppKit
• WP-AppKit themes play for apps the same role WordPress
themes play for websites
• You can create your own them...
WP AppKit
menu
WP AppKit
• The application’s menu is based on components (post list,
page…)
• The menu is “live”, meaning if you change i...
WP AppKit
Preview
WP AppKit
• As applications are based on web technologies, you can
preview in the browser, using Chrome’s mobile emulation...
WP AppKit
Phonegap build
WP AppKit
WP AppKit
• With PhoneGap Build, you compile in the cloud
• PhoneGap/Cordova is the technology that allows to build
mobile...
WP AppKit
BTW WP-AppKit also supports classic Cordova CLI 
WP AppKit
export project sources
WP AppKit
• When done with configuration, you export app’s sources
as a .zip file
• This archive is used to compile your a...
WP AppKit
You can also export with WP-CLI 
WP AppKit
Compilation
WP AppKit
Upload your .zip
Compilation
WP AppKit
When compilation’s
done, flash to test
the app on your
phone
Compilation
WP AppKit
Compilation
Or download the compiled app
to release it in app stores
WP AppKit
• Testing requires to prepare test phones
• For Android: allowing installs from unknown sources
• For iOS: creat...
WP AppKit
http://uncatcrea.com/wp-appkit/doc/getting-started/
WP AppKit
Cordova plugins?
WP AppKit
• Cordova plugins can be added to your
project
• They extend the Cordova JavaScript
API to provide new functiona...
WP AppKit
• Cordova plugins are hosted on NPM repository
• To include a plugin in your project, you reference it in your
c...
WP AppKit
Cordova plugins
WP AppKit
Anatomy of a WP-AppKit’s theme
WP AppKit
WP AppKit
• The Themes panel lets you manage your themes
• WP-AppKit comes with 2 default themes :
• Q for iOS (demo)
• Q ...
WP AppKit
WP AppKit
• Themes are stored in the /wp-content/themes-wp-appkit
• themes-wp-appkit folder is created when you installed
...
WP AppKit
Themes are composed of:
• HTML files
• CSS files
• JavaScript files
• Resources (images, fonts)
WP AppKit
• HTML files are used for templates
• WP-AppKit’s apps are Single Page Applications (SPA)
• All HTML files are c...
WP AppKit
WP AppKit
• head.html = <head> section
• This is where you’ll reference .css files
• Layout.html = encloses all other <div...
WP AppKit
Comes from layout.html
WP AppKit
Comes from menu.html
WP AppKit
Comes from archive.html or
single.html
WP AppKit
• You can use template tags in .html files
• Template tags are <%= %> UnderscoreJS template tags
WP AppKit
WP AppKit
You can add your own templates
WP AppKit
Rule n°1: No JavaScript in HTML templates
WP AppKit
• JavaScript is primarily handled in js/functions.js
WP AppKit
• JavaScript dependencies (ie. other required .js files) are
handled with RequireJS
WP AppKit
• functions.js is where you bind (touch) events
WP AppKit
• hook into application’s events
WP AppKit
• and bring screen transitions to life (among other
marvelous things)
WP AppKit
“Master, I see a php subfolder in the theme’s folder!”
WP AppKit
• The theme’s php subfolder is used to extend and hook
into web services
• It remains on the server (ie. it is n...
WP AppKit
WP AppKit
CSS, Images and Animations
WP AppKit
• Apart from rare specific selector (e.g. momentum
scrolling rules), you can use standard CSS
• CSS transitions ...
WP AppKit
• SVG image format is great to support any screen densities
• You can edit SVG file with Inkscape open source ed...
WP AppKit
• You can animate with CSS
• For more control, you can use JS libraries such as
VelocityJS or GSAP
WP AppKit
• I am Benjamin LUPU, Chief Digital Officer for Jeune Afrique press
group and part of the Uncategorized Creation...
WP AppKit
Thank you
Building a mobile app connected to WordPress with WP-AppKit
Upcoming SlideShare
Loading in …5
×

Building a mobile app connected to WordPress with WP-AppKit

1,595 views

Published on

WP-AppKit is an open source WordPress you can use to create mobile apps connected to WordPress. This presentation gives you the basics about it.

Published in: Software
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ♥♥♥ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building a mobile app connected to WordPress with WP-AppKit

  1. 1. WP AppKit A WordPress plugin to create mobile applications connected to WordPress
  2. 2. WP AppKit • A crazy idea born at WordCamp Paris 2014 • A tool to use WordPress as a back office for mobile apps • Done by the Uncategorized Creations collective (3) • Version 0.1: June 2014 • http://getwpappkit.com • Twitter: @WP-AppKit • Facebook: @getwpappkit Intro
  3. 3. WP AppKit How it works
  4. 4. WP AppKit A WordPress plugin that: • Allows to configure and export application sources ready to be compiled • Provide a theme engine to build mobile applications with JavaScript, HTML and CSS • Provide dedicated web services used by applications to retrieve content, authenticate users…
  5. 5. WP AppKit Compiled?
  6. 6. WP AppKit website workflow != application workflow
  7. 7. WP AppKit Creating the application
  8. 8. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File
  9. 9. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File It all happens in WordPress
  10. 10. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File Bundled as a .zip
  11. 11. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File Compilation here
  12. 12. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File There’s several ways to do that. We’ll see later that we can compile online
  13. 13. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File You’ve got an .apk or .ipa ready to be installed
  14. 14. WP AppKit When you’re finished
  15. 15. WP AppKit App Installation File Phone Installed App WordPress Web Services 3rd Party Services
  16. 16. WP AppKit App Installation File Uploaded to app stores Phone Installed App WordPress Web Services 3rd Party Services
  17. 17. WP AppKit App Installation File Downloaded and installed Phone Installed App WordPress Web Services 3rd Party Services
  18. 18. WP AppKit App Installation File Provided by WP-AppKit Phone Installed App WordPress Web Services 3rd Party Services
  19. 19. WP AppKit App Installation File e.g. accessing camera, network status…Phone Installed App WordPress Web Services 3rd Party Services
  20. 20. WP AppKit App Installation File Think of Google Analytics, push notifications… Phone Installed App WordPress Web Services 3rd Party Services
  21. 21. WP AppKit Enough theory 
  22. 22. WP AppKit WP-AppKit plugin is available on GitHub https://github.com/uncatcrea/wp-appkit After installation, you’ll see a new WP-AppKit item in the WordPress menu Click on Applications and create your first application project
  23. 23. WP AppKit
  24. 24. WP AppKit • Title is only used in WordPress • 1 application per platform (iOS/Android) • 1 application per version (⚠ a new version doesn’t replace automatically the previous one, users have to install it)
  25. 25. WP AppKit The My Project metabox guides you through the configuration process highlighting which steps you finished before being able to export the app’s sources
  26. 26. WP AppKit Help me links in each metabox show help texts
  27. 27. WP AppKit Components
  28. 28. WP AppKit • You put together components to assemble your app • Typical component: data source (e.g. posts from a specific category) • You can add your own components Components
  29. 29. WP AppKit Theme
  30. 30. WP AppKit • WP-AppKit themes play for apps the same role WordPress themes play for websites • You can create your own theme • 1 version = 1 theme (⚠ a new version doesn’t replace automatically the previous one, users have to install it) • A very important difference: no PHP in WP-AppKit themes • PHP is “replaced” by JavaScript in a WP-AppKit theme Theme
  31. 31. WP AppKit menu
  32. 32. WP AppKit • The application’s menu is based on components (post list, page…) • The menu is “live”, meaning if you change it, it will be updated for all installed apps (without the need to create a new version of the app) menu
  33. 33. WP AppKit Preview
  34. 34. WP AppKit • As applications are based on web technologies, you can preview in the browser, using Chrome’s mobile emulation mode • ⚠ Features relying on phone are not available in the browser (e.g. camera) Preview
  35. 35. WP AppKit Phonegap build
  36. 36. WP AppKit
  37. 37. WP AppKit • With PhoneGap Build, you compile in the cloud • PhoneGap/Cordova is the technology that allows to build mobile applications using JavaScript, HTML and CSS (called hybrid applications) • PhoneGap is an Adobe commercial product based on Cordova (which is open source) Phonegap build
  38. 38. WP AppKit BTW WP-AppKit also supports classic Cordova CLI 
  39. 39. WP AppKit export project sources
  40. 40. WP AppKit • When done with configuration, you export app’s sources as a .zip file • This archive is used to compile your app for a specific platform (Android or iOS) • The compiled file is uploaded to app stores, ready to be downloaded and installed by users export project sources
  41. 41. WP AppKit You can also export with WP-CLI 
  42. 42. WP AppKit Compilation
  43. 43. WP AppKit Upload your .zip Compilation
  44. 44. WP AppKit When compilation’s done, flash to test the app on your phone Compilation
  45. 45. WP AppKit Compilation Or download the compiled app to release it in app stores
  46. 46. WP AppKit • Testing requires to prepare test phones • For Android: allowing installs from unknown sources • For iOS: create a certificate with allowed iPhones Testing on phones
  47. 47. WP AppKit http://uncatcrea.com/wp-appkit/doc/getting-started/
  48. 48. WP AppKit Cordova plugins?
  49. 49. WP AppKit • Cordova plugins can be added to your project • They extend the Cordova JavaScript API to provide new functionalities (e.g. access to native phone’s sharing center) Cordova plugins Android’s sharing center
  50. 50. WP AppKit • Cordova plugins are hosted on NPM repository • To include a plugin in your project, you reference it in your config.xml file • They will be included at compilation time Cordova plugins
  51. 51. WP AppKit Cordova plugins
  52. 52. WP AppKit Anatomy of a WP-AppKit’s theme
  53. 53. WP AppKit
  54. 54. WP AppKit • The Themes panel lets you manage your themes • WP-AppKit comes with 2 default themes : • Q for iOS (demo) • Q for Android (demo)
  55. 55. WP AppKit
  56. 56. WP AppKit • Themes are stored in the /wp-content/themes-wp-appkit • themes-wp-appkit folder is created when you installed WP-AppKit • You can upload new themes as you’d do with WordPress themes
  57. 57. WP AppKit Themes are composed of: • HTML files • CSS files • JavaScript files • Resources (images, fonts)
  58. 58. WP AppKit • HTML files are used for templates • WP-AppKit’s apps are Single Page Applications (SPA) • All HTML files are combined into one page • Screens are physically <div> elements • e.g. single.html corresponds to a post detail • Strongly inspired by WordPress templates (but not the same)
  59. 59. WP AppKit
  60. 60. WP AppKit • head.html = <head> section • This is where you’ll reference .css files • Layout.html = encloses all other <div> elements • menu.html = menu element • archive.html = post lists • single.html = post details
  61. 61. WP AppKit Comes from layout.html
  62. 62. WP AppKit Comes from menu.html
  63. 63. WP AppKit Comes from archive.html or single.html
  64. 64. WP AppKit • You can use template tags in .html files • Template tags are <%= %> UnderscoreJS template tags
  65. 65. WP AppKit
  66. 66. WP AppKit You can add your own templates
  67. 67. WP AppKit Rule n°1: No JavaScript in HTML templates
  68. 68. WP AppKit • JavaScript is primarily handled in js/functions.js
  69. 69. WP AppKit • JavaScript dependencies (ie. other required .js files) are handled with RequireJS
  70. 70. WP AppKit • functions.js is where you bind (touch) events
  71. 71. WP AppKit • hook into application’s events
  72. 72. WP AppKit • and bring screen transitions to life (among other marvelous things)
  73. 73. WP AppKit “Master, I see a php subfolder in the theme’s folder!”
  74. 74. WP AppKit • The theme’s php subfolder is used to extend and hook into web services • It remains on the server (ie. it is not installed on the user’s phone)
  75. 75. WP AppKit
  76. 76. WP AppKit CSS, Images and Animations
  77. 77. WP AppKit • Apart from rare specific selector (e.g. momentum scrolling rules), you can use standard CSS • CSS transitions and animations are super useful (e.g. spinners)
  78. 78. WP AppKit • SVG image format is great to support any screen densities • You can edit SVG file with Inkscape open source editor
  79. 79. WP AppKit • You can animate with CSS • For more control, you can use JS libraries such as VelocityJS or GSAP
  80. 80. WP AppKit • I am Benjamin LUPU, Chief Digital Officer for Jeune Afrique press group and part of the Uncategorized Creations collective • Twitter: @benjaminlupu
  81. 81. WP AppKit Thank you

×