Explaining the idea and first steps
Today, I had the idea to do a website which displays my current position. I searched in the App Store for an App and found one named SendLocation. This App provides an interface for sending GET requests to an server with some geometrical data. This is how the data gets send:
http://yourserver.com/yourscript.php?lat=***&lon=***&speed=***&heading=***&vacc=***&hacc=***&altitude=***&deviceid=**&battery=***&ts=***&quick=***&background=***
File Structure
./location.php
./data.json
./index.html
Writing the server side script
After setting the app up and achieving the connection, I wrote an php script to get the data and store it into an JSON file to use it for example on a website. I don't want to set up a database for this and want to have this in an accessible file, so storing it in a .json file was totally easy and fast.
<?php
if (file_exists('data.json')) {
$current_data = file_get_contents('data.json');
$array_data = json_decode($current_data, true);
$formdata = array(
'lat' => $_GET['lat'],
'lon' => $_GET['lon'],
'speed' => $_GET['speed'],
'heading' => $_GET['heading'],
);
$array_data[] = $formdata;
$final_data = json_encode($array_data);
if (file_put_contents('data.json', $final_data)) {
echo 'Data saved successfully';
}
} else {
echo 'JSON File not exits';
}
Access the data from the frontend
I am going on with parsing the .json file and get the data of the last entry which is my current likely position. After, with the lat and lon, I do a Google Maps API call and get my real name position and log it to the console (yet).
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>This is my location</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$.getJSON("data.json").then(function (json) {
// get latest position
var lastElement = json[json.length - 1];
// extract coordinates from position
var lat = lastElement.lat;
var lon = lastElement.lon;
console.log(lat);
// get name of coordinates
getAddress(lat, lon);
// get adress from google
function getAddress(latitude, longitude) {
var key = "api-key-goes-here";
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," +
longitude + "&key=" + key,
function (json) {
console.log(json);
console.log(json.results[9].formatted_address);
});
}
});
});
</script>
</body>
</html>
Screenshots of console output
My questions
- How can I hide the API key of the Google Map service to make it more secure?
- Which improvements can be made to make the
GETwriting the.jsonmore safe? I though about limit the writing to 3 a day or similar. - How can I hide the
data.jsonfrom Google or normal visitors of my page, that only my code can access the file, is this even possible? - What can I do to make the JS faster and maybe more secure?
- What else can be done?
Any feedback really appreciated.
