Control your appliances on internet using NodeJS + Angular4 + Arduino + Javascript
Hi, after reading this blog you can control your appliances through Internet.
In this post you will learn to control a LED over Internet.
Let’s Start..
First you need to go through site https://www.pubnub.com/ and Register on https://www.pubnub.com/. You need to Create an app and get the API keys ( Publish Key, Subscribe Key , Secret Key ) on https://www.pubnub.com/
You need:
A laptop ( Installed Nodejs, Angular CLI, NPM, Arduino IDE ), LED, Register, Arduino KIT, Wires from https://www.pubnub.com/
Step 1: Create a LED object using hardwares, See in image:
Remember,In the above circuit , your LED is connected with PIN 8 and GND.
Now connect to the laptop via USB arduino wire connector.
Open your arduino IDE, upload firemata library to your arduino kit. Click here to know how to upload firemata
Step 2: Create a client with HTML and Angular 4.
Create a client project, name client_control using below command:
ng new client_controlAfter completion of above process, You can see a project is created with name client_control.
Now inside this project directory create a file name server.js this is a client starter file. In this server.js paste the following code:
const express = require('express');
const path = require('path');
const cors = require('cors');
const http = require('http');
var config = require('config');
const app = express();app.use(cors());app.use(express.static(path.join(__dirname, 'dist')));app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
const port = 8080;
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Arduino client is running on port:${port}`));
Now open your app.component.html file ( src>app>app.component.html ) and copy below code and paste/replace it into app.component.html file.
<h1 class="heading">Secure yours</h1>
<section class="preference">
<h3>Control your appliances</h3>
<div>
<button onclick="toggle(1)">ON</button>
<button onclick="toggle(0)">OFF</button>
</div>
</section>Now open your index.html file ( src>index.html), replae its whole code with below written code:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Shubham's iOT</title>
<meta name="description" content="Controll your home appliances">
<meta name="author" content="Shubham Verma">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>ArduinoWithAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://cdn.pubnub.com/pubnub-3.7.15.min.js"></script>
<script>
var brightness = { led_status: 0, r: 0, g: 0 };
var channel = 'hue-clone';
var pubnub = PUBNUB.init({
publish_key: 'YOUR_PUBLISH_KEY',
subscribe_key: 'YOUR_SUBSCRIBE_KEY'
});function publishUpdate(data) {
console.log("data :", data);
pubnub.publish({
channel: channel,
message: data
});
}(function () {
pubnub.subscribe({
channel: channel,
message: resetSliders,
connect: initSliders
});function resetSliders(m) {
brightness.r = m.r;
}function initSliders() {
pubnub.history({
channel: channel,
count: 1,
callback: function (messages) {
messages[0].forEach(function (m) {
console.log(m);
resetSliders(m);
});
}
});
}
})();var toggle = function (value) {
console.log("STATUS : ", value);
brightness.led_status = value;
publishUpdate(brightness);
}
</script>
</head>
<body style="background:lightgray;">
<app-root>Loading...</app-root>
</body>
</html>
Now create another file with name package.json and copy below code and paste it into your package.json file:
{"name": "arduino-with-angular","version": "0.0.0","license": "MIT","scripts": {"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"},"private": true,"dependencies": {"@angular/common": "^4.0.0","@angular/compiler": "^4.0.0","@angular/core": "^4.0.0","@angular/forms": "^4.0.0","@angular/http": "^4.0.0","@angular/platform-browser": "^4.0.0","@angular/platform-browser-dynamic": "^4.0.0","@angular/router": "^4.0.0","config": "^1.30.0","core-js": "^2.4.1","cors": "^2.8.4","express": "^4.16.3","http": "0.0.0","path": "^0.12.7","rxjs": "^5.1.0","zone.js": "^0.8.4"},"devDependencies": {"@angular/cli": "1.0.0","@angular/compiler-cli": "^4.0.0","@types/jasmine": "2.5.38","@types/node": "~6.0.60","codelyzer": "~2.0.0","jasmine-core": "~2.5.2","jasmine-spec-reporter": "~3.2.0","karma": "~1.4.1","karma-chrome-launcher": "~2.0.0","karma-cli": "~1.0.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","karma-coverage-istanbul-reporter": "^0.2.0","protractor": "~5.1.0","ts-node": "~2.0.0","tslint": "~4.5.0","typescript": "~2.2.0"}}
Step 3: After above process, open terminal/CMD and navigate to your project location. run below command :
npm installThe npm install command will install all the dependencies required to your project.
Step 4 : Run the client using below command:
ng buildnode server.js
If your client is running successfully then you can see below message into your terminal/CMD:
arduino client is running on port:8080After this open your browser and hit below URL:
http://localhost:8080And you can see a web page with on off controls. ( you will on & off LED with these controls )
Step 5:Create a node server app:
This server will send the notification according to on of control to the arduino kit, and your arduino kit will according to value sent by client.
Create a directory for node server with name, arduino_server
Create a file name index.js and paste into below code:
var five = require('johnny-five');var board = five.Board();board.on('ready', function () {var pubnub = require('pubnub').init({publish_key: 'YOUR_PUBLISH_KEY',
subscribe_key: 'YOUR_SUBSCRIBE_KEY'});var channel = 'hue-clone'; // same channel name used in clientvar led8;pubnub.subscribe({channel: channel,callback: setLedColor,connect: initLedColor,error: function (err) { console.log(err); }});
function setLedColor(receivedObj) {console.log("receivedObj :", receivedObj);if (receivedObj.led_status === 1) {console.log("ON");led8.on();}if (receivedObj.led_status === 0) {console.log("OFF");led8.off();}}function initLedColor() {
led8 = new five.Led(8);
led8.off();
console.log("Arduino server is running now.");
console.log("Initilization, first call function");
}
});
Now create another file with name package.json and copy below code and paste it into your package.json file:
{"name": "arduino-led-rgb","version": "2.0.0","description": "Poor man's Hue","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "Tomomi Imura","license": "MIT","dependencies": {"johnny-five": "^0.9.62","pubnub": "^3.16.5"}}
Step 3: After above process, open terminal/CMD and navigate to your project location. run below command :
npm installThe npm install command will install all the dependencies required to your project.
Step 4 : Run the client using below command:
ng buildnode index.js
If your arduino server is running successfully then you can see below message into your terminal/CMD:
Arduino server is running now.After this open your browser and hit below URL:
http://localhost:8080And you can see a web page with on off controls. ( you will on & off LED with these controls ).
Congratulations…. Now you can trurn ON and turn OFF the LED using this control.
If you want to access this control on remote computer then just connect arduino client and arduino server under the same network ( wifi/Internet/Bluetooth ) and open following URL into any browser.
http://YOUR_IP:8080That’s it.
