Absolute Beginner Guide to ESP32 & ESP8266 – 2021

If you want to use ESP 32 or ESP8266 with Arduino IDE & starting to learn IOT, this guide is for you.

There are 5 main topics we are going to cover here:

  1. How to install ESP boards in Arduino IDE
  2. How to scan wifi networks around you (Testing ESP board)
  3. How to create first sketch to operate external LEDs via webpage
  4. Using MIT app inventor to create applications
  5. MIT app inventor application to send message to ESP.

How to install ESP board in Arduino IDE

You can use ESP board directly with Arduino IDE but you have to install the board first.

The process can be summarized as first you have to add a JSON link into the preference of your IDE software, add board from boards manager and you are good to go. This process is explained in detail here:

https://randomnerdtutorials.com/installing-the-esp32-board-in-arduino-ide-windows-instructions/

How to scan wifi networks around you (Testing ESP board)

The first thing we usually perform is to check our board using a default code available in Arduino lib. folder.

Go to File -> Examples -> Select Wifi scan and get a complete code.

Select your ESP board and upload the code

You can than read names and strengths of wifi around you.

Arduino IDE open WiFiScan example for ESP32

How to create first sketch to operate external LEDs via webpage

This web page has a lot of different useful documentation regarding EPS32:

https://randomnerdtutorials.com/esp32-useful-wi-fi-functions-arduino/

Now to create an ESP32 Webpage something like this,

We can use HTML language to build a simple webpage and set the output URL to each button.

A complete detailed guide is available here

https://randomnerdtutorials.com/esp32-web-server-arduino-ide/

Using MIT app inventor to create applications

MIT App Inventor is a web application integrated development environment originally provided by Google, and now maintained by the Massachusetts Institute of Technology.

It is a simple platform where you can build your own custom mobile application quickly in minutes. We can use MIT app inventor to build apps that communicate with ESP32, to create DIY home automation solutions. I am attaching a sample code here that takes input from the Web, we will provide these URLs to our buttons in MIT app inventor and with each button press, we can receive messages in ESP board via WiFi.

Raw Code for ESP8266:

#include <ESP8266WiFi.h>

const char* ssid     = "WifiESP";
const char* password = "090078601";




String  ClientRequest;
WiFiServer server(80);

WiFiClient client;

String myresultat;

String ReadIncomingRequest(){
while(client.available()) {
ClientRequest = (client.readStringUntil('\r'));
if ((ClientRequest.indexOf("HTTP/1.1")>0)&&(ClientRequest.indexOf("/favicon.ico")<0)){
myresultat = ClientRequest;
}
}
return myresultat;
}



int count=0;

void setup()
{
ClientRequest = "";

 Serial.begin(115200);
 

 
   

      
      Serial.print("Setting AP (Access Point)…");


        
  WiFi.softAP(ssid, password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);
  
  
  
   server.begin();


  
}


String wifi_msg;

int flag = 0;
int pap=1;
void loop()
{


 

    client = server.available();


    

  
    if (!client ) { return; }
    while(!client.available()){  
    ClientRequest = (ReadIncomingRequest());
    ClientRequest.remove(0, 5);
    ClientRequest.remove(ClientRequest.length()-9,9);
    //  Serial.print(" ");
      Serial.print(ClientRequest);
    
    if      (ClientRequest == "1"){      /* add your actions that you want when 1 is received */                            } 
  if      (ClientRequest == "2"){      /* add your actions that you want when 1 is received */                            } 
    


    
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println("");
    client.println("<!DOCTYPE HTML>");
    client.println("<html>");
    
    client.println("Wifi Connected");
    client.println("</html>");

      

}
    
    client.stop();

}

To understand MIT App inventor, a detailed guide is available on there own page here:

https://appinventor.mit.edu/explore/ai2/tutorials

Here is example of MIT app inventor code to send message via custom URL, you can take it as reference for your future project.

Thank you for reading

Follow Gotechies.net for more

Via. Shah Fahad Ahmed

Leave a Comment

Your email address will not be published.