In this project, you’re going to build an Android app using the MIT App Inventor software that allows you to control the ESP8266 GPIOs.
First, watch the video demonstration
To learn more about the ESP8266 use the following tutorials as a reference:
- Getting started with the ESP8266
- ESP8266 web server with NodeMCU
- Flashing NodeMCU firmware
- ESP8266 troubleshooting guide
If you like the ESP and you want to do more projects you can download my eBook Home Automation using ESP8266 here.
Let’s get started!
Parts List
Here’s the hardware that you need to complete this project:
- 1x ESP8266 -read Best ESP8266 Wi-Fi Developmento Boards
- 1x FTDI programmer
- 2x LEDs
- 2x 220Ω Resistors
- 1x Breadboard
- 1x Android Phone – example OnePlus 5 (read review)
You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!
Flashing Your ESP with NodeMCU
In this tutorial we are going to use the NodeMCU firmware. You have to flash your ESP with NodeMCU firmare.
Downloading ESPlorer IDE
I recommend using the ESPlorer IDE which is a program created by 4refr0nt to send commands to your ESP8266.
Follow these instructions to download and install ESPlorer IDE:
- Click here to download ESPlorer
- Unzip that folder
- Go to the main folder
- Run “ESPlorer.jar” file
- Open the ESPlorer IDE
Schematics (3.3V FTDI Programmer)
The schematics for this project are very straight forward. You only need to establish a serial communication between your FTDI programmer and your ESP8266. You can buy one FTDI programmer on eBay.
Wiring:
- RX -> TX
- TX -> RX
- CH_PD -> 3.3V
- VCC -> 3.3V
- GND -> GND
Uploading Code
You should see a window similar to the preceding Figure, follow these instructions to upload a Lua file:
- Connect your FTDI programmer to your computer
- Select your FTDI programmer port
- Press Open/Close
- Select NodeMCU+MicroPtyhon tab
- Create a new file called init.lua
- Press Save to ESP
Everything that you need to worry about or change is highlighted in red box.
Code
Upload the following code into your ESP8266 using the preceding software. Your file should be named “init.lua“.
Don’t forget to add your network name (SSID) and password to the script below.
-- Rui Santos
-- Complete project details at https://randomnerdtutorials.com
wifi.setmode(wifi.STATION)
wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
print(wifi.sta.getip())
led1 = 3
led2 = 4
gpio.mode(led1, gpio.OUTPUT)
gpio.mode(led2, gpio.OUTPUT)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
conn:on("receive", function(client,request)
local buf = "";
buf = buf.."HTTP/1.1 200 OK\n\n"
local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
if(method == nil)then
_, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
end
local _GET = {}
if (vars ~= nil)then
for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
_GET[k] = v
end
end
if(_GET.pin == "ON1")then
gpio.write(led1, gpio.HIGH);
elseif(_GET.pin == "OFF1")then
gpio.write(led1, gpio.LOW);
elseif(_GET.pin == "ON2")then
gpio.write(led2, gpio.HIGH);
elseif(_GET.pin == "OFF2")then
gpio.write(led2, gpio.LOW);
end
client:send(buf);
client:close();
collectgarbage();
end)
end)
Schematics
Now follow these schematics to create the circuit that controls two LEDs.
Your ESP IP Address
When your ESP8266 restarts, it prints in your serial monitor the ESP IP address. Save that IP address, because you’ll need it later.
In my case, the ESP IP address is 192.168.1.95. If you experience problems seeing your IP read this troubleshooting guide.
Creating the Android App with MIT App Inventor
MIT App Inventor is a drag-and-drop software that allows you to create a basic, but fully functional Android app within an hour or less.
Here’s how to edit the ESP8266 Controller app:
- Click here to download the .aia file
- Unzip the folder
- Go to MIT App Inventor
- Click the “Create Apps” button on the top right corner
- Go to the “Projects” tab and select “Import project (.aia)”
After importing the .aia file, you’ll be able to edit the app and see how the app was built.
Designer
The designer tab is where you can edit how the app looks. Feel free to change the text, change the colors, add buttons or add more features.
Blocks
The blocks section is where you can add what each button does and add logic to your app.
After finishing editing the app you can click the “Build” app tab and install the .apk file in your Android. I personally recommend that you first upload the app provided below to ensure that everything works as expected (later you can edit the app).
Installing the Android App
Follow these instructions to install the default app that I’ve created:
- Click here to download the .apk file
- Unzip the folder
- Move the .apk file to your Android phone
- Run the .apk file to install the app
Here’s how the ESP8266 Controller app looks when you to open it.
It’s very easy to configure. Click the button “Set IP Address” on the bottom of the screen and type your IP address (in my case 192.168.1.95).
You’re all set!
Now you can turn the GPIOs high and low with your smartphone. Go to the top of this page to see a video demonstration of this project.
Taking It Further
This is a basic example that shows you how easy it is to integrate an Android app with the ESP8266. You can take this example and modify it.
You could add multiple screens to the app, so you can other ESPs or add buttons to control more GPIOs.
Do you have any questions? Leave a comment down below!
Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog.
Good start!
If you want to do little advance like MQTT using App inventor, you can refer this.
internetofhomethings.com/homethings/?p=1317
Thanks! I might do something similar in the future and thanks for sharing!
If ‘ve tried to make my first App …..
I don’t like this way to make App’s.
Too much complicated. 🙁
“programming” with scratch isn’t my thing and not realy programming 🙁
I much more like DroidScript with real commands.
It’s a nice thing who like this way , sadly not my way
This isn’t for everyone. The DroidSript looks good, but I didn’t have enough time to try it.
Thanks!
I do it and it work for 2 week then its make a error on wifi connection my project was with arduino uno i change 3 esp8266 and same problem
I’m not exactly sure about what project you are talking…
Download the netwatcher app to your computer and scan all the connected devices to your local network..
And set the new ip of the. Device(nodemcu).
Gostei do projeto, parabéns.
Obrigado Marcos!
If You could to explain me, how to show value of DHT11 (temp and hum) from arduino on android app created in Mit app inventor 2 using ethernet shield? Thanks
In a couple of weeks I’ll try to post a tutorial showing sensor data with the ESP8266. A similar app can be used with the Arduino and you can use it as an example
Nice article – Thanks.
Two questions:
What if you not on the same network? i.e. away on holiday? How would you do that?
What is you want to do something the other way around … like for example when a GPIO is triggered (PIR or sensor) on the ESP8266, then send / push a notification to the Android phone?
Thxs
Right now this project only works in your network… And there isn’t a good solution to overcome this problem with MIT app inventor.
The push notification should be one of my next projects. Thanks for the suggestion,
Rui
In answer to your first question, why don’t you try just forwarding TCP port 80 from your public address to the Arduino address? It works for me, I used a dynamic DNS service to have a simple name associated with my dynamic internet address, easy and free.
Could you please explain what do you mean by this ?
How does it work ?
It’s a very old comment so does App inventor still does not allow to control devices from different networks ?
Very comprehensive to me.
Thanks Rui.
Thank you Sam!
Hi,
If your battery low. While gpio 0 is on(state = on), You renew battery. What is gpio? How make display state exactly?
(My english is not good)
Is it possible to control two ore more esp8266 module with one app ?
My goal is to build several switches for lights and control them with a app on my android phone or tablet.
Yes, you should be able to do that, simply add more screens and replicate the app to the other screens.
Very cool, keep up the great work!
Thank you for reading!
hy Rui can u explain how can I control 2 motor in my line follower robot project, Using esp8266
Thanks for the suggestion, but I don’t have any tutorial on that exact subject
I did as your listing here with my nodecmu in LUA, but the server not works (return ip=nil).
After that I run the same version in Arduino IDE, then it works on my local network but not on MIT app inventor 2 as you show.
Please read this guide to find the ESP IP address: https://randomnerdtutorials.com/esp8266-troubleshooting-guide/
Hi! Thanks for the project
but i occur i error when i upload my codes and that is “‘wifi’ does not name a type”
this error is in the wifi.setmode(wifi.STATION)
pls tell me what to do . i upload the codes through arduino ide .i also flash my esp8266 before coding.
Hi! Thanks for the project
but i occur i error when i upload my codes and that is “‘wifi’ does not name a type”
this error is in the wifi.setmode(wifi.STATION)
pls tell me what to do . i upload the codes through arduino ide .i also flash my esp8266 before coding
Thanks, you should copy the exact code, that sounds like it’s missing some quotes in the code from copy and paste
Hello,
I am new in this programming type, could you help me with some information relate d to the modification of the buttons?
I would like to change the type of buttons with toggle ones.
Also on the relay side I’ve like to use a switch for manual on/off with an 1 pole 2 way switch.
You can change the buttons through the MIT App inventor editor…
HI BAD.
How is programming using Arduino IDE?
It would be the same?
I do not use Node moon.
tks
The code can be easily modified to work with the Arduino IDE programming and the app should work there too.
Thanks,
Rui
Hi Roberto Carlos,
Did you programed by using Arduino IDE?
Kindly share if you success because I am stuck,
“cc to Mr. Rui.”
Thanks
hi i would also like if you programmed this with arduino ide tooand if it worked
Good video. Can you control esp8266 server connection and add a status bar in the program and show server active or inactive? For example when LED did not light on, ‘the server is inactive’ should be written on the status bar, or ‘the server is active’ should be written on reverse situation. Can this be made?
Hi, is there a way to have the mit app to monitor the gpio state to do an event if for example the pin goes HIGH, eg a button is pressed
got answer to your question?
nice work, do you have similar project for esp12?
This is compatible with the ESP12
Hi, is there a way to have the mit app to monitor the gpio state to do an event if for example the pin goes HIGH, eg a button is pressed
– Is there a way to detect the led status so that we can change the button color for example?
I’m trying to send data from a slider control in app inventor rather than just a simple on /off switch, do you have any tips on how I would achieve this, many thanks.
Yes, the process is simple, we have an example with sliders for Arduino
https://randomnerdtutorials.com/android-app-rgb-led-with-arduino-and-bluetooth/
However, with the ESP you have to send the slider values encoded in the URL, as we show you in this post for the button states.
Hope this helps.
Thanks.
Hi Rui. Nice site and info. However the link .iai seems compromised somehow.
Google drive reports:
“Sorry, this file is infected with a virus. Only the owner is allowed to download infected files.”
Surely this must be in error right?
Hi Dieter,
It must be some automatic Google software that blocked .apk files to be downloaded.
I’ve updated the links and it should be working now!
Thanks for letting me know,
Rui
Hi Rui, thanks for the great tutorial. May i know if you have the code for ESP8266 in Arduino IDE? i’m quite unfamiliar with the lua language by the way.
really appreciate your help.
thank you.
Hi.
Unfortunately we don’t have this code for Arduino IDE.
But maybe you can find out taking a look at other projects we have with MIT App Inventor and Arduino IDE (but with Arduino).
https://randomnerdtutorials.com/android-app-rgb-led-with-arduino-and-bluetooth/
Thanks.
oh ok, thank you for your help.
Thank you!
Why need the same router connected to android phone &
esp8266
Please response me!
Hi.
The ESP is set as a station, so it connects to your router. With this setup your Android phone also needs to be connected to your router.
If you program your ESP to be set as an access point (AP), you can connect your Android phone directly to the ESP.
I hope this helps 🙂
Did everything as above, but after the esp boot, it doesnt print the ip address, but it prints null. This isnt a problem, because then i manually run the get ip line and then it prints the ip correctly.
The problem is when I tap the buttons in the app that you made (i didnt change anything), nothing happens. i wrote the correct ip in the app.
the leds wont light up. esplorer esp memory info: Total : 549941 bytes
Used : 1506 bytes
Remain: 548435 bytes
what should i do?
Where can I download the init.lua file?
Hi.
The ini.lua file is on the project page.
You can also take a look at this link: https://raw.githubusercontent.com/RuiSantosdotme/Random-Nerd-Tutorials/master/Projects/ESP8266_Controller.lua
I hope this helps.
Regards
Sara 🙂
Can I have the program code not for LUA but for Arduino IDE?
Hi!
Unfortunately, we don’t have Arduino IDE code for this specific project.
Regards,
Sara 🙂
Hi, this looks exciting, but I just wonder how you connect buttons with gpio pins?
What do you mean?
Hi, I meant how do you configure “buttons” in the app to controll each one on arduino wifi modul?
Hi again.
The application is built using MIT app inventor.
In MIT app inventor there is a section called “Designer” and a section called “Blocks”. In the designer you add add buttons, text, images and other widgets to your application. In the “Blocks” section you tell the app what you want to do with the buttons. Basically, there is a block that allows you to know when a button was pressed. Inside that block you add what you want to happen: usually you want to send a message via Bluetooth to the Arduino.
When the Arduino receives the message, you can do what you want accordingly to the received message or its content.
You can take a look at the following post for a getting started guide with the MIT app inventor with Arduino:
https://randomnerdtutorials.com/getting-started-with-mit-app-inventor-2-and-arduino/You may also be interested in our MIT APP Inventor course that shows step by step how to build an application, add functionality to your buttons, as well as how to write the Arduino code.
[Course] Android Apps for Arduino with MIT App Inventor 2
I hope this helps,
Regards,
Sara 🙂
Hey
I just have a very basic question. Is MIT app inventor capable of controlling devices from a remote network ?
Further clarifying, is it possible to control devices while not being on the same network ?
Hi Talha.
This specific example just controls devices on the same network.
Regards,
Sara 🙂
The video shows NodeMCU EXP-12 and the rest of the tutorial shows ESP-01?
What is the wiring diagra for the NodeMCU?
How do I do it using Arduino IDE?
Hi Renier.
The wiring for nodemcu: one LED connects to D3 and the other LED connects to D4.
Sorry, but we don’t have this project with Arduino IDE.
Regards,
Sara
Could you please provide the code that can be compiled directly on Arduino instead of uploading from ESPloer? Sorry I am not good at english
Hi.
We don’t have that.
But you can follow this project: https://randomnerdtutorials.com/esp8266-web-server/
It is different, but the functionalities are the same.
Regards,
Sara
Do my phone has to be conected to the same wifi network from the ESP2866?
Yes.
Hi, I have a NODEMCU ESP8266 and a huge problem. I´ve completed every step of the tutorial but when wiring I realized my module had like 20 pins instead of the 8 yours have. Is there any way to achieve the same result with my version?
Image of my model:
google.com/search?q=nodemcu+esp8266&rlz=1C1CHBD_esAR839AR839&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiO4_Sw0ozjAhUsGbkGHel0C9AQ_AUIECgB&biw=1360&bih=657#imgrc=i3K8D9w3olRIHM:)
Sorry for my english, im from Argentina. Thanks.
Hi.
Yes, you can use your board.
You just need to use the same GPIOs we use in our example: GPIO0 and GPIO2. These GPIOs correspond to D3 and D4 in your board, respectively.
I hope this helps.
Regards,
Sara
Hi Rui,
This is great, but I am not familiar programming ESP8266 with LUA, do you have sample code of this project with arduino IDE?
Thanks,
Benawi Santosa
Hi.
Unfortunately, we don’t have an example like this using Arduino IDE.
Regards,
Sara
Hi Sara,
How to send push notification from esp8266 (push button/alarm signal) to MitApp?
Hi.
I don’t have any tutorial about that subject.
Regards,
Sara
Hii
How can we add esp8266 webviewer and esp8266ip tinydb in mit app
how about homes without network, can the app work just by connecting the phone to the access point of the esp8266