Building a mobile app connected to WordPress with WP-AppKit
-
Upload
benjamin-lupu -
Category
Software
-
view
226 -
download
4
Transcript of Building a mobile app connected to WordPress with WP-AppKit
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
WP AppKit
A WordPress plugin that:
• Allows to configure and export application sources ready to becompiled
• Provide a theme engine to build mobile applications withJavaScript, HTML and CSS
• Provide dedicated web services used by applications to retrievecontent, authenticate users…
WP AppKit
Components
Menu
Icons andsplashscreens
Theme
Project Archive App Installation File
It all happens in WordPress
WP AppKit
Components
Menu
Icons andsplashscreens
Theme
Project Archive App Installation File
Bundled as a .zip
WP AppKit
Components
Menu
Icons andsplashscreens
Theme
Project Archive App Installation File
Compilationhere
WP AppKit
Components
Menu
Icons andsplashscreens
Theme
Project Archive App Installation File
There’s several ways to do that.We’ll see later that we cancompile online
WP AppKit
Components
Menu
Icons andsplashscreens
Theme
Project Archive App Installation File
You’ve got an .apk or .ipa readyto be installed
WP AppKit
App Installation File
Uploaded to app stores
Phone
Installed App
WordPress
Web Services
3rd Party Services
WP AppKit
App Installation File
Downloaded andinstalled
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 Services
WP AppKit
App Installation File
Think of GoogleAnalytics, pushnotifications…
Phone
Installed App
WordPress
Web Services
3rd Party Services
WP AppKit
WP-AppKit plugin is available onGitHubhttps://github.com/uncatcrea/wp-appkit
After installation, you’ll see a new WP-AppKititem in the WordPress menu
Click on Applications and create your firstapplication project
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)
WP AppKit
The My Project metabox guides you through the configurationprocess highlighting which steps you finished before being able toexport the app’s sources
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
WP AppKit
• WP-AppKit themes play for apps the same role WordPressthemes 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
WP AppKit
• The application’s menu is based on components (post list,page…)
• The menu is “live”, meaning if you change it, it will beupdated for all installed apps (without the need to create anew version of the app)
menu
WP AppKit
• As applications are based on web technologies, you canpreview in the browser, using Chrome’s mobile emulationmode
• ⚠ Features relying on phone are not available in thebrowser (e.g. camera)
Preview
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 (calledhybrid applications)
• PhoneGap is an Adobe commercial product based onCordova (which is open source)
Phonegap build
WP AppKit
• When done with configuration, you export app’s sourcesas a .zip file
• This archive is used to compile your app for a specificplatform (Android or iOS)
• The compiled file is uploaded to app stores, ready to bedownloaded and installed by users
export project sources
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
WP AppKit
• Cordova plugins can be added to yourproject
• They extend the Cordova JavaScriptAPI to provide new functionalities(e.g. access to native phone’s sharingcenter)
Cordova plugins
Android’s sharing center
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
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)
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
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 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)
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
WP AppKit
• You can use template tags in .html files• Template tags are <%= %> UnderscoreJS template tags
WP AppKit
• The theme’s php subfolder is used to extend and hookinto web services
• It remains on the server (ie. it is not installed on theuser’s phone)
WP AppKit
• Apart from rare specific selector (e.g. momentumscrolling rules), you can use standard CSS
• CSS transitions and animations are super useful (e.g.spinners)
WP AppKit
• SVG image format is great to support any screen densities• You can edit SVG file with Inkscape open source editor
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 pressgroup and part of the Uncategorized Creations collective
• Twitter: @benjaminlupu