[Intro Music] SONIA: What’s up YouTube. I am Sonia and in this video, I’m gonna show you how to build a web application on the ESP8266, and an iOS app that will communicate with that Web application through an API. First we are gonna go over the firmware for the web application. Then we’re gonna go over building the iOS app. Let’s go over the firmware, which is available at our Github page. Also all the code that you see in this video is available in links in the description bellow. In the program you gonna see all the usual things that you see in most sketches written in the Arduino IDE namely a loop function, and a setup function, as well as some user defined functions. First we’ve included some libraries that are for the ESP8266 using Wi-Fi general usage and setting up a web server. Here we have where you put your Wi-Fi information, network name and password In this line we’ve got an object, which is an instance of the web server class, and that establishes that we’re gonna be communicating through port 80. We have three user defined functions. The first is to tell our users how to use our web application. The second one is to control the LEDs, and the third is to generate an error in case our web application receives a request that doesn’t understand. In the setup function, we set up the pins to be outputs we initiate them in a low state, and it’s also where we connect to Wi-Fi and we output messages to the serial monitor, namely the IP address that gets assigned to our ESP8266 port. It’s also where we set up our web server. And in the loop function there is only one line which is an object of the web server class and it continuously listens for incoming web traffic. Go ahead and download the program, and when that’s finished open up your serial monitor. If you see information that doesn’t make sense to you try hitting the reset button on your board. Copy and paste the IP address that appears on the serial monitor because that’s what we are gonna take and put into a web browser. You’ll see a message come up on your web browser. Those are the instructions for your user. If we go back to the program you can see where in the program we attach that URL path to a user defined function. which is ‘handleRoot’. That ‘handleRoot’ function generates a HTTP 200 message, which is to say everything is OK and it puts out a message in plain text that is the instructions for our user. Let’s go ahead and follow those instructions. We’re gonna type out a URL path that is described by the message we received. After that IP address we’re gonna insert a slash setleds And everything that is after the question mark are parameters one for each LED, and they are separated by an ampersand symbol When you hit ‘Enter’ you’ll see that the LEDs have come on, which is pretty cool. Those LEDs came on, because that URL path within our program is associated with the ‘handleSetLeds’ function. And that function has actual instructions that manually turns on those LEDs. And that’s how we use the web browser to generate Web traffic that our Web application understands, and then does things within the ESP8266 port. which in our case is switching LEDs on and off. Next we’re gonna build an iOS app that’s gonna do the same thing that the Web browser did. That is generate Web traffic that the Web server interprets, and the Web application uses. To build our iOS App we’re gonna use Xcode. Once you’re in Xcode just follow the wizard that comes up when you start a new project. When it asks you for the product name, you can put whatever you want and most of the fields will be empty. As you can see in ours we’ve got some fields populated, and that’s because we already have a developer account. Fortunately in order to use Xcode, you don’t need a developer account. I’m gonna name my project IoT LEDs and I’m gonna also make sure that the language is set to Swift. These options here you can leave as is. Chose a folder where you wanna save your project and click Create. Xcode generates files whenever you start a new project. The two that we will be working with are Storyboard and View Controller. Storyboard is where you layout the UI elements, and View Controller is where you put in the code that dictates the behavior of your UI elements. Once in Storyboard go to the Objects Library which is where you can choose the different things that are gonna be your UI elements. In the Objects Library, we are going to search for Button. And I’m gonna use the first option and we gonna place the Button. Then we’re gonna search for Web View, which is another UI element that we are gonna need. Take that and place it in your Storyboard. When you highlight your UI elements, you are gonna be presented with different settings that you can change and customize, such as the name. Our Button we’re gonna change to LED 1 because that’s what it controls. The Web View we’re just gonna leave as is. Now that we have our UI elements laid out, we’re gonna go into a split screen so that we can see the View Controller as well as the Storyboard. As you can see, I’m using a Mac Book Air and I don’t really have a lot of screen real estate so I’m gonna get rid of some of these side panels to give me more room. Now I can map the different UI elements to the different sections that correspond on the View Controller. Our LED Button is an Action, and our Web View is an Outlet. So control click the Button and line it up between these two brackets. And a pop-up screen comes up. Make sure that you change the connection to action because that’s what our Button is. Now control click the Web View. And point it upwards. Map it to there. Here we don’t have to change the connection because it is an outlet but we will put in a name. Our two UI elements are now mapped and so now we’re gonna populate the View Controller code with some code of our own. I’ve got my Terminal here Just kind of holding up this code. Just remember that all the code that you see here is available in the description section of this video. Now that code is in there, we’re ready to simulate. Click the play button to simulate your app. And a window will pop-up that mimics your iPhone. Click LED 1. You’ll see an error pop up and we’re gonna go ahead and show you how to take care of that. In the list of files generated by Xcode go to info.plist and click in that open space. Right click and select Add Row. And enter App Transport Security Settings. Expand. Right click over that selection and hit Add Raw And what you want is Allow Arbitrary Loads. Hit Enter. Make sure that this says “Yes”. And that should take care of that error. Hit play to simulate again. And now when you hit LED 1 your LED will come on. If you try and hit LED 1 again nothing’s gonna happen, and thats because the action of that button executes is simply to turn the LED on. It’s already on so, it’s not really gonna turn it on again. If I wanted to turn it off I have to go to my code, and where it says turn LED on, I can change the ON to OFF And then that changes the action. So when I hit LED 1 again LED goes off. So now I extend the challenge to all of you, to expand on the code, maybe add some new UI elements to really enhance you iOS app. Thanks for watching. I hope you had fun, I did. Like, subscribe comment bellow. Let us know what else you guys would like to see Sends some questions. We love to hear your feedback. Catch you in the next video.