Mobile - Web development

Introduction

About 20 years ago, mobile phones were devices used by business men, sales representatives and Chief Executive Officers; Owning a mobile phone and paying outstanding bills was expensive.  In those days, having a mobile phone was an excessive luxury that not everyone could afford. On the other hand, these devices were huge, and to carry the device was a burden.

Things change, and nowadays mobile phones are everywhere. Not only because bills are cheaper, I think the introduction of Multimedia and cool applications made mobile phones popular.

Internet is everything, news, friends on Facebook, emails and study materials. These goodies were only accessible from a personal computer a few years ago. Today everything is in the palm of our hands. Mobile phone can connect to the Internet, can view emails, has built in GPS and much much more. And yes you can still make phone calls.

In this week’s blog, I will design a mobile web page that can display your exact location using GeoLocations.

About GeoLocation

The GeoLocation API functions are used in web applications to find the geographic location of an object. In simple terms, using this API, a web application can request and find the exact position in terms of Longitude and Latitude of a client accessing the application.

Such technology, is used in a myriad of travelling  web sites; web pages can display nearby restaurants and interesting places to visit. On the other hand, organisations are using this technology to keep track of mobile phones, other devices and travelling employees.

In the old days, when you visit a foreign country for the first time you had to carry a map; surprise, maps are not updated. Today, the only tool that you need is a mobile phone. Locations are updated 24/7, suggested routes are one click of a button and if you’re lost you can always make a phone call and give your exact location to the recipient.

At first glance, this technology sounded complex but when I searched a bit on the Internet I found out that the Geolocations API has a lot of build in functions that can be easily implemented.

The environment

Before going into much detail on how to do this task, I downloaded the Opera Mini emulator.This emulator enables you to test mobile web pages on your personal computer. The emulator is easy to use and the pre-defined list of mobile brands enables you to test your web page on specific mobile devices.

You can choose one of the pre-defined brands and if your mobile is not in the list you can build a custom mobile. Although the emulator uses the host computer Internet connection you can still launch web pages located on your host. This enables you to test web pages that are not yet published on the Internet.

Interface

The web application is divided in the following sections:

• A section that displays the user location
• A link that opens the respective Google map
• A section that displays stored locations

Using HTML markup I added some <div> and <span> tags and designed the following interface:

When the web page is launched, using a JavaScript timer, the user location will update every second. The Start and Stop buttons are used to start and stop the timer respectively. To store the current location, users must click the Record button, and once clicked, the location is added in the Recorded locations section.

Scripting

To check compatibility, I used the following JavaScript If statement:

If the GeoLocation is not installed or not supported, this syntax displays the following error message:

The navigator functions, enables you to construct a position object containing the user exact location. The following function, creates a new instance of the navigator object:

The navigator will call the following functions:

• userLocated - This function is called when a location is obtained
• locationError- This function is called when an error occurs

The userLocated function is used to get and display the user current position. In lines 28 to 20, the latitude, longitude and the time stamp are stored in three global variables.
Using the document.getElementById() and the innerHTML() functions, in lines 33 to 35 the values are displayed in the respective <span> tags.
In lines 38 and 39, the google map hyperlink is constructed using the latitude and the longitude retrieved.
When a location is updated, users can click the Record button to add their current location to the Recorded locations list. The following function is used:

When this function is called, the increment variable is incremented by one; this is used to display the location number. Using paragraph tags, the latitude, longitude, time stamp and google map link are added to the respective <div> tag.
I created a timer that will call the readLocation() function every one second as follows:

To start and stop the timer, I added the following <Input> buttons with the following syntax:

Implementation

Once my project was complete, I tested the web page using the opera mini emulator and some mobiles (Android and Windows). The following screenshots shows the result.
1- Load web page in Opera-mini emulator.

2- Load Google map from the provided link. 

 3- Record client location.

4- Load page using Google Chrome. 

5- View Google map from Google Chrome. 

6- Launch web page from iPhone online emulators. 

Conclusion

To test this application from mobile devices I registered with a free web hosting service and my web page can be accessed from http://omarz.comlu.com/projects/gpsloc/gpsloc.html.
Developing mobile web pages and mobile applications is an interesting and challenging task. I think one of the major difficulties is compatibility; various brands, various browsers. Developers can download emulators to test their mobile web pages.
While I was searching for emulators, I found the Android SDK. This SDK includes all the required libraries and an emulator to develop and test Android applications; I’m very tempted to try some stuff.
Happy coding...