Apache Cordova “Hello World” meets the real world

Everyone who’s ever learned to code (and probably a few more) knows about the “Hello World” program. Your first program in any language simply says “Hello World” and from that all other great code is derived. In 1972 that simple bit of a program taught you something and that remains true today… if you’re learning a new language. However it has become common place for this same concept to be applied to programming frameworks, though in many of those cases you might not learn anything. If you google “ExpressJS hello world” you end up with a sample that actually teaches you a little bit. However, when you start with Apache Cordova’s “Hello World” you don’t learn anything beyond how to run one command. So I rectified that.

Last week I ran

cordova create and got out a fully functional “Hello World” application, which was cool to see running for the first time. However, I didn’t learn anything. So this weekend I wrote an “Advanced Hello World” application for Apache Cordova. My goal was to more properly emulate a real world mobile application that you’d write with Cordova. If you look at the README file, you can see that I noted the additions I’ve made.

• Adding jQuery and jQuery mobile. Since most people are going to use Cordova because they are webdev familiar, it only makes sense to include the most popular JavaScript framework. It also makes working on an SPA much easier.
• AJAX Request — Getting data from APIs for your app is a core piece of functionality for most mobile apps, so a sample request has been included.
• cordova-plugin-statusbar — By default Cordova’s view space takes up 100% of the screen, but doesn’t turn off the status bar (which is a really bad default, oh well). So the statusbar plugin helps you fix that problem properly (rather than hacking in some margins).
• cordova-plugin-geolocation — There are a lot of plugins for Cordova, to use various extra technologies and to use all the mobile hardware, so it’s fairly important to know how to use them.
• cordova-plugin-console — Without this, you can’t see console.log output in iOS or Android

All the code is contained in www/index.html and www/js/index.js. There should also be a sufficient number of comments to explain all the additions I’ve made to the default Hello World application. The app is not beautiful, but it is fully functional out of the box. I’ve tested it against the iOS emulator, the Android emulator, and Apache Ripple.