How to Make a Simple App--[NodeMCU-ESP8266] -PART1

so on today's project we'll be showing you how to make an app that connects to the node mcu and it toggles the red led that's on board of the node ncu [Music] all right so the first thing that you're gonna do is you're gonna go over to google and type in mit app inventor and this is geared more towards uh android phones but if you have an iphone you can just follow these simple instructions here basically just download another app which allows you to to view uh mit app inventor in that environment and it's after that it's just all the other steps are the same but um assuming that you have an old android phone or you have an android you just follow the steps uh the mit app inventors you can use your email in order to log in and create an account and then you just have all your projects just like i have them here so then after that you're just going to create a new project so let's do that and this one we're going to call it um i don't know let's see we can call it led uh let's call it actually let's call it wi-fi led wi-fi led let's press ok you cannot have any spaces so it has to be with that underscore there so then wi-fi led should open alrighty so now that we have here a blank screen if this is your first time using uh app inventor i'll go over a little bit there's a lot better uh tutorials on youtube that you can find but essentially you'll be greeted with this and it's just a blank screen here and there their whole thing is that you can just drag and drop whatever you need right so the first thing we're going to do is we're going to go to the layout tab and we're going to drag a horizontal arrangement and this would allow us to put user interface things in it and one thing that we're gonna need is a button we're actually gonna need uh two buttons right because we wanna turn the led on and off and as you can see it snaps into that same horizontal arrangement so you can kind of drop it in there and and then after that we're also going to need a label so i want to show some instructions because you do have to connect to a hotspot uh that's going to be generated by the esp8266 so this label all it's going to say is and let's actually encapsulate it in one of those horizontal layouts so you just drop it there and then you can just drag that in there and what you do is you come on this side here and you can just say with fill parent right press ok and then you press on the label itself because that just made the horizontal arrangement fit the whole entire phone right so now you press the label itself and you put with you can put fill parent and now that just fits the whole thing so now you can actually center it and it'll center there we can change that text to say um something like connect to hotspot so the first time you open this up you're going to read connect to hotspot so it's somewhat of a reminder of don't forget to to go ahead and set that up on your phone right and uh we can actually uh change these guys here so let's also do a fill parent for the for the horizontal arrangement and then on button one we can do a fit uh actually let's let's make the height a little bigger so let's do uh 50 on the horizontal arrangement yeah let's do like fifty percent of the screen so oh look at that i was clicking on the wrong one it it doesn't matter because you can still fix it so 50 of the screen there you go and now this other button will also have a height of uh 50 now you can mess around with this uh this is just so that it's nice and visible and uh now you see how they're all like squished on top of each other this is because we haven't set the width so you click on button one and you put fill parent and it's gonna push this guy and button two feel parent and he's gonna push back equally so now they're both the same the same width and this is pretty much it uh what you can do here is you can you can name them to say like uh led so for example let's say the led on so we want this one to be led on right or you can even put some spacing there and this one can be for led off and if to make it to make the programming easier once we move over to the blocks which is over here i like to to to name them to rename them so led on right and then rename led off and this makes it a lot easier when you're programming because if you have a bunch of buttons and they're all name button one through let's say 20 like you don't know what button 10 is doing so i just get in the habit of naming them and and just giving them their purpose like what are using them for right so then now let's go over to the blocks and you basically switch over from the designer so this is how it's going to look in the phone it looks a little bit better than this like you don't get this side stuff or anything like that but uh overall you can make it prettier later on so we're just gonna go over uh the basics on this so then you go to blocks and here this is what i was saying that you can snap things on uh to make it work so initially right so you click on this and you get this view here you can hold down control and scroll out and you get all of these little uh clip-ons that you can get right so when the when screen one initializes you can just drag and drop when screen one initializes i want these two buttons to have a certain color just to basically indicate they're off right so for that you can change the background color and you can also change the text but the background color is stands out a little bit more so then what i so now you just control copy that and then it just snaps into place and then you change that to off and then we set the color so i want both of them to be to be red when the led is off right so just copy that and paste there all right so initially when the screen comes on they're both going to be uh have a background of red right so now let's let's let's go to the functionalities so here when i click led on right so when i click that left button led on i wanted to do something right oh i forgot we need to add some connectivity which is the web connectivity right and this is is shown as an invisible component so it doesn't show here but it's just saying like hey you have access to the web through that connectivity so then now we're gonna go here and we're gonna call function which is call um here we go set web one url right and the url is very specific and type this in the url is http so type h mouse to the side let me actually scroll in so you guys can see it better h ttp and then basically like if it would if it were like a regular uh url but instead of that it's an it's an address right so 192.168.4.1 and this is going to turn on the led so you put forward slash led on question mark and you have to type this exactly like this if not it won't work so this is basically calling this uh this uh website that which is hosted by the 8266 and it sends it this command so now what you do is come over here to web again and then you can have this function here which is call web1.get and this will get a response from here so if there's no response you're going to get an error message on the app right now we can control copy this whole thing right and the same thing is for led off right so all you have to do is change here instead of on just change this to off and it has to be capital because that's how the code in the arduino has it now to make it a little bit more interactive we can actually change the colors right so i'm going to move this outside for a second or actually let me just copy one at a time put this guy here and then copy it again guy there and then you turn him uh led on now it's going to be turned into green right because green means on at least for me it does then you just snap this guy in here and then you do the same thing for for the other guy right so you uh ctrl paste come over here but it's going to be inverted right so here when you press the button off green for me means that it's off it's enabled so it's kind of it might be kind of weird because you're saying oh wait a second doesn't doesn't green mean off uh on but for me it's kind of like that's the one that it's that is being currently pressed so if you're far away from the if you're far away from the from the from the 8266 then you know exactly which one has been pressed last right and uh this is just uh some feedback and there's actually a lot more that you can do with this but this is just some some visual feedback that you can get all right so then after this is done make sure that this is correct led off and the reason why i'm doing this is because even if this wasn't here i like to make sure that led off will be red when i press on and led on will be red when i press off right and you can actually swap the direction of these just so that this guy turns green before this guy turns red whatever you can just have fun with it right now once that's it this is this is the the whole the whole uh code for the for the app so once you're done you come over here to build and you press android app apk now this is going to generate a qr code that you can scan with your phone and as long as you're connected to the same wi-fi as your laptop is you should have no problem uh downloading it i'll stop the video here because this takes about a few minutes uh sometimes it moves quick but i'll stop it here and then resume once it's back at the at the qr code i have the qr code all you have to do is just scan it and download it to your phone and you can do this multiple times sometimes what i've noticed is it it doesn't want to do it so you just click this miss and build it again and that way it's there's there's no there's no limits on how many times you can do this and at the end of the day you can still have the option of just clicking this button and it'll download it to your computer and then you can that way you can put it manually into your phone [Music]

Channel: Jandroverse

Views: 30,789

Keywords: 8266, esp, arduino

Id: XdV5cXY2Wgc

Length: 13min 45sec (825 seconds)

Published: Wed Oct 27 2021