An introduction to the Web of Things(WoT) using TP Link Smart bulb
Connect your first ever TP link smart bulb to web and start developing Web of Things(WoT) !!
Hi Guys,
Today,
let’s come out of LEDs, resistors, breadboards, connecting wires, blahbalahblah
and just start playing with a real world smart thing….Wondered??
I have
chosen an LB 100 Smart Bulb from TP link for our development today and it
should work with most of the models of TP link smart bulbs. Let’s go and Connect our
first ever TP link bulb to web and start developing Web of Things (WoT).
In this blog, what you can learn ?
- What is Web of Things(WoT)?
- URL and WoT
- How Web protocols and HTTP methods works with this smart bulb
- A simple user interface to turn ON and OFF your light-bulb and control its brightness from Web URL
Recommended Reading:
It is recommended to read the led
control using web technologies for deeper understanding of HTTP methods and
other Web concepts
Assumption
Here I have assumed that you have
configured your TP link Bulb using the official KASA app following this
procedure How to connect tp-link Smart
Bulb to my home network via Kasa? And install node js in your
development platform either PC or Raspberry Pi.
Software Platforms:
Node JS(Server)
HTML/CSS
Web Browser (Client)
Required Node modules:
Body-parser
Express
tplink-lightbulb
Requirements
1. TP Link Smart Bulb( Any Model)
2. Raspberry Pi 3(recommended)
Github link
Directory Structure:
Package.json -
Contain all the node modules to be installed and project details
app.js - main file to execute where the server and routing configurations
can be found
routes/routes.js – contain the
URL routes and the corresponding HTTP methods
views/index.html – Welcome Page
views/control.html – TP link
control
What is Web of Things ?
Let’s learn some basics of WoT and get into a real time development,
the below figure can explain some basics for you to understand the ease of use
of WoT. We all know about Internet of Things and there are hundreds of
incompatible IoT protocols coexist today as you can see in the figure. This
makes the integration of data and services from various devices extremely
complex and costly too. In the Web of Things, any device can be accessed using
standard web protocols like HTTP, REST and so on easily and just ensure that
the device should have a web server running in it. Recent embedded web servers
with advanced features can be implemented with only 8 KB of memory for
developing a WoT system. Thanks to efficient cross-layer TCP/HTTP optimizations
and they can run on tiny embedded systems or even smart cards too. So,
Connecting heterogeneous devices (Multiple protocols) to the web make the
integration across systems and applications much simpler (Content referred from
“Building the Web of Things”).
And now it’s time to introduce
our smart bulb to the web world….!!
Since using Raspberry pi will be
more interesting than using a PC, I have used a raspberry here as my
development environment.
Step 1: Clone the github repository
into your raspberry pi and this is our working directory
sudo git clone https://github.com/apvenkat/wot-tplink-lightbulb
Step 2: Change the directory to
our wot-tplink-lightbulb
cd /wot-tplink-lightbulb
step3: Install all the required
node modules inside the working directory
npm install (or) sudo npm install
step4: Replace the IP address of the
Light Bulb with your bulb’s IP address in the router.js file inside folder router
( You can find the IP address of the bulb by logging into your home wifi and
look for DHCP list)
cd router/
sudo nano router.js
Step5: Save the file and come
back to the main directory and run the app
sudo node app.js
Now, Go to your browser and type
the URL http://192.X.X.X:8000
and you should be able to see the index.html page. Note you should type your raspberry pi's ip address here.
When you click the TP Link button
you will be taken to http://192.X.X.X:8000/bulb/
Just Click ON and OFF button and
see your TP link Bulb will toggle accordingly and you can see the URL changing
to http://192.X.X.X:8000/bulb/on
and http://192.X.X.X:8000/bulb/off
It’s very common to toggle a
Bulb, but it’s quiet fun if you can control its brightness from the URL itself. Go to URL http://192.X.X.X:8000/bulb/on/80
(you can key in any value between 0-100) and keep changing the values from
0-100 and reload the page you can see the brightness of your TP link changing according
to your request made. You can see the JSON response on your raspberry pi for
all your changes.
So, We have developed our First
WoT system with the TP-link Smart Bulb.
Now it’sTime to learn How changing
the URL makes a device to change it’s behavior…It’s very surprising rite…..We
should say thanks for the emerging web technologies (URL, HTTP, JavaScript and
its APIs)
URL and WoT:
In
simple URL means Uniform Resource Locator which is the address of a resource on
the Internet. In WoT, resources are all our things having embedded web server
in it as we mentioned before and it can be a smart bulb, smart plug, Smart lock,
smart thermostat and so on.Here In our example we are playing mainly with the
URLs, Here is the definition for the URL used in this development
Here The first part specifies the
protocol we use, here HTTP; then the domain is resolved by DNS to an IP address
and in our case we don’t have any domain name and so using our raspberry pi's ip address, then the port is used by TCP to
know what process to redirect to, and finally the RESTful resource is shown
which is our TP link bulb. In similar way you can also design your own URL
according to your application and need.
How Web protocols and HTTP methods works
with this smart bulb:
Now let’s learn how this URL is listening
to us and sending us response in back. It is mainly based on HTTP method, you
can specify according to you like GET, POST, PUT, DELETE. Let’s begin with this
http://192.X.X.X:8000
,when you enter this URL in your browser
you are making a GET request to the Server for a response, Here the server will
respond you with a welcome page (index.html) and when you click the button in
the welcome page it will take you to the page http://192.X.X.X:8000/bulb(control.html), for this to
happen we have mentioned in the app.js file to use route.js when /bulb is added
in the URL. Hence all the requests made under this URL is listed inside the
route.js file. Now the server will respond you with the control.html file for
your GET request which we have defined in our route.js file.
Making a GET
request in a browser is default and common because whenever you type an URL the
server will make a GET request all the time, then how to turn the bulb on and
off, for this we need to use POST request to send data to a server to
create/update a resource (Bulb). So here we have defined the POST request for
ON and OFF in our route.js file. It is important that, you have to add the
tplink node module inside this file as “const TPLSmartDevice = require('tplinklightbulb')” as we are using this
file to define all our control options. So to make a POST request from URL is
not possible, hence we need a html button click to make POST request for us.
You can see the control.html file having the method post and the Onclick
function defined inside and the route.js file has to be added inside the
control.html page to take effect.
Similarly, to
control the brightness I have made a GET request from the URL, this GET request is defined as /on/:value. In express “req.param.value”
is the main function to read the user values and pass to the TP link API. You can refer to the app.js and router.js below
Request
|
Response
|
GET
|
Index.html and control.html
|
POST
|
Bulb ON and Bulb OFF
|
GET
|
To control Brightness
|
Now, I believe you guys can design
your own Web Thing and control its characteristics !!!
If you tried this tutorial or
have done similar projects, Kindly comment below and let’s share our knowledge and keep reading my blogs for more interesting stuffs.
Comments
Post a Comment