Some cool webapp technology

Right after my exams, I took up a project with a friend to create a phone app. It was my first app made and I was quite satisfied with it. The app is meant to be a companion app to my college’s May Ball. The requirements was that it displayed the programmes and a reminder feature, have a map of the place, and the ability to share photos. I shall discuss some of the technologies used.

https://play.google.com/store/apps/details?id=com.emmaapp.emmamayball

PhoneGap

My friend and I both had more experience with web programming than with phone programming so we decided to go with phonegap. PhoneGap allows the creation of mobile phone app using standardized web API. If the web app uses only the native API provided, it can also be deployed online into the different platforms such as Android, iOS, Windows, etc. However, custom plug-ins that hacks the phone native API won’t work with the online method, and they have to be compiled separately. There is a library of plugin here but some of them are meant for earlier versions and might have compatibility issues with the latest version. This was the main problem I faced when developing this app. I wanted to create a local notification on the phone at a certain time, however, that could only be done with an external plugin made for earlier versions of PhoneGap. It took me awhile to fix issue. On the bright side, I learned a little about the structure of the phone apps.

Parse.com

The original plan was to store the data online using parse.com which offers hassle free online data storage. They provide push service as well, which was pretty cool. Unfortunately, I found it quite hard to manipulate the image data that I wanted to store. So I ended up using a simple MySQL and PHP script instead, which I am more comfortable with. Nonetheless, this is a pretty cool technology worth looking into. An example of a simple web app using parse is this todo list.

TileMill + Leaflet

This two technologies allow the creation of responsive map. The original plan was to display the map in the in-app browser and use js plugins (hammer.js) to resize and pan. But that proved to be quite challenging and it was also rather jerky, so we decided to use tiling instead.

iScroll

This provided a nice user interface, providing bouncing off the edges. However, on my version of android, it faced some problems with text inputs. This is because this plug in overwrites the default action of everything (changes the focus) to achieve the scroll effect. The solution is to alter the code such that it ignores text inputs, so that the original action for text inputs is retained.

It’s a pretty straightforward and simple app. But I’ve learned a lot during this journey, I hope to be able to create some useful apps soon.

Advertisements

Published by

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s