Control multiple NodeMCU with App-inventor application.

In this tutorial we are going to learn integration of Wi-Fi enabled devices with custom designed android application. 

Thanks to "App inventor" developed by MIT. 

This online application will enable us to make custom DIY app without having in-depth knowledge of complex coding. This application supports only android environment and not IOS. IOS operator would not be able to take an advantage of this tutorial.

Basic feature,

1) Control multiple WIFI device/Plug with single application thru IP address.

2) Development of Android application and customization as needed.

3) In current setup we have ESP-8266 as wifi receiver and control LED. LED could be replaced with relay module to control any high voltage device.

4) Memory storage in APP to save previous device IP address.

Basics you need to know,

1) ESP8266 integration with Arduino IDE.

2) Android mobile phone with QR code scanner for ease file transfer.

(QR code scanner will save time during app transfer, from App inventor server to mobile phone)

Rest of the things we will discuss here.

To start with App inventor by MIT,

It works online, so no need to download any software or application in your computer.

Website: http://appinventor.mit.edu/explore/

Some basic tutorial video :  http://appinventor.mit.edu/explore/ai2/beginner-videos.html

Above link will guide you to cover page

As below, click “Create Apps” on right side of page.

Click on "start new project"

Project name is "Wifi8266"

In above screen, Left side you will see all features/control panel which you may need in mobile application design, Center you see mobile phone scree, right side it shows overall tree of the application and properties of selected component.

You can simply pick and place left side component in center of mobile screen(virtual). It might be complicated to arrange all component in screen on a go, so i would suggest to make basic layout on paper before starting application part. It will clear your clutter and gives good hierarchy in first stage itself. 

Note: Do not forget to start with layout boxes, it will build all components in a structure. In final application it will not be visible. Attached image for your reference. left side image shows all layout boxes around button but right side image you will see only internal part of it.

We will start with basic layout setup and then can add more feature as required. 

To make above app interface,

1) Add vertical component in a screen to make a device and ON/OFF feature in single box.

2) Add horizontal arrangement in bottom section of box to divide it further in two compartments. These two boxes we will use for ON and OFF button location.

3) In a top section there are hidden boxes like, Add IP address (IPadd), OK button below device 1 (setip) name, it will open only at time of pressing device 1 button. (Please refer right side tree for more details)

4) Add web interface feature, It will enable a application to ping specific IP address. 

(This is hidden component works on back ground)

5) Add storage feature to store data when application is off.

 

After finishing front-end interface, let’s work on internal connect part of it. It will be done with help of application blocks which need to put to-gather to execute specific task. 

For block window, Presse “block“ button on right for block window

video tutorial,

In block window, left side you will see all click specific feature. Select any button name (IPadd / OK / setip etc) and application will open related feature list. You can adding multiple blocks inside loop block to execute multiple task at a time. 

1) Add screen initialization feature, in this task you shall specify functions you want to execute at time of starting app. In current app I want to change visibility of some buttons and get access of previous data which user has added. (I’m keeping memory of last IP address, So until user change the IP address app will keep last data in memory.)

2) Take IP address as input from the user (during first time execution of app)

Note : App will only work, if both (Mobile and ESP8266) device are connected under same network.

3) Configure OK button to get IP address input for further processing.

Till now, your app is ready for basic connection and getting IP address from user in application.

4) Configure ON/OFF button to send specific request on web during the execution.

 
Video tutorial for single switch,

All to-gather for two switch.

Once user adds IP address and store inside app both ON and OFF function sends specific phrase with provided IP address, On the ESP side it will compare that phrase and execute predefined task.

Export application to mobile phone,

Ready to install Android Application

In our case,

http:// 120.120.130.1 / LED= ON: to change LED status to ON

http:// 120.120.130.1 / LED= OFF: to change LED status to OFF.

Also, each ESP8266 module will have their unique IP address, so it will never cross talk.

On ESP8266 side,

Hardware you needed,

1) Two- ESP8266 Module

2) LED with 100E resistor

3) Connecting wire

4) Bread board and other supporting hardware

Electronics Connection.

Arduino Code for both ESP8266 module:

-------------------------------------------------------------------------------------------------------------------------------------------------

#include <ESP8266WiFi.h>

const char* ssid = "WIFI network";   // Your network details 

const char* password = "WIFI password";  // Your network details

int LED = 5;                 // led connected to D0

WiFiServer server(80);

IPAddress ip(192, 185, 45, 80);            // Static IP address of device 

                                                             //please change last two digit for second ESP module

IPAddress gateway(192,185,45,1);           // gateway of your network

IPAddress subnet(255,255,255,0);          // subnet mask of your network

void setup()

{

  pinMode(LED, OUTPUT);

  digitalWrite(LED, LOW);

  WiFi.config(ip, gateway, subnet);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED)

  {

    delay(500);

  }

  server.begin();         //Server started

}

void loop()

  {

    WiFiClient client = server.available();   

    if (!client)

    {

      return;

    }

  while(!client.available())

  {

    delay(1);

  }

  String request = client.readStringUntil('\r');

  client.flush();

   int value = LOW;

 

  if (request.indexOf("/LED=ON") != -1) 

  {

    digitalWrite(LED, HIGH);

    value = HIGH;

  }

  if (request.indexOf("/LED=OFF") != -1) 

  {

    digitalWrite(LED, LOW);

    value = LOW;

  }

  delay(1);

}

//Code end

---------------------------------------------------------------------------------------------------------------------------------