Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to the Pods JSON API

5,352 views

Published on

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.

Published in: Software
  • Be the first to comment

Introduction to the Pods JSON API

  1. 1. Introduction to the Pods JSON API Josh Pollock, @josh412 Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
  2. 2. 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 Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
  3. 3. 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
  4. 4. The Pods JSON API Extends the WordPress REST API Routes 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
  5. 5. Authentication Options ● Basic Authentication ● Nonce/Cookie ● Key pairs ● oAuth1 Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
  6. 6. 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 ); Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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 ) ); } Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
  11. 11. 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 error if ( ! 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
  12. 12. 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' ), ); $response = wp_remote_post( $url, array ( 'method' => 'POST', 'headers' => $headers, 'body' => json_encode( $data ) ) ); //make sure response isn't an error if ( ! 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
  13. 13. 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 error if ( ! 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
  14. 14. 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
  15. 15. 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
  16. 16. 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 Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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, 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
  21. 21. 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
  22. 22. 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/ Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014
  23. 23. Questions? Building Applications: Introduction to the Pods JSON API // Josh Pollock // PodsCamp 2014

×