PhoneGap Android App built around JSON API (21 posts)

  1. MaddinXx
    Posted 3 years ago #

    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: http://drops.frontender.ch/uDOr/1MtI0Bio

    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 :)



  2. ElevateMindz
    Posted 3 years ago #

    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: http://LifeLoveAndMusic.net

  3. MaddinXx
    Posted 3 years ago #

    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 :)


  4. ElevateMindz
    Posted 3 years ago #

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

  5. itstakingtime
    Posted 3 years ago #

    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.

  6. ElevateMindz
    Posted 3 years ago #

    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)Gmail.com)

  7. ElevateMindz
    Posted 3 years ago #

    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.


  8. ElevateMindz
    Posted 3 years ago #

    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.


  9. MaddinXx
    Posted 3 years ago #


    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: https://github.com/MaddinXx/ch.schwingenonline.android/commits/yetone

    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)

    - https://github.com/MaddinXx/ch.schwingenonline.android/blob/develop/AndroidManifest.xml line 21, 45, 56
    - https://github.com/MaddinXx/ch.schwingenonline.android/blob/develop/build.xml line 2
    - https://github.com/MaddinXx/ch.schwingenonline.android/blob/develop/res/values/strings.xml line 3
    - rename files and dirs: https://github.com/MaddinXx/ch.schwingenonline.android/tree/develop/src 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: https://github.com/MaddinXx/ch.schwingenonline.android/issues/5

    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:

    - https://github.com/MaddinXx/ch.schwingenonline.android/wiki/Concept#workflow
    - https://github.com/MaddinXx/ch.schwingenonline.android/wiki/Structure#legend

  10. ElevateMindz
    Posted 3 years ago #

    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.

  11. MaddinXx
    Posted 3 years ago #

    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? :D

  12. buddhatunes
    Posted 2 years ago #

    any suggestions on using for an iphone app?

  13. WPyogi
    Forum Moderator
    Posted 2 years ago #

    @buddhatunes - this thread's topic is Android - please start your own thread per http://codex.wordpress.org/Forum_Welcome#Where_To_Post

  14. jaskobihac
    Posted 2 years ago #

    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.



  15. MaddinXx
    Posted 2 years ago #

    @jaskobihac you might need to change some of these lines:

    - https://github.com/MaddinXx/ch.schwingenonline.android/blob/develop/res/xml/config.xml#L21-L24 (it controls which domains/IPs are allowed to be opened from within the app (e.g. load content from it))
    - https://github.com/MaddinXx/ch.schwingenonline.android/blob/develop/assets/www/routing.json (make sure those URLs are available for your install)
    - https://github.com/MaddinXx/ch.schwingenonline.android/blob/develop/assets/www/assets/js/app.js#L16-L23 (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 :)

  16. jaskobihac
    Posted 2 years ago #

    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.

  17. MaddinXx
    Posted 2 years ago #

    You can include the fields you want for the view. For example change: https://github.com/MaddinXx/ch.schwingenonline.android/blob/develop/assets/www/routing.json#L11 to get_recent_posts/?include=id,title,excerpt,thumbnail and include it in the view:

    https://github.com/MaddinXx/ch.schwingenonline.android/blob/develop/assets/www/tpl/news.mustache (you will have a new placeholder {{ thumbnail }} there.

    You can see all available fields by calling the URLs WITHOUT the include parameter (and ?dev=1)

  18. jaskobihac
    Posted 2 years ago #

    It works, but the pics are small.

    On android 4.0.x has some bugs with scroll down on post and the menu slide dont showing up.

    On android 2.x.x all ok no problems.

    Thanks friend for help.

  19. ElevateMindz
    Posted 2 years ago #

    I loved this app, but as I am more of a Web Designer and didn't know much about Android app development, I gave up after a while lol

    But MaddinXx is awesome! Wish more people were like this.

  20. MaddinXx
    Posted 2 years ago #

    @jaskobihac have you given "&thumbnail_size=" a try? you can see it for example in post.id section (routing file) - that lets you define the size to take (again, see without ?include and dev=1 for a list of all sizes your installation has available).

    Indeed scrolling is not optimal - but the side menu should work. Do you get an error message in the console (Ripple) or with Logcat (adb)?

    I might somewhen create a new JSON API based app as it's already a bit old and I had the chance to learn a lot more about JS in the meanwhile...but this can take ages (depending on free time :))

    @ElevateMindz thank you. Believe in yourself and try again if you still need it - I'm sure you'd be able to manage it nowadays :)

  21. jaskobihac
    Posted 2 years ago #

    @MaddinXx thanks for helping me i am new in json.

    I fixed thumbnail_size is on now, slide menu is ok to. scroll down problem was i my wordpress theme.

    I have 2 thumbnails frist from <img src="{{ post.thumbnail }}" alt="" class="img">

    and the second from {{{ post.content }}}

    if i remove thumbnails from post content srcoll down works prefect in post.

    Can i change post.thumbnail size in css?

    Only problem is in post youtube dont showing thumbnail of player or pic only little icon very small.

    Again thanks

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic