Willy Melt uses the WordPress REST API for your high scores.

At Brown Bag Marketing our holiday mascot is Willy Melt. Each year we send out holiday cheer with his help. Lately our cheer has been more and more technical: from augmented reality to virtual reality. We were pleased to release a mobile game this past year (2016) dealing with Willy’s Holiday Quest to find and restore tree ornaments. Users had to find missing ornaments around town and redecorate the holiday tree, and as with any decent game, you get scores based on your performance. We wanted a nice way to keep these scores for a leaderboard within the mobile game, but also a way to display the high scores on the willy melt website. With our close watch on the WordPress REST API release we figured it’d be a great way to use it!

scores custom post typeWith our WordPress development chops it was easy enough to create a custom post type for scores and give it all the custom fields we’d need to track them. We’ve got retro initials and score as well as a few others to track device ids and emails etc.

We were sure to expose this custom field to the api:
'show_in_rest' => true

Reading the Scores from the API

After some scores are added to the database, we’re able to load them up scores easily on the website as well as from within the app by hitting the scores endpoint:
custom post type wp rest api response

API scores sorted by custom field with meta_value_num

This was an incredibly easy way to share this data between the website and the app. In each, the data was fast to load and very easy to parse the json for the relevant information to display on the leaderboard. There was a little bit of custom code we ended up adding that helped. Since a leaderboard really only cares about the top ten scores we didn’t want the app to have to load all scores and to the math of finding the top ten, we figured the api could be set to just return the top ten and sort them into the correct order while we’re at it. Since the usual loop args are available to the api we thought it’d be easy, but the API doesn’t currently allow for custom sorting like this. Luckily we found a friendly post that shared a way to enable this:

With this little update we were able to call this endpoint to get just the top ten scores and in ascending order of score for our leaderboard: http://willymelt.com/wp-json/wp/v2/scores/?order=asc&filter[orderby]=meta_value_num&filter[meta_key]=time
This is using the familiar orderby=meta_value_num and then setting our meta_key to the time value which since we’re using the user’s time as their score is the custom field we’re using to store the user score.

Now we have the scores loaded simply on the app and the website:
2016-12-29-15-28-36screenshot-2016-12-29-10-24-54

Posting Scores to the API

Loading high scores won’t do us much good if we aren’t able to get ourselves on the high score leaderboard though. This new WP REST API is publicly open and easy to read data, but sending data is still not quite baked in (rightly so) since it’s a lot to consider when you’re creating an API for 27% of the web. Luckily there are plugins that allow for various types of authentication. After taking a look at each of the available options we narrowed it down. Since this is an external post to the api, we couldn’t use a wp cookie/nonce. We figured all we’d need was some sort of basic auth and rather than sending our username and passwords from the app to post scores, we figured we could at least set up application passwords to use that wouldn’t give access to the site in case they somehow leaked. So we installed the plugin and set up the application password:

screenshot-2016-12-29-10-18-46

This gave us the access we needed to post score data to the API. We use the same route but with a POST method and send the data as json in the body and set the basic authentication in the post header. Viola, we have a leaderboard via the WP REST API from a mobile app. Now if I could only get my score good enough for the leaderboard…posting a high score to the wp rest api from a mobile app

Leave a Reply