RFID based Smart Attendance System using Nodemcu & Firebase

welcome everyone to a new iot tutorial and in this tutorial we are going to create rfid-based smart enhancement system using nodemcu and firebase for this project i will be creating this attendance system where user get registered using the rfid tags and the we have the web portal where the admin can manage uh basically can view all these uh uh the attendees uh check inch and checkout time which is getting maintained there and we have the attendance summary where basically all this data can be also downloaded in the um csv file and we have the live status tab as well where the real time status that which we have only two users right now but uh all the users can be added and can also be monitored that when if there is a user at the current time it is signed in or signed out uh this is the system we will create in this tutorial talking about the agenda for this project there are five parts for this project and uh in the first part i will show you this whole demo and next we will see the requirements basically fake focusing on the hardware part and the circuit diagram is very important in this project so we will see that what are all components we i have used for creating this project and the fourth part is project and architecture explanation basically i will explain the flow of this project and in that part and at last we will explain the code and uh talking about the code we have two type we have arduino code which i have used arduino ide and that code will be uploaded in node mcu and the second code is the web dashboard code which i have created for our attendance portal so these are the five agendas we will discuss in this session and uh these there are more points you can see written here which basically it is the it is the things you will going to learn in this tutorial so you will learn how to get the time using ntp server i will explain the ntp server and the use of ntps and how you fetch the time from ntp server using nodemcu so working of rfid i will explain a hands-on firebase real-time database so where i will give you each and every step that how you set up a project in firebase and how the and then you will use the real-time database service of that firebase uh and the last is host your static website on firebase okay so what we have created is uh uh it is currently running on localhost and we are going to uh publish this website using firebase so let's directly jump to our demo so you can see the smart attendance system this is the portal which i have designed using html css bootstrap javascript whatever jquery here and you can see there are two cards we have attendance summary and live status and the current firebase real-time database structure is nothing basically we have nothing so i have written two arduino codes and you can also see the hardware setup on my screen so [Music] this is the init uh arduino code where we are basically using it for pus for basically making entry of all the all the uid basically all the rfid tags these are our tags this is our i have two tags with me this one is blue and this one is white so these are two rfid tags and i will going to make entry of these or to our system basically so that we will track the attendance of these two users we can consider these tags rfi tags as users so there are two users we need to enter for that we are using this uh we are using this arduino code so let me scan and make entry and we can see the same on the dashboard real-time dashboard we can see the those entries so let me enter first okay so you can see here uh uid 6727 and cross so this cross means that the user is not yet checked in and we are just entering it in our database you can see we have now a users and inside that we have a key which is the same uid and after that we have zero in the value so let me uh select other one okay okay fine two zero one three one five five eight one two five and this one a second so this is the new entry and we can see that new entry is also there so i have inserted both my card so now we need to uh upload my second sketch the firebase sketch and this is the main sketch which is responsible for tracking the attendance so when is the user checking in and when it is checking out so this whole thing is tracked is basically accomplished using this sketch so i need to upload this sketch now to our nodemcu so the code is uploaded the second code is uploaded now and we can see that now this is the structure of firebase structure is the same now let me uh scan this now this user 2 0 starting with 2 0 if this user comes so basically the this is this one this white tag is representing this user and when it use this user come it will get start get checked in to our attendance portal to the system so let me scan this one so you can see in the checking in in the basically the lcd display now it get close again so and this new entry you can see here two zero two one five device one one the time this is the current time right now and check in and this take this is the real time status basically this user is added to us attendance summary and the live status from cross it becomes thick and if i can show you this one this serial monitor also let me check in the second user which is which is start from 6 6 7 so then we can see the serial monitor also and and we can focus on the lcd display you can see that it says checking in and the second user also checked in and if i can show you this time uh this card id number is this and this is got stored in our database so we can see there are two poses this one is the first from first push this is from second post firebase so these are uh data got uh pushed from the nodemcu to this firebase and the same is received here through web socket because we get a library we get the firebase library for connecting our html html css javascript code using that firebase library so we we have integrated that and we i will show you all those steps that how you uh understand all those things so uh after that let me uh check out this one so checking time checking in time is 12 7 29 and let me check out so there sometime already passed and first let me check out this one this white one so you can see checking out on the lca display and we got the message here 12 19 okay after two minutes we checked out this user checked out and the current status it all uh became cross for this use for this and for the second one for this blue tag one the second user if i scan it checking out it uh close and this second 12 19 15 so 29 second and 50 second okay so it's fine we have four entries in our summary and you can see a download button here and what it basically does is it will download our data table data in the csv format and we have also a search button so if i want to search all the activity of this user this starting from 2 0 i will simply 2 0 1 it is it gives us these two entries so this search is working real time and the the second thing is this download button let me click on it and you can see a file name three dot csv and we have this format user id device id time status okay device id time status okay so check and check out okay so this thing we will see in the discussion that how we will implement this one also so apart from that we have all other things working for our project the database structure you can also see we have main attendance and users which are response for the main keys of this database and let's go to next section so the requirement for this project is a nodemcu rs522 rfid reader i square clc display these three components we need for this project so rfid reader and we have also need we also need the tags because the tags are what signifying the users so two rfi tags are enough for this and for rs i square clc display we have the normal lcd display but there are multiple many number of pins so we have used this i square c interface ic and this will basically uh turn all those pins to only four pin which are scl sda vcc and ground so for you need to provide a five volt supply for this and in my case you can or you have also seen arduino there so what i have used is a 5 volt supply from arduino uno you can use anything around you if you have a dc adapter you can use the five volt supply from it and five volt there and rs just make sure that you need to uh connect the ground of the node mcu to the supply which you are giving talking about the circuit diagram we can see that we have rfid reader we can see that rfid reader is connected to d5 d6 d7 d8 these four pins are used here and 3v3 and ground so and the lcd display is using the default pin for scl and sda we know that it is a i square c display and it will use the default nodemcu pins if we are not using the software serial library uh we have used the normal pins which are defined for i square c in nodemcu which is d0 and d1 de0 is sorry d1 and d2 uh d1 is directly connected to scl and which is the clock pin and d2 is connected to the sdk which is the data pin so we uh some node mcus also give 5 volt from the v in uh if your nodemcu is supplying v 5 volt from v in after connecting the usb uh after powering the u nodemcu from usb then you can use the win otherwise you need to supply a 5 volt from any anywhere else so node mcu pins for node amps you can we have let me open the uh phrasing sketch for this so here is the frizzing uh you can now navigate now i am navigating to each and every pins of this rfid so first is the sdk pin hda is connected to d8 next pin is sck this uh rfid works one uh basically we have i square c and the second is spi so these are two communication protocols and we are using uh s spi for this and we we have hd as sck sck is connected to pin d5 and the other is most mosi these are are basically master out slave in and this is miso so master in slave out so there are two this pins and we have d7 and miso is connected to d6 and other than that irq is not connected to anything else anything and ground is connected to the ground of node mcu rst is connected to the b0 and 3.3 volt is supplied from the node nodemcu as well so this is how we connect the rfid talking about the functioning of rfid reader and tags so these tags are basically the passive tags uh where there are no power source internally in these tags these rfi tags so as soon as it come near the proximity of these readers through the electromagnetic fields the it will get read by the readers and the data inside it get read by the readers and then only we will basically what we are doing after that is through spi we are getting these those data to our nodemcu and nodemc uh nodemcu will then uh going to write this data through after connecting to wi-fi it is connected to the firebase cloud and then it is pushing the data after reading it to the internet to the network talking about the architecture we have this node msu's and the first few steps are very simple where we are just scanning the rfid tags through the reader and after scanning these tags the data inside these tags which is basically uid we are publishing these uid to the attendance and users users key so firebase database we have attendance and users as our main keys and there are all the tree structure inside history data and live data so which we will see in the next part where i will implement each and everything from scratch so uh the data which are history data and live data are simply getting pulled from this firebase database to trend to the attendance portal so well uh since we are using the library which internally uses web socket so we don't need to do anything we are just using it and the the publish part is also carried out by a library which are which we are using at arduino and let's uh look at the code of arduino first then we will move to the code for web portal so this is the first code which i have uploaded to the nodemcu in it so what it is doing is it is using few libraries you can see here esp82 wi-fi and spi rf id these two are for rfid reader and firebase esp8266 so this is the firebase library which we are using so five is host and the auth these two things are very important so when you are creating a project after you create a project you will get this firebase host and auth well fi ah creating a real-time database the host will be these part after http this is the host which you need to paste here and the auth part you will get it in project section and it inside the service account there is database secret you can see here and in the database secret you can click on this so and this copy it from here so just paste this host and auth so that this uh nodems you can communicate with this our firebase real-time database this one so next part is this next variable str variable is there which we are using in the this function you can see here str variable is using inside this well we will see that and ssid and password are the wi-fi uh wi-fi name and the wi-fi password to which this node mcu will connect so it is very important that this wi-fi name and this wi-fi will have internet connection so if you are using the mobile hotspot you need to also turn on the internet connection of your mobile so firebase did now we are using this firebase esp8266 we are just making an object of this class and this connect method we will see in that so the sketch starts from the setup method so in the setup method we are initializing the serial monitor so the serial using the baud rate this one one one five two double zero the wi-fi dot begin uh will start the connection of uh node mc2 wi-fi using these credentials and spi these are two very important thing for making the our spi connection so that we can so that our rfid reader will read the uh get the data and this connect method is now called so which is defined here so it is just checking the wi-fi if the status of wi-fi is not connected it is printing dot uh till till then and when it's when it connects it simply prints connected and after that there are two methods you can see here begin method and reconnect wi-fi method so begin method uh start the firebase communication after the after connecting to the internet we are connecting to the firebase real-time database and which is connected using these two credentials so all these things happen and after that we are going in the loop method and repeating this code forever so first what is it is this line of code is doing is it is waiting for the tag to be placed near the reader so we are using the rfid which we have defined above you can see rfid d8 and d0 why we are using d8 and e0 so okay let me update this thing d8 pin of tag this is the hta pin and d0 is the rst which is the reset pin so if you can see in the diagram if you can see closely you can see that d8 is the sda the first is the hda and the rst reset pin is here it is connected to this uh brown is connected to d0 so that's why in the code we have put that that in the rfid so this using this class we are making an object and now we are making calls of all the methods inside it inside that class so rfid we have find card method where which we which are which is basically uh we are waiting for the tag to be placed near this reader and as soon as this card as soon as we detect a card since this loop is running again and again so we print a line card found and after that these line of code will help us in getting the card id number and we are getting that in this temp and we are now calling a method push user this is what pushing this this is what which is pushing the this this single key value pair in this users key so let's see the push user method uh this is the simple two line of code simple one line of code basically so this temp we have the the uid inside the inside the tag and now we are going to this path in the firebase uid uid path we have defined above it is nothing but a slash slash uh okay slash users there is no need for this one so less users plus stamp okay so user slash stamp so users is the main key and then after we are going for the tag id and this will be and the value is this one so this first argument is the the second argument is the key and the third argument is the value and after before the this firebase data is nothing but object which is defined above so this is a syntax we have to use while using this library and this is what this is the line which is responsible for setting this data for this data zero in this path user slash tag id and tag id is read by the rfid reader so this is the init method init arduino sketch what it is doing is it is simply making the poses to here and now how this pushes will be reflected in this second live status card let's see that as well in the same manner because that needs to be also addressed so let's uh see this html code simple this html code we have had and the script we have defined few script in the head as well and this is the one which i was talking about the firebase library we are using and config these these credentials we need to provide for this library so how do you get it so simply go to project settings and in the general tabs tab you get this thing simply copy it and paste it right in the config and initialize this using the firebase firebase dot initialize config so this line of code we are linking the style.css to this index.html file so that we can define all our styling in this part so all after that is bootstrap importing bootstrap font awesome which is for icon we have used few icons in this code like this tab icon and uh also this download icon so this is using this font awesome library well other thing is data table so very important thing is here we have used the jquery data table so data table is very important thing which we have used so that we can utilize this download csv feature and this search feed feature and these are the two features which are given by that and also all the table rendering is also provided by data table as well so these library this is the css for data table and we have used the data table bootstrap version so there is a simple version where you don't need to do do do do where you don't need to enter this line and after that we have responsive also so what it means is when we make it in a small window you can see this plus button and if i click it okay so it's okay so this is basically the purpose of responsive thing that we can make it this checking in checking out in the second line or we can set priority that which column will go in under the second line when the width of this thing become less in mobile basically so uh the main part is the heading where the smart redundant system which you can see right here and after that we have the container which contains two cards the second card and this first card so let's leave the first card we will just see the second card since we have completed this part and now we can see the second part where the live status you can see the written here as a header of card and in the body we have used the class users and after this document is ready in the jquery this is how we see that the document is ready now we can apply all the functions java's jquery functions now first we are just doing html no data available since there is no user in the starting or before scanning anything there should be no user so we have used that and as soon as a user gets scanned as soon as a user get entered we we are utilizing this method firebase what graph as a reference in the root which means that any changes happening in the root like this here like in the attendance or users we are capturing that changes in real time using that using this method so now let's focus on dot users changes occurring in the users method so and so since we got a data we got this key value data from the nodemcu and now we have the data and now we are storing in the obj and making a loop out of it so we are making a loop inside this object so if i can show you that part all also okay so you need to see that using let's console print on triple one line so okay triple one you can see that there are uh there are there is object javascript object where we have key value pair so after making object of object or dot keys we are converting this in the array of these two items these two items so now we what we can do is let me see now what we can do is after making this we are appending this in the users which is this users class so we are appending the html in this users this this html which corresponds to this thing so here we are we have uid and there are two items also the this is the right this is the cross and we have also the tick so these are two items and how we are deciding that which item will remain because both items not should not be there so we are basically checking the value so here key and value so this value is right now zero and if this value became is one then we will show it and how we are showing it using the id so id will be using the hashtag and why we are using this since every a key is the thing which is unique among the users so we are making it as id as we know id should be unique so one thing is showing why it is showing because this is a tick which which should show when this value became one so when it became one it will become one when uh when the rfid tag will read for the entry for the check in check in part uh when when this when i will explain the second code arduino second arduino code then i you can understand this more clearly now you can just see that this one why it is one here i will explain it later then we are just for one we are showing the tick and for uh zero uh for zero or else part we are saying uh we are showing the false false which is cross so this is the code which is responsible for making entry of these two cards in the live status and this is also the this is the same code which is also responsible for changing this cross in real time if you can see this is cross right now and if i make it one you can see it became tick so this same code this same code is responsible for that as well since we are every for every change this method will be called and after that whatever in the users thing it will again became empty like this and after that we will do all this process again on this loop thing again and checking the key if it is one we are showing the tick this is how it is working so same applies to the second user as well so i have explained all the functionalities of live status for now so let's start the discussion for the second arduino code which is the firebase code what it is responsible for the entries this entries which you are you can see in the attendance summary these entries are due to the second code of firebase and what it is doing is uh before that uh let's go by line by line first and then we can easily understand everything so main thing which is different all these things we have already seen in the previous sketch but these two line of code are different okay so these third these three line of code so liquid crystal underscore i square ch i square c dot h this library is used for uh for displaying the uh data these data on the lca display and apart from this these are two libraries ntp server for connecting to entity server we need to use the udp protocol so that protocol is implemented using wi-fi udp in nodemcu so for that our nodemcu is behaving as a ntp client which is connecting to the server for getting the time data for that we have these three line of code which is important ntp udp and the utc offset in second so this is very important that for according to your country it is it will vary for india uh since we have plus 5 hour and 30 minutes ahead of the main gmt so so utc offset in second for india it became 919.80 so if you need to understand it more clearly you can follow the last last minute engineers website let me show you so ntp with esp8266 and this is the first website you will get you can see that this ntp is nothing but network time protocol and the how it works is such that esp8266 request for the data and the server respond with the timestamp and now this library which we are using here ntp client you need to download this library in your arduino sketch arduino ide and all you need to do is making the begin time client make let's start with our sketch now we have the time client which is the class which is the object of ntp client class and we are using the udp uh udp and this pool dot ntp.org this is the server uh host address so the next thing is uh uid path all these things we will discuss when the users of these are defined the next part the red green okay so you can comment this line this is not anything so this connect method we can uh so i could start from the setup method where we have the lcd in in it and clear and backlight so these three line of code will initialize the lcd display with backlight on and this is how we initialize the lcd so these two other line of code is initializing the rfid reader rc502 so again the time client which we have created for ntp server for taking the time we are beginning it and setting the offset which we have defined above 919 a double 0 for india okay so again we are connecting to wi-fi and after we have connected to internet now we are connecting to the firebase database and this method is very useful uh since we if we got any disconnection uh it will try to reconnect again if you use this method so again after this uh this is check access no the what what exactly executed after this is the loop part which will be executed so in the loop part we are updating the time client every every iteration so every iteration the time client updates uh we get the updated data we basically what we get is we get the updated data from the ntp server so we are making request in every loop and the same thing which we have done in the previous sketch we are checking for the rfid tag that when it it get read or placed near the reader as soon as it plays near the reader we get the in the temp variable we are getting the uid of that tag and we are making this check access method call so check access method is right here defined which we are getting the data our tag data in the stamp and now this lcd display scan your rfid we are putting it in we have zero or and one two line x axis and y axis in the first so in the first according to y axis we have scan your rfid in the first line and in the next line we are so now you can see that you can see there is a read function firebase dot getting so it is reading the data so what it is reading is it is reading this data since in the previous sketch we have this data ready with us we have zero here and we have this data ready with us we are reading this data so [Music] if we get the data if we get the data as zero which means that this the user this user 20131 user is not yet checked in we are making the making the checking in so we are making it checking in and printing the same on the lcd display and making a json call we're making a json object using this json.add and making all these entries in this json object time id uid and status these all things you can see the same id status time and uid so we are making the object using this and pushing this data pushing this data right here in the attendance inside attendance so inside attendance we are pushing it in a uh it is a randomly generated key and we are making the entry in like a object like this and we are also going to do one more thing which is inside users slash uid which is the temp which is the rfid tag id and we are making it as one since we are checking in it it was earlier 0 now we are making it 1 so this is how the real time changing of data works and again we are pushing it and these are some error handling conditions that if if there if some we got some error these we can simply see that error on the serial monitor so this is serial this is nothing uh related to in the logic so elsif part if it is already checked in if this value if this value this value since we now it becomes one let's assume so since this value became already one the else if part will execute this lca part will execute and we will print the checking out in the screen and making the making the okay okay so we are making the uh uid value as one since we are already checked in now we are checking out so what we are doing is what we are doing is we are making it as 0 so it is already 1 it is already 1 and now we are making it a 0 and also going to push all this thing in the json object in the same tree so we are making the use of same tree for pushing the data and this is this whole data push is also shown in the real time on this it on this table so that is how uh okay so let me explain how this thing is working for table so let's check the code for that okay so we already already know that this is this method will get us the data in real time since we are using the on method so we are getting the data and for we are tracking data for attendance and as soon as we get any data in this ascend as at an inside attendance uh inside attendance if we got any one of these data we what we do is let me show you we are making a row object uh we are making a row variable and we are storing the pr this is the row basically so let me show the code first so in the first card we have this table structure ready with us in the t hat table head we have these this is one row and the table body we are creating another row and we are making it dynamic using jquery so what what is here doing okay so what we are doing is we are making a loop for the attendance part so inside attendance there are one to four keys and we are making a loop out of that using the using the object dot values the same thing which we have done above we are doing the same thing again and now using the rows dot add these are the important thing of jquery data table library which we have used you need to have a understanding of that so we are just taking the row which we have created with uh with our data with our real-time data and we are pushing it in our table and this is how we do it so talking about the status since this status need to be changed in real time so we are simply making the html changes after checking the status if the status is one then only we are making the checking using the green badge and else we are making the checkout using the red batch so okay so that's how this thing is working this first part of this table is working let's check the search method okay so talking about the search functionality search functionality is not explicitly added using the code so you will get that in the data table library as well so while defining data table this is how it is defined in the first you can see this line of codes ordering false paging false we also got ordering and paging uh functionalities with data table so we have make now it is false right now and for buttons we have used the buttons library but data tables buttons plugin basically and this extension will help us in downloading the export csv basically the downloading the

Channel: IoT Learner

Views: 39,423

Keywords: iot project, iot tutorial rfid, attendance system, attendance system using nodemcu, rc522 attendance system, RFID based attendance system, attendance portal using Firebase, attendance system Firebase, Firebase, IOT, Internet of Things, RFID, Attendance system full project, rfid based attendance system using nodemcu, rfid based attendance system using arduino, rfid based attendance system using esp8266, esp8266 project, nodemcu project

Id: ZYmtxylhRn4

Length: 44min 26sec (2666 seconds)

Published: Wed Feb 02 2022