Build a Currency Converter with jQuery Mobile and Cordova: Introduction

This entry is part 1 of 6 in the series Build a Currency Converter with jQuery Mobile and Cordova

Build a Currency Converter with jQuery Mobile and Cordova

Earlier this year, I ran a series of articles on how to Build a Location-Based Mobile App With HTML5 and Javascript. If you enjoyed that series, you can follow this new series, which will teach you how to build a currency converter with some of the technologies that you may already have in your mobile development arsenal. Like the previous project, this will be a hybrid application built with HTML, CSS, and JavaScript with the support of several frameworks like jQuery, jQuery Mobile, and Cordova (also known as PhoneGap). In a very imaginative moment of inspiration, I gave this app the highly-creative title “Currency Converter.”

For those of you that don’t have a precise understanding of what a hybrid app is, it is built using web technologies, and then wrapped in a platform-specific shell that allows the it to be installed just like a native app. For an in-depth overview on this subject and the differences between native, hybrid, and web apps, take a look at Native, Hybrid or Web Apps?.

The goal of this series isn’t to copy the previous one with a different kind of app. While we will cover Web Storage and the Notification API, this series will feature two new Cordova APIs: the Globalization and the InAppBrowser API. The first has been introduced in the release 2.2.0, while the second was included in the last stable version (2.3.0). For more about the 2.2.0 version, read What’s New in PhoneGap 2.2?

In this first and introductory article, I’ll explain the app features, the technologies used, and its structure.

The App Requirements

As I said, this app is very small and easy to understand. We’re developing a currency converter that allows developers to update the conversions rates as needed based on the European Central Bank (ECB) currency RSS feed. One of the most important feature is that, once retrieved, the currency conversion rates are saved using the Web Storage API, so the user can use the application offline. Additionally, as soon as the user launches “Currency Converter,” the app will check for an Internet connection, and if one is unavailable, the app will search for previously-stored rates.

Being based on the ECB feed, I want to emphasize that it’ll support only the currencies provided by the feed and nothing else. To enhance the user experience, the app will save the last currency used for a conversion, so at the next start of the application, the user will find their last-used currency. In addition, the date and time of the last update will be stored too, so that the user knows how recent (or old) his conversion rates are.

By default, the text will be shown in English, but it will be developed to support others languages (which is obviously important when developing an international currency app). If the mobile device uses a language supported by “Currency Converter,” the app will be automatically translated as soon as the app initializes. Apart from English, the final repository will also support Italian, French, and Spanish. I’m sorry but I’m unable to translate into other languages. However, once I’ll publish the repository, you’ll be free to contribute additional translations using other languages.

The Technologies Involved

In the introduction, I described which technologies will be used to create the code, however the following list will give you a more detailed understanding of what we’ll be utilizing:

  • HTML5: Used to create the markup of the pages.
  • CSS: Most of the CSS enhancements will be done by jQuery Mobile, so I’ll use just few lines of custom CSS code.
  • JavaScript: This is the language used to write the business logic, so this is really a must-have skill to understand this series.
  • jQuery: It’ll be used mainly to select elements and attach event handlers.
  • jQuery Mobile: This framework is used to automatically enhance the application interface.
  • Cordova (PhoneGap): Cordova will be used to wrap the files, so you can compile them and install the result just like a native app.

Since version 1.3.0 of jQuery Mobile isn’t yet stable (at the time of writing, however, it’s in “release candidate” status), I’ll use the version 1.2.0. If you need a reminder of the differences between these versions, I described them at length in the articles What’s New in jQuery Mobile 1.2.0? and Build Lists and Popups in Minutes Using jQuery Mobile. The Cordova version used will be version 2.3.0 to use the following new APIs:

  • Globalization API: It provides an object to obtain information and perform operations specific to the user’s locale and timezone. For example, it provides the getPreferredLanguage() method to get the string identifier for the client’s current language and the numberToString() method that returns a number formatted as a string according to the client’s user preferences. More on this API in the Globalization official doc.
  • InAppBrowser API: It’s a web-browser that is shown in your app when you use the window.open call. You can find more information on this API by reading the InAppBrowser official doc.
  • Web Storage API: This provides access to the devices storage options. If you want an in-depth explanation, read An Overview of the Web Storage API.

Just like the previous series, “Currency Converter” will be developed with the assumption that the compilation will be done using the Adobe cloud service, called Adobe PhoneGap Build. It will be the service itself that includes the correct Cordova library for each platform at compiling time. To discover the reasoning behind using this technology, take a look at the discussion provided in the first part of the series. The link to the final, completed source code will be given in the final part of the series and hosted on BitBucket repository.

The Project’s Structure

To start the project, create a folder and rename it “currency-converter”. Now. create three sub-folders within this main folder: css, images, and js. Now download the jQuery (I’ll use version 1.8.3) and jQuery Mobile libraries. Put the jQuery and the JavaScript file of jQuery Mobile inside of the “js” folder, and then place the jQuery Mobile CSS file inside of the “css” folder. Finally, put the jQuery Mobile bundled images into the “images” folder.

In the root of the project folder I’ll create the HTML files, the Adobe PhoneGap Build configuration file, the default splash screen, and the application’s icon. Apart from the files we already put in place, we’ll write the following:

  • index.html: This is the entry point of “Currency Converter” and the only page that the user will interact with. Being the entry point, I’ll put links to the libraries used inside the <head> section of the index.html file. It will have the button to update the conversion rates, as well as the button to access the credits page.
  • aurelio.html: This is the credits page, so nothing special here.
  • style.css: The file containing the few custom lines of CSS used by the app.
  • jquery.mobile.config.js: It’ll contain the custom configuration of the jQuery Mobile framework.
  • currency.js: This file represents a currency object and will have the methods to retrieve, save, and load the currencies using the Web Storage API. In addition, it will have a compare method that will be used for sorting.
  • functions.js: This will contain the function to initialize the project, translate the index.html page, update the conversion rates, and some other utility functions that I’ll explain further in the next articles in the series.
  • settings.js: This file will be used to save and load the app settings mentioned before, including the last currencies used and the time of the last currency conversion rate update.
  • translation.js: This will contain the object having the strings to translate the index.html page.
  • config.xml: This XML file will have the metadata of the applications and will be used by the Adobe cloud service to store settings like the app version number and the package contents.

Apart from this list, “Currency Converter” will have some additional images stored within the “images” folder, as well as one of the plugins I developed called Audero Text Changer. It’s a very lightweight jQuery Mobile plugin that allows you to easily change the text of elements on your pages without breaking the enhancements made by the framework. So, as you might guess, I’ll use this plugin to translate the application into various spoken languages. If you need more information about this plugin, I wrote about it in Customize Your jQuery Mobile Interface with Specialized Plugins.

Conclusion

In this first part, I illustrated the features and the structure of “Currency Converter.” I also showed you the technologies that will be involved for its implementation. Now that you know what you need to follow the rest of the series, take the time to study the technologies, so that you’ll be ready for the next part of the series, where I’ll dive into the code and describe how to create the HTML pages.

Build a Currency Converter with jQuery Mobile and Cordova

Build a Currency Converter with jQuery Mobile and Cordova: Constructing The Interface >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Ken

    Can you tell me where to get the components for your currency converter for the mobile device. I would like to try and build the application.

    • http://www.audero.it/ Aurelio De Rosa

      Hi Ken. I’ll give the link to the application repository in the sixth and last part of the article.

  • Ken Lyle

    Aurelio, Very nice start. Thanks for doing this series.

  • http://www.rigorojas.com/erikarendon/ Erika Rendon

    Awesome. Cordova / phonegap is my framework of choice. Thank you for this post.

    • http://www.audero.it/ Aurelio De Rosa

      I’m glad that you like it.