Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
4th November 2013

Use a WordPress site to create a mobile app

Use your WordPress site as a data source for a cross-platform mobile app using the PhoneGap framework

Use a WordPress site to create a mobile app

One of the big challenges of native mobile application development is the requirement to learn multiple languages for each platform. iOS uses Objective C, Android apps are written in Java and Windows Phone needs .NET experience. Thankfully, there are a few ways in which you can simplify the process. One of the easiest is to use the PhoneGap framework. PhoneGap allows you to create native apps using web technologies such as HTML, JavaScript, jQuery, CSS and many more.

How does this work? Well, PhoneGap at its core uses Cordova, which is run by Apache. Cordova sits between the HTML and JavaScript you write and translates those into native API calls. The app is essentially an embedded website, made to act like a native app. It’s then trivial to convert your app to work on any platform, and Cordova/PhoneGap handles the discrepancies between each operating system’s API. This guide will teach you how to produce an Android app that pulls in posts from a WordPress blog.

Install JSON plug-in

First off you’ll need to install a plug-in into WordPress that gives you a JSON endpoint to access from within the app. On the New Plugin page search for ‘JSON API’ by Dan Phiffer, although there are others available. Install it, and once finished, activate the plug-in.

Make an API call

Now we can make RESTful calls on to our WordPress site and get a JSON response with data from our blog. Performing the call is a simple case of entering the URL of your site, then appending the ?json query string. You can then make a variety of different calls to your site.

001 www.example.com/?json=get_recent_posts
002 www.example.org/api/get_post/?post_id=47
003 www.example.org/?json=get_post&post_id=47

Download PhoneGap

Next we need to download the latest version of PhoneGap and get our development environment setup. Go to phonegap.com and grab the current release which will be in a zip file. Extract the zip into a new directory.

Set up Android SDK

We also need the relevant SDK for the platform we are targeting. In this case we are going to be developing an Android app, so head on over to developer.android.com/sdk/index.html and download the ADT bundle. This contains all the things required to develop for Android including the Eclipse IDE, the main Android SDK and platform tools.

Windows PATH variables

So you don’t need to keep typing in the full path for all the commands, we can set up PATH variables – this isn’t necessary but it does make things easier. In Windows, right-click on My Computer and then Properties. Choose ‘Advanced System Settings’ and then Environment Variables. Select the PATH option in System variables and edit with the following:

001 Windows:
002
003 ;C:\Development\android-sdk-windows\platform-tools;C:\    Development\android-sdk-windows\tools 

PATH Variables OSX

In OSX, open up a new Terminal, edit your bash profile and add in the path using the steps below. Make sure that you edit the location of your Android SDK to the location that you installed it earlier.

001 touch ~/.bash_profile; open ~/.bash_profile 

add the following

002 export PATH=${PATH}:/Development/android-sdk-macosx/    platform-tools:/Development/android-sdk-macosx/tools 

and then finally

003 source ~/.bash_profile

Pages: 1 2

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Anil Jaiswal

      In the index.js, the application throws an uncaught referenceError: Zepto is not defined.

      I have done everything as you have described, zepto.min.js is linked too but I don’t know what’s going wrong. Please help.

    • http://testamento.bugs3.com/ Marcos Antonio

      hello!, please can you help me?

      i did exactly as you said and set everything but i get error in the index. js
      i attached a picture of the index. js to show you the error, may you please help me?