Build a Location-Based Mobile App With HTML5 & Javascript: 6

In the previous article in this series, I described the last remaining utility function, as well as those that set up our application. In this final part of the series, you’ll see how to create the configuration file used to define project properties in Adobe PhoneGap Build. I’ll also share some thoughts on additional features that could further improve “Where I parked my car,” as well as any other application based on the Cordova (PhoneGap) framework.

Build Configuration

Every project developed has several metadata fields that the author can set: the version, the name, the author, the description, and so on. If you use the Adobe PhoneGap Build service, you have two possibilities to specify those properties: using the service web interface, or using a configuration file called config.xml. In this section I’ll show you an overview of the method that I like the most—the configuration file. Explaining the format in detail is outside the scope of this series, however I’ll give you an overview so you can understand the source of the file. In case you need more information, take a look at the official documentation page.

The config.xml follows the W3C widget specification and must stay inside the app’s root, at the same level of the index.html file. Since we’re talking about an XML file, the first line of config.xml is the XML declaration. The root of the whole document is a <widget> tag that has several interesting attributes. The most important ones are id (the unique identifier for your project), and version (which specifies the version of the application). Inside the <widget> tag, you can write a lot of elements, but in the configuration file of “Where I parked my car”, I’ll only use the following:

• name (required): Specify the name of the application. It doesn’t have to be unique.
• description (required): Specify the description of your work. This will be shown in the app’s marketplace listing.
• author (optional): The app’s author. It can have two optional properties: href, a URL to the developer or company homepage, and email, the email address of the developer or the company. Unfortunately, you can only specify one author, so you can’t have details for multiple authors here.
• icon (optional): The icon to display on the devices that will install your app. If you do not specify it, the Cordova logo will be used. It’s only required attribute is src which, as you might guess, is the path to the image.
• feature (optional): Specify the features you want to use. For example, Android, before installing any app, shows to the user the permissions it requires and if the user agrees, it goes on. In our application, this is where we’ll ask for permission to access the Internet connection and the geolocation features.
• preference (optional): Indicates a set of preferences you want to apply. It’s a closed tag and you can have zero or more <preference> tags inside the file. It has two attributes, both are required: name and value. There are a lot of preferences you can define, but the most important one in my opinion is the Cordova version to use.

Apart from the illustrated elements, there is one last tag that I want to explain: <gap:splash>. This tag sets the splash screen of your application—the image to show while it’s loading. It’s a closed tag and you can have one or more of these elements. Although the only required attribute is src, the URL to the image, you can set also the width (attribute width) and the height (attribute height). Using this tag, you could specify a different image for every platform and screen size, so it’ll render your splash screen perfectly in different situations. To learn more about this and the others elements, refer to the official documentation page.

Now that you’ve seen the key points of the format, you can understand the source of the configuration file of “Where I parked my car”.

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns     = "https://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.audero.free.utility.whereiparkedmycar"
        version   = "1.0.0">

   <name>Where I parked my car</name>

   <description>"Where I parked my car" is an application for mobile devices that lets you bookmark where you parked your car, and then find a route to return to it. This application is useful if you don't have a good memory or if you're in a foreign city. In addition, "Where I parked my car" will also save a log of your saved positions (up to 50), so that you can retrieve a location for future use. The list allows you to see the position on a map, and you can also to delete one or more old locations.</description>

   <author href="http://www.audero.it" email="aurelioderosa@gmail.com">Aurelio De Rosa</author>

   <icon src="icon.png" gap:role="default" />

   <feature name="http://api.phonegap.com/1.0/network"/>
   <feature name="http://api.phonegap.com/1.0/geolocation"/>

   <preference name="phonegap-version" value="2.0.0" />
   <preference name="target-device" value="universal" />

   <!-- Splash Screens -->
   <gap:splash src="splash.png" />
   <gap:splash src="images/splash-160x220.png" gap:platform="android" gap:density="ldpi" />
   <gap:splash src="images/splash-220x330.png" gap:platform="android" gap:density="mdpi" />
   <gap:splash src="images/splash-450x650.png" gap:platform="android" gap:density="hdpi" />
</widget>

Possible Improvements

If you’re reading this section, you’ve read all the features and the code of “Where I parked my car”. However, like every project, there is always room for improvement and new features. Some of the following proposals could be implemented right now, while others need the attention of the Cordova development team, who would need to implement some new APIs before you could go on. Please note that some of the requests can be already satisfied by some third party plugins, but many of them only work for a few mobile platforms—not all those supported by Cordova. It would be great to have them in the core of the Cordova framework instead of external plugins. With that said, let’s take a look at these features.

The first feature that you can add and work with right now is the internationalization (i18n) of the application. Since the project isn’t very complex, it should be quite easy. To achieve this goal, you can use the Globalization API, an API added to the core starting from version 2.2.0, and some specific jQuery libraries like jquery-i18n-properties and jQuery-i18n.

The second addition could involve finding closer parking based on the user’s current position and their position history. You could determine if the user has parked nearby in the past and recommend that they go to a past parking spot. You can also enable the user to search for closer parking within a certain distance using, for example, the jQuery Mobile slider widget.

Another easily added feature could be to let the user add a note and even an hourly rate on each parking position.

The last proposal I want to suggest (and probably the coolest one) is a way to automatically add an alarm on the device if the user parked his car in time-sensitive toll parking. So, thanks to the alarm, the user would be warned when their parking time is running out. Unfortunately, there isn’t currently a native Cordova API to do this, but you can use a plugin called LocalNotification available on Android and iOS.

The above suggestions are just some of the potential application’s enhancements but, of course, using your own skills and the web technologies, you could do a lot more. The possibilities are virtually endless.

Conclusion

Wow, it has been a long trip but you’ve finally finished the application. As you’ve seen throughout this series, using web technologies and popular frameworks, you can build useful and powerful apps. Now, for being a so patient and observant reader, here is your prize: the link to the application repository. You can download the full and ready-to-work package of “Where I parked my car” at my repository. Please note that “Where I parked my car” is released under the CC BY 3.0 (“Creative Commons Attribution 3.0”) license.