Introduction to the Pods JSON API

Introduction to the Pods
JSON API
Josh Pollock, @josh412
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014

What Is The WordPress REST API?
A really easy way to move data between sites or inside of a
site using the standardized JSON format.
Currently a plugin, Hopefully WordPress 4.1
http://wp-api.org
https://speakerdeck.com/rmccue/wcmke2014

Helpful Functions
json_url()
● REST API Root URL
● REST API
add_query_arg()
● Add arguments to URLs
● WordPress
json_encode()
● Convert PHP to JSON
● PHP
json_decode()
● Convert JSON to PHP
● PHP

The Pods JSON API
Extends the WordPress REST API
Routes for:
● Pods
● Pods API
● Pods Components
https://github.com/pods-framework/pods-json-api

Authentication Options
● Basic Authentication
● Nonce/Cookie
● Key pairs
● oAuth1

Access Filters In Pods JSON API
Endpoints in Pods
apply_filters( 'pods_json_api_access_pods_' . $method, $access, $method, $pod, $item );
apply_filters( 'pods_json_api_access_pods', $access, $method, $pod, $item );
Endpoints in Pods API
apply_filters( 'pods_json_api_access_api_' . $method, $access, $method );
apply_filters( 'pods_json_api_access_api', $access, $method );
Endpoints in Components
apply_filters( 'pods_json_api_access_components_' . $method, $access, $method );
apply_filters( 'pods_json_api_access_components', $access, $method );

GET vs POST
RESTful APIs use the basic HTTP methods:
GET POST PUT DELETE
We will be using GET to get items and POST to create items.

Capabilities of The Pods JSON API
○ Show Pods and content
○ Save Pods
○ Create Pods and Fields
○ Import a Pods Package
○ Activate/ deactivate components

The WordPress HTTP API
A simple PHP API in WordPress for making HTTP requests.
Helpful functions such as:
wp_remote_get()
http://codex.wordpress.org/Function_Reference/wp_remote_get
wp_remote_retrieve_body()
http://codex.wordpress.org/Function_API/wp_remote_retrieve_body

Getting Pods Items
Make a GET request to
<json-url>/pods/<pod>
or
<json-url>/pods/<pod>/<id>
$headers = array (
'Authorization' => 'Basic ' . base64_encode( 'username'
. ':' . 'password' ),
);
$url = json_url( 'pods/jedi' );
$response = wp_remote_post( $url, array (
'method' => 'GET',
'headers' => $headers,
)
);
//make sure response isn't an error
if ( ! is_wp_error( $response ) ) {
//show the updated post item
var_dump( wp_remote_retrieve_body( $response ) );
}

Using Pods Find
Add the parameters to the URL,
using add_query_arg()
$headers = array (
'Authorization' => 'Basic ' . base64_encode( 'username' . ':'
. 'password' ),
);
$url = json_url( 'pods/jedi' );
$params = array(
'home_world.post_title' => 'Tatooine'
);
$url = add_query_arg( $params, $url );
'method' => 'GET',
)
);
}

Saving Pods Items
Make POST request to
New item:
<json-url>/<pod>
Update item:
<json-url>/<pod>/<id>
$data = array( 'home_planet' => 'Alderann' );
$url = json_url( 'pods/jedi/9' );
$headers = array (
'Authorization' => 'Basic ' . base64_encode( 'username' . ':' .
'password' ),
);
'method' => 'POST',
'body' => json_encode( $data )
)
);
}

Creating Pods
POST to <json-url>/<pods-api>
Body of request passed to
PodsAPI->save_pod()
$data = array(
'name' => 'jedi',
'type' => 'post_type',
);
$url = json_url( 'pods-api' );
$headers = array (
'Authorization' => 'Basic ' . base64_encode( 'username' . ':' .
'password' ),
);
'method' => 'POST',
'body' => json_encode( $data )
)
);
}

Update Pods
Same as before but use:
<json-url>/<pods-api>/<pod-name>
or
<json-url>/<pods-api>/<pod-id>

AJAX Time!
GET or POST data asynchronously, and render it in the
browser.
Make your site more dynamic and “app” like.

Using The REST API Client-JS
Provides Backbone collections and models for all REST API
endpoints.
No Pods integration, but…
Gives us an easy way to handle authentication
https://github.com/WP-API/client-js

Preparing To Use Client JS
Enqueue The Script
Localize a nonce and the root
JSON url.
add_action( 'wp_enqueue_scripts', 'json_api_client_js'
);
add_action( 'wp_enqueue_scripts',
'json_api_talk_scripts' );
function json_api_talk_scripts() {
if ( ! function_exists( 'json_get_url_prefix' ) ) {
return;
}
wp_enqueue_script( 'json-api-talk', plugins_url(
'/json-api-talk.js', __FILE__ ), array( 'jquery' ),
'1.0', true );
}

Setup Variables From Localize Data
(function($){
//root JSON URL
var root_URL = WP_API_Settings.root;
//API nonce
var api_NONCE = WP_API_Settings.nonce;
//Pods endpoint URL
var pods_URL = WP_API_Settings + 'pods';
})(jQuery);
Prepare URLs and nonce
from localized data for
use in functions.

Get Items Via AJAX
function getItem( id, pod ) {
var URL = pods_URL + '/' + pod + '/' + 'id';
$.ajax({
type:"GET",
url: url,
dataType : 'json',
beforeSend : function( xhr ) {
xhr.setRequestHeader( 'X-WP-Nonce', api_Nonce );
},
success: function(response) {
//do something
}
});
}

Save Items Via AJAX
function saveItem( id, pod ) {
var save_url = podsURL + '/' + pod + '/' + 'id';
var title = '';
var home_planet = '';
var lightsaber_color = '';
var JSONObj = {
"title" : title,
"home_planet" : home_planet,
'lightsaber_color' : lightsaber_color,
"status" : 'publish'
};
//encode data as JSON
var data = JSON.stringify( JSONObj );
$.ajax({
type:"POST",
url: save_url,
dataType : 'json',
data: data,
xhr.setRequestHeader( 'X-WP-Nonce', apiNonce );
},
alert( 'WOO!');
}
});
}

Render With A Handlebars Template
function getItem( id, pod, templateID, containerID ) {
var get_url = podsURL + '/' + pod + '/' + 'id';
$.ajax({
type:"GET",
url: get_url,
dataType : 'json',
xhr.setRequestHeader( 'X-WP-Nonce', apiNonce );
},
var source = $( templateID ).html();
var template = Handlebars.compile( source );
var html = template( data );
$( container ).append( html );
}
});
}

Non WordPress Front-ends
Angular Client For Pods API
https://github.com/bjoernklose/angular-wordpress-pods
Using the WordPress REST API in a mobile app
http://apppresser.com/using-wordpress-rest-api-mobile-app/

Questions?

Introduction to the Pods JSON API

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Introduction to the Pods JSON API (20)

Recently uploaded (20)

Introduction to the Pods JSON API