Embed Size (px)
DESCRIPTION
WordPress's new REST API is one of the most exciting developments in the platform in years. With the REST API, it's easier than ever to use WordPress as the backend for web and mobile apps. In this talk, the Pods team will show you how to use Pods, the WordPress REST API and the Pods extension for it to create powerful apps, using both WordPress as a front-end and as well as JavaScript-powered single page applications.
Citation preview
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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.1http://wp-api.orghttps://speakerdeck.com/rmccue/wcmke2014
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
The Pods JSON API
Extends the WordPress REST APIRoutes for:● Pods● Pods API● Pods Components https://github.com/pods-framework/pods-json-api
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
Authentication Options
● Basic Authentication● Nonce/Cookie● Key pairs● oAuth1
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
Access Filters In Pods JSON API
Endpoints in Podsapply_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 );
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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.
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
Capabilities of The Pods JSON API
○ Show Pods and content
○ Save Pods
○ Create Pods and Fields
○ Import a Pods Package
○ Activate/ deactivate components
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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 errorif ( ! is_wp_error( $response ) ) {
//show the updated post item var_dump( wp_remote_retrieve_body( $response ) );
}
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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 );$response = wp_remote_post( $url, array ( 'method' => 'GET', 'headers' => $headers, ));//make sure response isn't an errorif ( ! is_wp_error( $response ) ) { //show the updated post item var_dump( wp_remote_retrieve_body( $response ) );
}
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
Saving Pods ItemsMake 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' ),);
$response = wp_remote_post( $url, array ( 'method' => 'POST', 'headers' => $headers, 'body' => json_encode( $data ) ));
//make sure response isn't an errorif ( ! is_wp_error( $response ) ) { //show the updated post item var_dump( wp_remote_retrieve_body( $response ) );}
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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' ),);$response = wp_remote_post( $url, array ( 'method' => 'POST', 'headers' => $headers, 'body' => json_encode( $data ) ));
//make sure response isn't an errorif ( ! is_wp_error( $response ) ) { //show the updated post item var_dump( wp_remote_retrieve_body( $response ) );}
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
Update Pods
Same as before but use:<json-url>/<pods-api>/<pod-name>or<json-url>/<pods-api>/<pod-id>
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
AJAX Time!
GET or POST data asynchronously, and render it in the browser.Make your site more dynamic and “app” like.
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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 authenticationhttps://github.com/WP-API/client-js
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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 );
}
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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.
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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 } }); }
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
Save Items Via AJAXfunction 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, beforeSend : function( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', apiNonce ); }, success: function(response) { alert( 'WOO!'); } }); }
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
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', beforeSend : function( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', apiNonce ); }, success: function(response) { var source = $( templateID ).html(); var template = Handlebars.compile( source ); var html = template( data );
$( container ).append( html );
}
}); }
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
Non WordPress Front-ends
Angular Client For Pods APIhttps://github.com/bjoernklose/angular-wordpress-pods
Using the WordPress REST API in a mobile apphttp://apppresser.com/using-wordpress-rest-api-mobile-app/
Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
Questions?
