City Weather Station with personal IoT Cloud (MEAN Stack)

Introduction

In this project, we are developing a Weather Station for our city. The environmental data is collected by the Mediatek Linkit One Board. We chose this board because it have GPRS as well as WiFi capability, So we don't have to rely on WiFi for connectivity. For saving the data & visualizing it, we gonna build a website. It will have a REST API, that will allow Linkit One to send data with simple GET requests. Backend of our website is built with Nodejs, Express & MySQL database. For the frontend, we'll be using AngularJS & Materialize CSS. Let's get started. (You can visit the actual website here https://amritsar.today)

Building the Website

Backend

The backend of our website is powered by Nodejs, Expressjs & MySQL database. The basic functionality of the backend is to accept data from the REST api, save the data in MySQL database & send back data to the frontend when requested. Every NodeJs app works on one main "XYZ.js" file. It contains all imports of dependencies, middleware declarations, routes & server initialization at mentioned port number (port 80).

The name of our file is "app.js", Its dependencies are - Express.js, mysql, body-parser, node-datetime & cors.

Start off by installing node.js, Creating a project directory and running the command

npm init -y

The command will create a package.json file which will contain the name of our project, Its dependencies & other info.

First open the project directory in your favorite IDE, I am using Visual Studio Code. Now Create the app.js file.

Here is the app.js code

const express = require('express');const app = express();const mysql = require('mysql');const bodyParser = require('body-parser');const cors = require('cors');const config = require('./config/database');//Creating connection to mySQL databaseconst con = mysql.createConnection({ host:config.host, user:config.user, password:config.password, database:config.database});//Connect to databasecon.connect((err)=>{ if(err){ console.log('error connecting to database');    } console.log('Connected to Database '+config.database);})app.use(cors());app.use(bodyParser.json());const data = require('./routes/data');const sensor = require('./routes/sensor');app.use('/data',data);app.use('/sensor',sensor);app.get('/',(req,res)=>{ res.send('API Amritsar.today');});var server = app.listen(80,()=>{ console.log('App running on http://localhost:80');})

To communicate with the database, we will create a separate "database.js" file with database connection information. Create a folder - "/config" and create database.js with following code (change the database credentials as per your db)

module.exports = { host:'localhost', user:'root', password:'', database:'amritsartoday' }

The routes of our API are declared separately in different folder called "/routes" So, go ahead and create a folder called "routes" in the root directory.

It contains two routes -

• /data - for frontend to request data
• /sensor - for the sensors to send data.

In the routes directory, create data.js file and add the code

const express = require('express');const router = express.Router();const datetime = require('node-datetime');const random = require('randomstring');const dataOps = require('../operations/dataops');router.get('/', (req, res, next) => { res.json({ success: false, msg: 'No key supplied'    })})router.get('/:subkey', (req, res, next) => { dataOps.getData(req.params.subkey, (error, data, success) => { if (error) { res.json({ success: false, msg: error            })        } if (!success) { res.json({ success: false, msg: 'key mismatch or error fetching data'            })        } if (success) { res.json({ success: true, msg: 'Data fetched successfully', data: data            })        }    })})router.get('/:subkey/latest', (req, res, next) => { dataOps.getLatest(req.params.subkey, (error, data, success) => { if (error) { res.json({ success: false, msg: error            })        } if (!success) { res.json({ success: false, msg: 'key mismatch or error fetching data'            })        } if (success) { res.json({ success: true, msg: 'Data fetched successfully', data: data            })        }    })})router.post('/', (req, res, next) => { res.send({ success: false, msg: 'No key supplied'    })})router.post('/:pubkey', (req, res, next) => { var dt = datetime.create(); var timestamp = dt.format('Y-m-d H:M:S'); var temp = ((req.body.temperature == null) ? 0 : req.body.temperature); var hum = ((req.body.humidity == null) ? 0 : req.body.humidity); var press = ((req.body.pressure == null) ? 0 : req.body.pressure); var lig = ((req.body.light == null) ? 0 : req.body.light); const sensData = { temperature: temp, humidity: hum, pressure: press, light: lig, lastupdate: timestamp    } if (req.body.temperature == null && req.body.humidity == null && req.body.pressure == null && req.body.light == null) { res.send({ success: false, msg: 'No data sent'        })    } else { dataOps.postData(req.params.pubkey, sensData, (error, success) => { if (error) { res.send({ success: false, msg: error                })            } if (success) { res.send({ success: true, msg: 'Data saved'                })            } if (!success) { res.send({ success: false, msg: 'key mismatch'                })            }        })    }})module.exports = router;

Now, Create a sensor.js file in the same directory and add the following code

const express = require('express');const router = express.Router();const datetime = require('node-datetime');const random = require('randomstring');const dataOps = require('../operations/dataops');router.get('/', (req, res, next) => { res.json({ success: false, msg: 'No key supplied'    })})router.get('/:pubkey/:temp/:hum/:press/:light', (req, res, next) => { var dt = datetime.create(); var timestamp = dt.format('Y-m-d H:M:S'); var temp = req.params.temp; var hum = req.params.hum; var press = req.params.press; var lig = req.params.light; const sensData = { temperature: temp, humidity: hum, pressure: press, light: lig, lastupdate: timestamp    } dataOps.postData(req.params.pubkey, sensData, (error, success) => { if (error) { res.send({ success: false, msg: error            })        } if (success) { res.send({ success: true, msg: 'Data saved'            })        } if (!success) { res.send({ success: false, msg: 'key mismatch'            })        }    })})router.post('/', (req, res, next) => { res.send({ success: false, msg: 'No key supplied'    })})router.post('/:pubkey', (req, res, next) => { var dt = datetime.create(); var timestamp = dt.format('Y-m-d H:M:S'); var temp = ((req.body.temperature == null) ? 0 : req.body.temperature); var hum = ((req.body.humidity == null) ? 0 : req.body.humidity); var press = ((req.body.pressure == null) ? 0 : req.body.pressure); var lig = ((req.body.light == null) ? 0 : req.body.light); const sensData = { temperature: temp, humidity: hum, pressure: press, light: lig, lastupdate: timestamp    } if (req.body.temperature == null && req.body.humidity == null && req.body.pressure == null && req.body.light == null) { res.send({ success: false, msg: 'No data sent'        })    } else { dataOps.postData(req.params.pubkey, sensData, (error, success) => { if (error) { res.send({ success: false, msg: error                })            } if (success) { res.send({ success: true, msg: 'Data saved'                })            } if (!success) { res.send({ success: false, msg: 'key mismatch'                })            }        })    }})module.exports = router;

To handle the database operations such as adding and fetching data, We need to create dataops.js file in "/operations" directory in root folder.

The file contains the following functions

• getData(key, callback) - It takes in a subscription key, matches with the database values and send back all the available data as callback
• getLatest(key, callback) - It takes in a subscription key, matches with the database and send back the latest sensor reading
• postData(key, data, callback) - It takes a publisher key, matches with the database values and save the data object in the database giving result as success - True or False in the callback

Here is the code for dataops.js file

const mysql = require('mysql');const config = require('../config/database');const con = mysql.createConnection({ host:config.host, user:config.user, password:config.password, database:config.database,});module.exports = { getData:function(subKey, callback){ con.query('SELECT * FROM auth WHERE subkey = ?',[subKey],(err,row)=>{ if(err){ return callback(err,null,false);            } if(row && row.length){ //Subkey matched, Send data con.query('SELECT * FROM data',(error,data)=>{ if(error){ return callback(error,null,false);                    } if(data && data.length){ return callback(null,data,true);                    } else{ return callback(null,null,true);                    }                })            }else{ //Subkey mismatch return callback(null,null,false);            }        })    }, getLatest:function(subKey, callback){ con.query('SELECT * FROM auth WHERE subkey = ?',[subKey],(err,row)=>{ if(err){ return callback(err,null,false);            } if(row && row.length){ //Subkey matched, Send data con.query('SELECT * FROM data',(error,data)=>{ if(error){ return callback(error,null,false);                    } if(data && data.length){ let len = data.length; let index = len - 1; let latest = data[index]; return callback(null,latest,true);                    } else{ return callback(null,null,true);                    }                })            }else{ //Subkey mismatch return callback(null,null,false);            }        })    }, postData:function(pubKey,data,callback){ const values = [            [data.temperature,data.humidity,data.pressure,data.light,data.lastupdate]        ] con.query('SELECT * FROM auth WHERE pubkey = ?',[pubKey],(err,row)=>{ if(err){ return callback(err,false);//callback(error,success)            } if(row && row.length){ //Subkey matched, Save data con.query('INSERT INTO data (temperature,humidity,pressure,light,lastupdate) VALUES ?',[values],(error,result)=>{ if(error){ return callback(error,false);                    } if(result.affectedRows == 1){ return callback(null,true);                    } else{ return callback(null,false);                    }                })            } else{ return callback(null,false,false);            }        })    }}

Now Open your phpmyadmin dashboard to create the required database and create auth and data table.

• auth table - It contains the publisher & subscriber keys. These keys are used by Node app to match with the keys received from the API and perform the required action.
• data table - It contains the data received from the sensors along with timestamp generated with node-datetime dependency

Create auth table with the query

CREATE TABLE `auth` ( `subkey` varchar(255) NOT NULL, `pubkey` varchar(255) NOT NULL) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Create data table with the query

CREATE TABLE `data` ( `id` int(255) NOT NULL, `temperature` int(255) NOT NULL DEFAULT '0', `humidity` int(255) NOT NULL DEFAULT '0', `pressure` int(255) NOT NULL DEFAULT '0', `light` int(255) NOT NULL DEFAULT '0', `lastupdate` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP) ENGINE=InnoDB DEFAULT CHARSET=latin1;

add a random string as subkey & pubkey to the auth table row.

Now your Backend is ready to roll!! Just run the app with the command

npm start

You can test the api from your browser by going the url

http://localhost:<port>/sensor/<publisher key>/<temperature>/<pressure>/<humidity>/<light>

You shall receive a response from the server

{"success":true, "msg":"data saved"}

Frontend

Now, it's time to create the frontend. It is developed using angular.js and materialize css to give it the material UI look.

Install angular.js & run the command to create the frontend

ng new frontend

This command will create our project frontend & add the required dependencies.

You can now go to this directory (cd frontend) and run the generated app with

ng serve --open

It will not only start a webserver to host the app but also keep looking the files for changes & update the view automatically if any changes occur.

Now open this folder in the IDE. An angular website is composed of components like navbar, main, sidebar, footer etc. Our angular app have three components - navbar component & main component & about component

Create the first component - navbar

ng generate component navbar

And the second component - main

ng generate component main

The third component - about

ng generate component about

Also create a service that will be responsible for getting data from the backend API. We'll call this service - Data

ng generate service data

Now, Its time to create routes for the navbar & import all the necessary dependencies & service (data service) in the main module - i.e. app.module.ts (It uses the typescript language) So, Go to - /src/app folder and open the app.module.ts file. Add the code below

app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { HttpModule } from '@angular/http';import { RouterModule, Routes } from '@angular/router';import { AppComponent } from './app.component';import { NavbarComponent } from './navbar/navbar.component';import { MainComponent } from './main/main.component';import { AboutComponent } from './about/about.component';import { DataService } from './data.service';const appRoutes:Routes = [  { path:'', component: MainComponent  },  { path:'about', component: AboutComponent  }]@NgModule({ declarations: [ AppComponent, NavbarComponent, MainComponent, AboutComponent  ], imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes)  ], providers: [DataService], bootstrap: [AppComponent]})export class AppModule { }

Now, Open the data.service.ts file, this file is responsible for making GET requests to the backend API and send the data to the main component for displaying on the webpage.

data.service.ts

import { Injectable } from '@angular/core';import {Http} from '@angular/http';import 'rxjs/add/operator/map';import 'rxjs/Rx';
@Injectable({ providedIn: 'root'})export class DataService { constructor(private http:Http) { } getData(){ return this.http.get('http://api.<yourwebsite>.com/data/<subcription key>')    .map(res => res.json());  } getLatestData(){ return this.http.get('http://api.<yourwebsite>.com/data/<subcription key>/latest')    .map(res => res.json());  }}

Now we can call this service in our main.component.ts file to fetch the data and store in the variables

main.component.ts

import { Component, OnInit } from '@angular/core';import { DataService } from '../data.service';@Component({ selector: 'app-main', templateUrl: './main.component.html', styleUrls: ['./main.component.css']})export class MainComponent implements OnInit { temperature:any; humidity:any; pressure:any; light:any; updatedon:any; interval:any; constructor(private dataService:DataService) { } ngOnInit() { this.getlatestData(); this.interval = setInterval(() => {  this.getlatestData();   }, 5000);  } getlatestData(){ this.dataService.getLatestData().subscribe(data=>{ if(data.success){ this.temperature = data.data.temperature; this.humidity = data.data.humidity; this.pressure = data.data.pressure; this.light = data.data.light; this.updatedon = data.data.lastupdate      } else{ this.temperature = 'No Data'; this.humidity = 'No Data'; this.pressure = 'No Data'; this.light = 'No Data';      }    })  }}

Now, its time to do the easy stuff - adding HTML. First we will add the HTML code to our app.component.html file. It will contain a navbar and dynamically changing body as you click a link from the navbar.

app.component.html

<app-navbar></app-navbar><div class="container"> <router-outlet></router-outlet></div>

Now add the HTML code for the navbar in navbar.component.html

navbar.component.html

<nav> <div class="nav-wrapper indigo"> <a href="#" class="brand-logo">Your City Today</a> <a href="#" class="sidenav-trigger" data-target="mobile-links"> <i class="material-icons">menu</i> </a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/']">Home</a></li> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/about']">About</a></li> </ul> </div></nav><ul class="sidenav" id="mobile-links"> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/']">Home</a></li> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/about']">About</a></li></ul>

We now need add the html code responsible for displaying the data received from main component.

main.component.html

<h3>Latest Readings</h3><div class="row"> <div class="col s12 m6 l6"> <div class="card"> <div class="card-content"> <h4>Temperature</h4> <h4 class="grey-text">{{ temperature }}&deg; C</h4> <p>Ambient Temperature</p> </div> </div> </div> <div class="col s12 m6 l6"> <div class="card"> <div class="card-content"> <h4>Humidity</h4> <h4 class="grey-text">{{ humidity }}%</h4> <p>Ambient Humidity</p> </div> </div> </div></div><div class="row"> <div class="col s12 m6 l6"> <div class="card"> <div class="card-content"> <h4>Pressure</h4> <h4 class="grey-text">{{ pressure }}hPa</h4> <p>Atmospheric Presssure</p> </div> </div> </div> <div class="col s12 m6 l6"> <div class="card"> <div class="card-content"> <h4>Light</h4> <h4 class="grey-text">{{ light }}%</h4> <p>Light Intensity</p> </div> </div> </div> </div>

Add the HTML for about page in about.component.html (optional)

<h3>About</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab tempora possimus, repellat odit quisquam vel reiciendis cumque doloremque libero sapiente distinctio natus a eum dolor, nisi magnam amet commodi soluta fuga iusto! Harum quas fugiat a ullam, illum ut quasi saepe at dolores est, sapiente delectus nam iure cumque odio!</p>

Now, Its time to build our project using the command

ng build --prod

This command will generate a "/dist" folder with compiled javascript code that can be uploaded to a webserver.

Publishing the website

We have two options here - Either buy a cloud server from any cloud provider(digitalocean, vultr, linode etc) or get shared hosting with NodeJs support. I am choosing the second option because it's cheaper and our project is not very resource intensive. I'll be using namecheap shared hosting. Here are the steps to publish the backend to namecheap.

• Add the domain <yourwebsite.com> to your hosting account via addon domain option
• Create a subdomain for the backend - "api.<yourwebsite>.com"
• upload the code of your backend to the api.<yourserbsite>.com subfolder in your file manager. You can either upload using FTP or in browser file upload.
• Now click the Setup Node.js app icon
• Click create application
• Select Node js version - 6.14.3
• Select application mode - development
• In the application root - add the complete address to your sourcecode subfolder.
• In application url - select the api.<yourwebsite>.com
• In application startup file - app.js
• Now, Click on Create.

Your backend API should be live at api.<yourwebsite>.com

Now you can upload the files generated by angular js in "/dist folder in the <yourwebsite>.com folder. Your IoT Website is ready with your own backend

Hardware Part

Now, Its time to build the hardware responsible for sending data to the website. We will need a Linkit One board, BME280 Pressure, Temp & humidity Sensor & a Light Dependent Resistor. Make the following connections

• Vin of BME280 to 3.3V
• GND of BME280 to GND
• SCK of BME280 to D13
• SDO of BME20 to D12
• SDI of BME280 to D11
• CS of BME280 to D10
• One end of 10K resistor to one end of LDR
• Other end of 10K resistor to GND
• Other end of LDR to 3.3V
• Junction of LDR & resistor to A0

Now insert a SIM card in Linkit One with a working (pre checked) GPRS plan, connect the uFL GSM antenna & upload the code below

#include <LGPRS.h>      //include the base GPRS library
#include <LGPRSClient.h>  //include the ability to Post and Get information using HTTP
#include <LGPRSUdp.h>
#include <stdint.h>
#include "SparkFunBME280.h"
#include "Wire.h"
#include "SPI.h"
#define website "api.<yourwebsite>.com"
#define APN "WWW"
#define APN_USER ""
#define APN_PASS ""
LGPRSClient c;
BME280 mySensor;
boolean disconnectedMsg = false;
void setup() {
 // put your setup code here, to run once:
  Serial.begin(115200);             // setup Serial port
  mySensor.settings.commInterface = SPI_MODE;
  mySensor.settings.chipSelectPin = 10;
 //Operation settings
  mySensor.settings.runMode = 3; //Normal mode
  mySensor.settings.tStandby = 0;
  mySensor.settings.filter = 0;
  mySensor.settings.tempOverSample = 1;
  mySensor.settings.pressOverSample = 1;
  mySensor.settings.humidOverSample = 1;
  Serial.print("Starting BME280... result of .begin(): 0x");
  delay(10);  //BME280 requires 2ms to start up.
  Serial.println(mySensor.begin(), HEX);
  makeConnection();
}
void loop() {
   sendData();
   delay(5000);
}
void sendData(){
 int temp = mySensor.readTempC();
 int hum = mySensor.readFloatHumidity;
 int pres = mySensor.readFloatPressure;
 int ligh = map(analogRead(A0),0,1023,0,100);
 String dataString = String(temp)+"/"+String(hum)+"/"+String(pres)+"/"+String(ligh);
 Serial.println("send HTTP GET request");
 c.println("GET /sensor/<publisherkey>/"+dataString+" HTTP/1.1");
 c.println("Host: " website);
 c.println("Connection: close");
 c.println();
 // waiting for server response
 Serial.println("waiting HTTP response:");
 while (!c.available())
 {
   delay(100);
 }
 if(c.available()){
 }
 Serial.println("Data Sent");
}
void makeConnection(){
 Serial.println("Attach to GPRS network");   // Attach to GPRS network - need to add timeout
 while (!LGPRS.attachGPRS(APN,APN_USER,APN_PASS)) {
   delay(500);
 }
 Serial.println("GPRS attached!");
 delay(10000);
  // keep retrying until connected to website
 Serial.println("Connecting to API");
 while (0 == c.connect(website, 80))
 {
   Serial.println("Re-Connecting to API");
   delay(1000);
 }
}

That's it! Your very own Weather station is ready.

We could've used the already available IoT Cloud services (like thingspeak, ubidots etc) But, then we wouldn't be able to understand the working of an IoT Cloud + You wouldn't have the freedom of your own cloud without any request limits.

Thanks for reading this tutorial. If you have any problems or issues kindly leave them in the comments below or leave me a message. I am also looking for job offers, if you have one kindly send me a message.