A hybrid app is
built using web technologies, and then wrapped in a platform-specific shell that allows it to be installed just like a native app. If you want an overview of the differences between native, hybrid, and web apps, I’ll advice you to read Native, Hybrid or Web Apps?.
Uncovering the Features
The aim of “Where I parked my car” is to let you bookmark where you parked your car on a map using the GPS function of your smartphone, and then—after you have finished your walk—find a route to return to it. This kind of 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. Since scrolling a list of 50 items can be really annoying, the app will have a search filter so you can easily achieve the task. The list allows you to see the position on a map, and you can also to delete one or more old locations. Finally, I’ll also create a small credits page within the app.
To fully understand what’s going to be developed, you must have at least a basic knowledge of the following languages and frameworks:
- HTML: It will be used to create the markup of the pages. Where appropriate, I’ll use some new HTML5 tags.
- CSS: Since most of the CSS enhancements will be done by jQuery Mobile, it isn’t really needed extensively. However, I’ll use few rules to correct or adjust some styles as you’ll see later.
- jQuery: I’ll use jQuery mainly to select elements and attach event handlers, so there’s nothing special here.
- jQuery Mobile: It’ll be used to automatically enhance the application interface. I’ll use the page loading widget, the listview for the positions’ log, and I’ll put some buttons inside the header and the footer of the pages to build a toolbar.
- Cordova (PhoneGap): As said before, Cordova will be used to wrap the files so you can compile them as if you built a native app. Of course, I’ll take advantage of some of the APIs offered by the framework, such as notifications, geolocation, and connection
The version of jQuery Mobile used will be 1.2.0, so if you need a refresher on what’s new in this version, you can read 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 the 2.0.0. I choose this rather than the newer versions, because in my tests it has performance better in conjunction with jQuery Mobile.
Apart from the above list, I’ll use also these APIs:
- Geolocation API: It provides location information for the device in the form of latitude and longitude. Since many operating systems already support it, Cordova will use the native interface rather than its own implementation. However, for the platforms that don’t have this API, Cordova uses its implementation that adheres to the W3C specification. If you need an introduction to this API, you can read Using the HTML5 Geolocation API.
- Google Maps API: The Google Maps API lets you integrate the Google Maps service with your website. The service is completely free, but you should subscribe to the APIs console website to obtain your own API key, and use it when you send a request to the service. Since this API will still work without the key, I’ll use it without a unique API key.
- Web Storage API: This provides access to the devices storage options. If you need a starting point, you can take a look at An Overview of the Web Storage API.
The Project’s Structure
The structure of the project will be quite straightforward. In fact, I’ll create the HTML files, the Adobe PhoneGap Build configuration file, the standard splashscreen, and the app’s icon in the root of the project. Then, I’ll divide the other files into three categories (actually folders): CSS, images, and JS. To develop “Where I parked my car”, in addition to the jQuery, jQuery Mobile, and Cordova files, I’ll create the following documents:
- index.html: This is the entry point and will include all the libraries’ files used throughout the application. It’ll also have the buttons to set and get the current position and to view the positions’ log.
- map.html: This is where you’ll see the map that will show you your position, your car position, and the route to reach it.
- positions.html: This page will show the positions’ log as a list.
- aurelio.html: This is the credits page. Nothing very interesting here.
- style.css: As I said before, I’ll write few style changes that deviate from the jQuery Mobile standard style.
- jquery.mobile.config.js: It’ll contain a configuration for jQuery Mobile
- functions.js: This file will contain the function to initialize the application and some other utility functions.
- maps.js: This file will have the functions that use the Google Maps API to draw the map and the route to the car.
- positions.js: This file will save and load the previous positions using the Local Storage API.
- config.xml: This XML file will contain 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.
At this point, you might argue that since we’re building a small app, I could use a single file that has all the pages combined. You’re absolutely right, but I prefer to keep things separated for organization.
Setting Up the Project
---css | ---jquery.mobile-1.2.0.min.css | ---style.css ---images | ---ajax-loader.gif | ---icons-18-black.png | ---icons-18-white.png | ---icons-36-black.png | ---icons-36-white.png ---js | ---cordova-2.0.0.js | ---jquery-1.8.3.min.js | ---jquery.mobile-1.2.0.min.js
As said before, a reference to the Google Maps API is required. Including the file that you need is very simple and consists of just adding the following line to your HTML.
Please note that this line contains a
sensor parameter. It must be included in the URL and set to
true if you’re using a sensor (like a GPS), or
false otherwise. Since we’re using the Maps API to create a mobile app, we’ll set it to
In this first and introductory article, I showed the features of “Where I parked my car” and outlined an overview of the technologies that will be used for its implementation. I have structured the files that comprise the application in an organized fashion so that we can move straight toward developing. Finally, I explained how to set up the project. In the next article I’ll dive into the code and show you how to create the HTML pages.
How to Simulate Mobile Devices with Device Mode in Chrome
By Craig Buckler,
Does your web app work in all devices? Testing is a huge job. Learn how to enable Chrome's useful device mode to emulate dozens of mobile devices.
How to Test Responsive Web Design Cross-Browser Compatibility
By Craig Buckler,
Craig introduces CSS options for setting up a responsive website, including media queries, Flexbox and Grid, and covers tools for testing cross-browser compatibility.
How to Create a QR Code Reader for Your Mobile Website
By Dmitri Lau, Beardscript,