<center>

# Project in Network Programming - 2020

</center>

<style>
table, tr, td {
background: none !important;
border: none !important;
color: #31708f;
font-size: 16px;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
}

tr, td {
padding: 0 5px 0 10px !important;
}

table {
margin: 5px 0 0 !important;
padding: 0 0 0 10px !important;
}
</style>

<div style="text-align: justify">
<center>
<p style="font-size: 30px; ">
<b> Traffic Prediction Application</b>
</p>
<p style="font-size: 18px">
<b>Professor: Alonistioti Nancy</b>
</p>
</center>

</div>


:::info
<p style="font-size: 20px"><b>Students</b></p>

<table>
<tr>
<td>Δημητράς Ελευθέριος</td>
<td><b>1115201600042</b></td>
</tr>
<tr>
<td>Λαμπρινός Νικόλαος</td>
<td><b>1115201600088</b></td>
</tr>
<tr>
<td>Λεπίδας Νικόλαος</td>
<td><b>1115201600090</b></td>
</tr>
<tr>
<td>Ξανθόπουλος Μιχαήλ</td>
<td><b>1115201600119</b></td>
</tr>
</table>

:::

<p style="font-size: 25px"><b>Contents</b></p>

[ToC]

# Introduction

<div style="text-align: justify">

The aim of this project is to develop a system for monitoring the movement of vehicles and forecasting their progress as well as the performance of the network throughout.

The vehicles will move on a section of the campus road and their movement will be simulated using the **SUMO** (*Simulation of Urban Mobility*) tool.

</div>

---

# Requirements / Installation

## Android App - Frontend (Windows 10)

* Install Android Studio following the instructions here https://developer.android.com/studio. We are currently using:

<center>


</center>

<br>

## EdgeServer - Backend (Ubuntu)
* __Java 8 (Oracle or OpenSDK)__
Installing Java 8: follow the instructions in the link below.
https://docs.datastax.com/en/jdk-install/doc/jdk-install/installOpenJdkDeb.html

* __Mosquitto Broker__
Mosquitto Broker is the «middle man» between the EdgeServer and the Android App. It forwards the messages from the former to the latter and the opposite. Since we use MQTT protocol for the communication we have to use Mosquitto Broker.

Install with:

sudo apt-get update
sudo apt-get install mosquitto

You can simple run the mosquitto broker at port 1234 with:

mosquitto -p 1234

* __Mosquitto Client__
Even if the Mosquitto Client is not needed in this project - since we will use the Android App and the EdgeServer as clients - it is a good idea to install it and use it for testing in the development process.

Install with:

sudo apt-get install mosquitto-clients

You can run Mosquitto client and send/receive messages from a specific topic like this:

mosquitto_sub -t "test" [-h 127.0.0.1] -p 1234
mosquitto_pub -m "message from mosquitto_pub client" -t "test" [-h 127.0.0.1] -p 1234

* __Database__
In order to create the database we have created an .sql script at:
__*TrafficPredictions/EdgeServer/src/Database/createDB.sql*__.

:::spoiler Code

CREATE DATABASE trafficDB;
USE trafficDB;

CREATE TABLE trafficData(

	timestep             FLOAT  NOT NULL,
	device_id            INT    NOT NULL,
	real_lat             DOUBLE NOT NULL,
	real_long            DOUBLE NOT NULL,
	predicted_lat        DOUBLE         ,
	predicted_long       DOUBLE         ,
	real_RSSI            DOUBLE NOT NULL,
	real_throughput      DOUBLE NOT NULL,
	predicted_RSSI       DOUBLE         ,
	predicted_throughput DOUBLE         ,

	primary key(timestep, device_id)
);

:::

<br>

You can run it with:

mysql -u username -p password database_name < /path/to/your/file.sql

---

# Running the application
The order you are going to run the three different programs matter so do as we advise you.

<p style="font-size: 18px"><b>Firstly</b> we run the <b>Mosquitto Broker</b>:</p>

mosquitto -p 1234

<br>

<p style="font-size: 18px"><b>Secondly</b> we run the <b>Android App</b> <i style="font-size: 15px">(without pressing start inside the app)</i>:</p>

You have to configure an Android Virtual Emulator (aka virtual device) and run it simple with the run button:

<center>


<img src="https://drive.google.com/uc?export=view&id=1MwXbTKyQIBxiM2TmtDHI2VPRi5x0Eyar" width="65%" style="border-radius: 40px 0 0 40px">

</center>

<br>

<p style="font-size: 18px"><b>Finally</b> we run the EdgeServer:</p>

Being inside the EdgeServer's folder we compile it and run it with the following commands:

javac -sourcepath src/ -cp .:lib/* -d classes/ Main.java
java -classpath classes/:lib/* Main 1234

<center>


</center>

<br>

Heatmaps window also opens:


At this point we type 'c' and enter in order for the EdgeServer to continue and connect with Mosquitto Broker.

Then we take the IP of the server as shown in the Mosquitto Broker and we put the IP and the Port we chose for the Broker in the Android App. After pressing start the simulation begins and we see in the app two maps, one showing the real positions and one showing the predicted positions. When the EdgeServer stops receiving data and the simulation stops we should press 'c' and enter in order to calculate the Mean RSSI Error and Mean Throughput Error.

</div>

# Improvements

<div style="text-align: justify">

Version 2 of the project comes with new functionality and some improvements. We have added a hamburger menu to navigate to three different views.

<center>

<table>
<tr>
<img src="https://drive.google.com/uc?export=view&id=1ZMRx6rc1fPkVeaPsVA-RRyrObAOwjVGu" width="45%" style="border-radius: 22px 22px 0 0">

<img src="https://drive.google.com/uc?export=view&id=1feEDp1xHSN3WGaONHcWxTOoXIlzeDRWA" width="45%" style="padding-left: 20px">

</tr>
</table>
</center>

</br>

<!--  -->

:::warning
The user cannot navigate to Map View without pressing START and initiating the process of sending and receiving data. After pressing START the application automatically redirects the user to Map View. When being in Map View the user can go to the other two views using the menu.
:::

More than that we have used google maps api in order to show the real positions and the predicted positions of each vehicle.

<center>

<img src="https://drive.google.com/uc?export=view&id=1Nbyo9Tn-ipFIRASDaR_f11vB_EUGwKtm" width="50%" style="border-radius: 40px 40px 25px 25px">

</center>

We also now use the database to save the appropriate data according to the requirements.

<center>


</center>

Finally, we calculate mean RSSI error and mean Throughput error for each vehicle and visualize it with graphs.

<center>


</center>

</div>

# Bonus

<div style="text-align: justify">

We decided to add some extra functionality in order to improve the project beyong the original requirements.
</div>

## Security - Authentication
<div style="text-align: justify">
In order to connect to Mosquitto Broker you have to use a username and a password. As IOT evolves security is a great concern and that's why we chose to use authentication even in this no production project.

MqttConnectOptions mqttOptions = new MqttConnectOptions();
mqttOptions.setUserName("admin");
mqttOptions.setPassword("password".toCharArray());
client.connect(mqttOptions);

:::info
If you want to see how to enable authentication in Mosquitto Broker visit: http://www.steves-internet-guide.com/mqtt-username-password-example/
:::
</div>

## TCP Tunneling
<div style="text-align: justify">
One hurdle that we had to overcome during our development process was the need to have both the Android app and the EdgeServer running on the same pc. We opted for TCP Tunneling using ngrok in order to be able to run the Android app in one pc being connected to EdgeServer in another pc. This also applies in real IOT applications where the server is on the cloud.</br></br>

So we created another view where instead of giving the IP and Port of the Mosquitto Broker we give the URL from ngrok.

<center>

<img src="https://drive.google.com/uc?export=view&id=1gZUBiA1xldX97PZaLIhGbgeeWfw8JO81" width="50%" style="border-radius: 40px 40px 25px 25px">

</center>

</br>

The URL is being generated from ngrok with the command:

./ngrok tcp port

An example URL is:

tcp://2.tcp.ngrok.io:11291

:::info
If you want to learn more about ngrok visit: https://ngrok.com/
:::

<div style="text-align: justify">
</div>

---