[DD App] Day 1 – Connecting to WP REST API

dd-app-day-1-connecting-wp-rest-api

Hi All,

I am back as promised with another update regarding my Delightfull Discoveries App. You can check the [DD App] Day 0 post for more details.

We left last day with the app displaying a placeholder text as you can see in the below image.

 

 

The next step is to access these posts using the WordPress REST API from my blog and display their titles as a list. Earlier we needed to download a plugin to interact with our site using JSON objects. But that changed from WordPress version 4.7+. Now the REST API is integrated within the WordPress. And we can directly talk to the WordPress site using JSON.

So here is how I progressed today –

  1. The URL to access WordPress blog’s posts as a list according to the API’s documentation is – “http://example.com/wp-json/wp/v2/posts”. I modified this URL according to the address of my blog to access the content.               
  2. I started with building the URL. It’s a two-step process. First, generating the URI using Android’s Uri class build method. Then converting the URI to URL by passing URI as a parameter to the URL object. This went fine. For testing, I displayed the URL in the TextView. The result displayed the right URL.
  3. Next, I added the internet permission to the Android Manifest file. This makes sure our app has access to the internet. Otherwise, we will get SecurityException.
  4. Now I needed to access the Http response from the URL and store it as a string. I used InputStreamReader and Scanner for this purpose.
  5. To avoid NetworkOnMainThread Exception, I used AsyncTask‘s doInBackground() method to get the contents from the URL. Then it’s postExecute to display the JSON received in the textview. This step was also successful.

    dd-app-day-1-connecting-wp-rest-api
    JSON Response
  6. I don’t need the JSON with all the data. I only need the title of each post. This requires to parse the JSON string and extract the required fields. Which I did and extracted the titles into a string array.
  7. Then updated the AsynTask class’s doInBackground method to return String array instead of a string. And displayed the contents of this array in the textview. But, there is an issue, the titles are displaying special characters weirdly as you can see in the screenshot.

    dd-app-day-1-connecting-wp-rest-api
    List of Post Titles
  8. Next, I changed the main_layout from LinearLayout to FrameLayout and added a textview to display error messages and a ProgressBar to display the loading progress. Currently, both of these views were set to invisible. If there is a problem in retrieving data from the API then the error message with become visible and the main textview will become invisible. The progress bar will be visible while the app is getting data from the API. Once it has the data, the progress bar will be invisible. Made necessary changes to the main activity to reflect this behavior.

 

Files Created:

  • NetworkUtils.java [Create URL, Get data from the internet],
  • DDJsonUtils.java [Parse JSON to get the required string],
  • DDQueryTask [inner class inside MainActivity.java to create a background thread on which network access will take place]

 

Files Edited:

  • MainActivity.java,
  • activity_main.xml

 

Today I spent 6 pomodoros on the development, ie, 150 minutes = 2 hours and 30 minutes.

That’s all for today, see you in the next post.

Thanks for stopping by!