WordPress RESTful API & Amazon API Gateway (English version)

© 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

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

Drawing Robot with AWS IoT
AWS IoT
Browser Robot arm

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

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

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.

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

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

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

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

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

Stateless
with French fries
with French fries and Coke
with French fries and Coke
Hello
Which side dishes would you like?
Which drink?
Anything else?
The check is 1000 yen

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

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

• 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

• 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

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

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

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

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

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

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

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

DynamoDB Table “Pets”
Insert an item into the database

API Endpoint
“GET” test by POSTMAN

wp_remote_get() retrieves data from the API

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

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

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

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.

WordPress RESTful API & Amazon API Gateway (English version)

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

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

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

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/ プラグインをインストール

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

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

WP REST API
When there’s a lot of access

Case 4. Control load with caching and throttling
API
Gateway
API Gateway
Cache
Amazon
CloudWatch
WP REST API

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 !?!

WordPress RESTful API & Amazon API Gateway (English version)

More Related Content

What's hot (20)

Similar to WordPress RESTful API & Amazon API Gateway (English version) (20)

More from 崇之清水 (20)

Recently uploaded (20)