Storage Intergration TTN
The Storage Integration is a free sevice provided by TheThingsNetwork it allows you to save data from your node in a database. The data is stored for seven days. you can then use the API to retrieve this data.
In this example we are going to connect a node with a DHT11 sensor from the previos example the node will send the data from the DHT sensor to the Data Storage we are using PHP to retrieve the data so that we can display it on our webpage or mobile application.
We have 3 simple examples

  • Single sensor in HTML
  • Multiple sensor from 1 application.
  • And a simple HTML5 mobile framework example

View the example page here
Or download the code from Github

The examples are simple and plain and are just to let you see how you can use this integration.
You can edit,and change  the script to your own needs for now
we are going to use the DHT sensor as example.

Screen shot of the single sensor example

To get started we must have a working node with sensor. Go to the application overview in THeThingNetwork dashboard go to Integrations and add the Data Storage integration.

 

If everything goes well you will see this screen.

If you click on go to platform you will be redirected to the data storage page.

THe data of your node will be stored here to acces your data click on the Authorize button at the top.
And add your TheThingsNetwork Acces Key found in the Application Overview at the bottom.

If we click on the QUERY GET button we can see all the data from your application.
The data is printed in a JSON format.
[
{
device_id“: “string”,
raw“: “string”,
time“: “string”,
field1“: “string”,
field2“: “string”
}
]

The first 3 field are sended by default the other fields are defined in the Payload Format in TTN dahsboard of your application.

For our example  we added 2 fields Temperature and Humidity.

function Decoder(bytes, port) {
var temp = (bytes[0] <<8) | bytes[1];
var humi = (bytes[2] <<8) | bytes[3];
return {

Temperature: temp / 100.0, 
Humidity: humi /100
};
}

 

If we click again onm the QUERY GET button we can see the custom fields are added to the Json file.

Now  we got our data stored in the database and we want to display it or our website.
We are going to use PHP to fetch the data.

payload.php::

<?php
//Connecting to the Data Storage
$jsonurl = "https://diyconnetwork.data.thethingsnetwork.org/api/v2/query?last=7d"; //Link to json file.
$key = array('Accept: application/json', 'Authorization: key ttn-account-v2.GUXFhdizL2eKA2jhftyvoxeHjaaISdfGYiA-qHyo98780'); //Authorization key from TheThingsNetwork

//Make a list of  your devices in your application
$deviceID = array('dhtsensor01', 'dhtsensor02', 'dhtsensor03');

//Fetch Payload data
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $jsonurl);
curl_setopt($ch, CURLOPT_HTTPHEADER, $key);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result=curl_exec($ch);
curl_close($ch);
$array = json_decode($result, true);

//Sort json by time
function sortArray($t1, $t2){
if ($t1['time'] == $t2['time']) return 0;
return ($t1['time'] > $t2['time']) ? -1 : 1;}
usort($array, "sortArray");

//Make for each device id a new array
foreach($array as $obj) {
if (in_array($obj['device_id'], $deviceID)) {
//change the time format.
$originalTime = strstr($obj['time'], '.', true);
$newFormat = date("Y-m-d H:i:s", strtotime($originalTime));
//start creating data for each device
$data[$obj['device_id']][] = array(
"Device_id"=> $obj['device_id'], //Default value from TheThingsNetwork.
"Raw_Data" => $obj['raw'], //Default value from TheThingsNetwork.
"Time" => $newFormat, //Default value from TheThingsNetwork.
"Temperature" => $obj['Temperature'], //Custom field from Payload functions TheThingsNetwork
"Humidity" => $obj['Humidity'] //Custom field from Payload functions TheThingsNetwork
);
}
}
//Sort the new array by key name
ksort($data);
?>

//Connecting to the Data Storage
In the first section we define the link and acces code.
https://diyconnetwork.data.thethingsnetwork.org/api/v2/query?last=7d
The link begins with  the application name in our case diyconnetwork followed by .data.thethingsnetwork.org/api/v2/ at the end we see query?last=7d this means we are fetching the data from the last 7 days you can change this in days (d) ,  hours (h) , seconds (s).

Second we see the acces code you can find this at the bottom of the Application Overview.
$key = array('Accept: application/json', 'Authorization: key ttn-account-v2.GUXFhdizL2eKA2jM6d5oxeHjaaISdfG12YiA-kloig765e'); //Authorization key from TheThingsNetwork

//Make a array of  your devices in your application
make a array from the  the devices you want to use from your application use the Device-ID from the Device-Overview
$deviceID = array(‘dhtsensor01’, ‘dhtsensor02’, ‘dhtsensor03’);

//Fetch Payload data
In this section the PHP server is going to connect to the Data Storage server and fetches the data and decodes it to a Json format.

//Sort json by time
Sort the Json file by Time so we see the new data always on top.

//Make for each device id a new array
In this section we are going to sort the json file by device

//Sort the new array by key name
At laast sort the device names.

By using the string $data we can display the data from our new created JSON file
By using the line:

<?php
echo "<pre>";
print_r($data);
echo "</pre>";
?>

We can also display only data from 1 device by adding the device name in the string

$data[YOUR-DEVICE-ID]

$data[YOUR-DEVICE-ID][0][FIELD]

To display the latest data  from our device: on a html page we need to include the payload.php
Add this line at the top of the page
<?php
include './payload.php';
?>
To display the latest data you can use this line of code.
Temperature: <?php echo $data['dhtsensor01'][0]['Temperature']; ?>&deg;<br />
Humidity: <?php echo $data['dhtsensor01'][0]['Humidity']; ?>&#37;<br />
Update: <?php echo $data['dhtsensor01'][0]['Time']; ?>

 

For the HTML you we used Bootstrap https://getbootstrap.com/ 

For the chart we used Chart.js https://www.chartjs.org/
In the HTML at the top you can set the number of latest datapoints to plot in the chart
// Settings for Chart.js
// $t is the numbers of the lteste datapoints
// Change $t to get more datapoint in the chart
$t= 10;
You can do more with chart.js we used only a simple example please visit https://www.chartjs.org/ for more options.

For the mobile page we used Ratchet http://goratchet.com/
Ratchet is a simple JS framework where you can easaly create pages for mobile devices.
If you visit the page on your device you add the page to your home screen if you open it again from the home screen it wil open like a app

You are free to edit the script and HTML pages