How to convert an HTML5 project into a standalone Android application

A WebView is a mobile application that acts like a real-world window to a website. The user however doesn’t see any browser at all. One would ask: “OK! And what good is to have an application when the same website can be opened by just typing its address in the address-line of the browser?” The whole thing may sound like the ultimate nonsense but actually it is very interesting and useful. First of all, it offers to the user a simpler and friendlier way to open a website. That presentation has the advantage to be of a more professional look, since the webpage is opened without having on the screen the menus and the borders of the web-browser. Thus it is not the same like just creating a link-shortcut on the Home Screen of the mobile device. It can also be used, so that a website will be only a part of the functionality of an application, by first displaying to the user a UI navigation’s menu, like it is such an application called VMedia that I created for a friend who runs a web TV-station.

But that what is of more interesting is that a WebView application can encapsulate a local site with all sub-directories, including the ability to execute JavaScript programs.
In other words, such an application can turn a complete HTML5-project into a standalone package ready for uploading to the market, like it is Google Play or the App Store of Apple.

I will describe in this tutorial the case of creating a WebView application for the Android using the SDK, in the shortest way it can be done. It could come along with a whole bunch of other checking mechanisms (like error handling on loading, alert messages, progress bar, etc.) but I will write another tutorial for this reason.

For the lazy ones, there are several free tools (even online) that pick the main directory of an HTML/HTML5 project and produce an APK package from it but …if we always use tools, not knowing how to do it ourselves …then who’s gonna write the tools?

In the following, I will describe how I created a standalone application from an HTML5 game that I developed, called Spaceball. More

Create cross platform HTML5 games – Level 1

Creating games is the most exciting and challenging area of the software development. Once you have created the next hit game of the year, the challenge for your newborn baby is to support as many different platforms as possible since there are thousands of different devices out there. Thus, unless your target is a specific device, like iPhone, Android, Smart watch, Windows PC, Mac, etc. with previously known technical characteristics, then the need of such a wide support could become a real headache.

responsive_spaceballAn approach to this is to re-write the source code (or specific parts of it) for every platform using the SDK and the tools for this platform.

Another approach is to write the game using technologies that come with the promise “write once, run everywhere”. One such very promising technology is HTML5. Orienting your coding habits into this direction, a cross-platform implementation becomes feasible.

In this tutorial I am going to show you how I have used HTML5 to write such a cros-platform game. The reader could easily be confused with the term“HTML5” believing that somehow it is possible to write such complex applications using HTML-tags (something like <game><img src=”….”, …, put some game logic here </game> and …that’s all. NO!).  In fact, HTML5 is 1% HTML and 99% JavaScript. The tutorial assumes that you already have a basic experience with JavaScript programming, or with …programming.

Actually, an HTML5 game (or application) runs inside a browser that supports this level of the markup language. Fortunately, almost every browser on any device of the last half decade can translate HTML5.

You can play a game that I have created with HTML5 and combines all these promises. Just visit from everywhere the link bellow. If you open it from a desktop browser please keep changing the dimensions to experience the effect of responsive resizing in real-time.

Now, let’s begin with the fun.


Removing duplicate objects using Underscore for Javascript in Coffeescript

Below an example to show how to remove duplicate objects from an array using underscore in Coffeescript.

My answer is based on the following stackoverflow q/a:

array=  _.uniq(_.collect(initialArray, (x) ->  JSON.stringify x  )).map((v) -> JSON.parse(v))