Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meet the JSON REST API

Rachel Baker
November 08, 2014

Meet the JSON REST API

One of the most exciting changes coming in WordPress is the addition of a JSON REST API. Through the use of the current feature-plugin, developers and users can begin using the API today with backwards compatibility assured in the future. This talk will introduce the JSON REST API, demonstrate how to interact with it, showcase some of the ways the JSON REST API is already being used, and reveal some of the improvements being made in the future.

Given at WordCamp Ventura County. http://2014.ventura.wordcamp.org/sessions/

Rachel Baker

November 08, 2014
Tweet

More Decks by Rachel Baker

Other Decks in Technology

Transcript

  1. MEET The

    JSON REST API
    Rachel Baker
    @rachelbaker
    10up.com

    View full-size slide

  2. REST
    /posts
    /posts/4
    /posts
    /posts/4
    /posts/4
    GET
    GET
    POST
    PUT
    DELETE
    Action

    (Verb)
    Resource

    (Object)

    View full-size slide

  3. JSON
    {
    "bold_folder_labels": true,
    "caret_style": "phase",
    "default_line_ending": "unix",
    "ensure_newline_at_eof_on_save": false,
    "font_face": "Inconsolata LGC",
    "indent_guide_options":
    [
    "draw_normal",
    "draw_active"
    ],
    "show_line_endings": true,
    "theme": "Cobalt2.sublime-theme",
    "trim_automatic_white_space": true,
    }

    View full-size slide

  4. CrUD Operations

    Among WordPress SITES

    View full-size slide

  5. CrUD Operations

    WordPress & MOBILE APPS

    View full-size slide

  6. CrUD Operations

    WordPress & ANYTHING

    View full-size slide

  7. CrUD Operations

    WITHIN a WORDPRESS SITE

    View full-size slide

  8. GETTING STARTED

    View full-size slide

  9. STEP ONE

    READ THE DOCUMENTATION

    View full-size slide

  10. STEP TWO

    Install & Activate the Plugin

    View full-size slide

  11. STEP THREE

    GET the API ScHEMA
    http://example.com/wp-json/

    View full-size slide

  12. STEP THREE

    GET the API ScHEMA
    http://example.com/wp-json/

    View full-size slide

  13. STEP FOUR

    GET the POSTS COLLECTION
    http://example.com/wp-json/posts/

    View full-size slide

  14. http://example.com/wp-json/
    STEP FOUR

    GET the POSTS COLLECTION

    View full-size slide

  15. STEPs FIVE - Twenty-Two

    EXPLORE ALL THE POSSIBILITES
    Posts ✔ ✔ ✔ ✔
    Pages ✔ ✔ ✔ ✔
    Custom Post Types ✔ ✔ ✔ ✔
    Post Meta ✔ ✔ ✔ ✔
    Media ✔ ✔ ✔ ✔
    Comments ✔ ✔ ✔ ✔
    Taxonomies/Terms ✔ ✔ ✔ ✔
    Users ✔ ✔ ✔ ✔
    GET POST PUT DELETE

    View full-size slide

  16. STEP Twenty-THREE - ??

    Use the JSON REST API
    Use the JSON REST API plugin
    in/for a project.
    Give us feedback.

    View full-size slide

  17. Backward Compatible

    and ALREADY IN USE
    Wired
    New York Times
    WordCamp Central http://2014.ventura.wordcamp.org/
    Reactor http://reactor.apppresser.com/
    10up http://10up.com
    Rachel Baker (me) http://rachelbaker.me

    View full-size slide

  18. AUTHENTICATION

    View full-size slide

  19. COOKIE Auth

    Nonces INCLUDED
    function json_register_scripts() {
    wp_register_script( 'wp-api', 'http://wp-api.github.io/client-js/
    build/js/wp-api.js', array( 'jquery', 'backbone', 'underscore' ),
    '1.1', true );
    $settings = array( 'root' => esc_url_raw( get_json_url() ),
    'nonce' => wp_create_nonce( 'wp_json' ) );
    wp_localize_script( 'wp-api', 'WP_API_Settings', $settings );
    }
    add_action( 'wp_enqueue_scripts', 'json_register_scripts', -100 );
    add_action( 'admin_enqueue_scripts', 'json_register_scripts', -100 );

    View full-size slide

  20. BASIC AUTH

    DEVELOPMENT ONLY

    View full-size slide

  21. OAUTH 1.0a

    SECURE FOR PRODUCTION

    View full-size slide

  22. Custom Auth

    Write Your own
    add_filter( 'determine_current_user',
    'custom_auth_handler', 20 );

    View full-size slide

  23. Improved Extensibility
    /**
    * Access the collection and resources for your custom route
    */
    class Your_Custom_Controller extends WP_JSON_Controller {
    public function get_items( WP_JSON_Request $request ) {
    $items = get_custom_items( $request['parameter'], $args );
    if ( is_wp_error( $items ) ) {
    return new WP_Error( 'json_invalid_custom_request', __( "Items don't
    exist" ), array( 'status' => 404 ) );
    }
    foreach ( $items as &$item ) {
    $item = self::prepare_item_for_response( $item, $request );
    }
    return $items;
    }

    }

    View full-size slide

  24. Improved Extensibility
    /**
    * Access the collection and resources for your custom route
    */
    class Your_Custom_Controller extends WP_JSON_Controller {

    public function get_item( $request ) {
    // your custom get item logic here.
    return self::prepare_item_for_response( $item );
    }
    public function update_item( $request ) {
    // your custom update logic here.
    return self::prepare_item_for_response( $item );
    }

    public function prepare_item_for_response( $item ) {
    // create your own custom response.
    return array(
    'id' => (int) $item->id,
    'slug' => $item->slug,
    );
    }
    }

    View full-size slide

  25. NAMESPACED ROUTES
    function register_json_route( $namespace, $route, $args = array(),
    $override = false ) {
    global $wp_json_server;
    if ( isset( $args['callback'] ) ) {
    // Upgrade a single set to multiple
    $args = array( $args );
    }
    $defaults = array(
    'methods' => 'GET',
    'callback' => null,
    'args' => array(),
    );
    foreach ( $args as &$arg_group ) {
    $arg_group = array_merge( $defaults, $arg_group );
    }
    $full_route = '/' . trim( $namespace, '/' ) . '/' . trim( $route, '/' );
    $wp_json_server->register_route( $full_route, $args, $override );
    }

    View full-size slide

  26. IMPROVED ROUTE Registration
    register_json_route( 'prefix', '/resources', array(
    'methods' => 'GET',
    'callback' => array( $controller, 'get_items' ),
    'args' => array(
    'foo' => array(
    'required' => true,
    ),
    'bar' => array(
    'required' => false,
    ),
    ),
    ) );

    View full-size slide

  27. HAL EXPLORATION

    View full-size slide

  28. CORE INTEGRATION

    View full-size slide

  29. GET INVOLVED

    View full-size slide

  30. GET INVOLVED

    View full-size slide

  31. JOIN US IN SLACK

    #core-rest-api
    add_filter( 'determine_current_user', 'custom_auth_handler', 20 );

    View full-size slide

  32. THANK YOU!

    github.com/wp-Api/WP-API

    Questions??
    Rachel Baker
    @rachelbaker
    10up.com

    View full-size slide