Blynk with NodeMCU ESP8266- Web dashboard and Mobile App

hello friends welcome to another video lesson and in this video lesson we will learn how to use blink cloud platform with nodemcu esp8266 we will be using blink mobile app in a web dashboard to control led connected to esp8266 that means our favorite note mcu in the future video lesson i will also show you how you can read a sensor data this video is sponsored by altium designer world's leading pcb design software company if you want to take your idea from a breadboard to an actual professional looking circuit board just like any other electronics product you must give it a try it's a free check the link in the video description to get your first hand experience and i'm sure you will enjoy working with it once we head over to the blink dot io that is the official web page of the blink cloud platform we have to click on this start free button now when you click the start free button it will present you a nice beautiful form you just have to fill in that form and set up your account so that it will take you inside the dashboard so when you log into the dashboard you then can able to see there is this button which says new template now the way this new blink platform worked that's basically people call blink 2.0 so this new blink platform works in a way that it asks us to create a template so we have to click on a template template is kind of project say for example so click on new template and it will ask you to give some sort of name to the project so when i head over to the name then i will give the name nodemcu because it makes more sense now in the hardware section so by default it is esp32 selected so when you just click it here and it will present you a different option where we have to select our node mcu and you can see there are plenty of boards available out there and we will going to select esp8266 because that's our target microcontroller now the connection type remains wi-fi so we are happy with it and then the description you can give anything that you like let's say control control led [Music] connected at gpio2 on esp8266 nodemcu and click on done now once you create a template it will take you inside the template and you see the template name is nodemcu and the hardware and wi-fi and other things if you want to set up something you can do more customization but i basically don't care i mean if you go to categories you have a plenty of categories you can select anything that you want to select maybe you can select the light because i want to control the light bulb in the future by connecting and relay right so that's it now when you create a template then you can able to see there is a section that says firmware configuration and in a firmware configuration you then can able to see it creates a blink template id and the blink device name for us now this is something important for us that we require in the future when we write and code on the arduino ide for esp8266 now we have to head over to the metadata now metadata is something that says more information about your project about hardware and other things we don't care because we are not doing any big rocket science so we head over to the data stream now in a data stream we have to create a data stream because we will be using a virtual pin and even if you use a digital or analog pin on esp8266 nodemcu you have to create a data stream data stream basically represent the virtual way how the data will flow on to the real hardware so we have to click on this new data stream even if you don't click it if you just hover over your mouse then it will show you some options and because we are using a virtual pin we will click on virtual pin so when we click on virtual pin it will ask us to give some name and i will keep it simple and give it a name as an led now you can select a different color so my brand color is blue so i go with blue and i'm happy with it now uh the pin in if you know the way the virtual pin works is because you can define 0 to 255 virtual pens and since we just have only one device that we want to connect that means our led to node mcu esp8266 we are happy with pin v0 which comes by default and the data type will be integer for us because we just want to send one and zero nothing break any special stop so integer is fine for us and then the minimum value is zero and maximum is one even that comes by default and it says default value i would keep it zero default value and scroll down and then we can click on create and then we are done with the data stream now don't forget to head over to the top right corner and click on save button so the data stream that you have created will be saved now let's head over to the ebench now events we are not using at least for this project in the future maybe i will cover another videos where we will use the advanced features where we will use events now when you head over to the web dashboard then in the web dashboard we don't have any dashboard created so we have to customize this web dashboard so on the top right corner we have this edit button under the web dashboard so when we click on edit then it will give us um some sort of ui widgets that we can use to design our dashboard now i can select the switch because i want to control uh led connected to esp basically this led will connect to gpio2 pin on esp8266 so switch is better to take so i will select the switch and put here somewhere onto the dashboard just simple drag and drop from the left to the right and you can nicely resize the screen that's what i love about this new uh blink cloud platform that it allow us to you know do more customization and it's just great now when you hover over your mouse then you can able to see this gear icon so when you click on that it will open up a few more settings for the button and you have to change the title i would give it led because i am going to connect an led now you have to select that's this switch this button that we are creating which data stream it will going to talk to right so when i click on this drop down i will going to see led which is the data stream we have created just a few minutes before just a second before so you have to select the led data stream and the value on value is 1 off value is 0 makes a perfect sense now you can check this box show on off labels and that basically show the label right next to this led button and you have to give the label on and off which makes a little more sense you can even change the label positions left or right i'm okay with right because i'm a right-handed person and everything looks good so far click on save and then head over again to the top right corner and click on save don't forget to click on save and then you are done with creating a dashboard now the next step is we have to write an arduino program so we will be using an arduino ide to write a code a c code for esp8266 so we have to open our arduino ide okay and we have to go to sketch and then include library and we have to click on manage library so because we need to use some examples and the libraries from the blink we have to install the libraries in the first place so when we see the library manager comes up now if you have not set up your arduino ide for node mcu or esp8266 then i already have made a video and i have given a link in the video description so you can um see that video and just make sure that your ide is set up prior you follow this video lesson but now as far as only the blink concern we have to install blink library so we will going to search here blink hit enter and somewhere maybe it will take a few seconds you can see the first search result itself blink by buludi maya shimaski so that is basically the library that we want to install now i already have installed it but when you try to install it it will take by default the latest version whatever the latest version you have you can take it it's 1.0.1 that's fine and just click on this install button and this library blink library will get installed you can see it's written here installed so i don't need to do this i just wanted to show you before we go ahead and write the code and then just close this library manager and we are okay with this now we need to write a code uh for node mcu or esp8266 so we will not going to write it from scratch rather we will go to file and click on examples since we have installed the blink libraries uh we have to scroll down we have to scroll down till the end until we see something called blink and under this blink you have a blink agent and under blink agent you have agent esp8266 so you can click on that and that opens up the new arduino program and will concentrate on this new piece of code which is and ready examples to work with nodemcu when you're using blink cloud platform now uh you see a code there are so many things and uh i'm not going to use this completely i do have uh the code put on a github so you can uh quickly copy and paste and then i'm going to explain this line by line what it is now i have already written a code so i'm going to delete everything and put my code here and you see here this code is no different you can download by the link given in the video description but um in a first place we have uh something that says uh blink template id and blink device name now this uh template id and device name we get from the blink dashboard so if we head over to our blank dashboard if we head over to the blink dashboard then we have to come back to the info section here and you see here we have uh the template id and the device name so if you click on this button up here or you can just copy manually whatever you like you just have to go to your code and just replace this two lines of code right so i remove these two lines of code and just paste it down here and now i have my template id and my device name which i just have um set up on my blink dashboard or blink cloud platform so to say now there's a blink uh firmware version we don't care then there's a blink print which is basically a macro i'm going to straight jump into the logic here so as you know that we have connected you may have connected an led to the gpio2 pin which is a built-in led on esp8266 and we do have connected an external led just to show you to present you much better view of the application that we are building so uh we have a blink write function which basically takes a parameter v0 which is the data stream that we have created right v0 uh for the button that we have created on a blink cloud platform so when you press that button then uh the one and zero based on how you press the button the data comes in here and that data will be stored into this param variable now this param variable will hold this uh data when you press the button on the blink mobile app or the web dashboard then it will be stored it will be read as an integer because it's a one and zero and it will be stored into the bottom um variable and it will be compared with one so when you press the button then it will turn on um i mean it will send the logic one that is a logic high and then it will turn on the gpio2 pin that's basically how it is and when you press the button once again then it will send you zero that means the else block of code will execute where it will turn off uh the gpio2 pin that's in results will turn off the led connected to gpio2 pin now uh in the blink connected function now uh don't worry about this functions this blink write function and blink connected this both functions are the blink library it's a part of the blink libraries and it's the standard function we don't we just have to call this function and write our methods and then we have to say blink dot sync virtual because we are using a virtual pin v0 to control the led connected to gpio2 pin on esp8266 node mcu we have to call this function by saying blink and sync virtual so the sync virtual function or the method will invoke uh all the time whenever our node mcu esp8266 connects to the blink cloud platform that means our iot server so that's how basically it reads um the data uh from the mobile app when somebody press the button and bring that data to the v0 that's basically the parameter that will be passing to this function so whenever the blink cloud platform connect to the node mcu then it will bring the data into this v0 and then it will pass it to the param int and then you know rest of the things you know if you have written any arduino programs and then in a setup function you know we have uh we have initialized the gpio pin 2 and then we have configured as an output because led is output device and then there is a serial initialization make sure we have 11 5200 as a portrait and then we have a decent amount of delay and these are all basically a standard way how the blink cloud platform works you just have to call this functions and this functions basically uses a lot many methods you can see there are so many libraries that it creates the header files right now we don't need to go into that just to blink an led but maybe someday in a future lesson i would going to explain everything one by one even we will go head over into the library functions and talk about the every functions in its implementation but really it's not needed for now so when everything looks fine uh just make sure i just want to remind you that you change your template id and your device name because it's extremely important that's how the hardware not mcu will connect to your new blink 2.0 cloud platform whatever they say now it's a time for us to upload the code onto the node mcu esp8266 now before we upload the code make sure you connect the node mcu to your laptop so let me connect the nodemcu to my laptop and once i connect the device then i have to head over to the tools and then i have to make sure under the board section i already have selected node mcu 1.0 it's basically esp12e module that's basically what i select now as i said if you don't get this into your arduino ide please check the video in the description i already have created a video how to uh add support or how to program node mcu using arduino ide so select node mcu 1.0 and then go to tools again and make sure the com port is selected properly so select com3 in this case and then on the top left corner we have this um upload button so click on this upload button and it will take somewhere between one or two minutes because it takes a time to write the code into the chip upload the code into the chip so we have to wait as you can see in the lower left corner it says done uploading we have to head over to the tools and open a serial monitor now in the serial monitor when you open up make sure you have the right border selected 11 5200 as in my case and then you see nothing shows up on a serial monitor so we have to press the reset button on to the node mcu so when we press the reset button then you say that it says like blink is trying to connect and it's not yet ready so we have to basically uh now install the blink iot uh mobile app and then we have to set up the mobile app in order to set the wi-fi credential so we have to use a mobile app to set up the wi-fi credentials into the nodemcu esp8266 so that node mcu will going to connect to the um internet and then it will going to establish the communication with the blink cloud platform so you see here it doesn't says any ready or something like that but it will come bit later so here i have my smartphone and i have already installed the new blink iot app so when i click on this blink iot make sure you install from play store and it's called blink iot so when you open your mobile app it's a blink iot app and then it asks us to click on a new device because we want to add our node mcu esp8266 um to connect uh first we have to set up the wi-fi credentials so that node mcu will connect to the internet and then uh we will going to create a mobile app that can control the led connected to uh node mcu so click on this add new device it asks us connect to wi-fi now make sure your mobile phone must connect to the wi-fi network right to whom you want your node mcu to connect to so click on connect to wi-fi and it will take you here that's where it says ready button so click on ready and it says device to use with blink iot so it's searching look at this icon it says it just searching something out there so maybe in a few minutes or second it it will show you uh the blink node mcu so this is my device because i already have uploaded uh the arduino code so the device has my template id and the device name that's why i can see the device shows up here so i select blink node mcu device then it says connecting to wi-fi it takes straight away to choose your wi-fi network and it's a binary update in my case i select that and then it's a ssid binary updates and i have to put the password then say okay and then say continue and now you you see how the mobile app is trying to put the wi-fi credentials into the nodemcu and then it says uh device name uh d85 if you want you can change that i don't care i just click on continue and then again press on continue and uh say done and then okay great it's ready i guess then press on finish and exit and you are done basically so it asks us to click on this setup dashboard so we click on setup dashboard now on uh um on the top right corner you see um there are three uh horizontal lines so if you click on that you will get to see uh there's a button so we select the button i can take the button and put it somewhere in between so it will look a little bit better and then just click somewhere and then press on the button and it will open the button settings now you can give the the name to this button and i would give it as an led to keep it simple now data stream remember we created led um v0 data stream so select the led as a data stream now the value 0 and 1 to on and off now click on the switch because it should act as a switch and then on and off label everything is fine text and other things if you want you can customize this you can change the color but i don't care for now so we can once the setup is done you can click on the back button on the top left corner this is that back button and then your app is almost ready now again you have to click on this back button on the top left corner and it will take you to your basically uh the mobile app and it's ready basically now you can take your nodemcu and control uh and and see if it works now okay so basically here i have the nodemcu i can place it here so that you can see that okay and i hope it's placed properly and just just to make sure once um before you run the test we have to press on this reset button so our nodemcu will connect to our network and somewhere on a serial monitor you will see that it will show us that our node mcu is ready to talk to our mobile app so i can press this button and you see the led on the board turns off i can press the button on off so now i can control this um you know led on node mcu esp8266 now if i'm not happy with that then why not connect an external led so i take this led and put into [Music] the ground and the d4 pin so d4 pin is basically the gpio2 pin now i can able to control this led so look at this isn't it great and likewise i can even go to my dashboard and control the led right let's go to the web dashboard and remember we created this web dashboard under this vape dashboard option uh so if you try to control from here it will not work so this is pretty interesting thing because i spent a lot of my time to find out how the web dashboard will work with nodemcu to control so for that you have to go to top left corner there's a search icon here so click on search and when you click on search then you can able to see your device shows up so in this case it's a nodemcu d8570 so i can click on my device and now i have the dashboard so make sure it will look like this it will show you the name of your device uh the author name basically in my case it's so mesh and then binary updates and now i can press this button here on the dashboard and this will turn off and on the led right so this basically you know allow me to control from the dashboard isn't it amazing i loved it because you can control over phone you can control over the web dashboard it's just a great thing i hope you have found this video educational and entertaining in the next few videos i'm going to make a really really interesting projects like reading the temperature sensor data and putting up the gauges uh widgets and show it and then also connect uh the relay module to control the ac operated devices something like a real ac light bulb or something i hope you have found this video educational and entertaining if you want to become an expert embedded system engineer then check out the link in the video description and we have an awesome courses which will help you learn embedded systems programming and become an expert in the field of embedded system design thank you very much and see you into the next blink video bye bye for now

Channel: BINARY UPDATES

Views: 5,316

Keywords: Blynk, ESP8266, NodeMCU

Id: AvSCAxbqvvE

Length: 24min 52sec (1492 seconds)

Published: Sat Oct 16 2021