---

Introduction

In this article we'll see how to make a simple geolocalizing Windows Phone App, and how to store the coordinates it acquires on a remote Web server, for further examinations. To make the Windows Phone app we'll use C#, while the Web side will be realized in PHP + MySQL, in order to make it usable on every system.

Prerequisites

To use the code presented in the article, you'll need:

• Windows 8.1
• Visual Studio with Windows Phone 8.1 SDK
• A local or hosted web server, with Apache with PHP support enabled, plus MySQL database (phpMyAdmin could be useful too). Alternatively, the web server part could be written in ASP/ASP.NET.

Configuring each one of the above prerequisites goes beyond the scope of the article, so i will not address this point, assuming that everything was previously successfully configured and running.
If you need a brief reference on how to install an Apache plus PHP/MySQL server, you could refer to my article Quickly installing LAMP server on Debian or Ubuntu Linux

Analyzing the scenario

Thinking about a demonstrative method to show geolocalization functions, we will remain as simple as possible: keep in mind there are many security aspects that we won't see here (but maybe in a next article), so what you'll read is intended to give a general insight, or a starting point to delevop further solutions. What we'll consider here starts from a simple concept: we have a device (in my case a smartphone) with GPS sensor and network capabilities, that must communicate data through Internet. On the other side, we'll have a program running on a web server, awaiting to be called upon to receive those data ad saving them. In the following, we will realize a C# app capable of acquiring the device geographical position (in terms of latitude/longitude), and sending those data to a specific URI. Server-side, we will realize a PHP script that will read the sent data as GET parameters, proceeding then in saving them in a MySQL table.

Database setup

First thing first, we must create a table apt to store the collected data. The following is the T-SQL script for table creation, that we could run in phpMyAdmin. I've created a new database, named "geolog", in which i'll create the table "entries". Here, we will store all the data our smartphone will send, i.e. the latitude/longitude, the device name (in case we want to track different devices, picking out each of them by name), and user annotations. The remaining fields (IdEntry and TimeStamp) will be automatically compiled by default constraints on columns: IdEntry is an auto-increment field, while TimeStamp will get its default value from the current timestamp occurring at INSERT operation.




Now, on our MySQL instance, we should see our empty table, and we are ready to jot down some PHP to achieve the server-side part: having a script which will receive data from the external world, writing them in our table, and a second script to query those data. Let's start from creating a PHP page, named index.php.

Storing data with PHP

Index.php must perform a very simple task: receiving a given GET request, it must read every GET parameter to execute then a T-SQL INSERT operation on "entries" table, in order to memorize the passed values. Again, please note that i haven't implemented any security practice (apart from the use of prepared statements, which corresponds to parametrized queries in ASP.NET): if you wish to use those pages in a real scenario, you'd better to secure them up first.

The code is minimal and pretty self-explanatory: first we'll open a connection towards our database, proceeding then in reading the GET parameters, and executing our INSERT, to finally close our connection. That's all what it takes for now.


What it means in practice, is that if we open a browser, calling a proper formed URL, we'll end up writing in our database. Let's see an example, assuming our webserver is running on localhost.





The /test subdirectory you see in the address bar is a virtual directory I've created on Apache to host the web application: it could be anything of your choice. Please refer to the Apache's online documentation for further information on VirtualHosts configuration.

Send geocoordinates to Web server

Now it's the time to write our Windows Phone 8.1 app. In the source code you can find the project labeled as «FollowMe». We will have two pages in it: one dedicated to the check-in part, while the second one will be used for the app's settings, such as the URI to query to store data. More on this later. Our app must do what we've done manually some lines above: calculate where the device is, and calling a proper formed URL (where our web application awaits).

Lets start with the settings page: it will contain a TextBox to specify the URI to be queried and a ComboBox to indicate the Culture to be used when sending coordinates. We could write it as the following:




Please note I've added a CommandBar to manage two AppBarButton, one to save our changes, and the second to cancel them (and simply close the page). 
The code-behind our page will be:


Very simply, all the Settings page logic revolver around the Click event of the two AppBarButton: the cancel button simply navigates back to MainPage, while the save button will write in the LocalSettings of our app (from the namespace Windows.Storage) the parameters we've specified for txtWebUri TextBox and cmbLang ComboBox, then it also navigates back to the MainPage.

The MainPage Page is the core of the app. It is constituted simply by a button, a TextBox for any notes the user may want to indicate, and two TextBlocks in which we'll expose geocoordinates (for debug purposes only, the TextBlocks are not really required). Lets see the XAML for MainPage:


An AppBarButton will allow us to access the Settings page. No other peculiarities are visible here. The only thing that will bring us to consider the code-behind is the presence of a Click event on the sole Button of the page. 


In clicking button1, a new instance of Geolocator is set. From it, we try to retrieve asynchronously the device position, to read our current longitude/latitude, writing then to our TextBlocks. With the lines from 25 to 36, we've have all it takes to geolocalize us, the rest of the code is about reaching our webserver. First, we access the Application's LocalSettings to read our URI and Language parameters, initializing a Culture with the value of the latter. This will serve us in determining how to pass our geocoordinates to the webserver (mainly about decimal separator, if comma or dot).

Then, using EasClientDeviceInformation class, we extract our device FriendlyName, or the name of our device (line 44).
Next, we pack up a web request using the HttpClient class, calling asynchronously a previously forget URI (line from 46 to 52), in which we've indicated our coordinates, device name, and any annotations as GET parameters, the way our PHP page expects them.

In case of any error that may occur, a MessageDialog will be emitted.

IMPORTANT: to make everything working, two fundamental things must be checked. The first one, is to have location services active on your device. The second one, is to enable location capability in the app itself. In your project, you must double-click on package.appxmanifest file, selecting the Capabilities tab. Then check Location in the Capabilities list. Without it, your app won't be able to geolocalize you.

That's it: as you saw, is a very simple app, with many improvements that could be made. However, the presented one will suffice for our means.

Examining collected data

As we saw, when our app makes a web request, a new record will be inserted in the remote database. Now it's time to query our database to examining data. The following code will realize a simple HTML page, containing a table with a row per record. It will show the time a record was inserted, the coordinates, the device name, user's annotations (if any). Last, each row will be terminated by an hyperlink to navigate to a page in which we can have a look on a map (together with a graphical mark on the check-in spot). We will name the following page as "geolist.php"
   

Omitting the styling part, what we've done here is to establish a connection to our MySQL database (namely, "geolog") to proceed in querying the "entries" table. For reach recordset, we will create a table row with its children: six cells which will expose the read data. Please note our final hyperlink targets a page named "map.php". That page is the one in which we'll render the map relative to the given coordinates. Let's see how his page looks like.


To avoid requerying our database, we will use the GET method to pass to our map.php page all the information it needs. The page make use of JavaScript, using some functions from the Google Places's API (developers reference here). The main function work this way: it creates a map from given latitude and longitude, assigning it to a DIV element for being drawn. Then, a Marker is created to add a graphical placeholder on that specific location. Simple as that. Since we need to use GET parameters as JavaScript variables, we'll use a little trick here: JavaScript is executed client-side, on the user's machine; PHP is executed server-side. So, if we add PHP instructions, they will be executed before the JS part, and when the page "arrives" on the user's device, it will be already modified by the remote PHP execution. This way, we can simply echo the GET variables as JavaScript parameters, and they will be written into the code that will be run on client-side, allowing to view the correct map.

Testing the whole package

Having finished coding, we can finally pack up everything and calling for an overall test. First things first, we'll open up our WP app on our device, configuring it towards the URI we'll set up. Next, we'll click on the «Check-in» button to start geolocalization and further web request. In that phase, our app will build the URI to be queried, proceeding in visiting it (and consequently firing up the remote INSERT procedure).

  



Now, we'll open a browser, visiting the geolist.php page, to examine inserted records. Our recent check-in will be shown, and we can click on its link to open the map.php page, which will show graphically our previously saved position.


   

Source Code

The source code used in the article can be downloaded at: https://code.msdn.microsoft.com/Geolocalize-a-device-and-dae0d265

Bibliography

• Application.LocalSettings
• Windows.Device.Geolocation namespace
• EasClientDeviceInformation class
• Device Capabilities

Other languages

The present article is localized in the following languages:

• [it-IT] Geolocalizzare un dispositivo e memorizzare coordinate su Webserver (it-IT)