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

Web & App Developer
This entry is part 6 of 6 in the series Build a Location-Based Mobile App With HTML5 and Javascript

Build a Location-Based Mobile App With HTML5 and Javascript

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     = "http://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.

Build a Location-Based Mobile App With HTML5 and Javascript

<< Build a Location-Based Mobile App With HTML5 and Javascript: Part 5

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.

  • Ziad

    I haven’t read the articles yet but this is a great series Aurelio, definitely the best resource I’ve found on the web for a full fledged HTML/JS/CSS based mobile hybrid app. Thank you for your efforts.

    I downloaded the code and deployed on my local web server and then tried to ‘run’ the app on my android phone but it didn’t work (no maps, couldn’t save my position). Is it possible to run it as a web app or does it have to go through the compiling process and then installed as a native app?

    Thanks again.

    • Ziad

      BTW just wanted to add, I meant I haven’t read the whole series yet, just the first 3 parts, looking forward to complete the last 3.

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

      Hi Ziad. On a web server it can’t run because it needs the PhoneGap APIs to work, so you should compile the app before using it. For example as soon as the app starts, it verifies the connection using the Cordova API. So, using a web server it should give you an error and stop running because it cannot recognise the call to the API function as you can see debugging the app. You need at least an emulator like Ripple to run the app on your web server.

      I advice you to read the other parts to understand better how the app works. However I’m glad that you read the series.

  • Dave

    Just wanted to say a great series of articles. It’s unlikely I’ll be wanting to make any apps, but at least if I do, I now have an idea on how to do it using languages I’m familiar with.

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

      I’m glad that you found the article informative. Keep reading us.

  • Pritish

    hi i’m new to php and woorking my way up…iknow this series is helpful but i was bouncer for me..can you mail the project zip file to me

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

      You can download the whole project at my repository. You find the link in the final section of the article.

  • Mirko

    I tried to compile your code using the Adobe Phone Gap Build, but it asks me for the signing keys…it is not clear at all how to get them… Reading the Android guide, I understand it can be done from Eclipse and the Android SDK. That is fine if I have a native app to export, but in this case? And what about the other platforms? A link to some tutorial would be great ;)

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

      As always, the better thing you can do is read the official documentation and the PhoneGap one is very good. Here you can read all you have to know about the key and the page has also the link to the official Android documentation that explains how to create the key: http://build.phonegap.com/docs/android-signing. If you don’t understand one of those pages for any reasons, you can always search for some unofficial documentations or articles that will explain more or less the same thing in a different way.

  • stephen

    Thanks for publishing these articles.

    How can I debug the application?

    I develop on Windows 7 laptop, I have the application running on a tablet device (Acer running andriod) and on my HTC phone (also android). The app works well on the tablet but it doesn’t seem to get the location from google maps on the phone and the app hangs.

    Ideally I would like to debug on the laptop but I don’t know what tools to use. And suggestions?

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

      Hi Stephen. I don’t know what could be the problem. You’re the first reporting the app doesn’t seem to work. However, you can test the app using Ripple emulator on Google Chrome.

  • http://www.supint.com Matt Cassarino

    Wow, great tutorial Aurelio! I look forward to building my first mobile app using Cordova. It’s going to be for a photo manager for construction companies – http://www.jobsitepm.com. Gonna be slick!