Quick Start Guide to PhoneGap+AngularJS

I've been wrestling with the decision of what JavaScript stack to use for Kaidad. It seems there are twice as many JavaScript frameworks as there are JavaScript developers, and many orders of magnitude more opinions on each of them. Ideally, I'd like to not have to think about this too much - to me a great framework makes it easier for a dev to get product-related work done rather than spending time on plumbing. I'm currently leaning towards AngularJS for the application control flow, aka MVC, and Topcoat to provide some widgets and controls. I'm sure some other frameworks/libraries will sneak in there as needed, but this seems to be a good start. While researching, I ran across this tutorial by DevGirl: Quick Start Guide to PhoneGap+AngularJS. Incidentally, she has many great posts, so be sure to check out her blog in general.

Node.js = Easier PhoneGap Development

Developing mobile apps in PhoneGap can be difficult and tedious if you have to launch the simulator to test every little change to the HTML. If you're developing a PhoneGap app that doesn't require any native resources, such as a SQLite Database, you can just run your app in a browser and have access to all the development tools available to standard web developers. However, if you need to run a SQLite Database, access a service that violates cross-origin policy, or need to mock some native functionality, running in a browser can be very difficult - enter Node.js!

Node.js is a nice companion to PhoneGap development. Not only because code written for Node.js is in JavaScript (meaning fewer mental context switches), but it is very lightweight, and has extensive community support that has added a plugin or framework for just about everything. In my case, I needed to have a SQLite database for loading MBTiles files, which are just SQLite databases in disguise. I used the Express.js framework to provide a very simple web framework and the sqlite3 plugin, and was able to provide an equivalent database abstraction in less than an hour. Having Node.js running also provides a server to serve up the MBTiles files when I'm running the app in the emulator or on my device as well.

All of the code for this example is available through GitHub: offline_map_demo_using_node.

This project was an evolution from my first demo app: offline_map_demo. I've kept them separate for clarity, and the Node version has many code changes to allow automatic detection of the running state and to add proper abstractions around the bits that get data from the database.

Offline Maps on Android - Leaflet.js+SQLite+MBTiles

Offline Mapping Bliss...

The stealth project that Kaidad is working on requires offline maps. I had very good experiences with PhoneGap at my day job, and since I'm in the prototype phase, this seemed like a good place to start. I also have the limitation that at the moment I do not own an iOS device - only Android. After spending some time researching offline maps for Android as well as various mapping libraries, I came across this post by Geospatial Scott: Phonegap + Leaflet + TileMill = Offline Mobile Maps. This demo used a SQLite PhoneGap Plugin for iOS, which presented a little problem since I needed this to run on my Android phone. A few sleepless nights and early mornings later, and I finally saw the above map.

Overall, I'm quite pleased with the proof of concept, and will build on this idea. However, I would really like to see better performance when panning and zooming. There's a noticeable delay in rendering the tiles that really surprised me since it's loading from a local database rather than downloading tiles from the internet. It seems to be quite a bit slower than, say, Google Maps. I did improve performance by modifying the SQLite Plugin to use a simple StringBuilder to build the output string rather than relying on the JSONArray.toString() method which I determined to be a bottleneck after spending some quality time with traceview.

You can download the code for this demo from my GitHub account: Offline Map Demo