Controlling NodeMCU with a mobile app
In this tutorial, you will learn about how to create an app for controlling a LED connected to a NodeMCU WiFi module in javaScript. It’s fun and easy, and you can see changes made in the app in realtime, just like editing web pages!
For this tutorial, you will need the following:
- 1 x NodeMCU
- 1 x LED
- 1 x Male-to-male jumper wire
- 1 x Breadboard
For developing the mobile app we will be using Evothings Studio and the Evothings Viewer developement app (find on Google Play, Apple iTunes).
The NodeMCU is an open-source development kit based on famous and inexpensive ESP8266 WiFi chip. It was originally designed to work with Lua programming language, however, as ESP8266 has it’s own library for Arduino IDE and NodeMCU has it’s own onboard voltage regulator (to save the ESP module from voltage surges and to allow you to connect the board directly to the USB port of your computer) plus you don’t to hold the FLASH and RESET buttons like on the traditional ESP8266 (whew!). The NodeMCU turns out to be an ideal for developers who want to get started with ESP8266 WiFi module family.
A few days ago, I sat down to evaluate ESP-01 and NodeMCU, the difference in complexity can be seen in below images :
ESP-01 wiring with FT232RL USB to Serial converter
NodeMCU 1.0 (ESP-12E) module wiring
Let’s connect our module and get on with developing the mobile app to control the LED using WiFi.
Step 1: Connecting the circuit
As seen in above image, just connect the long leg of the LED to D4 pin of the NodeMCU and connect the other leg to the GND. No resistor is needed in this case!
Step 2: Preparing the Arduino IDE
I am using Arduino IDE 1.6.9 (latest version as of now). Simply, go to the Tools > Board > Board Manager, type “esp8266” in the search bar above, once found, click on the “Install” link beside the ESP8266 board.
Once installed, confirm that you can see ESP8266 based boards by going again to Tools > Boards. Now, select the NodeMCU board that you have from this list.
Connect the NodeMCU module with your computer and select the appropriate port from Tools > Port.
From this point onwards, you can safely assume that you are working with a standard ESP module as all ESP8266 examples in File > Examples will work seamlessly with the NodeMCU as well. From now onwards, I will be repeating the last few steps already listed in this tutorial on Evothings website.
Step 3: Download and use the sketch
Browse to this Github repository and copy-paste/download the Arduino IDE sketch (i.e. the file ending with .ino). Edit the file by adding your WiFi SSID and password and upload the sketch to the NodeMCU, once running, open serial monitor and note down the IP of the module.
Tip to remember: The pin map of NodeMCU is weird as explained on this website, so keep the value of “ledPin” constant to 2 as that is actually mapped on “D4” pin of the NodeMCU.
Step 4: Download and use Evothings Studio
If you are not already familiar with Evothings Studio, it basically consists of two parts. First, you will have to download Evothings Workbench on your computer and then download Evothings Viewer (iOS, Android) on your mobile phone.
Evothings Studio is an easy-to-use tool that allows you to quickly develop your IoT mobile app using HTML, CSS and JavaScript. Evothings Workbench is used to manage and load your projects on Evothings Viewer, which in turn acts as a preview tool for your mobile app. One of the advantages of Evothings Studio is its live-reload mechanism, that means, all the changes that you will make in your code will reflect live on Evothings Viewer, making it easier and quicker to develop the mobile app.
Let’s move forward with our app:
- While you’re at the download page be sure to generate and copy a Cloud Token to your clipboard, as you’ll need on during setup. After you saved the Token in the Connect tab of Evothings workbench, proceed to click on “Get Key”, that will give you a connection key to enter in the mobile app called Evothings Viewer (iOS and Android).
- Now open Evothings Viewer app on your mobile phone, provide the connection key and press “Connect”, you will see a “Connected” screen in a while if your computer and mobile phone both are connected to the internet (as Evothings Studio is essentially working through the cloud).
- Browse to this Evothings Github repository and download the example app code or you can simply find the same example app under the “Examples” folder in Evothings Workbench with the name “ESP8266”.
- If you have downloaded the example app code, drag & drop the “index.html” to “My Apps” tab of Evothings Viewer.
- Press “Run” alongside the “ESP8266” project entry.
- The example app should load in the Evothings Viewer, provide the IP address of your NodeMCU module as noted above and press “Connect”.
- On the screen, tap the round button to switch the LED On/Off.
- Now, as you may want to make the changes in the example app code, open “index.html” in favourite code-editor and analyze the code. For the code explanation, you can always refer to the tutorial on Evothings website. They have lots of other tutorials there as well, on how to connect your smartphone to various gadgets and devices.
We have just used a mobile app to control an LED through the internet. As we are just sending high and low on an output pin, the same app and circuit can be used to control any other module or circuitry, such as a 220v relay can be used to control the lights or fans of your home. Similarly, you can add a servo motor to make an irrigation system or control a conveyor belt using the internet, the possibilities are endless and it’s so much fun.
There are many other tutorials and examples for mobile IoT at the Evothings’ website, and everythings starts by downloading open source Evothings Studio — start making mobile IoT apps today!