This is the third part of a tutorial demonstrating the ability to re-use JavaScript in many different environments. The first part dealt with the creation of the re-usable service, a simple command line wrapper which called the service as well as a simple test which checks the service is performing as expected. The second part of the tutorial discussed the development of a simple web application based on that service, using browserify to wrap the service so that it will run in any modern browser. This third part will take the web app, and show you how to use Apache Cordova, a platform independent JavaScript mobile phone development framework, to make your simple app run on modern smartphones.

This third part of the tutorial assumes that you have understood the concepts so far raised in earlier parts of the tutorial.

Project Set-up

You can continue to use the old directory containing the files from the previous tutorial, but I recommend you create yourself an new project environment like this:

Create a new directory mkdir crprice or md crprice or whatever your operating system supports and cd to it. Then use the following:

Price Service

The price service is exactly the same as in the previous examples. Interestingly although the environment will be different - instead of running in a nodejs server environment, the application will be running in the sandboxed environment of the mobile phone, nevertheless we can still use exactly the same code, even to access network resources, by using the tool browserify. This not only resolves code that has been required through npm modules, but also provides a wrapper which allows the developer to access services that nodejs would provide natively through the browser instead.

Below the full source code of the service. Just copy and paste this and save with a name price-service.js

Web Application built with Gulp

For the web application, nothing changes from the previous tutorial. Its light web application using AngularJS which provides a neat framework allowing the developer to write minimal amounts of code. A simple gulp file is used to help in the developer cycle, watching the source code for changes, and rebuilding the target files as necessary and then firing off a reload event to the browser.

Please refer to the previous tutorial for a more in depth explanation. The source code is included here for your convenience.

There’s one small difference between this file, and most configuration files that you’ll find for apache cordova, and that’s the inclusion of a JavaScript hook which will run the gulpfile which runs the browserify tool, before the build step for Cordova. This is for convenience, making it much easier to develop continuous iterations of the app.