This post is on Home Automation project where we control 2 devices from a mobile App. over Local Area Network.

NodeMCU with Arduino core installed is used with relay board.

You can watch this video on how to install Arduino core on NodeMCU.


Android Mobile Application is developed using MIT APP INVENTOR , a WEB Application IDE.


For Arduino code we will use the one from my previous post


Download code for web browser LED On/Off HERE

This code is to control an LED from a Web browser on LAN.

We shall modify the code to work for Home Automation.

Arduino Code , Android App. (both .aia , .apk) files can be downloaded HERE

To start with connect a Red LED at D2 (which will be replaced with a DC Fan load)

A green LED at D4  ( will be replaced with CFL lamp AC Load)




#include <ESP8266WiFi.h>
#define FAN D2
#define LIGHT D4
const char* ssid = “Saravana”;
const char* password = “######”;

WiFiServer server(80);

void setup() {
pinMode(FAN, OUTPUT);

Serial.print(“Connecting to “);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
Serial.println(“WiFi connected”);
Serial.println(“Server started”);

void loop() {
WiFiClient client = server.available();
if (!client) {

Serial.println(“new client”);
String req = client.readStringUntil(‘\r’);

if (req.indexOf(“/fanon”) != -1)

Serial.println(“FAN ON”);
else if(req.indexOf(“/fanoff”) != -1)
Serial.println(“FAN OFF”);

if (req.indexOf(“/lighton”) != -1)
Serial.println(“LIGHT ON”);
else if(req.indexOf(“/lightoff”) != -1)
Serial.println(“LIGHT OFF”);
String web = “HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n”;



upload the above code and open the serial monitor to note the IP address allotted to NodeMCU.

Note that all devices NODEMCU ,PC & mobile are connected to same Router.

The IP address allotted is DYNAMIC ,meaning , it may change on next power up.

To make it STATIC , you can set Address Reservation setting under Routers settings.


Once the IP is allotted , open up the WEB browser and type in IP/fanon

for e.g

Initially both the LEDs will be ON .As we will use a LOW enabled input Relay board, these LEDs are made ON indicating the devices are OFF initially.

On sending the string fanon from browser , the RED LED will go OFF.

On sending , the Green LED will go off.

Similarly  fanoff string will make Red LED ON , lightoff string will make Green LED ON.


Now the code is working perfectly, we shall replace the LEDs with actual devices to be controlled.

A 4 channel 5 volt Relay module is used to connect the actual devices .We use a DC FAN 5v at relay contact 1 and a CFL bulb AC at RELAY 4



For power source a MB102 PSU board is used on MB102 Bread board.This board can be easily plugged on to MB102 Breadboard and has jumpers.One jumper (top)  is set to  5v and the bottom jumper set to 3.3v.

An external adapter of 9v 1amp is used .


Connect IN1 of relay board to D2 of NODEMCU

IN4 to D4,  GND to GND.


While connecting Load to relay board, always connect the power to load at POLE.

Actual Load is connected to NO Normally Open pin of relay contact.

While handling AC loads, take precaution to insulate relay board within a plastic box and do not touch the relay board.

It is safer to connect Neutral to POLE and AC Phase to other end of Load.


Also remove the jumper on relay board.

Connect 3.3v to Vcc and 5v to JD-Vcc

This enables error free operation , as the NODEMCU is a 3.3v device.



Now let us develop our Android Mobile Application using on line MIT APP INVENTOR.


Image 3

Click on Start a New project and provide a Project name. Space and Hyphen not alloed in name , but underscore allowed.


Image 5

You will be presented with development screen which has 4 columns.

1st Column is Palette with all User Interfaces and components to build the App.

2nd Column is the actual Screen viewer.

3rd Column displays all the selected Components.

4th Column shows the Properties of the selected Components.

Image 6


Image 7

Set the Height under properties to 10 percent , Width TO FILL PARENT

This is to provide space at top of screen.

Image 8

Then drag and drop LABEL from User Interface

Image 9

Set Width TO FILL PARENT , Text to Heading of App. , alignment center ,Fontsize to 25

and background color to yellow.

Image 10

Next drag and drop  TABLE ARRANGEMENT from LAYOUT.

Image 11

Set properties , COLUMNS to 3 and ROWS to 2,  Width to FILL PARENT, Height to Automatic.

2 Rows required for 2 device control.

3 columns  for image , on button and off button.


Image 12

Drag and drop an IMAGE component from User Interface.

Image 13

Under Properties set the Height to 15 percent, Width to 30 percent.

Under Picture property click Upload File and select the image to upload.

Image 14


Image 15

Now drag and drop 2 buttons next to image 1.

Image 16

Drag and drop another IMAGE component, below the first imge.

Set properties accordingly and upload the second image.

Drag and drop 2 more buttons as shown below.


Image 18

Select the properties of Buttons

You need to change the Text and the background COLOR.

Image 19

Next drag and drop a WEB component from CONNECTIVITY.

As this one is a Non Visible component , it will show up at the bottom of the screen.

Image 22

Now click on the BLOCKS button at the right top corner.

Image 23

Select Button1 from the left side Blocks.

You will see a list of options.

Select the When..Do ..Button..Click block.

Image 24

Next click on WEB .

Select the set..web1..url..to block

Image 25

Third block to select is under TEXT

Select an empty Text block for text.

Image 26

Finally from WEB

select  call..web..get   block.

Image 27

Following are the blocks we selected.

Image 28

Assemble the blocks as shown.Just drag and fix at the connecting points.

Image 29

Click on Text block and type in

Your IP may be different.Change the IP according to the one shown at serial monitor of

Arduino, after uploading code.

Image 30

The first block is ready.

Right click and select DUPLICATE.


Image 31

Change the Text for other blocks as shown.

Image 32

Now click on BUILD App TO SAVE .apk file to computer.

You can transfer this .apk file to mobile using SHAREIT or any application.

Image 34

Also you can export the .aia file.

.apk file is for Android mobile.

.aia file is the one you can import on your MIT APP and do the necessary modifications

and then finally generate your own .apk file.

Also you can install MIT AI2 Companion on mobile to view Real Time development.

By this application you can view the real time changes on mobile , as you develop

appplication on MIT APP Inventor.

Image 36

Now open the Application on mobile.

Touch on the buttons to see the project working.