The Internet of Things (IoT) is changing the way we live, from wearable tech to smart home devices. IoT may sound complex, but in actuality it’s a fairly simple concept to understand. Everyday objects are constantly being transformed into smart devices using sensors and actuators.

In this article, we will build a realtime Arduino ambient light monitor which sends its sensor readings to a web application. We will cover the basics of connecting an Arduino board to the web, sending data as realtime notifications to a web app using Pusher.

This article will act as an introduction to what can be achieved with Arduino and Pusher. It is for those curious about the hardware industry and want to delve into the fun IoT world.

Requirements for building our Arduino and Pusher integration

In this article, I used:
– An Arduino board. MKR1000 board.
–The Arduino IDE.
– Photocell (availablehere).
– 10k Ohm resistor (availablehere).
– Breadboard and Jumper Wires.
– A Pusher application –Create one here.
– Composer (available for download athttps://getcomposer.org).
– Knowledge of PHP.

💡A breadboard is a board for temporarily prototyping hardware projects. it has nodes that conduct current throughout it.

💡The jumper wires are used for ensuring continuity between various points on the breadboard that aren’t connected by default.

Getting Started with Arduino

In this section, will set up the Arduino IDE and add internet connectivity to our board. We will find out about choosing the right boards and adding internet connectivity to it.

Many of the boards don’t come with internet connectivity, which is something needed to make IoT devices. To add internet connectivity to our board, we have a variety of options to choose from: a shield, micro-chip or an Arduino board with built-in wireless capabilities.

💡 A shield is basically an extension board that can be placed(mounted) on top of the Arduino board.

There are many types of shields:

    1. Ethernet Shield.

Ethernet shield (https://www.digikey.com/en/articles/techzone/2012/jan/networking-options-for-arduino-based-systems)

    2. WiFi Shield.

WiFi shield (https://store.arduino.cc/usa/arduino-wifi-shield)

    3. 3G or LTE Shields.

Arduino GSM Shield (https://store.arduino.cc/usa/arduino-gsm-shield)

We are going to use theArduino MKR1000 which comes with an in-built WiFi Chip. This board is available at theArduino Store.

Arduino MKR1000 WIFI (https://store.arduino.cc/usa/arduino-mkr1000)

Next, download the Arduino IDE fromhere and install it on your computer.

Once the installation is finished, go ahead to install theBoard Definition by launching the IDE then go toTools > Boards > Board Manager where we search for and install the definitions for the MKR1000.

Board Manager

Once theBoard Definition is completely installed, go toTools | Boards and select the newly installed board definition.

To connect our Arduino Board to the internet, we have to install a library calledwifi101. In order to install the library, go toSketch>Include Library>Manage Libraries, then search for and installwifi101.

Install WiFi101 library

We can test that it works by going toFiles > Examples > WiFi > ConnectWithWpa. This should generate some code in our sketch. Next, edit thessid andpass to our router’s SSID and Password:

charssid[]="yourNetwork";//  your network SSID (name)charpass[]="secretPassword";// your network passwordintstatus=WL_IDLE_STATUS;// the Wifi radio's status

Building the Light Monitor in Arduino

In this section, we are going to see how to set up the circuit and measure data coming from the sensors on the MKR1000 board. In addition to the Arduino MKR1000 and the usual breadboard and jumper wires, we are going to need a few extra components.

• Photocell (https://www.sparkfun.com/products/9088).
• 10k Ohm resistor (https://www.sparkfun.com/products/8374).

The photocell is a sensor that allows us detect light. They are often regarded as Light-Dependent Resistors (LDR), Photoresistors or CdS cells.

💡A Photocell is basically a resistor that changes its resistive value (in ohms) depending on how much light is shining onto the squiggly face.

Assembling the components
First, place the resistor in series with the photocell on the breadboard, next to the Arduino board.

Now, connect the other end of the resistor to GND on the Arduino board, and the other end
of the photocell to the VCC pin of the Arduino board. Finally, connect the middle pin between
the resistor and the photocell to analog pin A0 of the Arduino board. The final result should look like this:

The final result (Internet of things with Arduino Cookbook)

Once this is done, we can go ahead and configure the board to read data coming from the photocell. We will take the readings from analog pin A0 and print them on the serial port for now. The sketch for this part is really easy and should look like this:

We will copy and paste this sketch into our Arduino IDE, then upload it to the board.

Make sure the right board and serial ports are selected.

// PinsintsensorPin=A0;voidsetup(){// SerialSerial.begin(115200);}voidloop(){// ReadingintsensorValue=analogRead(sensorPin);// DisplaySerial.print("Sensor reading: ");Serial.println(sensorValue);// Waitdelay(500);}

💡You can save the Arduino sketch files to your machine, so you can reference them later. They can be namedwhatever you likeas long as they are uploaded to the Arduino board.

After this is run, we open the serial monitor and immediately observe the readings from the sensor:

If we put our hands over the sensor, we will see a decrease in the values measured by it. Now let’s focus on creating the web application.

Setting up the web application

In this section, we are going to create a basic web application that collects the data as aGET request and displays it to the users subscribed to that channel in realtime. For realtime display we’ll be usingPusher.

💡 Pusher is a simple hosted API for quickly, easily and securely integrating realtime bi-directional functionality via WebSockets to web and mobile apps, or any other Internet-connected device.

The first step will be to create a free pusher account, if you haven’t got one, then create your application on thedashboard.

Creating a Pusher application
Create a Pusher account and go to Your apps > Create new app. Fill in your application name, select a cluster, choose JavaScript and PHP, then we are good to go.

The application set up screen should look something like this:

Once done, you will be provided with your App keys.

Setting up our project
We’ll create a folder calledarduino-light-monitor in ourlocalhost root directory.

Then, open our terminal and typecomposer require pusher/pusher-php-server, this will generate a couple of files in our directory.

Create a file callednotification.html, then we add the HTML and JavaScript below:

<html><head><title>Notifications From Light monitor</title><scriptsrc="https://js.pusher.com/4.1/pusher.min.js"></script><script>//Enable Pusher Logging - don't include this in productionPusher.logToConsole=true;//Create a new instance of pusher with your credentialsvarpusher=newPusher('APP_KEY',{cluster:'PUSHER_CLUSTER',//if you chose a different cluster replace it hereencrypted:true});//subscribe to a channel you will listen onvarchannel=pusher.subscribe('light-monitor-channel');//What happens when light-readings-sent is firedchannel.bind('light-readings-sent',function(data){//gets the ul in the domvarul=document.querySelector('ul');//creates a livarli=document.createElement('li');//Attaches the data received to the text nodevaritemText=document.createTextNode(data.value);//Append the data to the lili.appendChild(itemText);//Append the li to the ulul.appendChild(li);});</script></head><body><ul></ul></body></html>

What happens here is we subscribe to a channel calledlight-monitor-channel then wait until we receive an event calledlight-readings-sent. Whenever the event is triggered we append the data received to our list.

We will also create another file calledindex.php. This is the file that will send the events to the notifications channel. We will add the PHP code below to the file:

<?phprequire__DIR__.'/vendor/autoload.php';$options=array('cluster'=>'PUSHER_APP_CLUSTER','encrypted'=>true);$pusher=newPusher\Pusher('PUSHER_APP_KEY',// replace with yours'PUSHER_APP_SECRET',//replace with yours'PUSHER_APP_ID',//replace with yours$options);//checks if there is any data sentif(isset($_GET['value'])){$data['value']=$_GET['value'];//triggers the event on the channel$pusher->trigger('light-monitor-channel','light-readings-sent',$data);}else{echo"Nothing to do";}?>

💡 If you need somewhere to host your content, you can go to000webhost.com and create a free subdomain where you can upload the contents of your arduino-light folder.

We will test it out by openingnotification.html andindex.php in 2 different browsers. When we reloadindex.php, we should get a new list item added with a value of “Empty request”. If we tryindex.php?value=123, we should getvalue 123 added to our notifications list in realtime.

Isn’t that just awesome?

Sending the sensor readings to the web app

Finally, we will look at how to send the data from the Arduino board to the server.

Continuing from the sketch we had before, we just replace this by taking note of the important parts:

// PinsintsensorPin=A0;charssid[]="wifi_name";//your wifi namecharpass[]="wifi_pass";// your wifi passwordintstatus=WL_IDLE_STATUS;charserver[]="yourexampleserver.com";//replace with your localhost or domain// Create an instance of WiFiClientWiFiClientclient;// We define the interval on which we want to send the dataunsignedlonglastConnectionTime=0;constunsignedlongpostingInterval=60L*1000L;//this implies 60,000L the L represents the long datatypevoidsetup(){// SerialSerial.begin(115200);// Attempt to connect to Wifi network:while(status!=WL_CONNECTED){Serial.print("Attempting to connect to WPA SSID: ");Serial.println(ssid);// Connect to WPA/WPA2 network:status=WiFi.begin(ssid,pass);// Wait 10 seconds for connection:delay(10000);}// you're connected nowSerial.print("You're connected to the network");}voidloop(){if(millis()-lastConnectionTime>postingInterval){//Measure the light levelintsensorValue=analogRead(sensorPin);//Send the value to the serversendHTTPRequest(sensorValue);}}voidsendHTTPRequest(intsensorValue){// Close existing connectionclient.stop();// Connect & send requestif(client.connect(server,80)){Serial.println("connecting...");// Send the HTTP GET request:client.println("GET /light/?value="+String(sensorValue)+" HTTP/1.1");client.println("Host: yourexampleserver.com");client.println("User-Agent: ArduinoWiFi/1.1");client.println("Connection: close");client.println();// Note the time that the connection was made:lastConnectionTime=millis();}else{// if you couldn't make a connection:Serial.println("connection failed");}}

In the code above, we create a connection to the specified WiFissid using an instance ofWiFiClient. We will use this connection to interact with our remote server.

In thesetup() function we deal with the initialization of theSerial and connection to the WiFi network specified by thessid andpass variables above.

In theloop() function we check if we are in the posting interval then, if we are, we take the reading and make a call to thesendHTTPRequest function defined below it.

In thesendHTTPRequest() function, we accept a parameter calledsensorValue. Because Arduino runs the code in a loop, the first thing to do is to stop any previous opening of the client connection with the statementclient.stop(). This will stop connections from being created and not discarded after they have been used.

Next, we try to connect to the server defined in the variableserver[]. We check if the connection could be established, and if not we print to the Serial “connection failed”. Once the client is connected we send the sensor pin value through the URL to our web application.

If we test this out now we will have the light sensor reading every minute.

Conclusion

We have successfully built a light monitor using Arduino and Pusher. If you enjoyed this tutorial and will like to go from zero to hero in the IoT world, you should check out the book“Internet of Things with Arduino Cookbook” by Marco Schwartz. It contains over 60 recipes which will help you build smart IoT solutions and will surprise you with captivating IoT projects you thought only existed in James Bond movies.

If you have any questions or other ideas on integrating IoT with Pusher please leave a comment below!

This post first appeared on thePusher blog.