1.
© 2016, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Takayuki Shimizu @shimy_net
Solutions Architect, Amazon Web Services Japan K.K.
July 10, 2016
WordPress RESTful API &
Amazon API Gateway
WordCamp Kansai 2016
English version

2.
About Me
• Takayuki Shimizu @shimy_net
AWS Comedian
• Funny presentations with useless technology
• http://www.slideshare.net/shimy_net
Kickstart EC2 KA-ME-HA-ME-HA by Kinesis Bike with DynamoDB Pythagora Switch Automation

3.
Drawing Robot with AWS IoT
AWS IoT
Browser Robot arm

4.
What to Expect from the Session
1. What’s REST API ?
2. Display external data on WordPress
3. Why Amazon API Gateway ?
4. Build Serverlss REST API
5. Patterns with WordPress
6. Summary

5.
• REpresentational State Transfer
• Web architecture as proposed by Roy Fielding
• APIs that follow the principles of REST are called RESTful
What’s REST API ?

6.
Resources
• “Resource” is any information that has a name.
• Weather in Osaka
• Today's News
• Amazon's stock price
• “Resource” is represented by a “URI”
• URI indicates the Resource itself
• URI and resource have a one-to-one relationship
• ”State" can change with time and conditions, but
its ”Meaning" will never change.

7.
URI
• Uniform Resource Identifier
• URI identifies the Resource
• Example) https://api.example.com/resouces/1234
• Use only Nouns
• Not actions
• The basic rule is that there are no verbs in the URI path

8.
HTTP method
• Select HTTP method to be used depending on what is to be
processed with the resource indicated by the URI.
• Use the methods defined in HTTP.
• GET / POST / PUT / DELETE or PATCH are mainly used.
HTTP method Meaning CRUD
GET Get a resource READ
POST Create a child resource CREATE
PUT Update a resource (existing
URI)
Create a resource (new URI)
UPDATE
CREATE
DELETE Delete a resource DELETE
PATCH Partially update a resource UPDATE

9.
HTTP status code
HTTP status code Meaning Example
200 OK The request has succeeded. Referencing resource information via
GET
201 CREATED The request has succeeded and a new resource has been
created as a result.
Creating resources via POST
204 NO CONTENT There is no content to send for this request, but the
headers may be useful.
Delete resources via DELETE
400 BAD REQUEST The server could not understand the request due to
invalid syntax.
When you use a method that is not
defined, or when the JSON format of
the request body is wrong
401 UNAUTHORIZED This response means "unauthenticated". When a URL that requires
authentication is accessed without
authentication
403 FORBIDDEN The client does not have access rights to the content When you access a resource for which
you do not have access rights
404 NOT FOUND The server can not find the requested resource. GET to a non-existent resource
409 CONFRICT This response is sent when a request conflicts with the
current state of the server.
When the data you are trying to
create or update gives an error due to
unique constraints, etc.
500 INTERNAL SERVER
ERROR
internal error in the server Server-side errors in general, including
exceptions during processing

10.
Stateless
• No state between client and server
• (Ideally) every request should contain all the
information necessary to process it
• No state makes it easier to have scalability

11.
Stateful
Hello
Which side dishes would you like?
French fries
Which drink?
Thatʼs all
Coke
Anything else?
The check is 1000 yen
Give me a burger combo

12.
Stateless
Give me a burger combo
Give me a burger combo
with French fries
Give me a burger combo
with French fries and Coke
Give me a burger combo
with French fries and Coke
Hello
Which side dishes would you like?
Which drink?
Anything else?
The check is 1000 yen

13.
API proliferation
The number of published APIs is growing rapidly
2418
10302
0
2000
4000
6000
8000
10000
12000
Jun-05
Oct-05
Feb-06
Jun-06
Oct-06
Feb-07
Jun-07
Oct-07
Feb-08
Jun-08
Oct-08
Feb-09
Jun-09
Oct-09
Feb-10
Jun-10
Oct-10
Feb-11
Jun-11
Oct-11
Feb-12
Jun-12
Oct-12
Feb-13
Jun-13
Oct-13
* Data from ProgrammableWeb

14.
How to display external data on WordPress
Weather information
3rd party API

15.
• Backend (wp_remote_get, wp_remote_post, etc.)
• Frontend (Ajax with jQuery, Angular JS, React, etc.)
How to embed external data
JSON
3rd party API
Browser
HTML
Browser
3rd party API
HTML
JSON

16.
• Backend (wp_remote_get, wp_remote_post, etc.)
• Frontend (Ajax with jQuery, Angular JS, React, etc.)
There is no convenient 3rd party API...
JSON
Browser
HTML
Browser
HTML
JSON
3rd party API
3rd party API
3rd party API
3rd party API
3rd party API
3rd party API

17.
It’s hard to create new APIs and customize them
Version control of the provided APIs
Monitor, manage, and monetize API usage
Manage authentication and access rights for APIs
Traffic management and protection of API endpoints
Infrastructure setup and management and maintenance

18.
Amazon
API Gateway

19.
Quickly create APIs with Amazon API Gateway
Multiple versions and stages
Create and distribute API keys
Use of AWS SigV4 on request
Request throttling and monitoring
AWS Lambda can be used as a backend

20.
Traditional Architecture…
Internet
Mobile Apps
Websites
Services
AWS
ELB
サーバー管理が⼤変
キャッシュやスロットリングが⼤変

21.
With Amazon API Gateway !!!
Internet
Mobile Apps
Websites
Services
API
Gateway
AWS Lambda
functions
AWS
API Gateway
Cache
Amazon
CloudWatch
Amazon
DynamoDB
Endpoints on
Amazon EC2 /
Amazon
Elastic
Beanstalk
Any other publicly
accessible endpoint

22.
With Amazon API Gateway !!!
Internet
Mobile Apps
Websites
Services
API
Gateway
AWS Lambda
functions
AWS
API Gateway
Cache
Amazon
CloudWatch
Amazon
DynamoDB
Endpoints on
Amazon EC2 /
Amazon
Elastic
Beanstalk
Any other publicly
accessible endpoint

23.
No need for servers (IaaS)
No installation
Easy operation and maintainance
Small start
Microservices

24.
Case 1. Create API, retrieve data and display it on WP
JSON
HTML
Browser
DynamoDB
Table “Pets”
Lambda Function
“getPets”
API GW
/pets GET
REST API

25.
Create API

26.
Create Resource

27.
Create “GET” Method

28.
Lambda Function “getPets”
Program to retrieve items from the database (DynamoDB)

29.
DynamoDB Table “Pets”
Insert an item into the database

30.
API Endpoint
“GET” test by POSTMAN

31.
wp_remote_get() retrieves data from the API

32.
Display the data

33.
No more "black screen" to create APIs !!!
BlackScreen

34.
Case 2. Fetching data by JavaScript and displaying it on WP
JSON
HTML
Browser
JavaScript
DynamoDB
Table “Pets”
Lambda Function
“getPets”
API GW
/pets GET
REST API

35.
JavaScript

36.
Cross-Origin Request is Blocked !
Browser
DynamoDB
Table “Pets”
Lambda Function
“getPets”
API GW
/pets GET
A-site（Origin）
B-site
CORS
A-site : 許可

37.
Enable CORS
When an API resource is requested from domains other than the API's own domain,
Cross-Origin Resource Sharing (CORS) needs to be enabled for the selected method of
the resource.

38.
Display data by JavaScript

39.
S3 EC2
CloudFront
API Gateway Lambda DynamoDB
StaticPress
REST API
Browser
JavaScript

40.
Amazon API Gateway
Internet
Mobile Apps
Websites
Services
API
Gateway
AWS Lambda
functions
AWS
API Gateway
Cache
Amazon
CloudWatch
Amazon
DynamoDB
Endpoints on
Amazon EC2 /
Amazon
Elastic
Beanstalk
Any other publicly
accessible endpoint

41.
Case 3. Create a new API by customizing an existing API
Custom API Origin API
Query String や
Request Header を変更
Status Code や
Response Header を変更
Stock API
Map API
Weather API
複数の API を集約
Custom API

42.
HTTP Proxy

43.
What’s WP REST API?
• Just install the plugin and you can provide a simple HTTP-based
REST API.
• Users, posts, taxonomy, and other data on a WordPress can be
retrieved and updated via simple HTTP requests.
http://v2.wp-api.org/ プラグインをインストール

44.
for Mobile appʼs backend
REST API
JSON WP REST API
Frontend Backend
iOS
Android
Tablet
Fire
Android
iOS
Tablet

45.
GET /wp-json/wp/v2/posts

46.
When there’s not much access
WP REST API
GET /wp-json/wp/v2/posts

47.
WP REST API
When there’s a lot of access
GET /wp-json/wp/v2/posts

48.
Case 4. Control load with caching and throttling
API
Gateway
API Gateway
Cache
Amazon
CloudWatch
GET /wp-json/wp/v2/posts
WP REST API

49.
Caching and Throttling

50.
Summary
• Reduce the time and effort of building and operating
REST APIs
• Combination of WordPress and REST API
• Backend integration (PHP)
• Frontend integration (JavaScript)
• Aggregate APIs as HTTP Proxy
• Improve availability by caching and throttling WP REST API.
• Serverless WordPress !?!

51.
Thank you !