Build Esp12e Web-server App Using Arduino IDE

Introductions :

ESP12e is actually a microcontroller, ESP8266 is the name of the microcontroller developed by Espressif Systems which is a company based out of shanghai. This microcontroller has the ability to perform WIFI related activities hence it is widely used as a WIFI module.

Descriptions :

In this inconstructibles we will be going on a 1st step in the esp12e , and make a simple web-server for on/off command throw the local wifi network using app inventor and arduino IDE .

Step 1: Components Needed :

The ESP-12 Breakout board breaks out the ESP-12 pins which are in 2mm pitch to 2.54mm pitch (spacing), so that you can use it with a standard breadboard / berg header.

It also has a place where to put a 3.3V regulator on board ("like the lm117 , mine it's in the back other are in the front side but i will not be using that we will see later on ") , so you can easily power it with a digital circuit that can supply 5V.

HARDWARE:

1.ESP-12e

2.ESP-12 breakout board

3.jumpier wire

4.ftdi

5.lm117

6.some kind of battery

7.capacitor (100 nf 10 uf)

8.breadbord

9.soldering iron

10.female and male header header

11.switches ( use for turning the ESP in programming mod and reverse )

12.buttons

13.connector (for power supply connection )

14.a local wifi network

SOFTWARE :

Arduino IDE .

web browser .

Step 2: Schematic :

**You need to connect a few GPIO pins on the ESP-12 to Ground, so it will be set in PROGRAMMING MOD**

***First Image --> (break out board).

***Second Image -->( if you don't have a breakout board)

Wiring :

VCC ----> 3.3V Power supply

GND ----> Ground of power supply

GND-----> GND of FTDI

CH-PD----> HIGH (3.3V)

GPIO15 ----> LOW (GND)

Rx of ESP-12 ----> Tx of FTDI

Tx of ESP-12 ----> Rx of FTDI

Step 3: Power Supply :

For power supply you can use what ever you are confortablement with , for me I use a LD117 adjustable version

that i found on a old mother board , for that i use the schematic above with a 1k ohm and 1.6 k ohm or search for lm117 calculator in web search .

but for normale version all you need is to add capacitor in the input and output .

the lD117 can support until 15v so be kind :) .

Step 4: Install ESP8266 Library in Arduino IDE

* Follow the Images above *

For working with Arduino IDE you need a to download the library of the esp8266

GITHUB !! (support the team that did the wonderful job ;) )

Step 5: The Arduino Ide Code : Connecting to Wifi

#include

char* ssid="............";//here enter the name of the network

char* password="............";//here enter the password of the network

void setup() {

WiFi.begin(ssid,password);

Serial.begin(115200);

while(WiFi.status()!=WL_CONNECTED) {Serial.print("."); delay(500);}

Serial.println("");

Serial.print("IP Adresse:");

Serial.print(WiFi.localIP());

}

void loop() {

}

Step 6: Remove the Programming MOD

Now remove the GND FROM GPIO and Rest it ( you can rest it just by unplug in the vcc and re-plug it )

Step 7: ERROR :

If you got this type of error that mine that there is not enough current for the esp12e , the esp8266 are famous about been hungry in current , approximately it need 1 amp .

Step 8: It's Connected !!

"Remember to set the board rate to ( 115200 )"

The Addressee that you see is the address given to esp12e so we can communicate throw it .

Now that we are Connected to the wifi ,we can use the esp8266 to do a lot of things one of them use it like a remote for turning on and off and led (it can be use also to turn on and off anything like devices with high voltage using relay for that go here : ) , so lats no waste anymore time and make a app for that .

Step 9: The Arduino Ide Code : Using Web Server

#include //to connect to wifi library

#include //web server library

ESP8266WebServer server;//make a server as a object of the class ESP8266WebServer

char* ssid="...........";

char* password="..............";

uint8_t pin_led=16;// unSigned 8 bit integer , i just use by default pin 16

void setup() {

pinMode(pin_led,OUTPUT); // declare the pin 16 as an output

WiFi.begin(ssid,password);//method for connecting to wifi network

Serial.begin(115200);

while(WiFi.status()!=WL_CONNECTED){// check if it's truly connected Serial.print("."); delay(500); } Serial.println("");

Serial.print("IP address: ");

Serial.print(WiFi.localIP());

server.on("/on",onLed);

server.on("/off",offLed);

server.begin();

}

void loop() {

server.handleClient();

}

void onLed(){ digitalWrite(pin_led,HIGH); server.send(204,"");//204 for empty response }

void offLed(){ digitalWrite(pin_led,LOW); server.send(204,"");//204 for empty response }

Step 10: Building the App : Using App Inventor

App-inventor is a tool mad by the MIT , that basically make a lot easier for us to create APP .

. I make the design in Photoshop then import the layer in the App-inventor .

Working of the Code block :

1- store the addressee writing in the text box

2-When button is click if the image is OFF then change image to ON and Send a "/on" command via the Web Viewer .

3-the same thing for ON but I used another method it's the get method which is the same .

Step 11: PCB DESIGN :

it's not impressive but at least it's practical i guess ....

Step 12: Install the Apk File and Voila !

All files here : Github