Create a Webserver | Handling HTTP requests(GET, POST, PUT) and Secure URL | ESP-IDF

hello everyone this is ashii from innovate yourself welcome back to our channel in our today's video you will be learning like how do you connect your esp32 to a web server so by the end of this video I will be showing you complete stuff like how do you connect or let's say how do you create your get request and the post request everything from the scratch so if you are new to this and if you want to learn completely stay tuned till the end of this video so that you will be able to understand each and every concept uh of web server so this is all that I'll be covering up in a today's session so before starting by creating your web server we need to connect your esp32 to the internet or let's say to the Wi-Fi network so that we can create a web server out of that so we have two options like how you can create that or let's say how do you create a web server you can create a web server either by setting up your esp3 device in your station mode or in the access point mode so in our today's video we will be using the first method which is your station mode and on the basis of that we will be first of all connecting a esp32 to the network or you can say to the nearest Wi-Fi available and accordingly we will be setting it up as a web server and after that once that is done we will be connecting it or let's say we will be using it to set up a get request and post request which you you can use further and you can uh explore further by doing the R&D stuff on that so that you can do multiple other actions for that for example you can do the home automation for example you can uh take the data from the server let's say you can take a sensor data and you can upload it to the uh server right so this is all the things that you can do with this now let's not waste much time in the summary part let's straightforward go to the project and let's understand how are we going to do complete this thing and how are we going to create this web server which can handle both get request as well as the post request and you will be learning everything from the scratch so let's get started all right everyone so I hope now you have got an idea like what exactly we're going to cover up so let's focus now on the coding stuff so right now as you can see on your screen so I've already opened up the code which I'll be explaining to you right now right so basically like I already mentioned in the beginning that we will be covering up like how do you send the get request and the post request using the esp32 module right now just because our primary focus is on the get request and the post request so I'll be covering up that basically but apart from that just because the code which I have opened right now in this we have two more extra things as well right and that is like how do you add on on the uh additional authentication process like in case you want to create a routing that should be like authentication based let's say the username and password base if you will enter up the username and password correctly then only it's going to open up that uh direction or let's say redirection for you basically right so this is what exactly uh we also have in this but as I said our primary focus is on like get request and the post request so I'll be covering that first later on uh I'll cover up that thing as as well right so this is all about that now let me start with this like what exactly we have to do in this so I'll start from the bottom right now over here just because as per my previous videos I hope you have already got a Clarity that your main function is your appcore main right so this is the main function which is going to be executed first or let's say which is going to be considered as the starting point of your code in your ESP idea right so this is what exactly we have and just because as I said that we are going to create a web server so basically as I already mentioned that for creating of web server what exactly we have to do is we have to start or let's say we have to connect your esp32 to the network and what is that Network that I talking about right now so for now I'll be using my mobile hotspot so that it will be a bit easier for you uh to also relate this thing like uh if in case you are going to use your smartphone as a hotspot how you going to connect to that right in case you have your router the process will be same right so you can use that process as well right so this is the way how do we do that so initially just because these things we have already seen in our previous video as well where we have already seen that how do you connect your esp32 to the Wi-Fi right so for that it's like you can say these are the initializers this which we have already covered up in the last video as well right in case you facing any difficulties in understanding this don't worry I'll leave a link in the description for this video so that you can check my previous video and uh then you can uh relate to this right so this is all about that so basically these are the initializers which we have to initialize in the beginning so that we can basically uh connect or let's say we can basically start your services for your Wi-Fi thing right whether it's in the STM mode whether it's in the access point mode and as I already mentioned that we will be covering up with the which is your station mode right so this is what we're going to do and apart from that you can see the first line I mean like 433 line in which we are just initializing a server using or let's say with a value as null so this is what exactly we're going to do right now right now as I said that initially we will be connecting our esp32 to the network for that here you can see that we are simply calling up this function which is example undor connect that is going to be used to to connect to your Wi-Fi credentials right Wi-Fi credentials I mean to say like what is the SS ID and what is the password so I will be having them and those SSID and password I have over here in the this K config dopr uh like build right so in this we have set up the configurations right and uh that we can see over here right okay sorry it's not in here right basically it's it's basically uh these are the configurations for your uh credentials right what are those credentials which I'm talking about it's the username and password because as I said that uh we have a basic authentication process as well through which you will be able to access your routing in case you enter the correct credentials right so this is basically for that but where is your SSID and password that you have to mention that is basically going to be uh linked as per this right can you see this line inside this cake. txt which is the cake uh which is not inside M which is uh inside your main directory or let's say inside your project directory which is this one right so over here you can see this is the extra components which we have added and this is the path we have already added for that and just because this is the path I've already added so the configuration for this SSID and password is over here right so currently just to access that you have to go to this location just to see the complete thing but don't worry about that we don't have to go there because we have a second option and that second option is we can check that inside the menu configuration so that is also we can do right so we'll check that over there and I'll show you once I'll fill up those credentials as well right so I'll show you that either now let's go back so basically this examples uncore connect will be used to connect your esp32 to the network so this is second way like how we can do that and one way we have already seen in a previous video through which we can connect our esp32 to the network right so this is the second way like how we can do that so this is how you can connect to the network right and here you can see like we are setting up the configuration for your Wi-Fi as well as the ethernet right because it's not like that we can only connect it uh or let's say we can only connect to the network using Wi-Fi we can connect to the network using the EET uh Port as well or you can say the landan cable as well so we have the second option as well but in case we are going to connect to the Wi-Fi only so that's the reason we will go for this configuration and over here you can see we are simply registering the event handler so that when we are going to start connecting to your Wi-Fi network your uh events can be handled accordingly whether you're going to connect to the network whether you're going to disconnect to the network so whatever you want to do we are basically setting up the Handler for them so you can see for the connection Handler or let's say to get the IP address we we are having this Handler which is connectcore Handler in case you want to disconnect it we have the second Handler which is disconnect uncore Handler and also we have specified that this is a server to which we want to connect it to right so this is uh how we are going to do this right so this is all about this and once this events and everything are handled successfully now what we can do is we can simply start the web server right so this is the function that will be called in here to uh start the web server and and accordingly we are going to keep it alive and to keep it alive we are simply starting up a loop which will be active until your server is active right so this is what exactly we are doing right so we'll see both the things right so firstly as I mentioned we have the connectcore Handler and a disc disconnect underscore Handler so let me show you where we have them so here is the connect underscore Handler in which we are simply going to say that we are going to start our web server because in our current scenario all let's say in our today's task what exactly we are doing is we are just trying to connect our esp32 to the web server or let's say we are going to create it as a web server so that we can hit the multiple requests whether it's a get request whether it's a post request whether it's a put request or whether it's authentication based process right so we will uh see all of them right so this one is for The Connect Handler similarly in case the events are going to be disconnected this is basically a disconnect uh Handler which is being created over here so that we can simply say that now we are going to stop the network or let's say we now we are going to stop the web server because in simple terms you can say now we are not connected to the network so basically web server will not be active anymore right so in simple terms you can understand it this way right so this is the way how we have the Handler which is the connect Handler and the disconnect Handler now the next was start web server so as we said like we are going to start the web server so let me go to this function also now over here you can see when we are going to start the web server so basically when you are starting the web server simply you can say we are exposing our esp32s IP address as a web server IP address or you can say the web server URL right so basically we are going to do that and for doing that we are having this uh function which is the start web server and inside this what we are going to do is we are simply going to set up the configuration So currently we are using the by default configurations which we have for uh configuring our web server so this is what we are doing right now and right now you can see we have the Linux one and uh the end if accordingly we have set up the conditions accordingly so this is what we are doing in case it is a Linux system but right now I'm not using the Linux system so it won't be affecting anything right so you can say it in that way and the next thing is when you have hosted your esp32 as uh some server or let's say as some web server so basically on that web server you will be having multiple routings which normally you can call it as a URLs right let's say I have one URL and that one URL is like your IP address SL hello second URL is like uh ESP I mean your IP address slash Echo right you can see over here first one is hello Echo and Ctrl it's like we are simply registering three different uh routings in simple DS you can also say routing as well because this is also been called as routing so we are simply registering three Uris and for each of them we have an Handler so basically this hello this Echo and this Ctrl are the Handler names these are not the uh routing name basically right so let's check all of them one by one so let's talk about this hello first I'll simply uh go in here right so you can go directly and uh and one more thing over here we have that is for the authentication I'll come come back to this also first let's go to Hello so for going to hello you can scroll up and uh firstly it's like Ctrl and uh this is the Handler for this similarly this is the 404 not found event handler similarly this is the echo when you are going to set up a post request similarly uh this is the Handler for that similarly this is a httpcore get request which we are setting up for hello so basically this is that event handler which is we are creating right here and that is the Handler name which is hello so this is the URI or you can simply say/ hello will be uh like added to your IP address at the end it's like let's say your IP address is like 192.168.0.1 for example and at the end it will be like slash and this will be that slash hello so this is how your complete URI will be created right and this URI is going to be be set up as for taking or let's say for hitting the get request so this is a method that we have specified for that similarly we have a Handler that we have specified for that and this is that function which we have uh like created for this which we are calling as hello uncore getor Handler so this is the Handler for that and similarly this is the context which we uh which we are like writing in here to demonstrate because this is the message that is going to be displayed on your web server or let's say on your browser when whenever you will be hitting this Ur right so this is what is going to be happened over here so in this we have this hello get Handler so this is the Handler that we are having in here so here we are having few of the things that is going to be like uh taken care right regarding this host regarding this headers and everything so these all things are being uh handled inside this event handler which is for the get request so this is uh all about this now similar similarly this is uh like written in the detail but you don't have to go for all of them you can simply create a basic one as well right just for the understanding right and uh this is about the get request similarly as I mentioned the second one is for the Post request so this is the post request Handler in which we are having the URI name is/ Echo which will be used uh to hit a post request now when I'm hitting up a post request you will be simply receiving some dat data on the post request right and for that we have this event handler now as for this event handler we will be simply receiving whatever data we are getting we have created this buffer for that and accordingly whatever data we are going to get we will be simply printing that over here now you can see this is the receive data and this receive data will be shown to you on the serial monitor right so this is how we going to do that in the similar way like this is this was about the get request and the post request which I promise you like I will be covering up in this today's session similarly here we have this HTTP 404 error Handler because there are chances that you will try to create or you will try to call some of the Uris or due to some reasons they are not found right because uh you haven't uh like registered them properly so in that cases like these things can happen and you have to handle them and for that we have this 404 which is you can say your not found error right so this is for that in case your hello is not found this is the message that will be shown in the monitor similarly Echo URI is not available some 404 error message so in this way we are displaying multiple messages just for the proper elaboration right so this is about that and similarly we have a put request as well where you can simply update your existing data or in case the data is not there it will create up a new data and it will be showing to to you right so it's a put request also which you can have in here right so this is uh about that similarly you can see here also the process of uh setting up the values for the URI for method for Handler and the user _ CTX so this is the same right so the way of defining like what URI you are creating what method you are creating it's the same the only thing is your values are varying right what is the UR what is the method what is the Handler and what is the user _ CTX so this is the way like how we have it right and one more thing like I promise like I'll cover that either which is your basic authentication now I'll go up and I'll go up to this authentication one right so over here this is the basic authentication get Handler so let me scroll down and yeah you can see here we have the same way of creating your another method so this time again this is your HTTP _ get method because this one or let's this URI will also be hit uh in the normal way like you can open this in the browser so when you will open this in the browser instead of opening that page directly what will happen is it will ask you for the credential that what's the username what's the password in case you will enter the correct username and password it will take you inside and accordingly you will be able to see whatever you have on those page right otherwise it will not allow you to enter in sight it's like you providing the authentication it's like you're providing the security on your uh like uh web server right so this is the way of doing that now we can also see like what is the basic underscore authentication get Handler so over here you can see here we are just getting up the basic details what is that and accordingly authentication methods are being checked whether the headers are found or not so all those things are being checked over here now similarly here we we are also setting up the responses for that like what response we are going to get what's the connection type what's the type of data you're getting what's the authentication level so all the things are being over here right now similarly once we have this uh we can see like over here it will be checking up for your username and password right um where we have it right you can see here so here basically it is just checking for the username and password so whatever is the username whatever is the password it is just taking in here and accordingly it is just going to authenticate that whether the username and password that you have entered is correct or wrong if that is not correct it is not going to take you inside if that is correct it will take you inside and you can see like what message it will show you on that page right like you can see it will simply PL the message as authenticated and and accordingly uh it will simply show you some message right so this is the way like how it will be showing to you and uh the message will be something like uh what is the username and password that kind of message you will be getting right you can see this is that one this is the message that you will be able to see on your uh web page or let's say on the UR right that you will be hitting right so this is all about uh the web server part I hope I was able to make you clear about this in fact I promise you just for the get request and the post request but apart from that I have Al also shown you like what is put request we have also seen for that we have also seen like how to handle this basic authentication so that you can add a security level to your uh web server right so this is how we can do that I hope I was able to make you clear on this but still if you're unable to understand any of the things feel free to leave a comment below in the comment section I'll definitely try to get back to you as soon as soon as possible and try to help you right so that's all from my side for uh like the coding stuff now the next thing is that we have to Simply upload the code to the esp32 and right now I have already connected my esp32 to my system so basically what I can do is I can simply check that whether the port is available for this or not and we'll upload accordingly upload the code right now let me open up the terminal like over here like I have this so basically I'll simply uh do the basic formalities yeah now it's here now as I already mentioned one more thing that we have to set up the username and password for your authentication secondly we also have to set up like what is the credentials for your SSID and password so let me do that so for that you simply have to first of all open manual config instead of directly uploading it right so I'll simply open it up now you can see we have two configuration example configuration and example connection configuration now let's see what we have inside this example configuration now you can see here in case you want to add this basic authentication process just select this and now over here these are the credentials this is the username this is the password so right now I'll not touch them I'll leave it like that because I'm not going to show you that but you can try it on your system or in your case and you can check whether it's actually working for you or not because this is going to work as a security level right so I'll try like if I can show you or not so I'll try to add it right so let me enter it let's go back let's go to the example uh connection configuration now over here you can see uh the credentials I've already added you can change it as for your uh available Network right so this is my SSID and this is this is my password so SSID and password are already here now when I'll Simply Save it you can say like I'll be able to uh upload the code and I'll be able to test it right and some other configurations are also there which I've already shown in my previous video so you can also change them you can change the CPU frequency to 240 MHz and uh inside the serial flasher change the flash size from 2 MB to 4 MB right so just uh change it and in case you have some Advanced uh like esp32 module so you can change it as per uh your esp32 module right so this is all about that now I'll simply exit this I'll save the configuration now first of all just simply build this it's done now simply I just have to flash it IDF dopy Flash Monitor and you can also type up like what port you want to specify in case you know what's the port number but right now I'll not put anyone so that it will take it accordingly right so just simply click on enter and let's see what will happen it is trying to connect to the network and in fact I'm trying to connect to the same network to which my system is connected and now you can see the wi Wii or your es32 is connected to the same Wi-Fi to which my system is connected right so I'll simply copy this one I'll simply copy this and now I'll go to the browser I'll open it in a new tab just run this now right now you can see this is a message that I'm getting nothing matches the given URI now let's go back and in fact how you can see not found and this is because we don't have any routing with this slash or you can say which is only uh linking to this IP address right so what are those to which we have connected them uh and you can check in here you have this you have hello over here right so let's try with hello just simply add hello at the end press enter now you can see Hello World so this is how you can directly get your web server running and active on your esp32 so this is the way like how we do that so this URL was about the get request now similarly we have the second URI and uh that is for your echo which is linking to your post request so that was a get request now I'll try the echo which is the post request right and to do that I won't be able to uh try this on my browser because if I'll try to do so it won't give me the results because that's the post request right if I'll run it you can see this is what I'm getting specified method is invalid for this response right so what should I do now so I'll simply copy this URL now to check this what I'll do is I'll simply open up the postman right you can download it very easily you will get it uh like over here you can search on this Postman so you can go in here and you can download it right whichever version you want as per your operating system so you can sign in and you can uh get that thing right from here like products download Postman from here you can get that right but in my case I already have this so I'll simply open it up okay so now you can see over here I'll simply have to add the URL which I'm using right now which is basically the IP address which I got for my uh like esp32 and the routings for that which was Echo right now over here I simply have to select the post request because this time I'm going to apply that post request reest and now over here you have to send the data along with that so for that you simply click on this body and over here you can say uh I mean you can specify like what exactly you want to send whether you want to send a normal text whether you want to send a complete Json data whether you want to convert it to a JavaScript HTML XML whatever you want to send you can select that and you can accordingly send it but in my case you can see I simply selected text and some text is already present over over here which is kind of uh Json data like in that form uh it is over here right so I'll simply try to send it and let's see whether it works or not and one more thing you have to make sure that while trying to access or while trying to run this you have to make sure that your es32 and your system or your device on which you're checking for this should be connected to the same network so this is what exactly we have to do so just click on send now you can see I have sent it and over here this is the body that I have got now we can go in here in the like terminal where we are actually checking it and you can see this is what exactly I sent and that is received over here right so in this way we have simply send the data and in the similar way you can try sending something else uh let's say I'll send something else this time and that's Ashish sheni and and also I can specify the password innovate yourself right so in this way I'm uh writing this and now I'll simply click on this send now you can see I've send it go back and you can check that right so this is the way how you can create your own web server for which you can create the multiple routings based on the type of request that you want to do whether you want to uh hit a get request whether you want to hit a post request right so we have seen both the stuff now you can try it according to your requirement and according to your naming convention that you want to do so this is all about this now let's check the basic authentication URI as well right just because it's a get request so I can directly open it in the browser I'll type in here bicore Au press enter can you see everyone it is asking asking you for the username and password now what are the username and password you know it very well right so it's esp32 as the like uh username and the password is like esp32 web server right so it's uh that one just click on sign in oh I think like I forgot the password and maybe the spellings are not correct so I can go in here and I can check for that and let me correct it it's this one esp32 web server let me type it just sign in now can you see authentication true and the username is esp32 so that means I am able to connect to the network or let's say I'm able to open the URI and that to uh with the authentication so this is the way like how I can do that and I hope everything is clear to you right so this is the way to do this thank you so much everyone for watching the complete video so if you're still watching this video that means you have loved our content and you have found it very valuable so if you're new to our Channel don't forget to hit the uh subscribe button and don't forget to press the Bell icon if you want to get a notification uh whenever we'll upload a new content and also if you have like this video do click on the like button and if you're new to our Channel and if you want to get all the updates whenever we will upload new video or whenever we'll add up a new content then in that case we have recently started a new WhatsApp Channel we have a telegram channel so all the links are given in the description below so you can check that and you can accordingly subscribe to that so that whenever we'll upload a new content you will get a notification and in fact you can connect back with us in case you are facing any difficulties in understanding any of the concept so that's all from my side for today so see you in the next video till then bye-bye and happy coding byebye

Channel: Innovate Yourself

Views: 1,288

Keywords: ESP IDF, ESP32, IoT web server, web server development, GET requests, POST requests, PUT requests, secure URL, Espressif IoT Development Framework, IoT projects, IoT tutorials, ESP IDF tutorial, ESP32 tutorial, ESP8266 tutorial, web server tutorial, IoT development, IoT programming, web server security, ESP IDF guide, web server setup, IoT interfaces, web-based interfaces, IoT web server tutorial, tech tutorials, programming tutorial, coding guide, Espressif tutorial

Id: Ey59rDrlODw

Length: 32min 7sec (1927 seconds)

Published: Thu Oct 26 2023