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).
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.
- Globalization API: It provides
an object to obtain information and perform operations specific to the user’s locale and timezone.
For example, it provides thegetPreferredLanguage()method to get the string identifier for the client’s current language and thenumberToString()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
. You can find more information on this API by reading the InAppBrowser official doc.window.opencall - 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.
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.htmlpage, 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.htmlpage. - 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.
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.Frequently Asked Questions about Building a Currency Converter with jQuery Mobile and Cordova
How can I integrate a currency converter API into my application?
Integrating a currency converter API into your application involves a few steps. First, you need to choose a reliable API that provides accurate and up-to-date currency conversion rates. Once you’ve chosen an API, you’ll need to sign up for an API key, which is a unique identifier that allows you to access the API’s data. After obtaining the API key, you can use AJAX or Fetch API to make requests to the API from your application. The API will return the conversion rates in JSON format, which you can then parse and use in your application.
Can I build a currency converter without using jQuery Mobile and Cordova?
Yes, you can build a currency converter without using jQuery Mobile and Cordova. You can use pure JavaScript along with Fetch API to create a currency converter. Fetch API provides a powerful and flexible feature to fetch resources across the network. You can use it to make HTTP requests to your chosen currency converter API, and then use the response data to perform currency conversions.
How can I test my currency converter application on different mobile devices?
Cordova provides a feature to emulate your application on different mobile devices. You can use the Cordova emulate command to run your application in an emulator or simulator. This allows you to test how your application behaves and looks on different devices without needing the actual devices.
How can I handle errors when fetching data from the currency converter API?
When fetching data from the API, it’s important to handle potential errors that may occur, such as network errors or issues with the API itself. You can use the catch method provided by the Fetch API to catch any errors that occur during the fetch operation. In the catch block, you can provide code to handle the error, such as displaying an error message to the user.
How can I update the currency conversion rates in my application in real-time?
To update the currency conversion rates in real-time, you can set up a periodic fetch operation that retrieves the latest rates from the API at regular intervals. This can be done using JavaScript’s setInterval function, which allows you to execute a function repeatedly at specified time intervals.
How can I make my currency converter application work offline?
To make your application work offline, you can use a service worker. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. You can use it to cache the currency conversion rates and serve them from the cache when the user is offline.
How can I add more currencies to my currency converter application?
To add more currencies to your application, you need to modify the API request to include the additional currencies. The exact way to do this depends on the API you’re using. Some APIs allow you to specify the currencies you want in the request URL, while others require you to pass them as parameters in the request.
How can I improve the performance of my currency converter application?
There are several ways to improve the performance of your application. One way is to optimize the API requests. For example, instead of fetching all currency rates, you can fetch only the rates that the user needs. Another way is to use a service worker to cache the rates and serve them from the cache, reducing the need for network requests.
How can I make my currency converter application more user-friendly?
To make your application more user-friendly, you can add features like auto-completion for currency names, a search function for finding currencies, and a favorites list for quick access to commonly used currencies. You can also improve the UI by using responsive design techniques to ensure that your application looks good on all devices.
How can I monetize my currency converter application?
There are several ways to monetize your application. One way is to display ads in your application. You can sign up for an ad network like Google AdMob and integrate it into your application. Another way is to offer premium features through in-app purchases. For example, you could offer an ad-free version of your application or additional features for a fee.
Aurelio De RosaI'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.
