Create Personal Mobile Apps With HTML And JavaScript

You don't have to fire up Xcode or download the Android SDK to build an app for yourself that you can use anywhere. For less complex programs -- in my case, a companion app for a board game -- you can open your web development IDE of choice and build something that should be more than adequate for your needs (and shareable if required).

The screenshot above is a web app I threw together for an ongoing, fortnightly campaign for Game Workshop's Warhammer Quest. It's essentially a more complicated version of HeroQuest. A reasonably faithful iOS adaptation came out not long ago, but nothing beats sitting around a table with friends and doing your best not to freak out when ambushed by several minotaurs.

As a rule of thumb, our group of board gamers tries to keep the involvement of gadgets to a minimum, but we found that calculating gold and experience was a time-consuming process, breaking up the flow of the game as we moved from room to room. Warhammer Quest, like many retro games, features a lot of reference tables spread across numerous rulebooks. While the individual tasks of keeping track of who killed what, looking up the "value" of said conquests and then doing a bit of maths to figure out the final numbers aren't laborious on their own, together they formed a dull process that could be easily streamlined with technology.

If you're handy with JavaScript, you can see how putting together a page with all the logic client-side would provide a simple way to automate the record-keeping and mathematical aspects of the game. The latest features of HTML and JavaScript are well supported on mobile browsers, so bringing up the page on your phone or tablet and updating it as you go takes very little away from playing the game.

There are a few points to keep in mind. Unless you're willing to write up some server-side code, storing persistent data could be problematic. True, you have local storage available via HTML5, as well as cookies, but these are rather fragile and not ideal for a database-like structure (in my example, monster names and their associated gold values). If writing to the file system is possible, then it's less of an issue, but again this information is not on the server, so others you share the web app with won't have access.

You'll also need some web space to host the page, unless you're able to store the required files on your device. Easy enough with a notebook or Android devices, but not so simple on a non-jailbroken iPhone or iPad. Online hosting is the most robust option, allowing others access to your app.


Comments

    Title is misleading.
    At least tell us HOW you'd make an app, and it's a web app, not a 'mobile app'. Use the right terminology.

    Last edited 22/06/14 5:51 pm

    Quite. Is there a paragraph missing? How did you do this? Are you just saving all the files to the Android filesystem and opening then in the browser?

    You could store the HTML and JavaScript in, say, a shared Dropbox folder. In fact, if you were really handy with web development, you could use one of the many available front-end JavaScript frameworks to store and manipulate the data.

    If anyone has a good use case similar to this, I'd be happy to look into this as a little personal project.

      google HTML5 Application Cache and Local Storage.

Join the discussion!