Support » Plugin: JSON API » [Plugin: JSON API] PhoneGap Android App built around JSON API

  • Hi there

    JSON API is a wonderful plugin – making it really easy to fetch my WordPress powered site’s posts. I love that! Thanks a lot.

    Since I do not seem to be the only one using this plugin (quelle surprise) I’d like to share my newest work with you. I’ve build an Android application (with PhoneGap/Cordova) around the JSON API that can be used to display the latest news, news per category etc.

    A more or less completed feature list:
    – show recent news
    – pagination (pull-to-refresh)
    – categories
    – search
    – settings

    As I tried to keep it modular and simple as possible, it’s an easy one to adopt the code base to your own project/website which is using this plugin. Therefor it might be interesting for others to create their own app as well.

    The code can be found here:

    I’m currently writing the wiki to help you getting started faster, but I’ve now completed it yet. What you need to know to get started quickly:

    – routing.json represents the JSON API paths
    – app.js contains _base and _api which correspond to the JSON API base URL
    – templates are defined in /tpl and are Mustache.js powered
    – sidepanels are defined in sidepanels.json
    – If you take a look in index.html you’ll see that links/buttons have various data- attributes. Those do the magic.

    I guess you will easily find yourself familiar with the code really fast (it’s commented well) and can use it.

    Please let me know if this was helpful for you or if you have feedbacks/suggestions etc.

    Thanks & have fun with your very own JSON API powered Android app 🙂


Viewing 15 replies - 1 through 15 (of 20 total)
  • I really like the design for your application. Great job! Is there anyway to add the featured image to the main news feed? I want the application to look exactly how you made it but instead of just text in the news section, I want to see a squared featured image 🙂

    Here’s my site:

    Hi ElevateMindz. Thanks for the flowers.

    Adding the images to the news list is easy, you can do it like so:

    -in routing.json you need to add thumbnail @ include (so it’s included in the server’s JSON respond)
    – in news.mustache you will now have a new placeholder called post.thumbnail

    that’s it 🙂

    Let me know if it worked for you.

    BTW: If you don’t mind I’d be interested in seeing your resulting app 🙂


    Wow thanks! I’ll definitely work on it and let you know.

    Great help thank you, I was looking for something like this. I am new to both wordpress and phonegap, working on pilot sites for now.
    I am a bit concerned about the commenting part in the app. But Thanks to you for I great display and set-up to work with.

    Will let you know if I am able to add anything new to your project.

    I tried to open this project in Eclipse and couldn’t figure it out. I looked into PhoneGap, but I’m a newbie when it comes to Android Development. I actually started more with Aptana Studio 3. Have you heard of it?

    Your files (that I downloaded) doesn’t seem to pull up on Eclipse or Aptana. I’m not sure what I’m doing wrong. I learn really fast. Faster than most. So if you could help, I would greatly appreciate it.

    Thanks 🙂

    Wihl Rodriguez (ElevateMindz(at)

    Never mind. I got it to load. Just have to make my changes to it now. I have figured out some of it. Just need to spend more time on it.


    I edited the files to look how I want in Aptana Studio 3 but the issue in previewing your work is it gives me 3 errors




    I tried to create a new project in Eclipse using existing code, using your code, but it seems like some project files are missing. I spent a few hours trying to figure it out on my own but there isn’t much help out there. Most of it is basic for beginners. Don’t know what else to do. Any help would be great.



    I can not give you a straight-forward manual on how to import the files into Eclipse/NetBeans whatever as I had some problems with that too. 🙂

    However it shouldn’t really be required as with PhoneGap you focus on – HTML/CSS/JS.

    The only things you need to change in non /assets/www files are:

    – in /res/xml/settings.xml the origin (which defines what URL’s are allowed to be loaded in-app)
    – replace schwingenonline in filenames/dirnames everywhere needed (just grep the files)

    Beside that, you can take a look at the commits from 17.07. here:

    Basically everything can be splited into two parts:

    – native Android project files
    – PhoneGap files (/assets/www/)

    and only the PhoneGap ones need big changes.

    Let me try to summarize the required steps again:

    – Clone the git repo
    – run android update project -p . (in repo root)
    – edit /assets/www/assets/js/app.js and change
    – _base
    – _api
    – edit /res/xml/config.xml and change
    – <access origin=”XY” /> to your URLs

    those changes should allow you to use the app with your WP install (but the native Android project would still be the same -> e.g. app name isn’t changed yet.)

    Now you can edit the files in /assets/www etc. (e.g. remove the JWPlayer reference etc.)

    As a last thing (those are native Android changes) line 21, 45, 56 line 2 line 3
    – rename files and dirs: and change everything schwingenonline in other files as well to reflect those changes

    Finally, you can debug your app either in Chrome (with Ripple plugin) or on device with adb logcat.

    This issue may also contain some interesting information for you:

    Please let me know if things are still unclear 🙂

    BTW: Debugging in Chrome (with Ripple) will fail with the PreferencesPlugin as it cannot be loaded there. Generally, I recently had some problems with it…

    Might also help:

    Thanks for all this info! I will definitely look at it all.

    My issue isn’t really in making the changes though. It’s more in taking all of the changes I made and making it an actual app. Like an .apk file or something to view my changes.

    Like you said “you can debug your app either in Chrome (with Ripple plugin)” which I have done and that’s when it gives me the errors I mentioned before.

    What do you use to edit it all? I made all my changes with Aptana Studio 3. It’s great for CSS/HTML coders.

    The problem with Ripple is, that you have to click 3-times abort when the popups appear (otherwise an endless error loop happens).

    You just need to have Android SDK installed and run:
    to generate an .apk (will be placed in ./bin).

    Well, Sublime Text – what else? 😀

    any suggestions on using for an iphone app?

    @buddhatunes – this thread’s topic is Android – please start your own thread per

    Hi MaddinXx, thank you for share your source great app.

    I created a app with your soruce, is working with your link in /assets/www/assets/js/app.js but if i put my link there is no post in app.

    I dont no how to configure json api for your app.

    Can you give mi some tips how to fix that.



    @jaskobihac you might need to change some of these lines: (it controls which domains/IPs are allowed to be opened from within the app (e.g. load content from it)) (make sure those URLs are available for your install) (change to your domain / JSON API base path)

    That should already be enough to get a working application.

    Let me know if this helps – if not, you might want to install Ripple (see posts above) and post the console output when starting/running the app there.

    Hope this helps 🙂

    Hi MaddinXx, thanks a lot it works now i add wrong “var _api” path.

    Is it possible to add image on main page i mean news under article name, like i na acticle.

    Thanks again.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Plugin: JSON API] PhoneGap Android App built around JSON API’ is closed to new replies.