ESP8266 Sensors Hub Accessible Worldwide #ElecrowMaker

hey magicians welcome again in today's live session first let me quickly see if i'm live if i'm live then yes okay i'm live now so okay we can start uh this session now welcome iot magicians in today's very exciting session so you are seeing i have esp8266 today and in this session we are going to make this esp32 at the sensors hub but you are seeing there is no sensors inside nearby there yes i am not using any real sensors today just i am going to show you how we can convert this esp32 as a sensors hub and for the shake of today's project and session i will be sending some random data but if you wish you can connect the real sensor to this so once it will be converted to the sensors hub then you can access your esp30 esp8266 board from anywhere in the world okay so first let me show you uh what we are going to have after the session means now what will be the outcome of the session what are the results of this session and then we'll uh go into the details and understand that how do we do that okay so let me share my screen with you first okay so here is my screen so you are seeing my screen and you are seeing i have a program here sensors hub get api so this will be the program which we will be going through today and i will go into details of this program and how do we convert our esp to sensors hub and this will be and let me show you my web server local web server where i have so this is hd docs for me and this this is the location for my local web server and let me open this file which will be the web server file the main file image sensors.html and i am already running web server on my local so i can go here and let me first go through the local host and then i will go to the general url which you can access from anywhere in the world so inside this i have image user and inside this i have the file i am at sensors.html so this will be the url for me to access uh the web dashboard which you are seeing here which is directly served by our esp ah the data will be served by esp as soon as we click on the start receiving data so first let's click on that so as soon as you click it click this you are seeing you are getting some data sensor 1 is 24 which is the temperature equivalent temperature sensor sensor 2 is the switch on off and sensor 3 is the brightness representing the brightness sensor 4 represents any message any random message that you are receiving and the last sensor sensor 5 is some analog value that you are receiving and you are seeing these values are getting refreshed e after every 10 seconds so you are seeing now and here are the visual representation and if you want to stop this receiving data you can just click on this stop receiving it will be stopped so you are seeing every after 10 seconds our data is getting changed and it is shown here on the dashboard so this is uh about my local server i am accessing my server through localhost so now if you want to access it from outside my home network so for that i have this url don't worry about this url i will go into details how do we get this url and then how do we use this url to access my local uh host so you will copy this url and let me open to another web browser and inside this if i will put this uh url which is a global url you can access this url from anywhere in the world and then i can directly give the location of my html file which is stored in my local server so it is inside image user as as i shown you image user and inside this i have i am with sensor.html so this is now this will become the url to access my webpage from anywhere in the world so if i go and use this so you are seeing uh using this url it is also opening the same local page where which i was able to open from my localhost so you can access this link from anywhere in the world and you can see this dashboard okay let now let's see whether we get the data from our esp or not so you will click on this start receiving data yes great you can see that i have already started getting data for all these five sensors so sensor one is giving seven degree sensor two is off sensor three it's 65 sensor 4 is having some message and sensor 5 is 2.97 and all these values will be changed each and every 10 seconds so you are seeing after every 10 seconds this these values are getting changed and all these values in my dashboard are received from our esp directly and remember this esp is connecting locally to my local server and you are able to now access my local web server from anywhere in the world so this is the technique that we are going to use today so let's get started uh guys hope you will enjoy this session and keep uh till the end of this session because you will be knowing some secrets and you will be knowing how do we do that so okay without wasting any further time uh let me quickly start the session okay i will close all these web urls and i will simply open our well known document so where i have given all the information how do we do that i have explained it uh in this eight pages of document so this document is the aim of the session aim of the project is we need to convert our esp8266 as a sensors hub that could be accessed from anywhere in the world so this esp will work as a sensor hub as you saw we are receiving five sensor values from our esp though i have not connected the real sensors this is just a prototype or the suggested demo that we can send five different values from this esp to our local server and then those values can be accessed from anywhere in the world okay before going uh today's session i have couple of assumption let's see what the assumption is so first assumption is you have installed a web server in your laptop and you are able to serve html pages through your local web server so in your laptop you should already have a web server running so that your esp can contact to your local web server okay so this esp will contact to the local web server and then we will connect from outside to our local web server this is how uh the total architecture is defined in today's session okay so let me quickly show you uh where i have defined my web server and where is the directory of my web server i have installed xampp in my laptop and this lamp will act as a web server for me okay so let me just show you so inside e i have installed xampp here as you see and inside exams all the files will be inside htdocs folder and this folder or all these files will be accessible uh when this web server will work okay so let's try to uh just see just try to [Music] local being my local host simply if you write localhost here let's see whether my local host is working or not up and running or not so as soon as you will click localhost so you should be seeing this php page means my web server is able to serve pages uh to any client connected okay so now my it means my local web server is up and running and it is able to serve the pages as well so this is the very basic assumptions that i am going to make over here again note in this project we are not connecting any real sensors we are simply using some random data to send from our esp and show them on a web dashboard if you wish you can connect the real sensors also okay so now how do we create or how do we connect our local web server from outside world or from outside our home network for that we are going to use a service an application or you can say an application um which is called and grock whether you call it and croc or you call it ng rock you can say it by any name so the service application is ng rock so to access so today let's let's learn how ngrok enables us to access our local web server from anywhere in the world to access our esp8266 from outside our home network we will use and grok service and rock it is a cross platform application that enables developers to expose a local development server to the internet with minimal effort okay so this application or this service actually enables us to expose our local web server to the internet this software makes you locally hosted web server appear to be hosted on a sub domain of android.com so in that case my local web server it will be hosted on ngrok and then from there it can be easily accessible from anywhere in the world so this is how this and block service works there there is no public ip or domain name on the local machine is needed so we don't require any domain name we don't require any machine name or anything like that in order to access our local web server so we will simply use and rock service okay so one thing is clear now you know how do we do that so we will do it using androx service or android application or ncoc software whatever you call so now let us see how do we do that so to use and crop we first need to open an account with ngrok.com so you need to go to their website and drop.com and go there and you create your own account there so creating account is pretty straightforward there is nothing much information needed just you need to provide your email id and passwords so it will set up or you can use your existing google account or gmail account uh to log into and rock okay so once you log into your ngrok account you will be presented as a and block dashboard will be there for you [Music] and from there you can download by clicking on download for windows button so if you are using windows you can download the android application and growth software from their uh dashboard so if you will open the dashboard dashboard will look like something like this and inside this you will be having a button called download for windows and below this you will be having an option for downloading for mac also so whatever you you have in your whatever operating system you have you can download you just click on this it will download and rock as a zip file for windows users but for mac users you can directly install it using a command line that command will be present given in the same dashboard so what command you have to execute in order to install in your mac machine but since i have the windows machine so i will get a zip file so what you have to do you have to download the zip file and then you have to just unzip it and inside this you will see there is a file only one executable file will be there inside the gym which is called and grock dot exe you can keep it inside your any working location wherever you want because this is the executable file which will execute to create to enable our laptop to be accessible from anywhere in the world so okay so once uh you have extracted ngrok.exe and you should keep it inside any working location let me show you where i have kept my n grock so i have kept it inside e drive and inside this i have installations and inside installations i have kept this and drop file here you can see so you in my file inside e installations okay so then what is the next step next step is we will need to add the location of ngrok.exe file to our path variable so whatever location you have chosen for your android.exe you have to pro sorry you have to add this location to your path variable in your environment variable okay path environment variable so you can just copy this location from here and you can go to and search here for your environment variables you can edit those and environment variable just go to here and path and just edit it and you can just simply make a new and just add it there so you are seeing i have already added e installations over there okay this is okay so i think i am back now because i my power has gone uh and uh i think i am connected back to the internet let me just quickly check if i am still i if i'm live yes okay i am still live so let me continue so the location where you have uh kept your penrog.exe file that location you have uh given in your path environment variable so this is pretty straightforward nothing much there's no much difficulty in this once you have done that we can proceed now uh we have to go to and drop dashboard again and copy the auth token command as below so one when you will go to your dashboard you will see a screen like this at the dashboard itself where it will say connect your account and there will be one command given [Music] there so you have to just copy this entire command from ngrok auth token and there will be a token so you have to copy this entire command and you have to open the command prompt and run the command as you have just copied from this so this command you have to run in inside your command from so as soon as you will uh execute this command your auth token will be saved inside your configuration file and grog.yml so this is this is the step these are the steps that we need to do on local machines so so these are the steps simple steps easy steps hope these are clear to you so once you have done all these steps you are good to go ahead the web command will grant you access more features and longer session times remember that ngrok has free services as well as the paid services so in free services if you are if you are having free account with ngrok then there are some limitations but those limitations are okay for us now because we are not going beyond uh what they are providing us as a free account those will be sufficient for us but yeah definitely you can look into some paid plans also if you are if you need some more features that they are providing so congratulations you have successfully configured and downloaded installed your ngrok in your laptop and now we are ready to move ahead so what we have done let me quickly recap we have installed and rock in our system in our windows machine or the mac machine and we have successfully saved the configuration file the auth token configuration file by running a command which is given in our uh and drop dashboard so this is the thing that we have done so far so far so good okay so okay so looks like my uh power has come and let me quickly switch to nether network wi-fi network i'm just quickly switching to my another wi-fi network get some disconnection but it should be connected yes i am connected back hope uh you are still there with me let me quickly check if i am live again yes okay so looks like i am back again with my new wi-fi connection okay so far so good we have a running web server in our local machine we have ngrok installed and configured properly okay so now kindly follow the below steps for final implementation what do we have to do now now we have to make a program uh we have to install a program in our esp that will make our esp as a sensors hub and then we will use that sensor hub you will connect and we will get the data from that sensor hub using our android service okay so for that step number one we have to follow yeah just follow this document step by step it will be easier for you to follow this document all the screenshots are there and very easy to follow so you have to first place below libraries inside your sketch location so you need esp async tcp you need esp async web server and you need arduino json these three libraries you require in order to work in this project so if you don't have these libraries you can directly get these libraries from the github internet or you ask me i will provide you all lists uh so that you can use this in your project so these three libraries you have to put inside your sketch library folder let me show you so my sketch library folder is you already know where my sketch library folder is so this is these are the sketch folder which i have in my system and this is the library folder where i keep all my libraries which i install manually so you are seeing these three libraries arduino json so here you are seeing i have arduino json here and esp async tcp and esp let me show you these two so we have these three files arduino json esp async tcp and esp async web server so these are three libraries that you require and you need to keep it inside your sketch folders library location okay so far so good nothing difficulty no easy to follow and if still you have any issues any problem let me know in the comments of this video or ask me in my facebook group or directly connect to my whatsapp the number has already given in the description of this video please go there and connect to me i can help you so next step is we need to open arduino ide we need to connect our esp8266 to our laptop and then we need to identify the com port mine is com4 yes and you have to open the i don't know ide i have opened it then you have to connect your esp8266 to your laptop i have connected and you need to know the port for this for me if the port is com4 okay so once you have done that you need to now select the board as general esp8266 module or whatever esp8266 module you have you need to select that and select the com port as whatever your component is from arduino ide so i will go here from the board from tool from the board and from a to double six boards i will select the board which i have so whatever board you have whatever flavor of the board you have for your esp8206 you need to select it for me it is a generic generic esp8266 so this is the one which i have i will select it and then you have to select the port also so here sorry so here you will go here to the port and select the port which is com for for me okay so next you need to copy the code so this is the means main step so this is the this is the code that you need to have so where you will get this code yes i will give you this code ask me for this code i will provide you ask me in the comment section or connect to me to my facebook group or let me know in my whatsapp the number is there in the description of this video and i will provide you this code and i will walk you through with this code also so what this code is doing at very high level not into detail but yeah still i will give you enough information so that you will have an idea what i have done inside this code so you'll have to just copy this code and you need to just change the wi-fi credentials in that program and you need to just save it okay so just first let me show you and let me walk you through this code what i have done inside this code so that you will have an idea uh what this code is doing so this is the code esp8266 answers hub of guide api so first thing first i have included some required header files which you need so these are the three libraries these are the three libraries which i was mentioning that you need to have and this is the esp wi-fi library and now we have defined couple of uh macros that will be used in our program one is the api key this api key is to make sure that authenticated person or the request is coming from an authenticated source okay and uh the query parameter one and the query parameter two so these are the get query parameters that will be using one for api and another for what type of sensor we need so here if you will see our get request will be in this can be in this form so you can have get sensor and the query parameter can be type equal to sensor 1 and api equal to the api key or you can have type equal to sensor 2 and the api key or you can have type equal to sensor three so if you need all these five sensors in one go so you can use this get url where you have type equals to all and api equals to the api key so you can use these get urls and fetch the sensor data so okay so next here you have to provide your wi-fi credentials you can use your wi-fi credentials over here just change these values and now here we are creating a web server uh object and the response object here and some temporary holders to hold some values so the first function is the uh initialization of our wi-fi so here we are connecting we are checking whether we are connected or not and then if not we are trying to connect to our wi-fi this is quite straightforward then we have five pro five functions to return the sensor values as you see the sensor 1 is just returning some random value so here as i already informed you i have not connected to the actual sensors i am just returning some random values for each sensor so sensor 1 is returning some value between 0 to 50. so i'm just considering as a temperature the sensor 2 is just returning some on and off value the sensor 3 is giving me some brightness value some any random brightness value between 0 to 100 similarly the sensor 4 which will work as a message sensor and it will send any random message any random string to to us and last sensor the sensor 5 it is sending any random analog value between 0 to 5. so this is how i have just created five random functions files and random functions to to receive the sensor values so you can here if you want to connect your own sensors you just need to provide correct values and you should return the respective current current correct values of the sensors inside this program inside these functions okay so next we have a function build response header so this um build response header function especially i have created to handle the cors i'm not sure whether you are aware of for what the co is and why do we need to handle it yeah so let me give you a high level idea whenever you are doing any cross domain calls cross domain requests so in that case we need to handle the course uh the response headers in such a way so that the client will be compatible or the client can understand like yeah this request i can i can send and i can receive the response if you are not handling uh properly handling the response headers then chances are there that your client will reject and will not accept the response so this is just for that purpose and now in our setup function we are just starting the serial monitor and then i'm initiating wi-fi here and this is the step the first step is server.on so here i am preparing my server for any uh request that is coming on the road so any route request if it is coming i am not interested in handling the route i am not interested actually in giving a good response or okay response for the root because i just want to handle this request which are in this form as you are seeing here my get request should be in this form okay so if my get request is coming in any other form than this then i am going to simply i am going to reject it and i am going to send a response saying that the result is not okay because you have not send a proper card request okay so this is what i have done inside server.on uh when i am going to handle the root request here so you are seeing when a root request root http get request will come i am simply sending status as not okay and i will send a message saying this is not a proper parameterized get request okay so um if you get a request called get sensor so now uh this is the correct get request that is coming correct form because as you are seeing my get request form should be coming in this format get sensors and then it should have two query parameters one is type and another is api so this is the format for my get request other than this all the incoming get request i am simply going to reject so okay so like i have rejected the root request then here i am handling and the okay request so if my request get request is coming on get sensor so okay i am okay for that and then inside that now i will make sure that i have a proper uh query parameters there with the cat request so i must have type and api these two query parameters must be there so this is how i am checking it query parameter 2 checking if it is okay then fine and if it is okay then i will go inside and then i will check for another query parameter where a parameter one so but if in case i don't have the query parameter inside this then you will see simply see that the else part will come into picture and then it will send a response saying not okay i have not supplied the proper api key correct i hope you are getting this sneak bit and it's not difficult similarly for query parameter one means type if i am missing if i am having the type then it will go inside this if if condition otherwise it will come to this else portion where i will simply send a require response saying not okay and the message will say invalid get parameter sensor type is missing so we have not provided the type okay so far so good so i'll come inside this and here if my all the both i have both the query parameters then i am simply assigning and the api key value i am i'm getting the api key value from the address the getter and the uh query parameter and storing into some variable and then i mean i am comparing that api key with the standard api key here so if the kpi key matches then i can i will go inside otherwise if api key will not match i will send a response saying not okay as the status and the result will be image api key mismatch okay so far so good so there should not be any difficulty now inside this i am sending uh the response i am creating the response message actually uh for if everything goes okay so here now i am checking if my uh type is all all type then i am sending all sensor values if my uh type is a sensor one then in that case i will only send sensor one value similarly if the sensor type is sensor 2 then i will send only sensor 2 value similarly if the type is sensor 3 i will send only sensor 3 value and if the type is sensor 4 i will only send the sensor 4 and if the sensor type is sensor 5 i will send only send the sensor 5 value so you are seeing based on the type of the type of the request if whatever i have given uh in the query parameter type which whatever we are providing in the get request as per that we will receive a response the finally once the request has been prepared the message has been prepared you are seeing i am sending a response with uh with code 200 and with the result okay and finally i am handling for not found also so if uh any request that comes which is neither a root request nor again or uh get sensor request apart from that all other the request will will fall under or is not found and inside this i will simply send 404 and i will send a status as not okay and the message has the requested url not supported by image okay so that's it now finally here i begin the server so these all things i am doing inside the setup function as you are seeing here right so once i have started the server then you are seeing the loop is simply infinitely running so this is how i have created this basic uh sensors hub code hope you understood this code and if you still have any issues if you find any doubt on this just let me know i'll be able to explain it and i'll be happy to help you so now what do we do after we have pasted the code here let's go to the document now upload this code to your esp and click the upload button okay so now our task is to upload this code in our esp so let's do that so you will have to click on this upload button so this when you will click this first it will compile the code as you are seeing here the compilation is in progress and once the compilation is done it will start uploading the code yes it has compiled successfully and now it is uploading and as you are seeing it is writing this code in our esp e26 50 is done uploading done so now 75 uploading is done and now 90 uploading is done and finally our the entire upload is done so you are seeing data upload is done now we can after upload now you have to open the serial monitor and press the reset button on your esp to re-execute the code okay let's do that so you will go here you will open the serial monitor and you will press the reset button i will press the reset button so when you will press the reset button here it will try to connect to the wi-fi and i'm trying to connect to the wi-fi and you are seeing that i have got the wi-fi i have got the ip and my esp has been connected to my wi-fi at this ip address okay so so far so good there is no much difficulty there is nothing much uh required at this point now let's go ahead and follow the document now so once you have got the ip address of your esp what do we do with that you have to go inside the working directory of your web server mine is as i showed you mine was exam htdocs imx user and you have to place below seven files there so definitely now we are going to develop our dashboard right so how do we create our dashboard so you don't need to create the dashboard i am going to provide you so i already have prepared the dashboard and all the necessary coding for that is already done you don't need to change anything over there except one place i will show you what you have to do so what you do first you go to your web server location and this location can be anywhere in your system and then you have to paste these below files so these are the files which you have to keep inside your local server so let me just show you my location so if you go here mine is exam and htdocs and inside this i have image user so this is my working location which is what which is the location i am using for this session for this project and i have kept all these seven files inside my local web server okay so so far so good no in no confusion no doubts so what you have to do now you have to open imf sensors.html file in a web editor any any editor either you can use a notepad or any web editor you can open it because you have to change one look one place in this file what do what the changes we have to do you open it and you need to provide the ip address of your esp8266 inside the ajax call so when you will open this file in an editor so a near around line number 70 you will see there is an ajax call and near around line number 72 let me specify that so nearby around line number 72 there is a ip address so this ip address is the ip address of your esp82 so because my web server is going to contact to the esp now my website the code this html code which we have i have written this html code will send a get request to our esp correct in that case we need the ip address of our esp so this is the ip address that you have to provide here in this code so let me open it and show you where do we do that so this is the html i will open this html in notepad plus plus and inside this you will scroll down and there by line number 72 you are seeing this is the uh url you don't need to change anything on this url except this ip address just need to change the ip address and replace this ip address with your esp8266 ip address so i have my ip address that used as you already seen in this serial monitor the ip address is showing as 192 168 1.19 so the same ipad as i have provided here so that's it this is the only change that you have to do in this html okay so i i yeah i suggest you one thing because uh if you are connecting your esp to the wi-fi so it it may possible that next time when you connect it it may get some different ip right because of some dhcp configuration for your of your router so if you want that your esp should get uh a specific ip address all the times then you need to do such kind of configuration in your router you can fix the ip address of this esp in your router so that whenever this will be connected to your router it will always get the same ip address so which the configuration which i have already done in my uh home router so whenever i will compile this whenever i will connect this esp to my wi-fi i will always get ip address as 192.168.1.19 so always i will get this ip address so you can also do that because so that you don't need to modify this html all the times whenever you are wi-fi whenever your esp ip address is getting changed so you don't need to change it all the time there so one time changes is done so let me now uh close it so once you have done the changes here so that's all these are the only changes required now we should be good to go okay so now what do we do what do we do next so far let me recap what we have done we have installed and brock we have configured and android and grock in our laptop um with auth token we have written a program and already installed that uploaded that program in our esp so that's it and we have changed our web server program so that it can connect to my esp by giving proper ip address inside the html file image sensors dot html inside this html file this is the these are the things that we have done so far so now let's uh follow another command okay so let me show before proceeding let me quickly show you the response that you are getting you will get from your esp let's see whether it is working or not right before uh actually uh seeing that in our web dashboard let's see from our browser itself so this is the url that you can directly copy and you can use in your web browser so you'll open your web browser so whenever you will paste this url over here so you are sending a get request to your esp okay with type as sensor one and api key as the api key which your esp knows okay so let me try to hit that and see what response i get so you are seeing i am getting a response saying status okay and i am getting a message saying sensor 144 because i am asking for the sensor one so here if you change sensor 1 to the sensor 2 and you will hit then you will see that you are getting a response saying status is ok and the message is censored to and off so it means my esp is properly responding to the get request which i am sending from my web browser let's try to send type as all and see what information i get as i have already explained if you will send type query parameter as a value all in the case you will get all the sensor values in one shot let's see so you are seeing that i am getting a status as okay and the messages as sensor 128 sensor 2 off sensor 345 sensor 4 some message and sensor 5 is some analog value right so this is how i am able to get response from esp8266 now let's try to send some long values or some different values which are not expected let me first try to send some wrong api key so i'm just sending some random api keys okay so if i go with this some wrong api keys so you will see that i will get status not okay and my api key mismatch okay so now let's try to send try to omit the type here let me try to omit everything just try to use only get sensor let's see what i get so here you are seeing a messages not okay image api key not found correct so let's try to send okay so okay means uh my uh esp8266 is working as expected if you will directly send this means like if you will go for the root uh page let's see what it says it says not okay again because this is not a proper parameterized get request so you are seeing my esp8266 is only responding as a status okay only for those where i am sending get sensors with correct type as well as the correct api key so it means now my sensor is ready to serve to the outside world but so far i have shown you only in the local soon we will see how do we connect it to our outside world so for that let's follow the document now uh once we are sure like our esp is working okay it is responding properly my local web server is up and running and it is responding uh properly from localhost so now is the time to expose our local web server to the to outside world so that i can use it from anywhere in the world so what do we do that so for that you need to open a command prompt and you need to execute the below command to start and grop application remember we had already installed ngrok and we had given the path of this analog.exe we have stored it in our environment variable remember so now we have to execute this command in a command prompt let me open a command prompt here and i will copy this command first let me copy it and you can simply paste the command over here so let me show you what do we get as soon as i press enter [Music] voila so you are seeing i get some interesting uh thing over here so you are seeing first of all you it is showing now the account holder name it's about the plan i have the free plan the version which i have and the region where i have uh get this registered and it is saying that i have got a web interface running on this port and the two important urls which you are seeing here uh http and some numbers some alphanumeric numbers then and grogg.io this is the one url and the same url but with https okay so as you are seeing the first url http url it is pointing to localhost 80 so this is the key here this is how our androg is working actually whenever you will go with this url this link this link will automatically forward all the requests to my local web server which is running at port 80. i hope now you got it how ngrok is going to connect me from outside to my local host so let me try to give you a demo of that so let me just copy this first so this url and i will copy it let me keep it keep this url somewhere here so i had copied it in the notepad i'll copy it and if you will go here let me open another web browser if you will go here and you will press enter then what will happen it will and grog will route me to my localhost so it will show my the index page which is hosted on my local server so let's see whether i get that or not first so when you will go with this you are voila so you are seeing that uh using this link uh it is already showing me the same webpage which it i was showing through my local host so let me show you my localhost again so if i go to localhost you are seeing and the localhost page and this url page both are showing me the same information means both are using the same html or php file which is located there so it means uh ngrok is properly redirecting all the requests which are coming on this url it is automatically converting it is always automatically forwarding all these requests to my local host running airport et okay so so far so good so if you are able to do that you should be getting some url like this note down the forwarding url so you need to now note down the forwarding url which is there for you so you will be having two forwarding url one with http and the same url will have will be there as https also okay so now what you can do as i already showed you the url is actually pointing to our localhost at port 80 that means if we access the url this url from anywhere in the world then ngrok will redirect the request to our web server as i already explained you and also remember that every time you will run the androg service you will get a new forwarding url remember this you are not going to get a fix forwarding url but if you want to have if you want to get the fixed fixed uh forwarding url for that you need to purchase there paid plans so you can go there those are not a very costly plan so you can just go and read their website where they are providing these plans and you can choose as per your requirement where you can have the fixed uh you know domain name or forwarding url which you can use in your all the projects but in my case i am okay with the keep on changing uh the url which is keep on changing i am i'm okay with that so okay now congratulations we are able to access our local web server from outside uh our home network great achievement okay sometimes what happens if you are executing the command ngrok http so you are seeing and rock is already running as you are seeing here the status is online right but if you will open another command window and you will again try to execute the command ngrok http 80 it will give you an error message let me try to show you so if i'll go here and i will open again and if i will write the command again http so you will see i will get an error message your account ravi is limited to one simultaneous and rock client session so this is the free plan since this is the free plan in free plan i cannot run more than one and grog session at a time so one session if it's already running you cannot run one more session [Music] okay but if you have purchased their paid plans in those plans they have they are providing that you can run more than one and drop client sessions okay so this is just for your information purpose one more information i would like to share with you here so if you are you have got uh the forwarding urls so far so good and you are seeing there is one web interface also you are seeing so if you will go to this uh url web interface url then you will see a web interface which ngrok is providing you and it will show you all the requests responses the status of the n rock session all this information and the forwarding url information all these things will be there in that page so let me just try to show you that as well then we'll proceed so if we copy this url and it will go here let me go and open in the browser and if you go to this location so here you are seeing this is the page which is the interface page coming from our ngrok and here inside this status if you will go here so here you will you can see all the metrics all the configuration all the tunnels that have been opened for us so you are seeing two tunnels have been opened means two forwarding urls we have received one is http and another is down below if you should be yeah so one is https and another is http so these are the two tunnels that they have open for us and you can see all the requests that are coming all now what is the duration of those http requests what are what all connections are currently how many clients are currently connected so all this information that you can get from your uh this dashboard okay but um this was just for your information and nothing much that i am going to do on this so i can close it safely so okay so this is the same thing which i am explaining here in this document also so now we will open our web dashboard so magicians get ready for the final result you were waiting for since long and now we are ready to open our web dashboard from anywhere in the world but before that before opening uh to the uh before opening using the worldwide url let me open it using my local [Music] url so if it is working with the local url then i will go ahead with the global url okay so you will go here as you know my local page is inside localhost slash you know it is image user slash yes this this is the file image sensors.html so this is my local web server html page which will serve which will give us the web interface of our let me try to minimize it so that you can see it properly hope you are able to see it now properly okay so okay and if you will click on start receiving data then you will see that i have started receiving data from my esp but remember i have connect i'm connected locally from my web server to the esp so this is the just local connection now let's go ahead and try with the global url so what do we do next so whatever forwarding url you had received you have to just use that forwarding url and then after that the the entire path of your html file which you are going or with the the file which is showing the dashboard okay so as i already copied so here this was the forwarding url i had copied and after this i will simply use my simply use the path of the html file which i want so okay my html file path is this so now this will become my url which i can access from anywhere in the world so let me copy this and let me go to the browser close this let me first try to stop it and then i can close this and here now i can simply give this url remember the starting domain it will be the forwarding url and after that it will be the location where your web file is okay so i will go ahead and voila so you are seeing that now i am able to use my web dashboard from anywhere in the world so now if you click on start receiving data let me try to click on that great so here now i am able to receive data from our esp and this url you can use this url from anywhere in the world and now each and every 10 seconds you are seeing the data is being updated on my dashboard and this data is directly coming from my esp which is locally connected to my local web server and and grog is running on my local web server and using that and rock service i am able to connect to my local web server from anywhere in the world so okay magician so that's it for this session hope you enjoyed the session and you got it and the information that i provided you in today's session that was helpful for you and hope you will implement it and if you face any difficulty on this let me know i will help you on that if you need this document on the code or need any help on the code let me know in my facebook group or connect to me to the whatsapp uh already my number is already there uh in the description of this video or you just comment under another comment comment me under this video so that i can contact you back so okay that's it magician so let me stop sharing for the day and i will try to end this meeting have a nice time magicians take care of yourself and keep

Channel: IMH Videos

Views: 87

Keywords: IOT, Raspberry Pi, IOT Course, Online IOT projects, Amazon AWS IOT, MQTT IOT, Wireless IOT, XBEE, Home Automation, Learn IOT Online, firebase, Realtime database, ESP8266, ESP32, Micropython, IoT Core, Webserver, ESP Webserver, Telegram, BOT, Telegram Bot, Amazon Voice Service, Smart Home Skill, Amazon Alexa, SPIFFS, ESP Filesystem, ESP FileSystem Uploader, ESP32FS, Interrupts, PIR Sensor Motion, PIR, ESP NOW, ESP 2 Way communication, CloudWatch, IoT Rule Engine, WiFiManager

Id: wDG8JdyU_uk

Length: 57min 7sec (3427 seconds)

Published: Fri Aug 13 2021