Integrating WordPressWith Web APIs

Randy Hoyt

#wcmia @randyhoyt@randyhoyt

Randy Hoyt randyhoyt.com

@randyhoyt

Presentation randyhoyt.com/wcmia

About Me

#wcmia @randyhoyt@randyhoyt

• APIs: Defined

• Two Examples:

1. Get Treehouse Badges

2. Get ShopLocket Products

• WordPress Functions

Overview

API

Application Programming Interface

A point where two systems, subjects, organizations, etc., meet and interact.

Interface, http://dictionary.com/browse/interface

[Keyboard]

[Lock and Key]

An interface for software components to communicate with each other.

Wikipedia: API, http://trhou.se/defineAPI

#wcmia @randyhoyt@randyhoyt

• Android SDK: Camera API

API Examples

import android.hardware.Camera;

Camera.getNumberOfCameras();

Camera.open(cameraId);

#wcmia @randyhoyt@randyhoyt

• Android SDK: Camera API

• WordPress: Plugin API

API Examples

<?php

/*

Plugin Name: Treehouse Badges

Description: Displays the badges ...

Version: 1.0

*/

?>

add_action('init','treehouse_badges_init');

...

#wcmia @randyhoyt@randyhoyt

• Android SDK: Camera API

• WordPress: Plugin API

• HTML5: Canvas API

API Examples

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

context.fillRect(10, 10, 40, 380, "#000000");

context.drawImage(img, x, y, 100, 77);

Web APIs

REST

Representational State Transfer

RESTful API

Example #1: Treehouse

[Treehouse screenshot]

JavaScript Object Notation:Text-based open standard designed for human-readable data interchange.

Wikipedia: JSON, http://trhou.se/defineJSON

{ "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ]}

Wikipedia: JSON, http://trhou.se/defineJSON

[Treehouse JSON]

[HTML]

Asynchronous JavaScript and XML:Technique used by the browser to retrieve data from a server in the background without interfering with the existing page

Wikipedia: Ajax, http://trhou.se/defineAJAX

[AJAX Request Code]

[Badge Code]

[Badge Display]

<?php

$curl = curl_init();

curl_setopt_array($curl, array(

CURLOPT_RETURNTRANSFER => 1,

CURLOPT_URL => 'http://teamtreehou...

));

$resp = curl_exec($curl);

curl_close($curl);

?>

GET  Request  with  WordPress  HTTP  API

WordPress, http://codex.wordpress.org/HTTP_API

#wcmia @randyhoyt@randyhoyt

• GET

• POST

• PUT

• DELETE

REST: Types of Requests

(Read)

(Create)

(Update)

(Delete)

#wcmia @randyhoyt@randyhoyt

• Does it have to be real time?

• What if something goes wrong?

API Questions

Example #2: ShopLocket

[Screenshot of WP]

[Screenshot of WordPress]

[Screenshot of Product Picker]

[Screenshot of Product Picker]

[Screenshot of Shortcode]

[Screenshot of Website]

Authentication

OAuthAn open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.

OAuth, http://oauth.net/

App ID

5f4a89f2d6655ac7a8859343d6d152579410e7b659b200e00aaf3721cf46269e

App Secret

fa963a1ef3702c16d934500f7621697e2d6bfd05d3ef1751a32bdeb2a0599020

[ShopLocket]

[ShopLocket Login]

[ShopLocket]

/? code = 53fe... & state = auth...

[GET Request]

$args = array( "code" => $_GET["code"], "app_id" => "app id", "app_secret" => "app secret",);

$response = wp_remote_post( 'https://www.shoplocket.com/' . 'oauth/token', $args );

Token:

310826b20a535a422ccaa46d65c7065f83e403b9218a38962ab4e43021b93585

[Token]

#wcmia @randyhoyt@randyhoyt

• Does it have to be real time?

• What if something goes wrong?

API Questions

[Refresh Button]

WordPress Functions

WordPress wp_ajax, http://trhou.se/wp_ajax_hook

GET  Request  with  WordPress  HTTP  API

WordPress HTTP API, http://codex.wordpress.org/HTTP_API

WordPress update_option, http://trhou.se/update_option

Transients?

WordPress, http://codex.wordpress.org/Transients_API

Integrating WordPressWith Web APIs

Randy Hoyt randyhoyt.com @randyhoyt

Presentation randyhoyt.com/wcmia