WordPress is an absolutely powerful platform to publish content, but up till now it lacked the ability to publish and read content using a proper restful API. That is about to change. The new WP-API plugin is slated to be part of the WordPress core creating an easy access layer from a decoupled frontend. And a mobile app is of course such a decoupled frontend! This talk will show you how to leverage the power of the WordPress API to build an app in Appcelerator Titanium which uses Backbone.js as it's way of syncing. We'll go through the WP API basics, custom post types, proper API logic and offline strategies for your first app. Connecting the dots into Backbone.js is then a piece of cake!

1. TEAMING UP WP API & BACKBONE.JS

2. WHO KNOWS…
RFC 7230 - 7235

3. MAYBE THIS ONE…
RFC 2616

4. FAMILIAR WITH THIS?
HTTP

5. … AND THIS GUY?

6. -
RFC 7230 - 7235
=
RFC 2616
HTTPBIS

7. +
HTTPBIS
=
?

8. WHO THINKS HE/SHE KNOWS…?
REST

9. HTTP VERBS 101
CREATE POST SINGLE
RETRIEVE GET REPEATABLE
UPDATE PUT REPEATABLE
DELETE DELETE REPEATABLE

11. HTTPS://WORDPRESS.ORG/PLUGINS/JSON-REST-API/
WP API
WP-API.ORG
COMPOSER REQUIRE WPACKAGIST/JSON-REST-API

12. /WP-JSON
{
"name": “A WP Site",
"description": "",
"URL": “https://www.a-wp-site.nl”,
"routes": {
"/": { ... },
"/posts": { ... },
"/posts/<id>": { ... },
...
"/users": { ... },
"/users/<id>": { ... },
"/users/me": { ... },
...
"/media": { ... }
},
"authentication": []
}

13. /WP-JSON (DETAIL)
{
...
"/posts/<id>": {
"supports": [
"HEAD",
"GET",
"POST",
"PUT",
"PATCH",
"DELETE"
],
"accepts_json": true
},
...
}

14. /WP-JSON/POSTS
POST /wp-json/posts HTTP/1.1
Host: www.a-wp-site.nl
Authorization: Basic anZitsafake6NjU0MzIx
Content-Type: application/x-www-form-urlencoded
title=test&content_raw=test

15. /WP-JSON/POSTS

16. § POSTS
§ POST META
§ PAGES
§ USERS
§ MEDIA
§ TAXONOMIES
§ COMMENTS
OUT OF THE BOX SUPPORT

17. QUESTIONS?
THAT’S IT!

19. PET PROJECT : KOOPHETLOKAAL

20. YOU KNOW HOW TO CREATE A PLUGIN?
EXTENDING THE API

21. MY PLUGIN.PHP SETUP
<?php
/*
Plugin Name: MY JSON API
Plugin URI: https://www.a-wp-site.nl/
Description: JSON REST API EXTENSION
Version: 1.0
Author: JRDK
Author URI: http://jrdk.nl
*/
require_once('src/Bootstrap.php');
new Bootstrap();

22. WHEN TO TRIGGER YOUR CODE
public function __construct()
{
add_action('plugins_loaded', [$this, 'initServer'], 100);
}
public function initServer()
{
if (!defined('JSON_API_VERSION')) {
// return early if WP API does not exist
add_action('all_admin_notices', [$this, 'showError']);
return;
}
}

23. ADD YOUR OWN CUSTOM POST TYPE
public function initServer()
{
//...
add_action('wp_json_server_before_serve', [$this, 'initEndpoints']);
}
public function initEndpoints($wp_json_server)
{
$ad = new Advertisement($wp_json_server);
}
class Advertisement extends WP_JSON_CustomPostType
{
protected $base = '/advertisements';
protected $type = 'advertisement';
}

24. /WP-JSON/VERSION/IOS
public function __construct()
{
add_filter('json_endpoints', [$this, 'registerRoutes']);
}
public function registerRoutes($routes)
{
$version_route = [
'/version/(?P<os>[a-z]{3,7})' => [
[
[$this, 'getVersion'],
WP_JSON_Server::READABLE
],
],
];
return array_merge($routes, $version_route);
}

25. FORGET IT ALL

26. WP API TEAM RUINED THIS TALK :)

27. IN A GOOD WAY

28. JSON != REST
IT COULD BE ANY OUTPUT

29. V2 REWRITE
CURRENTLY IN BETA

30. BACK TO THE PLUGIN SETUP
public function initServer()
{
if (!defined('JSON_API_VERSION') || !defined('REST_API_VERSION')) {
// return early if WP API versions do not exist
add_action('all_admin_notices', [$this, 'showError']);
return;
}
add_action('wp_json_server_before_serve', [$this, 'initEndpoints']);
add_filter('rest_url_prefix', [$this, 'changeApiBase']);
}
public function changeApiBase()
{
return 'api';
}

31. /API
{
"name": “A WP Site",
"description": "",
"URL": “https://www.a-wp-site.nl”,
"routes": {
"/": { ... },
“/wp/v2/posts”: { ... },
“/wp/v2/posts/<id>”: { ... },
...
“/wp/v2/users”: { ... },
“/wp/v2/users/<id>”: { ... },
“/wp/v2/users/me”: { ... },
...
“/wp/v2/media”: { ... }
},
"authentication": []
}

32. EXPOSE CUSTOM POST TYPE
public function initServer()
{
//...
add_action('init', [$this, 'updateExposure'], 12);
}
public function updateExposure()
{
global $wp_post_types;
$wp_post_types['advertisement']->show_in_rest = true;
$wp_post_types['advertisement']->rest_base = 'advertisement';
}

33. /API/KHL/VERSION/IOS
register_rest_route('khl', '/version/(?P<os>[a-z]{3,7})', [
'callback' => [$this, 'getVersion'],
'methods' => WP_REST_Server::READABLE,
'args' => [
'context' => [
'default' => 'view',
],
]]
);

35. APPCELERATOR TITANIUM

36. VERY GLOBAL OVERVIEW
xml + tss + js ALLOY
JAVASCRIPT
TITANIUM SDK + your own modules
ANDROID IOS WINDOWS

37. BACKBONE.JS

38. SAVE POST CREATE
FETCH GET RETRIEVE
SAVE PUT UPDATE
DESTROY DELETE DELETE

39. THAT’S IT… AGAIN
var post = Backbone.Model.extend({
urlRoot: '/api/wp/v2/posts'
});
var posts = Backbone.Collection.extend({
model: post,
url: '/api/wp/v2/posts'
});
var newPost = new post({
title: ‘test',
content_raw: ‘test'
});
newPost.save();

40. BACKBONE TITANIUM EXTENSION
exports.definition = {
config : {
// table schema and adapter information
},
extendModel: function(Model) {
_.extend(Model.prototype, {
// Extend, override or implement Backbone.Model
});
return Model;
},
extendCollection: function(Collection) {
_.extend(Collection.prototype, {
// Extend, override or implement Backbone.Collection
});
return Collection;
}
}

41. CREATE SQLITE STORAGE WITH REST
exports.definition = {
config: {
columns: {
id: 'INTEGER PRIMARY KEY',
title: 'VARCHAR(50)',
image: ‘TEXT',
lastmodified: 'TEXT'
},
URL: 'https://www.a-wp-site.nl/api/khl/advertisements',
adapter: {
type: 'sqlrest',
collection_name: 'advertisements',
idAttribute: 'id'
}
}
//...
};

42. PARSE WORDPRESS API DATA
exports.definition = {
config: {
//...
parentNode: function(data) {
if (_.isArray(data)) {
var entries = [];
_.each(data, function (_entry, index) {
entries.push({
'id': _entry.ID,
'title': _entry.title,
'image': _entry.featured_image
});
});
return entries;
}
}
}
//...
};

43. ALLOY VIEW EXAMPLE
<Alloy>
<Collection src="advertisement"/>
<Window class="container">
<ListView id="listing">
<Templates>
<ItemTemplate name="fullItem">
<ImageView bindId="adImage" class="li-image" />
<Label bindId="title" class=“li-title"/>
</ItemTemplate>
</Templates>
<ListSection dataCollection="advertisement">
<ListItem template="fullItem" itemId="{id}"
title:text="{title}" adImage:image="{image}" />
</ListSection>
</ListView>
</Window>
</Alloy>

44. QUERY DATA FROM WORDPRESS
var advertisements = Alloy.Collections.instance(‘advertisement');
advertisements.fetch({
urlparams: {
filter: {
posts_per_page: 3,
orderby: {'date': 'DESC', 'ID': 'DESC'}
},
page: 1
},
sql: {
orderBy: 'timestamp DESC, id DESC'
},
success: function (col) {
}
});

45. IF MODIFIED SINCE
GET_LASTPOSTMODIFIED

46. UPLOADING A FILE
var bgImage = Ti.Filesystem.getFile('upload.jpg');
var xhr = Ti.Network.createHTTPClient();
xhr.timeout = 60000;
xhr.open('POST', '/api/wp/v2/media');
xhr.setRequestHeader('Authorization', '...');
xhr.setRequestHeader('Content-Type', 'image/jpeg');
xhr.setRequestHeader(
'Content-Disposition', 'attachment; filename=upload.jpg'
);
xhr.send(bgImage.read());

47. MAGIC MINUS
NEGATIVE INTEGERS

48. THE END RESULT

49. QUESTIONS?
JEROEN VAN DIJK
@JRVANDIJK
JEROEN@ENRISE.COM
JOIND.IN/13583