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
Java
JSON
HTML5
CSS
Cordova / PhoneGap

Here are some notes I have during the app development:

Data

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.

lagu-sion-app-permissions

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”

Leave a Reply to gabby Cancel reply

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