Recommended
More Related Content
Similar to An Introduction to the WP REST API
Similar to An Introduction to the WP REST API (20)
Recently uploaded
Recently uploaded (20)
An Introduction to the WP REST API
- 1. WP REST APIAn introduction and demonstration 17 June 2019
- 3. What is an API? • Application Programming Interface – Rules and instructions for applications to communicate – Secure method for third-party apps to use your program and data – E.g., Twitter, Instagram, Google Maps, POS system
- 4. What is an API? Credit: https://medium.com/@tyteen4a03/how-apis-work-an-analogy-for-dummies-ac6ee1d1671b
- 5. What is an API? Credit: https://medium.com/@tyteen4a03/how-apis-work-an-analogy-for-dummies-ac6ee1d1671b
- 6. What is an API? • Representational State Transfer (RESTful) API – Uses HTTP protocol (almost always) and its delivery methods – Uses JavaScript Object Notation (JSON) format to exchange data
- 7. HTTP Methods • Four main methods (CRUD) – GET (retrieve data to server) – POST (send data to server) – PUT (change or update data on server) – DELETE (remove data from server)
- 8. What is the WP REST API? • A fully-functional REST API in WP – Fully introduced in 4.7 – Its own set of rules and methods – Means of ‘modernising’ WP
- 9. Why is the WP REST API useful? • Universal connector from WP to external applications – Allows us to Create, Read, Update and Delete data from anywhere – External applications (JS, Ruby, Python etc.) – Native mobile apps (iOS/Android etc.) – We are not restricted to the admin dashboard screen
- 10. How does it look like https://yoursite.com/ wp-json/wp/v2/posts
- 11. How does it look like https://yoursite.com/ wp-json/wp/v2/users/1
- 12. How does it look like • https://yoursite.com/wp-json/wp/v2/posts – /wp-json – base path of the API – /wp/v2 – namespace – /posts – resource path – /wp/v2/posts - Route/Endpoint
- 13. Use-cases • Calypso – Single Page App (SPA) to manage all WordPress.com or Jetpack- enabled sites – Built entirely in JavaScript – Communicates with WordPress.com only using the WP REST API – https://developer.wordpress.com/calypso/
- 14. Use-cases
- 15. Use-cases • Digital Scoring App – Developed for a race event – Two main modules - participants and game masters – Uses JWT (JSON Web Tokens) Authentication – Uses WP as a Headless CMS
- 16. Use-cases
- 17. Demonstration
Editor's Notes
- Using a Bank as an analogy Imagine a bank without any tellers or staff working there. Its vault and logbook are publicly accessible. So to deposit money, the customer just needs to walk in, open the vault, deposit money and record how much he/she puts into the bank. Problem #1 Vault too heavy. Customer unable to open it. Or logbook is complicated. Customer doesn’t know how to read or write Problem #2 Customer is dishonest. Deposits $500 but records $1000 in logbook
- Using a Bank as an analogy Solution – hire a bank teller Customer will pass money to bank teller. Teller takes the money, opens the vault and puts in the money. Teller will also record this transaction. Teller then informs customers that money has been deposited. Customer leaves the bank with a smile With a bank teller, we have introduced the concept of an API. As mentioned at the start, API allows you to talk to other application easily. So now the customer doesn’t need to open the heavy vault door and write into the complicated logbook anymore.
- A REST or RESTful API is a type of API that uses HTTP requests to perform CRUD operations HTTP is the foundation of how we share data online. Essentially it comprises of two aspects – Request and Response e.g., type a url in the browser toolbar (request) and the server provides a response Protocol is the set of rules defining how components can interact with one another With regard to analogy Bank teller understands the request of withdrawing and depositing money. But doesn’t understand if the customer ask to help book movie tickets. So both parties must understand the same protocol in order for the communication to be successful Format is how the components talk to each other With regard to analogy Both customer and teller are speaking in English and it is something both understand. So the communication is a success. But if customer speaks in Chinese, the teller wouldn’t understand. With the REST API, it securely exposes your data to HTTP requests from external sources. A website or application on another server can use the REST API to retrieve information from your WP site
- In the context of WP POST = use your app and create a new blog post GET = display 10 latest posts in your app or retrieve users information PUT = update blog post content DELETE = remove blog post This is also commonly known as the CRUD operations Later on in the demo, we will take a look at a simple app that can perform these operations
- WP now has its very own fully-functional REST API Full introduced in 4.7 The infrastructure was first merged into core in v4.4. The remaining parts of the API was introduced in 4.7. So if your site is running 4.7 or later, you will have access to the WP REST API Own set of rules and methods For sending and receiving data to manipulate WordPress Content Modernising WP - Web applications are becoming more popular and common and this has led to the rise in popularity of JavaScript. In that regard, WP can feel a bit outdated as it is primarily PHP-based and there is minimal use of JavaScript. With the introduction of the WP REST API, JavaScript developers will now be able to build apps using WP as the backend.
- Also commonly known as the CRUD operations, the REST API allows us to create, read, update and delete data form anywhere. This opens the door for all kinds of possibilities. We can create a mobile app that uses WP as the backend and then use the REST API to create, read, update and delete content. We don’t have to login to the admin dashboard to do all these anymore. Use WP as a storage and retrieval system -By using the WP REST API, developers can utilise WP’s infrastructure for storing and retrieving data and focus on developing apps powered by other languages like Python, Ruby and Java.
- If your WP site is running at least version 4.7 (which it should be, mainly for security reasons), you can visit your site and append the following route to retrieve various information. In this case, this will display our all posts from your site. By default the output will not be formatted nicely like this. It’s actually just one messy wall of text with no proper line breaks and indentations. I’m using a Chrome extension called ‘JSON View’ which helps to make it more readable. So this endpoint here uses the ‘GET’ method to retrieve all public posts from your site. There are actually a lot more information available like the author id, categories etc. but I had to crop it to make it fit. Some of the more common and useful pieces of info that will be used are the ID, title and content.
- This is the USERS endpoint. As you can see, it displays only the necessary information and hides those private data like your password. The /1 at the end is the user ID. So this endpoint will only display the information of user id 1. An example of when this endpoint can be useful is when developing a simple search function. You can have an input field in your app for users to enter and ID. U can then take the value the user entered and append to the end of the route. So if users enter ‘2’, it will be /users/2 and so on. And the REST API will retrieve information of author with the ID 2.
- The blue part Namespace is used as prefixes to prevent clashes with custom routes. For e.g., when creating a custom route without namespace, it might look something like /wp-json/books. Since /books is a fairly common term, the chances of other developers using the same route are quite high. And when they do, conflicts will happen. ‘v2’ is the version part of the namespace. This is useful for maintaining backwards compatibility. If u are writing your own REST endpoint and want to add new ones, u can just bump the version up to v3 or something so the old versions will still be accessible. Resource path This is the resource we want to retrieve from the server. As shown in the previous slide, /posts retrieve all posts, /users retrieve all users. There is also /pages which retrieves info on all the pages. Route This is the name you use to access a required endpoint Endpoints Endpoints are functions that allow u to perform CRUD operations. And we use routes to access endpoints. For example, if I want to retrieve the all the posts from this site, I’d go to the /wp/v2/posts route and it will trigger the ‘GET’ endpoint A route can have multiple endpoints. This /wp/v2/posts route has 2 endpoints and which is used depends on the HTTP method (POST, GET) So if I use the POST method, I will be able to insert a new post.
- Headless CMS no front-end display only uses WP to store and manage content uses the WP REST API to retrieve and manipulate data App can be on a separate server