Posted on 3 Comments

Writing A Real Time Location Service – Views and Front End Logic

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Views

Thanks to the scaffolding done in the initial project setup, our login and registration views are already created, we just need to modify the home page and add a new page for device registration. Le’t create the activation view first, copy the home.blade.php file and name it activation.blade.php. This view will only have one form for taking in an activation code from an Android device replace the current contents with the following:


@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Activate Device</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/activate') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Code</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="code" value="{{ old('code') }}" required autofocus>
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('activate') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Activate
</button>
</div>
</div>
</form>.
</div>
</div>
</div>
</div>
</div>
@endsection

Don’t worry that the route hasn’t been created yet, we will get to that in a bit. In the mean time open up the home.blade.php file, this file is where the majority of the seen action is going to happen.  In this view the user will see a list of their devices with options to either start tracking GPS, stop tracking GPS, or delete the device. There is a Google map that will be used to show the position of the device and it will be updated in real time.


@extends('layouts.app')
@section('content')
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<table class="table">
<tbody>
@foreach(auth()->user()->devices as $device)
<tr>
<td>{{$device->uuid}}</td>
<td>
<button data-id="{{$device->id}}" class="btn btn-sm btn-default action-start-gps" id="start-gps"><i class="fa fa-map-marker" aria-hidden="true"></i></button>
<button data-id="{{$device->id}}" class="btn btn-sm btn-warning action-stop-gps" id="stop-gps"><i class="fa fa-map-marker" aria-hidden="true"></i></button>
<form method="post" action="/device/{{$device->id}}">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button data-id="{{$device->id}}" type="submit" class="btn btn-sm btn-danger" id="delete"><i class="fa fa-close" aria-hidden="true"></i></button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Map</div>
<div class="panel-body">
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
<script>
var startGps = document.getElementsByClassName("action-start-gps");
var stopGps = document.getElementsByClassName("action-stop-gps");
for (var i = 0; i < startGps.length; i++) {
startGps[i].addEventListener('click', function(){
$.get("http://gps.app/command/start-gps/" + $(this).data('id'), function(data, status){
}, false);
});
}
for (var i = 0; i < stopGps.length; i++) {
stopGps[i].addEventListener('click', function(){
$.get("http://gps.app/command/stop-gps/" + $(this).data('id'), function(data, status){
}, false);
});
}
function initMap(lat,long) {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 20,
center: uluru,
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var socket = io.connect('http://gps.app:6001');
socket.on('gps', function (data) {
var center = {lat:Number(data.data.gps.lat),lng:Number(data.data.gps.long)};
@foreach(auth()->user()->devices as $device)
socket.on({{$device->id}}, function(data){
console.log(data);
});
@endforeach
marker.setPosition(center);
// using global variable:
map.panTo(center);
})
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCDNt1biVyfA8h-eCZyZ69CKS6NNBCeEQ&callback=initMap">
</script>
@endsection

Home screen
Your screen should look like this

This is where the majority of the magic happens in the home view there are two divs. In the first div all of the associate devices will be shown in a tabular format with options to start GPS tracking, stop GPS tracking, and deleting the associated device. In the second div there is a Google map that will be used to visualize our devices (in order to use Google map services you must register for a key). The javascript code calls the routes needed to start and stop GPS tracking, as well as the Socket.IO code needed to update the Google map in real time ( for those who don’t know Socket.IO please refer here). Let’s take a closer look at the Socket.IO code and understand what is going on. When new data comes through the websocket channel, the marker’s latitude and longitude are updated and the map is recentered all without a page reload. With this bagged up the next step is to set up the routes and controller logic!

Posted on Leave a comment

Writing A Real Time Location Service – Models and Migrations

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Overview

In this programming series I am going to show you how to create a real time Laravel app that shows the location of an android device on a Google map in real time. This design can easily be applied to iOS and I will cover it at a later date. This project will be constructed of three parts:

  • Laravel app that handles registration/login, saves coordinates and timestamps
  • Node Application that talks to Laravel application and android devices
  • Android application that talks to node application

In this post I will create the Laravel + Node apps and I will write the Android app at a later post. The Laravel app is a run down version of my new application SocketDroid, an application that allows you to control android devices from a web panel. click a button and alert the Android device to send geolocation information back to the server and push it to the browser. The application will store the geolocation information in a database for later analysis if you so choose (in a later post I will expand upon the admin panel). The Laravel app will communicate with the Node app via Redis using the built-in Event system. From there the Node app will communicate with our devices via Socket.io. The Android device will listen on a websocket connection in a background service and listen for an event to start grabbing and posting GPS data, and another event to stop listening. Make sense so far? Good, let’s get started!
 

Scaffolding The Laravel Application

If you have followed any of my Laravel tutorials in the past, you know the drill, create a new application, and scaffold the authentication routes and views:


laravel new real-time-gps
cd real-time-gps
php artisan make:auth

Now we have a basic Laravel application with registration and login logic established. Let’s talk about database design for a moment shall we? This application is going to have 3 really important tables they are:

  • Users (Already made for us be default)
  • Devices
  • Locations
  • ActivationCodes

A user can have many devices, a device can have many locations and belongs to one user, and a location belong to one device, that is the basic relationship structure. Activation codes are for you guessed it activating devices to use the app. Go ahead and create the relations and models for devices and locations using the following commands:


php artisan make:model -m Device
php artisan make:model -m Location
php artisan make:model -m ActivationCode

Device Model

Open up the devices migration file and add the following content to the up() function:


Schema::create('devices', function (Blueprint $table) {
$table->increments('id');
$table->string('uuid');
$table->integer('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
$table->timestamps();
});

The only things we need to know about devices are who they belong to and what channel they are listening on. We also want to make sure that when a user account is deleted from the database, that all of their devices are also removed from the database.  Now open up the Device model (app/Device.php), there are three things we need to do with this model, the first is tell it which parameters to accept when inserting into the database. The second thing is to tell the model about its relation to the User model, while the third is to tell the model about it’s relation to the Location model. The finished version should look like this:


<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Device extends Model
{
//
protected $guarded = [];
public function user(){
return $this->belongsTo('App\User');
}
public function locations(){
return $this->hasMany('App\Location');
}
}

The Device model and migration is now complete, now on to the Location model and migration.

Location Model

Open up the location migration file and in its up() function we are going to add the following:


Schema::create('locations', function (Blueprint $table) {
$table->increments('id');
$table->string('lat');
$table->string('long');
$table->integer('device_id')->unsigned();
$table->foreign('device_id')->references('id')->on('devices')->onDelete('cascade');
$table->timestamps();
});

Hopefully by now you understand what is going on, we are saving the lat/long acquired from the device, as well as its id. Using this information we can associate geolocations with independent devices. Next we will open up the Location(app/Location.php) model, tell it which properties to fill, and it’s relation to the Device model.


<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Location extends Model
{
//
public $guarded = [];
public function device(){
return $this->belongsTo('App\Device');
}
}

User Model

The only thing we need to do the user model is make it aware of it’s new device relation open up the User(app/User.php) model and add the following function:


public function devices(){
return $this->hasMany('App\Device');
}

ActivationCode Model

The activation code model is responsible for storing the activation code given from the Android device on app installation to register the device with your account. It will take in the UUID of the device and the activation code, open up the migration file and add the following:


public function up()
{
Schema::create('activation_codes', function (Blueprint $table) {
$table->increments('id');
$table->string('uuid');
$table->string('code');
$table->timestamps();
});
}

Now open up the ActivationCode(app/ActivationCode.php) model and add the following:


<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class AuthCode extends Model
{
//
public $guarded = [];
}

That’s all that’s needed you can now run your migrations!


php artisan migrate

In the next lesson we will be creating the views and front end logic needed to visualize the devices on a Google map!