Building a mobile app connected to WordPress with WP-AppKit
1 like2,389 views
This document provides an overview of WP AppKit, which is a WordPress plugin that allows users to configure and export mobile application sources directly from WordPress. It works by providing a theme engine and dedicated web services to build mobile apps using HTML, CSS, and JavaScript. The plugin exports a project archive file that can then be compiled for Android or iOS. Key components include menus, icons, themes, and bundled project files. It allows mobile apps to connect back to WordPress for content and user authentication through web services.
Building a mobile app connected to WordPress with WP-AppKit
- 2. WP AppKit A WordPress plugin to create mobile applications connected to WordPress
- 3. 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
- 4. WP AppKit How it works
- 5. 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…
- 7. WP AppKit website workflow != application workflow
- 8. WP AppKit Creating the application
- 9. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File
- 10. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File It all happens in WordPress
- 11. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File Bundled as a .zip
- 12. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File Compilation here
- 13. 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
- 14. WP AppKit Components Menu Icons and splashscreens Theme Project Archive App Installation File You’ve got an .apk or .ipa ready to be installed
- 15. WP AppKit When you’re finished
- 16. WP AppKit App Installation File Phone Installed App WordPress Web Services 3rd Party Services
- 17. WP AppKit App Installation File Uploaded to app stores Phone Installed App WordPress Web Services 3rd Party Services
- 18. WP AppKit App Installation File Downloaded and installed Phone Installed App WordPress Web Services 3rd Party Services
- 19. WP AppKit App Installation File Provided by WP-AppKit Phone Installed App WordPress Web Services 3rd Party Services
- 20. WP AppKit App Installation File e.g. accessing camera, network status…Phone Installed App WordPress Web Services 3rd Party Services
- 21. WP AppKit App Installation File Think of Google Analytics, push notifications… Phone Installed App WordPress Web Services 3rd Party Services
- 22. WP AppKit Enough theory
- 23. 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
- 24. WP AppKit
- 25. 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)
- 26. 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
- 27. WP AppKit Help me links in each metabox show help texts
- 29. 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
- 30. WP AppKit Theme
- 31. 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
- 32. WP AppKit menu
- 33. 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
- 35. 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
- 37. WP AppKit
- 38. 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
- 39. WP AppKit BTW WP-AppKit also supports classic Cordova CLI
- 40. WP AppKit export project sources
- 41. 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
- 42. WP AppKit You can also export with WP-CLI
- 44. WP AppKit Upload your .zip Compilation
- 45. WP AppKit When compilation’s done, flash to test the app on your phone Compilation
- 46. WP AppKit Compilation Or download the compiled app to release it in app stores
- 47. 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
- 50. 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
- 51. 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
- 53. WP AppKit Anatomy of a WP-AppKit’s theme
- 54. WP AppKit
- 55. 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)
- 56. WP AppKit
- 57. 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
- 58. WP AppKit Themes are composed of: • HTML files • CSS files • JavaScript files • Resources (images, fonts)
- 59. 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)
- 60. WP AppKit
- 61. 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
- 62. WP AppKit Comes from layout.html
- 63. WP AppKit Comes from menu.html
- 64. WP AppKit Comes from archive.html or single.html
- 65. WP AppKit • You can use template tags in .html files • Template tags are <%= %> UnderscoreJS template tags
- 66. WP AppKit
- 67. WP AppKit You can add your own templates
- 68. WP AppKit Rule n°1: No JavaScript in HTML templates
- 69. WP AppKit • JavaScript is primarily handled in js/functions.js
- 70. WP AppKit • JavaScript dependencies (ie. other required .js files) are handled with RequireJS
- 71. WP AppKit • functions.js is where you bind (touch) events
- 72. WP AppKit • hook into application’s events
- 73. WP AppKit • and bring screen transitions to life (among other marvelous things)
- 74. WP AppKit “Master, I see a php subfolder in the theme’s folder!”
- 75. 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)
- 76. WP AppKit
- 77. WP AppKit CSS, Images and Animations
- 78. 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)
- 79. WP AppKit • SVG image format is great to support any screen densities • You can edit SVG file with Inkscape open source editor
- 80. WP AppKit • You can animate with CSS • For more control, you can use JS libraries such as VelocityJS or GSAP
- 81. WP AppKit • I am Benjamin LUPU, Chief Digital Officer for Jeune Afrique press group and part of the Uncategorized Creations collective • Twitter: @benjaminlupu