Creating an Android App to Control Nodemcu Wi-Fi Module | (Nodemcu is hotspot mode)

so hello guys welcome to this video so in today's quick video I'll be explaining you the Android app which we have just written using Android studio in order to communicate with this and all them to Wi-Fi model now as you can see right now we have this uh nodem's model which is connected to a 5 volt power supply which is a mobile phone charger and actually we have just programmed this nodem2 model using the Arduino idea and I'll be explaining explaining all the code later on so here we have just written this Android app as you can see in order to control this RGB LED now here as you can see we have this RGB LED which is connected to this nodemc wi-fi module and here in this program let's say in this communication in this Wireless communication we have this nodium module which is set up in the AP model meaning that access point or maybe let's say it's just a hotspot and then we just connect we will connect this mobile phone to this nodemus module which is set up as a hotspot so now let's say if I turn on my Wi-Fi we have a network as you can see this is the YouTube Wi-Fi app so this is the name of this wi-fi network which is set up by this node MC module so now as you can see this network is password protected and it depends on your preference if you want to set password or not so now here we have this uh I mean we have just established communication between this node MC model and Android app so what we are going to do is just we're gonna open this up and as you can see if I press this red as you can see the red LED will light up and if I agree if I press on the button called the green and as you can see here we have this green light which has just light lit up and then here when I as you might have noticed when I press on the different buttons we have this text which is changing so we are receiving this text from this no items to module and that's why when I press this red I'm sending red command to this not MC module so this knows them not himself module is set up in the hotspot mode and then this is somehow web server and now here our Android app is acting like the client and then we are sending this kind of HTTP request to the uh but to this wi-fi module and then we as a result we are receiving response from the server so here as you can see if I press different buttons we have this different responses accordingly or based on the request which we are making to this server from The Client app and then thus the server is responding back to this client which is the app here in our case so in The Following part I will be explaining all the code bit by bit so so guys now in this part I will be explaining you all the codes that we have that we have written in order to develop our Android app as well as the code which was written to program the nodium module so as you can see as I mentioned earlier we used the Arduino idea in order to kind of program our module which is called anonym so ASP 8266 and then here we have this Android Studio which we use for the development of the Android app and of course here we use the Java programming language and depending on your preference you can use any other language as such as kotlin so now we here we have the fully function Android app and I will be taking you through this all the code which we have written and also I will be explaining you all the code bit by bit which is written here in this and uh Arduino idea so now if you if you're already let's get underway now very first thing we did was uh we created the project called YouTube Wi-Fi app and of course as I said you can change the name of the project depending on your preference so this is the name which is gonna pop up uh as a Android application name and afterwards very first thing we did was just we uh what we did was we opened this manifest file and in the in the Manifest file so as you can see right here we gave all the necessary permissions since we are using the HTTP protocol to communicate with the Wi-Fi module we are using this internet permission and also we are using the Wi-Fi State and then change Wi-Fi State permissions because we will be sending the commands to the module another MC module via Wi-Fi network and then here once you are done with this permissions all you have to do is just you have to declare this uh Android the user's clear takes traffic so actually we are using this in order to send or communicate with only text messages in uh with the notem to module so now just in case you have to put it here so if you are sending only text Data here or textual data and then once you once you are done with this manifest file you are going to close this manifest file and the next we are what we are going to do is just we're gonna open this build a Gradle file and then here we will be declaring a couple of dependencies so here we will be actually if you want to establish communication between the Wi-Fi module and the Android app there are a bunch of protocols that you can use for instance TCP IP but here in this case we are only using HTTP protocol that is why in order to establish the HTTP communication between my Wi-Fi module and Android app we are using the dependency called the OK HTTP here as you can see we have declared this and then of course if you want you can just copy or just type it manually and then don't forget to sync this Gradle so I mean now right now in my case it has been already synced but if in your case if it's not sync all you have to do is just here you have to press on the sync Gradle which would appear here if this Gradle is unsynced now once we once we are done with Gradle file we are going to close this file and then here in the main activity dot XML file so basically this is the layout file as you can see we have three buttons and then apart from that we have this text view so we will be using this text view in order to print the response which we will be receiving from the nodium Su and as you probably noticed this is a two-way communication meaning that we are sending HTTP request or the string commands to the node M2 and then afterwards we are receiving the commands based thing we are receiving response based on the what kind of command we are sending to the No Name two so here as you can see button and then here we are using constraint layout and of course depending on your preference you can use any other layout so here we have this layout and after this one we have this red button so as you can see we have uh give ideas to buttons correspondingly and after this one we have this text txt so here and after this one we have this txt view but as you can see initially this is set to Invisible this is made invisible but once once we receive the response from the nodem so the response will be shown here and that meaning that this text view will be visible so just as you can see this is just a simple layout and of course if depending on your preference you can modify this layout just feel free to tweak the code uh depending on whatever you want and now in the main activity file so we have all the necessary libraries but we will not be going over them going over or I will not be taking you through these libraries since all of those libraries were imported automatically depending on what I was writing in this code and then here as you can see we are just declaring uh three buttons and then after this we have this txt response that's why it's it's like it I gave it name like txt res and then as you can see here we have buttons and then after this one we have this okay HTTP client as you can see we are initializing our client right here because we want this client to be visible in all this I'm an old I mean just uh in the code whatever we want that's why in order to make it public we declare this object here so as you can see we are creating new client object and after this one on create method in the oncreate method uh here now I want to draw your attention especially to this part of the code actually this part of the code is kind of serving a particular purpose because you know sometimes when whenever the Wi-Fi is on sorry whenever the internet or your your mobile data is on and then whenever you want to try the the try communicate with some other modules via Wi-Fi network and if the mobile phone detects that the Wi-Fi network has doesn't have any internet connectivity and in this case kinda it may not be able to communicate with the Wi-Fi network that's why in order to kind of force our mobile phone programmatically to send the commands regularly to the Wi-Fi module we are using this piece of code or maybe it's just a part of this code in order to kind of change and of course you can do this manually or you can do change this from the setting of your phone and then here right here as you can see we are just doing this programmatically meaning that we are only forcing our phone to communicate with the Wi-Fi regardless of whether this wi-fi network has the internet connectivity or not and after this one we are are just initializing all of those UI elements so if you remember we had three buttons as well as txt response and once we are done so as you can see we have this we we are on click listener we are implementing this on quickly Center method in order to perform a certain action when the button is pressed as you can see we have this three functions for the three different buttons so here uh BT and red means it means button red button green and then button blue and then we have the set on click listener and then if we continue here we have as you can see send command function as you can see and this function is inside the uh upcome app main activity uh inside the main activity and here we have the send the command and then uh we what we are the and then here uh we are gonna carry out the networking stuff in the another or the separate thread so that it does not interfere with the UI thread as you probably know the UI operation is carried out in the main thread and then sometimes if we carry out the networking thread kinda it may cause our application to freeze and apart from that the Android Studio doesn't run the code properly it will give us warning that's why we are carrying out all this operation I'm in the networking I'm sending the commands to we are just carrying out this in the background that's why as you can see here we have this new threat and then in the thread we are receiving this command and as you can see here this is the default address of the nodium to module so here our Northern module is set up in the access point mode it means that it serves as a hotspot mode and then the mobile phone will get connected to this to that Network created by the nodem2 and then in this case can the the phone will be server and now I'm sorry the phone will be climb climbed and then Northern two will be the server or will act as a server so now here as you can see we have this id address and then this is the default IP address and based on your preference if you want you can change this IP address to whatever you want so this is a default addresses default ID others as I mentioned and then here as you can see we are kind of creating the full command so as you can see so once we create the full command we will be having something like this okay so we will be having H HTTP colon and then double forward slash and then 192 168 for doubled and then as you can see something like this let's say if we send the green command we will be having something like this so this would be the full command sent to the northern Su and then in the northern this command will be kinda extracted from the full command and I will be coming to this in a moment when I'm explaining the full code written in the Arduino idea so now here as you can see we have the school command and after getting this full command actually I want to print the full command in the lock cut window and then if you're unsure about what if you are unsure what is the log cut Windows a lockout window is the here as you can see most of them will use this locket window in order to debug in purposes so I want to make sure that the command is sent successfully that's why I am printing the command as you can see here right here in order to check whether the command has been sent successfully or not and then here what we are going to do is just we are gonna make a new request as you can see for this we have this there are a new request object basically this request object can be found inside the OK HTTP Library so once you can import this library or once you add this dependency into build Gradle file you will be able to use all the functions included in the uh ok HTTP dependency so this is the request as you can see we are making a new request here and then request Builder and then here we have URL and then as a URL we are using this full command and then we are building this request okay once after maybe once building the request we are creating another response object so in the response object we will be and receiving the response which we will receive from the northern sub module so as you can see here this is a response and then in the response as you can see in the client object as you as you probably remember as you might have remembered so we declare the client object right here in order in order it to be visible uh in other parts of the program that's why it was declared here globally and then here we have this client and then in the client we are carrying out new call meaning that we are carrying out new requests so that based on this request we will be receiving this response and then after this one we are getting this response and then International we are getting the only the body of this response and we are storing it to this my response string value and my string variable and after that one let's say we will be having the response in some sort of weird format for instance it will include hashtags HTTP codes and something like this that's why in order to extract only pure response from the text which is sent by the from the response which is sent by the northern Su we are just carrying out this regression operation as you can see and then after this one we will be having only clean response and then in order to clean the clear response more clean in order to make the clean response more clean we are kind of eliminating all the unnecessary characters such as this new line character Carriage character and then as you can see empty space and apart from that here we have the another kind of top characters and then here we are just carrying out this we are using this stream function in order to eliminate unnecessary spaces maybe it can be in the beginning or it can be at the end of the I mean in the end of the string and then after this one we are just printing this response to the log window log cut window as I said this window is used for the debugging purposes and then so we want to make sure that we are receiving proper response from the nothing so and then once we got this clean response let's say from the northern Zoo what we are going to do is is just we are going to print this response in our text view which has the idea named txt rest and then here as you can see we have this run on UI thread so the reason why we are using this one on UI thread function is that basically now as you can see this all of this code is running in the background it's not in the main thread it means that in order to avoid the interference of this networking operation with the main activity or maybe let's say with the UI components UI operation we just uh carried out this in the background and then in order to print this directly I cannot kind of print this message to in the text uh text txt response because as you can see this is in the main background this is in the background thread and then this txt response is in the main thread that's why here we are just using this function run on the UI thread and then here we are just printing the message and then yeah that's it so here we are done with the send function and then here as you can see in this code let's say if this button red is pressed as you can see it's the set on click listener what we are going to do is just we are going to send the command which is called red and then the same applies to the other buttons as well I'm in the same method so here we will be using the set on click listener one more time and then in here as you can see we are just receiving the we are sending the green command and then after this one we are we have blue command so here once the blue button is pressed we will be sending the command blue to the nodemc model and based on the command received anonymity will carry our different operations so basically this is the code and then if I kind of run this app I I'm not entirely sure if it if it can run or not because here I don't have the uh Wi-Fi connected to this mobile phone and then here it was scanned this program was tested not in the emulator but we tested it in the real mobile phone so as you can see and then if we can run this code here as you can see we have this red button so as you can see we are not getting any response the reason is that we are not sending this commands to the any node MC Wi-Fi module which is connected to this mobile phone that is why we are not receiving any response but in here as you can see if we open this so as you can see we are getting the system error because we connection failed I think here we are not able to connect to our Network that is why we are getting this error so okay so now let me close this and let me close this and now if we move on to the Arduino part as you can see so here we have a couple of libraries which are included which are Incorporated in this project in this code and also I'm sure that you that you know how to include new libraries into your Arduino idea and then if you want if you are not familiar with how to do that just let me know in the comment section below and then it once we input once we incorporate these libraries as you can see we are just defining three variables as you can see correspondingly we are just declaring three variables which corresponds which correspond to the three LEDs available and as you can see we are just lighting up the LEDs with the non-empsey boards that's why we have this pins like D5 D6 and D7 and then these are the network credentials and here as I mentioned earlier this is the name of the network which our mobile phone will be connecting to so as I said in this case the no names you will be acting as a Wi-Fi hotspot mode mm in the hotspot mode meaning that all the other devices or it can be discovered it can be discovered by all other surrounding devices so that once you you establish communication between the Wi-Fi module and the mobile phone you can control this not M2 using the HTTP command so here this is the name of the Wi-Fi and this is the name of the candle this is the password credential so actually it is optional to use password or not and then basically depending on your preference if you want you can tweak the password as well as this name of the app and then I mean sorry name of the network and then here we have this uh serial so this is I think it's not necessary and then here as you can see we are establishing we are creating this access point access point means hotspot mode and then in the access point mode our nodemc will be acting as a kind of web server and the mobile phone will be acting as a client which will be connecting to the server and then it will communicate with the server with had both HTTP commands and then once Upon finishing upon setting up our Network as you can see here we have this access point started this will this message will be printed in the serial monitor so if you don't know how to open the serial monitor just you have this icon just tap on this and then you will be able to open the serial Monitor and then here we are printing the IP address and as I mentioned earlier the default IP address is 192.168.4.1 and then depending on your preference you will be changing this default IP address and then if you are not familiar with how to change the default IP address of the Wi-Fi module just do let me know in the comment section below and I will be making another tutorial where I will be explaining how you can change the credentials or the as well as the IP address of the northern sub module and then here we are just declaring these LEDs as an output and then here initially we are just turning off the three available LEDs and then here what we are going to do is just we are going to declare a new string value called the string variable called all commands so we will be using this later on I will be explaining this and then as you can see here Wi-Fi client we are just creating new client object from the server as you can see here we have this uh server I think okay yeah as you can see here we are Bas declaring the server and then we are just receiving we are creating new client if the client is available meaning that if the client is connected to the server in this case we are receiving the request from the coming from the client and then if the client is we here we are just carrying out a couple of conditions as you can see firstly if the client is connected as well as the client is available what we are what we are going to do is just we are going to read the characters one by one because the okay all of the commands are sent by uh some characters and then once you can they collect all of those characters you will be able to have the whole string and here as you can see we are just Gathering all the commands and then here uh once we reach the end of the line we are gonna print the request so this is the request uh sent by the Android app and then after receiving the after printing the request here as you can see we are just as I said uh it is not going to be the pure response let's say if we send or if we press on the green button this is not going to be green instead in order to get the pure command what we have to do is just we have to create we have to carry a certain operations so here as you can see we are just uh extracting the pure command now and after extracting in the pure command here as you can see we are just eliminating all the other unnecessary characters like from the string in a nutshell we are just purifying our string here as you can see we are just eliminating these end lines and then just empty spaces top characters and then once we reset the command we are just printing this command in the serial Monitor and then after this one we are just storing this command as you can see we declare the variable string variable called the old command and then here in the old command we are just kind of storing this command let's say if we receive this red and then in this case if this is this is going to be red Plus on in this case we will have this text something like something like this so red is on and then if the command is green we will see we will be saying green is on and then something like this so and then after the this and then after this based on the commands received from the Android app let's say if the command this command equals red let's say means meaning that we if we are receiving the red command we are going to turn on the red LED and then we are going to turn off the remaining ones so and then the same applies uh to other uh brackets of the codes I mean those are parts of the codes for instance if we receive the green we are going to turn on the green light and then we are going to turn off the other parts and then if we receive the blue and then here we are going to turn on the blue light while we keep the other remaining LEDs off and then here as you can see if we can reach the peak I mean the end of the line as you can see we are going to send the response and here in the all commands as you can see and then now as you can see here we are just sending the response with HTML format in HTML format that's why in our Android app we carry down some purification stuff and then stuff and then here we are sending this all command so here we as you can see client.creenline and then command we start so this is it basically we are sending the command as I said if we receive the red we are going to send this red is on if you receive the blue blue is on so guys this this is basically a two-way communication between the Android app as well as in the uh nodium so Wi-Fi module and in this communication now them so module is set up in hotspot mode meaning that this network or the network created by the northern suit can be discovered by other surrounding devices which has the Wi-Fi capabilities and then uh so yeah basically that's it and I will be providing the full code in the GitHub repository and then if there is something that you don't understand please kindly let me know in the comment section below and I will be glad to help you thank you [Music] [Music] thank you [Music]

Channel: Farm Boy Tech

Views: 9,874

Keywords: wireless communication with app, wifiapp, two way communication, wifi (Nodemcu ) in hotspot mode, java android, wifi app, How to Make a Simple App--[NodeMCU-ESP8266], Android App For NodeMCU (ESP8266) Controlling (IoT), Android Studio, Arduino IDE, Easy to own a WiFi Network using NodeMCU, Nodemcu ESP8266 Starting Guide, android networking app, Mobile Phone ESP8266 Wi-Fi Control Arduino, WiFiManager with ESP32, communication between android app and wifi

Id: 8gGgsMe5dKQ

Length: 25min 33sec (1533 seconds)

Published: Wed Aug 23 2023