building a mobile app connected to wordpress with wp-appkit

WP AppKitA 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 the Uncategorized Creations collective (3)• Version 0.1: June 2014• http://getwpappkit.com• Twitter: @WP-AppKit• Facebook: @getwpappkit

Intro

WP AppKit

How it works

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

Compiled?

WP AppKit

website workflow != application workflow

WP AppKit

Creating the application

WP AppKit

Components

Menu

Icons andsplashscreens

Theme

Project Archive App Installation File

WP AppKit

Components

Menu


Theme


It all happens in WordPress

WP AppKit

Components

Menu


Theme


Bundled as a .zip

WP AppKit

Components

Menu


Theme


Compilationhere

WP AppKit

Components

Menu


Theme


There’s several ways to do that.We’ll see later that we cancompile online

WP AppKit

Components

Menu


Theme


You’ve got an .apk or .ipa readyto be installed

WP AppKit

When you’re finished

WP AppKit

App Installation File

Phone

Installed App

WordPress

Web Services

3rd Party Services

WP AppKit


Uploaded to app stores

Phone

Installed App

WordPress

Web Services

3rd Party Services

WP AppKit


Downloaded andinstalled

Phone

Installed App

WordPress

Web Services

3rd Party Services

WP AppKit


Provided by WP-AppKit

Phone

Installed App

WordPress

Web Services

3rd Party Services

WP AppKit


e.g. accessing camera,network status…Phone

Installed App

WordPress

Web Services

3rd Party Services

WP AppKit


Think of GoogleAnalytics, pushnotifications…

Phone

Installed App

WordPress

Web Services

3rd Party Services

WP AppKit

Enough theory

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

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

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

category)• You can add your own components

Components

WP AppKit

Theme

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

menu

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

Preview

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

Phonegap build

WP AppKit

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

BTW WP-AppKit also supports classic Cordova CLI

WP AppKit

export project sources

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

You can also export with WP-CLI

WP AppKit

Compilation

WP AppKit

Upload your .zip

Compilation

WP AppKit

When compilation’sdone, flash to test

the app on yourphone

Compilation

WP AppKit

Compilation

Or download the compiled appto release it in app stores

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

http://uncatcrea.com/wp-appkit/doc/getting-started/

WP AppKit

Cordova plugins?

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

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 for Android (demo)

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• 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

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

Comes from layout.html

WP AppKit

Comes from menu.html

WP AppKit

Comes from archive.html orsingle.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) arehandled 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 othermarvelous 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 hookinto web services

• It remains on the server (ie. it is not installed on theuser’s phone)

WP AppKit

WP AppKit

CSS, Images and Animations

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

WP AppKit

Thank you

building a mobile app connected to wordpress with wp-appkit

Software