When Written: Oct 2013
There has, for some time, been a Holy Grail in programming of the concept of ‘write once, run anywhere’. It could be strongly argued that web technologies have gone a long way to achieving this, particularly with adaptive designs allowing a single web site to re arrange page elements depending on the form-factor of the device.
The current capabilities of HTML5 and CSS3 coupled with promises of further enhancements as the HTML5 standard becomes fully ratified and is fully implemented in all modern browsers makes it a compelling environment to develop under. The other week I was asked to develop a mobile app for multiple platforms so the question of what development tool and what languages should I choose for mobile phone app development arose.
There are two main routes that you can go down. The first is to write native code, this is the language the phone OS manufacture has provided. This will give your app the best performance and allow you the fullest access to the phone’s capabilities and if you consider that performance is an issue then this is the route to go down. However it does mean that you will have to learn and support currently at least three code bases, one for each of the main mobile phone platforms of iOS, Android and Windows. For the small developer this is an impossible situation.
The investment in time, equipment and support issues make it an impractical way forward. The other route is to develop your application using web technologies and with HTML5 and JavaScript a very competent client-side application that does not need an internet connection at all, can be developed. This way your existing skill set can be used and your development and debugging techniques that you previously used with Web applications can now be utilised for mobile development. It also means that you can use your favourite development tools with all the code hinting and debugging capabilities that you are familiar with. Developing a mobile app this way seems an easy route to getting a product to market. However the reality isn’t as simple as that, as is often the case with software development.
The first thing to bear in mind is that HTML5 is not yet a finalised standard and so there will be changes and you will have to ‘roll with the punches’ that these changes bring. In fact I was a victim of just such a change during the development of an HTML5 app but more of that later. The development tools can also be a little tricky because of this. With most development these days, things are made considerably easier if you use a framework like .NET for windows development or jQuery for JavaScript. For mobile development the main framework is ‘PhoneGap’ (http://phonegap.com ) which Adobe has brought under its wing and whilst it is currently free this may not continue. There is also Apache’s Cordova framework which is and always will be free to use. I spent some time looking at various development tools or add-ins to Visual Studio or Eclipse that might help with the building of a mobile app but most of the more compelling of these were not only chargeable but chargeable at a monthly fee, which if you were using the tools all the time might be an option, but I prefer to buy outright if required as my work varies with client demands.
Some of these tools are very impressive but with the moving goal posts that are the HTML5 specifications it seems the wrong time to invest a lot of money in unproven tools. It was during all this looking that I came across Intel’s XDK which is a java-based application for developing mobile phone apps using HTML5 and JavaScript, using yet another framework which is a combination of PhoneGap and jQuery. Now Intel is not a name you would normally associate which the creation of development tools but what they have produced is rather good. Not only can you create a mobile phone app, but the files are stored locally so you can edit them with your favourite development tool. There is a built in mobile device emulator with quite an extensive range of devices and XDK will also help you with the rather complicated process of submitting your application to the various stores so that you can start to make money from it. XDK supports iOS, Android, Windows 8 and Windows 8 Phone, Tizen, Nook, and Amazon mobile apps as well as Facebook, Chrome and Web apps, all from your one codebase. The whole system is free but of course you will have to sign up and pay to become a developer with each of the stores in order to be able to submit your app. But before you do this you can at least write, test and install your app to make sure that it all works as it should.
Intel’s XDK mobile development and testing environment, is free and easy to use.
So what are the steps to building your first mobile HTML5 app with XDK? The first stage is to download the Java program to your local machine, you do this by visiting http://xdk-software.intel.com and follow the instructions for your operating system as it will work on Windows, OSX and Linux. You will need to register with Intel to use the application tool but once this is done you can create your first project.
Part of Intel’s tool is AppStarter that allows you to design the UI of your mobile app
You are then asked how you wish to create your app. The best way to start with is to select to use the ‘App Starter UI Builder’. This gives you a drag and drop interface and enables you to design all the pages of your application ready for you to write some code behind. It is also a very useful tool for ‘mocking up’ how the app might work to show to your client. Once you click ‘save’, the files are created on your local machine and you are presented with your basic app UI in the XDK development environment which shows the app in an emulation of one of a dozen devices. From within this environment you can start to write code, modify the HTML, open the debug window, test and run your app and then finally build and deploy it either locally or to one of the vendor stores.
For writing code I prefer a tool that gives me a little more help, I am a big fan of Visual Studio and it’s intellisense code hinting feature. So this is how I ended up using XDK. I had Visual Studio open on one screen and the XDK open in a browser on another so after writing and saving some code in Visual Studio a simple click on the ‘reload app’ button in the XDK tool showed the revised app. I was able then to use the browser’s debugging environment to track down any issues that might have crept into my code, unlikely I know, but it does happen! I am often asked about ways of debugging JavaScript, and one of the easiest way I find is to use the developer tools that are built into most browsers. These have JavaScript consoles where any error messages will be shown and if you want to single step through your JavaScript then simply adding the command ‘debugger;’ in your code where you want the code to stop running and you can then single step through the code from there, with the testing of variables, just like a ‘proper’ language!
So you have installed the Intel XDK, now what? Take a look at the file list that is displayed in the XDK and you will see in the root of your project a file called ‘index.html’. When building a mobile app in HTML one of the major differences when compared with a traditional web site is that generally the whole app is contained in one page, normally called index.html. The page is divided up into different areas with <DIV> tags and these are displayed or not using code and styles. The reason for doing it this way is so that there are no delays whilst a page is loaded and refreshed and so the app looks more like a ‘proper’ program rather than a web site.
Obviously you can still have other pages and load these as with a normal web site but it is not recommended as your app will then depend on an internet connection to work and this cannot be guaranteed. Generally mobile apps are not full of complicated screens and so the technique of putting everything in one html page is not as horrendous as it first sounds, I do strongly recommend, however, that you comment the various areas well so that you can easily see which area does what. All your programming code will be written in JavaScript, often using a framework like jQuery, so it is best to store this in a separate file and reference this in your HTML otherwise your index.html will become a mess all too quickly. The Intel XDK has its own framework which also incorporates jQuery so all the functionality of this is available as well add a number of mobile specific functions like accessing the GPS and the accelerometer.
In the case of this particular app that I had to write, these functions would be of little use but what I did need was some sort of local storage. The reason for this is that I wanted the app to work even if there was no mobile phone signal, still a disappointingly regular occurrence where I live and travel. The app would take information that the user would input and store it locally in the phone with the ability to send the information to the office when needed to. Local storage has been possible with HTML since the early days when cookies were introduced, although the amount of data that can be stored this way is limited and manipulating it can be quite clumsy. Joy upon joy when I looked at the HTML 5 spec and saw that it allowed for a lightweight SQL database called SQLite so that not only could data be stored locally but you can do it and retrieve it using industry standard SQL commands like SELECT * FROM MyTable.
However my elation was short lived when I read the HTML5 draft spec further to find that this feature will be dropped from the final specification, this will mean that a developer cannot rely on future browsers to support it although currently it is available. I think that this is a great shame but I suspect that the reason is to keep the processing power required by any device that will fully render HTML5 down to a minimum, a very important requirement with mobile devices. The replacement for SQLite is going to be IndexedDB which does not use the industry standard of SQL to query and modify the database, I also think that it is slightly trickier to code but that might be just because I am familiar with SQL. I will be covering the differences and how to code around them in a future article.
For this article however I will continue to use SQLite as it is a little easier to understand, and anyway I had read the current HTML5 spec. too late for the first version of this app, such are the joys of coding with technologies that are evolving, but that undoubtedly makes the job interesting!
On the index.html page you first need to build a function that runs when the Device is ready, you do this with
<script type="text/javascript">
function onDeviceReady() {
Next you have to create a database object with a name, version number, description and initial size. You will need to do this in any code where you want to reference the SQLite database because such is the structure of HTML5 and JavaScript that these objects do not persist beyond the function. So you will need some code like:
var db = window.openDatabase("MyDataBase", "1.0", "Database for PcPro Article", 2 * 1024 * 1000);
Now it gets a little tricky, and any commands you issue via SQL to the database should be done within a transaction function. If you are not familiar with this technique then the code is a little hard to understand at first, I know it had me puzzled! You need to create another function within your initial calling function with something like:
db.transaction(function (tx) {
Our new function ‘tx’ will then act as a ‘wrapper’ for our SQL commands, the first of which will do the obvious task of testing to see if our database table already exists, and if it doesn’t, then create it. The code uses the ‘executeSql’ command in the framework and passes the SQL to the database so something like:
tx.executeSql('CREATE TABLE IF NOT EXISTS MyTable(id INTEGER PRIMARY KEY AUTOINCREMENT, ref TEXT, details TEXT, amount INTEGER)');
Finally you obviously have to close of the brackets and the script tag with the following:
},null);
}
</script>
The interesting thing to note with the above code is the ‘,null’ which is the value to return if the SQL fails and obviously could be another function if necessary, but that can make for code that is very tricky to follow.
Now if you open the developer tools in your browser and look at the ‘resources’ tab as it is called in Chrome you should see under ‘Web SQL’ an entry with your database name and by expanding this out, your table should appear, if it does not then a simple browser refresh should sort it out.
The built in developer tools in the browser enable you to get some idea of what is happening ‘under the hood’
Not all SQL commands are supported as you would perhaps suspect, with it being a light-weight version designed to work on mobile devices, however all our old friends of ‘CREATE’, ‘DROP’, ‘SELECT’, ‘INSERT’, ‘ALTER’, ‘APPEND’, ‘UPDATE’ and ‘DELETE’ are there. You should have enough to get started with mobile HTML5 development, I suggest you start by building your project for Android as it is probably the least demanding platform and you can also test it out easily on a real device as long as you change the settings on that device to allow it to install apps from untrusted sources.
Once the code has been written and tested it is simple to build for a variety of devices and environments.
Once you are happy with your code then with XDK you can submit it to the various stores so that users can download it to their phones but you will need to buy a developer licence for most of them. With Android you don’t have to sell through the Google Play store, you can simply distribute it via a link on your own web site or via email. Obviously users will normally trust obtaining an app via a recognised store and this route will probably result in more downloads and hopefully revenue for you.
Article by: Mark Newton
Published in: Mark Newton