ESP8266 Web Server Step-By-Step Using Arduino IDE (Mac OSX and Windows)

[Intro Music] CISCO: Hi! It's Cisco with ACROBOTIC and today I'm gonna be showing you another tip for working with the ESP8266 micro-controller. One of the most popular uses for the ESP8266 is building a Web Server. In simple terms a Web Server is a computer device that's connected to a network and is able to respond to traffic on that network. For today's video we're going to be using the ESP8266 on our development board and we are gonna use it to run firmware, written in the Arduino IDE that will allow the ESP8266 to listen to traffic on our local Wi-Fi network. To get things started, I'll go ahead and open my Arduino IDE. And the very first thing I'd like to do is going through my preferences to make sure that the option for using an external editor is selected. I hit OK, and the second thing I do is open up a Terminal window and I'm going to maximize that for just clarity. Then I'm going to navigate to the desktop which is where I'll be creating a directory and the code file that I'll be using in this video. I'm gonna name the directory simple_webserver. and I'm going to change into that directory. Then I'm going to write a file that'll contain the code that I'll be writing. Remember that in the Arduino IDE, the file containing your code needs to have the same name as the directory it's contained in. So my file will be also named simple_webserver with the extension .ino Inside my code file, the first thing that I'll do is include the library ESP 8266 Wi-Fi. Which is what we'll be using to first connect the ESP8266 to our local Wi-Fi network. Then I'm just going to add the typical two functions that every firmware file written in the Arduino IDE needs to have. And that's the 'setup' function and the 'loop' function. I'm going to go ahead and save that and within the same terminal window I'll open a new tab that I'll use to open the file by simply using the command open. As the file has the extention .ino then the operating system knows to use the Arduino IDE to open up the file. And just to make sure that everything is working correctly I'm gonna go ahead and compile that file. And I should note, that I've been working with this board quite a bit so it's already selected in my Arduino IDE options but in case you haven't, make sure that before compiling you go to 'Tools' and select from the different boards the one that you'll be using. In our case is this NodeMCU 1.0 version. And if you have any doubts for how to do that, please check out our previous video on getting started with the ESP8266 Development Board. As you see everything is compiled correctly and we can go back to our terminal and add the code to our firmware file that will allow us to connect to the Wi-Fi network. The first thing we'll need is to use a couple of variables to contain the network ID and the password needed for the ESP8266 to connect to our local Wi-Fi network. And I am going to use char pointer variables one called SSID to contain our network ID here at the office. And a second one to contain the password. Then I can use the Wi-Fi object that comes from the ESP8266 library to connect to the network. By using the 'begin' method, it takes in the two parameters the SSID and the password. We're gonna use the variables that we've created. Note that this is an asynchronous method which means that your code will continue to execute, even though that connection may or may not be established. We don't want that so we are gonna add a delay using a while loop that checks the status of that connection. And we use the 'status' method of the Wi-Fi object and we are going to use a constant called WL_Connected. Both of those obviously come from this library, the ESP8266 Wi-Fi library. And that's gonna evaluate to 'true' while that connection is being established, so we wanna print a debug message something like dots is a standard practice. And we also don't wanna bog down that connection process so we are gonna add a 500 millisecond delay to the process. If you wanna print out debug messages, we of course need to initialize the USB connection between the board and the computer. We call the 'begin' method of the serial object. And we are gonna chose a baud rate of 115200. Finally, once that connection is established we want to know at least the IP address that was assigned to the ESP8266 from the Wi-Fi router we're using. And you'll see why that's important when we get to the Web Server part of this video To do that, we are going to first I like to print a new line so that it doesn't print on the line where all the dots are shown. And then we can go ahead and maybe print a message something like IP address. And the actual IP address will print by calling the method 'local IP' of the Wi-Fi object. So if I haven't fat-fingered anything in, we are ready to test the connectivity of the ESP8266 to our local Wi-Fi network. I'm gonna go back to our Arduino IDE. Make sure that code compiles. Again double checking that the board that we are using it's the correct one so the code compile correctly. And now we can connect the actual board to the USB port of our computer. And ensure, going through the 'Tools' menu that the correct board is selected, which in our case with this board is this cu. Silicon Lab, SLAB for short USB to UART. I'm gonna go ahead and upload the code to the board. And that should take a few seconds. Once the code is uploaded, I can go ahead and open my serial monitor to look at the debug messages. If you don't see anything happening, you can go ahead and reset your board. You might see some gibberish and that's due to a different baud rate that is used by the ESP8266 during its boot-up process so you can go ahead and ignore it. Make sure that 115200 is the one that's selected. If everything goes correctly you should see an IP address just like mine The numbers of course will be different. And that's what we'll be using later on. Now that the ESP8266 is connected to our Wi-Fi network we can include the Web Server functionality so that it responds to traffic, specific traffic on that network. To do that we're going to go back to our file and we are going to include a second library which is the ESP8266 Web Server library. And we are going to use the class defined inside that library ESP8266 Web Server class. to instantiate an object that we'll name server. With that object we'll be adding first a route to our Web Server. We use the method 'on' for adding the route. We'll be adding the default route which is the top level of the path represented here by the forward slash. When a device on the network sends a request to that route then we want to just send out a simple string. This is the quickest way of testing it out. So I'll use the 'server.send' method which needs three parameters. First the response code, then the type of response that it'll be. I'll just send a text/plain response and an actual string like 'Hello World' for example. That's the response that the clients on the network should get when they send that request to that specific path and I'll show how to do that in just a second. The next thing we'll do it's just starting up our Web Server using the 'begin' method. And lastly, we'll need in our 'loop' function to monitor those requests by using the 'handleClient' method. And if I haven't forgotten anything this should be sufficient for at least testing out the Web Server side of things. Of course before doing that I'm gonna go ahead and correct some of my syntax errors. Semicolon here. And now we should be OK to test things out. If we go back to our serial monitor then we can copy that IP address that's been assigned by our local Wi-Fi router. And we can go ahead and open our browser window. I'll use Google Chrome. Put in the IP address and navigate to it. You'll see that whatever string you put inside that response will be shown on the browser. Now, we can do things like interact with actual hardware and for this demonstration I can quickly show you how to turn on and off one of the onboard LEDs on the development board. To do that we go back to our terminal window and we can simply add a new route that we'll call 'toggle'. Then we can add a function that will handle everything to both turn on the LED and send a response to the client making that request to that route. In my case I'm gonna use a user defined function that I'll call 'toggleLED' And then I'm going to define that function at the end of my code. It won't return anything and it doesn't take any parameters. And what it'll do is just send a High or Low volume which I'll use the digitalWrite function to a pin that I'll define in just a second. And to avoid doing an 'if - else' statement, I'll just use a digitalRead on the same pin and of course I'll just invert it. So if a digitalRead gets a High value, then the digitalWrite will send a Low value and vice versa. The last thing we'll need is for the server to actually send a response. Perhaps we'll try instead of a 200 code, a 204 and it'll just be empty. What that 204 represents is that it's an empty response where as a 200 code represents that it's an OK response. And you are probably are more familiar with the 404 for example when you visit a URL that doesn't exist. That 404 response is an actual code that represents 'Hey, this particular path wasn't found'. So that's everything that we need for that function to do its thing, but we need to go back to the beginning of the code and do a couple of things. The first one being declaring that variable. I'll use an unsigned 8-bit integer. that we've already named pin_led. And for the development board you can use either pin sixteen or pin two. Those are the two onboard LEDs you can control. I'll chose sixteen for this demo. And we of course need to call the 'pinMode' function on that same pin to make sure that it's configured as an output. And after doing that we can go back to the Arduino IDE and upload the code. And once it's uploaded we can tests things out by going back to our browser. And Voila! We have a Web Server running. So this was just a quick tip for you to get started and take things further. If you like our videos you can click the support button on our channel page. Don't forget to subscribe, like, or leave us a comment! Until next time!

Channel: ACROBOTIC

Views: 213,657

Keywords: ESP32, ESP8266, Arduino, IDE, NodeMcu, Tutorials, Makers, Learn, Guide, IoT, Internet Of Things, Raspberry Pi, Wireless, Communication, Weather, Creative, Sensor, Python, Programming, C++, Beginner, Electronics, DIY, MicroPython, 3d Printing, CAD, Fusion 360, Education, Tutorial, Intro, Introduction, Web, Developer, HTML, Datalogger, Project, Sensors, Data, Visualization, Webserver, Server, Client, App, WebApp, Wemos, Robot, Robotics, Robots, Easy, Adafruit, Sparkfun, OS X, Windows, Linux, Embedded, Kickstarter, RC, Fun, Build, Engineering

Id: m2fEXhl70OY

Length: 13min 32sec (812 seconds)

Published: Sat Nov 12 2016