Browse By

App#3 – Indonesian SDA Hymnal (Lagu Sion) for Android and iOS using jQuery Mobile + PhoneGap

lagu sion app aicon

Still continuing the mobile app development using jQuery Mobile and Cordova/PhoneGap, this time I created an ebook type of app. It’s the mobile app version of Indonesian SDA Hymnal, also called “Lagu Sion” in Bahasa Indonesia.

You can download the app for free, it’s available in Google Play and soon in iTunes Store.

I will release the app source code also later on.

Technologies used:
jQuery Mobile
Cordova / PhoneGap

Here are some notes I have during the app development:


The Indonesian SDA Hymnal has 343 songs, so preparing the data took half of the development time. I already all of the song lyrics in text file format when I created the Lagu Sion PDF version, but they’re not directly usable by the app.

Manually parse all 343 songs won’t be any fun at all. So, I created Java parser that reads the file, parse each song into a Java object along with each stanza and chorus :).

After that, converting from Java objects to JSON is very easy using Jackson, JSON processor Java library.

I decided to create separate JSON file for each song because loading all for only accessing one song is too much, especially for mobile device.

User Interface

The app UI is nothing fancy, it uses most of the default CSS with very minimum custom CSS.

An interesting challenge comes when I was creating the search page. Testing the performance in MacBook Safari for all 300 songs or so is a breeze, but a noticeable unresponsive time happened when testing it using the Samsung Vitality Android phone.

Appending 300 list elements to an HTML page seems to be a no easy job for mobile device, and other people also posted and asked the same problems in the internet. This means I encountered list element performance issue.

So, I decided to not load a great number of search results at once, and created a “more” button at the end of every 10 results. This solve the problem quickly and elegantly. 🙂

more list option

Exporting to Android APK

Creating PhoneGap for Android is very easy, I just need to follow the official guide, put the different sizes of icons to resources directory, and export the signed application to APK when I’m done.

Another 30 minutes or so to upload the APK, screenshots, and icon to Google Play and all set. 🙂

A little interesting note about the permissions, although the app doesn’t require any kind of permission at all, PhoneGap seems to require at least permission to access network state. So I have to have it enabled on the AndroidManifest.xml.


Comments or critics

So, those are some of my development notes for developing the Indonesian SDA Hymnal mobile app. If you have any comments or critics, please let me know. 🙂

4 thoughts on “App#3 – Indonesian SDA Hymnal (Lagu Sion) for Android and iOS using jQuery Mobile + PhoneGap”

  1. abed says:

    Hello there,
    First of all, thank you for developing this application. It helps us so much.
    I just figured out that you are also an adventist. I am too.. 🙂
    I thought there was only 1 application of Lagu Sion. But one day, my friend showed me this application. I asked him what is the difference between those 2 applications. He said that this one has better searching function (by song title) which is the other one doesn’t have.
    Wow, that’s great. And I was about to install it to my phone. But, unlucky, I forgot to install it until now.
    So, now it is already installed.. 🙂
    But, there is a bug that i’ve found. It will crash if we activate auto rotation when we are using this application.
    Could you kindly fix this bug?
    Thank you for your attention.
    God bless you.

    1. Trijito Santoso says:

      @abed, thank you for the kind words!
      The app crash problem due to orientation change has been fixed, just update to the latest version out today.
      GBU too!

  2. abed says:

    Hello again! 😀
    I come again with bad news. It’s a bug.
    It’s easier explaining with parable :p

    So let say the default font is 10.
    I increase the font, and now it’s 11.
    After that, i go back to search page and open another song.
    Now, it’s 10. But, when i increase the font, it is 12 not 11.
    Then to make sure, i go back again to search page and open another song again.
    I guess you know what would happen.
    Yes, when i increase the font, it’s 13 not 11.. 😀
    Would you please fix this for us?

    FYI, i, with my friend, started to learn about android programming. We’ve planned to make ‘Renungan Pagi’ application. 😀

    So, please don’t make it! haha
    God bless ur work..

  3. gabby says:

    Hello, thanks for developing the android version of the lagu sion. I was wondering if you’ve developed the iOS version yet?

Leave a Reply

Your email address will not be published. Required fields are marked *