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

Viewers also liked

Similar to Introduction to the Pods JSON API

Recently uploaded

Introduction to the Pods JSON API