Join Morten Rand-Hendriksen for an in-depth discussion in this video Overview of the standalone app, part of WordPress: REST API.
- [Instructor] In the Exercise Files for this movie 05_02, you will find a folder called wp-reader that contains the entire reader app that we'll be working on. Moving forward, just grab the folder from inside the Exercise Files for the current folder and put in on your desktop or wherever you want to work with it. And then we'll build the app in steps. To avoid cross-domain issues, because were are running an app locally on our computer, we need to run that app in some form of web server. And the easiest way to do that, if you're using Atom, is to get the package called atom-live-server.
Atom-live-server will just allow you to run a little web server on your computer that spins up whatever project you're currently working on in Atom. So, for example, right now, I have the wp-reader folder on my desktop open. And if I hit Control, Shift, 3, on my keyboard, it'll spin up a web server and then spin up the app in the browser. So now I'm running a web server with the app and everything is working properly. All right, let's take a look at the app as it is in the exercise files right now. The index.html file contains the structural part of this app.
And that's the only HTML file in the entire project. Here we set up a standard accessible page. At the top we have a header. And inside the header, we have two components. We have the site branding, that's the name of the site, wp-reader. And then we have a form with id new-url that contains an input field, a text field, and a submit field for submitting the form. After the header we have the content area. The content area holds the main area which is just the container that holds some placeholder content right now.
Then we hook a submit function to the new URL form. When the form is submitted we first prevent a default so we don't jump to a new page or reload a new page. Then we grab the data from the input name=raw_url. That's the input up here, that's the text field. We use a try catch condition here to see if we can parse what's in the input field into a URL. This basically tests to make sure it is, in fact, a full URL that starts with either HTTP://, HTTPS://, then it splits everything apart, strips out just the domain name, and sticks it all back together again to product HTTP or HTTPS://, then the domain name, then /wp-json/wp/v2.
That means, whatever you put in, as long as it's a proper URL that starts HTTP or HTTPS, everything else will be stripped off, we won't have any issues with it. And then that's returned back. Right now, we're just outputting it in the consoles. We can see that URL is actually presenting itself. If this attempt doesn't work, meaning the text in the field is not a proper URL, then the catch condition kicks in and we output a div for the class error that just says that didn't work, try a different URL. And we put in a console log ERROR: User input is not a proper URL.
All right, let's test this to see how it works. So I've spun up the Atom live server, over here. Now I can put in a URL to this site and see what happens, http://mor10.com click Get posts. Of course, nothing happens. But if I go and inspect this and open the console drawer, you see down here, we have the URL in question, mor10.com/wp-json/wp/v2. And if I follow that link you'll get the json ouput from mor10.com.
So that works properly. Now what happens if I put something else in here? Let's see, just mor10.com, for instance. Click Get posts. We get a message, that didn't work. Try a different URL. And down here in the console, we're told exactly what went wrong. ERROR: User input is not a proper URL. So this is the framework we'll be working with. In the next movie, we'll start adding functionality to this. We'll build the app out to work the way we want it to.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses