Full-stack Django & ReactJS || Home Loan Classification Problem || Machine Learning Application

hello and welcome to technology for noob in this video we are going to create a full stack application using react and django let's have a look how our application would look like so this is our ui of our application so this application is all about loan approval so i have created a dummy project where a user can upload its detail and fill a application form and then get the probability whether his application will get approved for the home loan or not or similarly i have also created another ui where a bank manager would like to do a lots of batch processing of loan applications so kind of he would upload a lot of loan application with their details and it will send it to the backend and the back end will return the loan ids and the probabilities of that particular application getting the home loan approved and the results are sorted in the decreasing order so that let's say the bank manager has uploaded 500 and he can approve at least 100 such loans based on their criteria so throughout this is what we are going to learn now we would have two ends so one is django and another is our react so reacts applications are majorly meant for one page applications where a user performs something and they similarly on the same page render the next component and our back end is for machine learning that is django so i have created a machine learning model and we will learn how to host it and then how to integrate django and react this video is going to go through a lot of steps this is going to be a long video so our video would be chunked in few parts so the first part is we have to play the role of a data scientist so where we would understand the data we would try to make a model out of it we will do some pre-processing of the data and then we would have a pipeline and then the next part is we will deploy that pipeline into a django server and the django server would take few requests like accepting a form accepting a file returning the score of a form returning the batch score of all the files which we have to score then we will go to the next level that is creating the react we won't be using any ui of the django or the template views but we would be using the react this time so in this react application we will learn how to create a navigation how to route between two different pages like like this then we will also learn how to create a form and how to receive the response from the backend application and render the result then we will also learn how to create a form to upload a file and then how to render the response of that particular request which we have done so let's start with our coding now start with our first part that is creating a notebook or pipeline which will serve in our django application so for that let's do a part of a data scientist first where we have to understand the data the fields and so that we can decide what fields we have to have in our react application in the forms so let's start with the exercise so i'm importing the relevant libraries uh pandas and numpy i'm reading the data so this is how the data looks like so the data has been provided as loan id gender married dependents education self-employed and so on and then we have got loan status this is our target variable and as i can see the data now i have only two values so it means it's a binary classification problem statement and i can also observe that there are so many different types of data types are available in this particular data so we have a categorical information we have a continuous value information in name of applicant income coupling and income then we also have some numerical categorical information or nominal where the number of dependents so it's like 0 1 3 plus so 3 plus so that is the max and then married status so so we have a mixed now earlier when we have to create a pipeline and we want to do a specific kind of operation on a particular column we used to i used to use sql and pandas data library on it and in that data frame mapper which gives us the option to associate a kind of a preprocessing to a particular column so in the latest version of scikit-learn that is 0.23.1 they have introduced data columns transformer which is this particular part now i have segregated my data columns in this manner so where i have clubbed all the categorical columns like gender married in one part then numerical columns where i want to do a pre-processing of a scaling where i want to do the scaling pre-processing so i have kept them separate and then there is one particular numerical column which i don't want to do any kind of preprocessing so just to observe how many numeric null values are there so these are certain numbers now so we also have to do some missing value imputation so for that purpose we are going to import relevant modules or the functions like simple computer column transformer as i mentioned earlier then standard scaling one hot encoder for our categorical columns so these are the standard best practices which a data scientist has to go through so whatever he will do at the end should be should be able to deployed in the server so that the thing which the data scientist would do in his environment should be replicable in the application environment as well so meaning in the django and that's why we wanted a pipeline so that's this is how we define the kind of operations we want to do on the particular kind of a data now so as i have already segregated in categorical numerical with scaling and just numerical so if i i want to do a transformation with scaling i would say pipeline the first step is the imputer simple computer and the approach which i have chosen is the median and then scalar so standard scaling so that's how we define a pipeline this is the standard way of defining it similarly for the numerical i just simply want to impute it i don't want to do any scaling then categorical i want to impute it first with a missing value and just an extra level i'm adding to the data so if the labels are male female then i'm not adding with the male or female which is missing i'm just making it missing that's all and similarly for the numeric transformer i'm just adding the value 99 to it i'm not adding any zero or mean so these are some standard ways which data scientist follows so the reason behind giving it not giving it to the max or to the minimum so it's the idea behind this kind of approach is to segregate or separate out those users who chose to not give those information let's say you feel a survey and and somebody ask you what is your salary you would choose not to declare it right so we want to have such kind of user behavior to be identified separately we don't want to club them with the normal users who are willingly ready to share their income that's the whole idea behind giving another value for the missing values it was the analogy so just to explain now similarly how this data column transformer helps it just allows us associating or aggregating all the transformation we want to do with the data and we are done and that's how our pipeline is ready now the final pipeline where i want to create associate add the model also into the same so our preprocessor would all have all the pre-processing steps with all the columns and then finally i'm just making a random forest classifier it's a binary class classification we train the model this is how the pipeline looks like now from the pipeline we just simply can score also now so if i scores on the same training data so this is how it looks like so these are the scores and what i have done here is i if i have to show it so this is how the probabilities we will get so it the first one or the first index is the probability of 0 and the second index is the or the first index value is the probability of 1 so that's why if i do this i will get only the probabilities of 1 we don't care about the probability of 0. you can read my test data and i can simply just start predict probability and pass the data all the transformation would happen to it and then finally this is how our pipeline works so it would be able to handle the new data and if some missing value would be there it would be get handled if some transformation needs to be done that would also get handled this is what we saw just by passing the data to in our pipeline it was able to do all the pre-processing steps now similarly i will just import a job package and then i will save my pipeline into a file so our first part is done where we wanted to create a pipeline where we wanted to understand the data now we know how or what fields we are important for us to take or design the form in our yet so we are using all the fields for now let's go to the next part where we would create our django apple let's start with the second part of creating the django application so before i start it start with the actual coding i would want to share my requirement.txt file and i just want to explain a little bit about it for now so this is how my requirement.txt file looks like and just to clear up this is the django version which i am using and in this time apart from django i'm i have also installed django.course headers which is important for this particular video and to confirm this is the second line which i have used otherwise the column transformer would have not work so now i am going to just do a routine things of the django and i will explain a bit in the few moments so this particular video i would be using the visual studio code for throughout the time so let's so this is how our application looks like now my main project name is model backend and i have added a app first app to it our first page so in here i have to add few things and in this yango application we don't need any ui so we don't have to add any template i would just simply go ahead with so for this application we need two kind of apis where first we would be upload we would be doing a post a form and then in the second we would need a post for a file and both these both would result the scores in return so i am just creating one function which is called score json where the user would send a form i mean in a json format and i will just return a score whether that form will get approved or not or the application will get approved or not and for that we need json response so that we can send the response in a json format so just to clear about for now one similarly we need another application another function which says score file i mean just in a simple terms to understand request now in here we would also send a json response but with all the detailed information of each loan id and the approval probability so for now i am just doing it same and the only thing is now we are going to accept a file so we have to add a media url in our application where the media setting we have to go into the settings and simply come here at the end and just simply say media this is where the common file would be and all the files will get saved in this system now the second part is once we have all this we have to set our urls so now in urls i have to import the relevant library from first import views so we will have our first request or the end point that is score json so even i am giving the name as score json now it would be called here views dot is code json name is equal to application simple then similarly i need to accept a file and that api would be score file and use dot score file name is equal to just a practice contract now the thing is we are going to accept a post request using without any ui i mean the templates of django so we have to add the csrf exempt in this particular part here so that it can act as an epa rest api and then it can accept a post method and to do that we have to call django.views.decorators.csrf and crsf exam now in here you have to just say csrc srf exempt and pass it and this will take care about all the post requests requests for our application see i'm not going to prepare a full-fledged django application in this time with all the error handling and everything it just for the purpose of creating the entire application so that we can understand how things works and there's a complete full tutorial on this particular part of creating rest apis in django in a separate video with thorough information so i would suggest please go through it as well so right now our urls are kind of done and now the views which we have to now just finish it up or wrap it up so to to do the test i will use the postman now i am not going to prepare a notebook because most of the people would be familiar with postman also and it would be a good practice to do things in the postman so that you can create your react application and know how to write the request in the language of react or javascript so the first part is we also need to host our model so i will bring so i will bring the model also in my application so this is where we created a model file i will bring it back to the our application here so i'm just dumping it into the root folder and this model file we have to load now so to load this particular model file in a default i would just simply say import job life and model is equal to job lib dot load and model file name so now our pipeline is with us now here first we have to accept a response and then proceed it further create a data frame pass it to the model so that is what we are going to write now before that i will start my postman so in the postman we would make a post call to our backend or the django application and this is a dummy data which we want to send also and how i come up with this dummy data is simple i have taken the first row of the data and these are the column names so this should be my keys of my json which i have to send to my back end for scoring and the same thing i will write it here in my bracket so let's start writing our code here so the first thing which we have to do is we have to accept a request and get a response so let's try it here so our end api is localhost 8000 and score json and we are going to do a post request here so let's send a request but our application is not on the shortcut to open a terminal is control and tilde so just as information i want to use my another library another environment that is pi latest and then here i want to start the application so application is running now and at 8 000 now if i do a send request and i get my and what is the response so response i am also getting so now we have to take the post request process the data which is coming through so right now the important part is i'm sending my data in form of a json if you can see it here and i have all the things in a json format and i'm sending all these information in the body so in post request i have not to break my head now i know where the data resides so it's inside so if i just do print request dot body so this is where my data would be residing so let's just do one more time send it and as you can see printed here so this is where i received my data in the body so it's in a non-json format we want to do it in the json so import the json here so i will load it now so my data looks like json.loads and request dot body so i got my data now i have to create a data frame out of it so if i have to create a data frame so i need the pandas library here import pandas spd and then here pd dot data frame and then simply i will just pass my data but as it is in a json i have to add a index here so that's what i am doing it i am creating it into an index i will show it how does it looks like and then i have to pass the data so let's do print data f data f and save if i do the print execution again so data f is not defined because capital d execute again and as you can see my data does not come in a columnar format it becomes a series so i will just simply do a dot transform so what i said if if it does not make sense so it's it's from here i got that idea that it is in a series and that's why i give the x otherwise it would have given me error of index issue so if you do it in your system you would find it out so now once i do the transform of the data of not transform transpose so now it's in a columnar format as you can see the difference the earlier it was in a series and now it is in a column so this is this is where we are kind of done with this particular exercise of doing a score this and now we have to just pass this data frame toward model so i will say score is equal to model dot predict and we want the probabilities and then from here we would get the scores i have to pass my data so data f so the output of this particular score is going to be a numpy array which is not supported in the json response so we have to convert that numpy array into a float format and and if you remember this course which came out at this particular point looks like in this format so 0 and 1 so similarly i have to select the first element i mean the first index value that is the probability of one so we we still need this particular part in our code so i would just simply say minus one this gives me the first index value and also it would be in a format of a list so let's see how our score looks like if anybody is interested on seeing things in a debugger mode so you have to just click on here run and debug select your django application as the runner and then it will make sure everything is up and running for you there is one thing which it has made a mistake is activating the pi 36 environment so so this won't be supporting them exactly so leave it leave it for now i i don't waste time right now let's just i need to have i will delete this particular one so my application is running and the same print score is there so it is fine i will just execute this one and i will so this is in a list format so what i have to do is i will just simply select the first element as you can see here this is this is where i am pointing it so now this score has to be converted into a float so float and score simple and now this particular one can be passed here now let's execute the same request and see it here and the score came as 0.92 so our first part is done now the second api is to create a or accept a file and once the file is accepted we have to score and send the response back so for that particular purpose we would be here and now here first we have to make an effort on saving the file first and similarly we have done a lot of such demo things so we have done quite a bit on how to save files also in django in my sum of previous videos so i would be quick but i would give the idea how it actually happens to save a file or accept a file in a post method we have to use file system storage library or module of django.code.files and then we have to accept the file to accept the file in the post method is a little different than accepting a json so when a user sends a file in in a request or in a post method they have they send the file in the files option so in the request also we see a file option so similarly i'm asking the user to send the file with a attribute of file path so this is what i'm expecting from the user or from any other application so this is the starting point of accepting a file then from here on we follow this mentioned steps we initiate the file system storage then we pass the file object which we got from the system that comes as a binary and then it also has a name object with it so we got the name and then we pass it to the file storage system and then it gives us the file path where it is storing and the django by default would manage your storage of the system i mean storage of the file in your system and that is what we have defined in here in the media url so it would create a media folder for us and then it will save the given file to that particular location so for now let's see how exactly the response comes so right now i'm sending the file path as output of that request so now the code is ready let's try this exercise i will save it and this is this is where my application is running now i will do make a post request using the postman just do it here is code json and in here i am expecting a file path as i said earlier so here i have a i'm expecting a file path and in the file path i have selected my file so let's just select it again so this is the file which i want to upload to my system or to the django application so i send it and in the response i get to see my file location and here the media folder got created and the file received so it's very simple now we have done it quite few times now so i hope everybody is comfortable on uploading a file in django application now as we know we have received our file and we have got the response also in our in our post request so let's read that file so i would use i will assign a data pd dot read underscore csv and i will read the file now we have the data object now similarly i want to score it so again i will just simply score and i will save all the output in the score here i want all the outputs in return i will get the probabilities of getting loan disbursed of that particular application now to the ui in the in the our example ui we were seeing a loan id and the associated probability of loan or home loan disbursement so we have to arrange that data now so in the data i have already got so what i will do is i will zip my data and loan id so let's check the name of the column so loan underscore id so this will give me all the loan ids and we have got the scores also of of the same so i will associate this code now they they both would be in the zipped they would be together and now i will just create a dictionary of it for i in so actually it won't be i it would be jk so the loan id and the scores and then j comma j so this would be my final score now as a output score score let's check the application so here i will do the same request again and now you can see we have got our output in the format the only thing is we have got the loan id and the probability of one in my application demo i was showing the data in a sorted format so we can do the heavy lifting here itself by sorting the data in the response itself so the main idea is we have to actually sort our dictionary to do that and there is a sorted function score dot items each item and then we would use and we have to give it's not through the id of the u loan id we have to sort it using the values so items and then we have to assign key is equal to lambda x so from the first element and that's all and i would just say simply reverse is equal to true so that it will it will sort it in the decreasing order so once this is sorted so instead of sending everything in a bunch i would store all the information in another key that's or let's just simply say this is this is good enough so i would say score yeah this is fine score is equal to this now i will send it back here and i will just rename it result score so let's check once again through the postman so this is this is good i will just send it again and this time score and everything is ordered for us so that we can render it in the ui all as well in a simpler format and as you can see this all are in sorted order now as we can see the probabilities are decreasing and it is 1 is the highest here i think we are kind of done here we have two requests which one makes a rest call of a jason and gets the score back the another is makes a rest call of a python and gets i mean make a rest call of a file post method and then get all the results scored and we are kind of good now so this is our finish of the django application now we have tested it now we are going to go ahead with react development or the ui component development of our full stack application now we will start with our third component and that is our react front end application to start with the front-end application or creating the react application you have to first have a node.js installed in your system so once you install the node.js in your system you have to start the command prompt and then simply say create react app and npx is what i'm using so npx create react app and then you have to say your project name so one thing which we have to be careful we are not supposed to use any capital letters so i'm just going to say front end ui is my project name and this takes a quite bit time it takes all the things it installs everything and it finally creates your web app or the entire framework of the react here so one thing we have to kind of be aware that react is a component based framework where the main idea is to have a single page application not much of a too many routings in different pages and then so all those things are possible but but the react's main philosophy lies in the components so it has its own component it has its own jsx a way of writing the code so your even html text looks like so html takes get rendered in the required javascript with the use of babel which comes with the react so whenever we start a react application we get a lot of different components started running so we first get a web server then we get a webpack and then we get a bevel which converts our jsx code into a javascript friendly for the browser so we will wait for few more minutes so that it starts everything and creates everything for us so it's almost done to start our project we have to just simply say yarn start so first let's get inside our so this is the app which got created these are the relevant files and i have to just simply say yarn start so instead here i would launch my vs code here and we will do our exercise in vs code so now this is the file structure of all the things so we have got everything in place so this is our root file from where all the things get started so without delay let's see so i started a terminal in vs code the shortcut is control and tilde and then in here you have to just simply say yarn start and now as i said it will start our web server it will start babel it will start the web pack and then it will finally make us make us available this one ui on which we will be working from now onwards this takes a bit but so our app is on this is good now as let's get our hands dirty without further delay so this is our core from where this ui is being rendered right now so what what it is so as i said earlier this all are based off of jsx it's not a html it looks similar like html but actually it's a gsx so as you can see div in normal world we will have a class but here it says class name that is what the jsx attribute and the bible will convert that into a required html or javascript code so that it can be rendered in the browser so i will just remove this particular part delete and save and when i save automatically it gets reflected in my browser meaning it works in a concept of hard reload where any change in our component gets reflect in our application as well so i will just simply say h1 so most of the html tags are valid here it just they are right now in a jsx format we just have to be mindful of that so our h1 and i will say hello world i will save it again and as you can see it's now represented so our dummy app is on so all these things are working in the root of our world i mean in our browser and it all gets attributed through here so as you can see we have called the app as a block and this is the block which it has called so let's uh let's learn how it actually works so even here we can call any other blocks which could be a another component in our webpage or in our website so how it works is so let's say in our actual final ui we need two forms one is for json and one is for the file upload so let's create a page through which we will redirect and we will see the form so i'm just creating another page for now and we are going to learn how to routing with this exercise so in here in the src i will add another file and any name up to you and any style of writing the file name so i will just say file upload dot js now this is my js file and i will copy paste the code here which i copied from the app.js and in here i am just simply saying instead of hello world i would say hello form and i will create a new function name upload form and this upload form would go as a name here and export default the name of the function is what actually gets rendered through that particular file so this is kind of a must and that's all that's all we have done right now now we have to import it in here so import our file name so let's just simply say file upload and close the tag and in here i would say what we have to upload we have to upload this particular function so i will copy it and i will paste it upload from and we are kind of good enough now here i can just simply call this as a block and that's how you call it and now you can see the whatever things i will write inside my file upload js file inside my function will get rendered in my main page that is rendering through f.js because i have called this particular block in here that's all that's how the component works but now let's come back to our main objective we don't want to show it as a block here we want to show it as a navigational bar right so we want to create a navigational bar as our first objective so to start with i would also like to add a home page instead of just app i will create home dot js now once i have it i will just copy paste all these things i will paste it here and instead of load form i will say home here i will say home here i will say home hello home so that we can differentiate now in here i have to call it back from so we have to import so our function name was from and our function name was home from home dot js now here if i have to call the and now you can see hello home so now let's jump into how to create the navigational bar in our application to create a navigational bar i would also like it to use as a another component so i will add another file i will say navigation bar dot js and i will come back here i will copy paste and here i would just say navigator i mean just a function name i will call it here i will call it here just says identifier for now now i have to import it here as well import navigate so our name was navigate function name was navigator from navigation bar and i save it now in here i would call the navigator and let's see how it works so so far we are in control now how to create this navigation bar so if i have to give that information i have to write it here so div this and then i would create a nav so within this component i will just remove it now i would first have a ul and within this ul i would say li and my first would be home and second would be form so i would just simply call it batch batch processing so that it makes sense in the world of so i will save it and as you can see here it displayed it now i can add another something let's say h1 ah instead of h1 let's say h2 and i will say world bank or i would say home back but so this is how it is now in here this navigation bar we if we just provide a style we would be able to reflect it in here as a navigation pane so let me just add the style so it's adding this style you just come here in app.css all these styles you can keep them as it is we they are not going to bother us and just so here so in nav i'm going to add the style so i'm at my nav i have to style it so i would just simply say display as a flex and let's see what happens and now you can see here it started showing it's it started reflecting the changes so it's hard to reload so now next we can just simply say justify the content and space around similarly we can say align items to center and then we can simply say minimum height of our things then it would be let's i'm just kidding x then i would also give some background color so background let's say black and now i can say color of my font and that would be white and we are kind of good let's save it and as you can see here now the next thing is we have to give some style to our lists or the li components which is in our navigation bar so if you would have noticed i have directly given the style to my nav here directly now similarly either i can just simply say i want to give based on a class name so in ul i would say some class name so in here not the standard class but here we have to use the jsx and that is class name and here we would just give some link here so let's say and we link and i save it then i come here and i give the command so and we link that is what the name which i have given here just to confirm and we link yes now here again i have to just give these styles so width i would just simply say 50 percent then simply say display that would be flex then i would say justify the content at space around then i would say align the text and align the items at center and then simply say color as our simple white that is fine now in here we have to give the so if i save so it got from uh ordered it becomes a horizontal earlier it was vertical as you can see here or observe here now the second thing is we have to remove those dots so the simplest way of doing it is simply now and we link we i can access the li here and i would just simply say display again flex and i would say line i would say list style and would be none and i save it and we are kind of good here our navigation bar is running now now the next part is once we have defined our navigation bar so navigation bar is good now now we will go ahead and so so right now we do not see anything happening right there is no link here we have not given any ref or the href kind of stuff so that we can navigate or change the ui so let's do that so by default it does not just simply is available in our here by saying href or something to to have a routing in our application we need to import react router dom so there is a library which we have to install first to use it it does not get installed by default or ever so for that i will close my application and i would say npm so if if it is visible npm install react router dom so this is the package which we have to install and it's going to take some time and we will wait for it so it gave me an error here which is fine i have to just i have to just close this here and then install it here so i am at the right place i would say in mpm install create router dom so i think this is good we have to start our vs code again so here what we are required to do is we have to create a url for this particular or we have to make it active or that's called routing in here so i would just start my application again yarn start and it will start it up here i will close this one and then once that starts so in our app.js so so routing is kind of thing which we have to care here in the react application so let's let's do it so in here we have to first import relevant libraries or functions from the relevant library so right now we will import react router dom it will say me that react doubter router dom is not used and all those which is fine now from the react router dom i want to call say from certain library i mean certain functions browser router as router then i would call route and then i will call switch so this is good enough so now i save it and all these things are not being used which is fine i will remove this so at this particular point we have to cover our entire navigation in a different format so what it would be like so i would call first router which would be my parent tag here and this will encapsulate all the things on which i want the navigation to be so router now we have the navigation navigator which we have already called in here i will remove this particular part we don't need it anymore we have a home page for that to display now inside the router we want to have a very specific route and that is the function which we have called here so inside the route tag what we would say is path on which path we want to link that particular component with so like home.js we want to associate with slash only like file upload we want to associate it with file upload let's say so i will just simply say processing that's what my path would be now so i would just simply say batch processing inside the route i would say which component need to be called so the component which we want to call is upload form that would be inside a function so if we have to call any blocks or a function it should be in a curly bracket so now i have got my route if i save so the first thing which is gone is the hello world which was the first notation then we have a navigator so i will have my navigator at the top because that is the this home bank home badge processing all so beneath it i have my route once i have my route for the upload form we don't need this anymore so i will just save it and as you can see now only hello home is being visible which is coming through our home.js so in here let's say we want to create it for the home also so the same route if i want to create it for the home i would just copy paste all and i would just simply say here and for the home i just need the forward slash and in here i have to just call home because home is also one of the components which we have got so once i do this it's fine enough now here if i just simply say batch processing and i enter so in upload form we should be seeing hello form actually but we didn't saw it so it's not a problem we will come to that so this is also fine there is one thing which i have missed and that is whenever the react.js starts url routing it starts from the exact word word match kind of or element to element match so if it finds the forward slash which is this one and that's what we are seeing it would just stop it there it does not let you go after that it just match it and it stops it so for that we have to call the switch and this switch tag actually helps us on doing that and also we have to add another thing which says exact in the route so once i do this it's fine now as you see the first impact is we are not seeing any hello world kind of stuff here anymore i will just remove it if i do batch processing again ideally it should have given me the component of whatever page i am going to but it is not i think this is the problem here so if i save oh yes i was not even aware that space can create a problem here so yeah so there is one thing which we have to mindful now there should be no space in this route stuff so okay whatever so right now i'm able to see my hello form when i'm in the batch processing and if i just to remove it and i say and then i get hello home so which is fine but now actually we have to make this home and batch processing as a live thing so if i click on it i should be able to see this particular webpage then for that i have to go on my navigationbar.js and in here we will again use the package which we imported that is react router dom and from this package we will import link link from react router dom so now what this link helps us on on making a link for our allies or the lists so what i will do is i will just call link i will close it and i will bring all the things inside the link and in the link i would give which path i am expecting so to forward slash and we are good here so now you can see the color coding got changed and hence it is active so similarly the same thing needs to be done for our batch processing so i will just take it here paste it here and here i would say ba dch batch processing and i save it and to do this we would go to i mean the color does not look good in here as you can see i can now change and switch from the navigation bar no need to write it in there so i will go to a f dot css link li color is white and we are done so our first navigation bar is completed in our application now we will move ahead for creating a form in our application so the form i am going to create in the home dot js so react comes with a nice way of defining class and that we inherit their component in it so this is a standard way of writing so right now our home is being delivered using a function home now in here to create a form i am going to use the state or the way the react helps us on creating the forms in their component basis so i would say class and then i will say some name json form and i would say extend component and then one bracket then every component would render something so we can write some code here then every render would have a return and this return is what we will edit for our ui so just now be with me this is where things will get tricky but still this is the core basic so if you start your react journey this is from where you are you are going to start also so this is not going to be anything any kind of alien stuff here so we are in return and in return we will use the jsx so i will say div and i will say form so now normal html coding but still we are not doing the plain vanilla normal html coding either so we are doing a jsx form and this is a good way of manipulating or using javascript for writing a form also so i am just writing few things and then we will handle all the operations using the javascript so input and in input i would say type is equal to text and let let it be as of now as it is then we will say input type is submit then i would say type then value submit and we close it and once i save it nothing happens the reason we have defined a json form but we have not added it in our component or in our function so to imp include it it's just simple this way and save it and as you can see our form is available to us now this is where when we have defined a class we would have constructors so i would say constructor and all the things in the world of react is props or properties so i would call constructor and in the constructor this is how the constructor is called within every constructor it is compulsory to say super and save props simple now in here we would define whatever our form is expecting right with me right so when i say whatever my form is expecting the reason we are not handling our form using html tags we have to handle our form using javascript so this is where all the alignment of things happens so once we have defined our super i mean our props and in our constructors within our constructor we would say what things we are expecting from the form so right now if my input has type and then name as we have in the standard tag i would just say input 1 got it so now this is the name so this is we are expecting when somebody would hit on the submit button so right now i have to declare it in here also so this dot state so this is the state of our entire form and here i would say i am expecting input so the same input one and the value for it so let's say for now i would say hello that's all so we have only one state so if i have multiple values i would just extend it in within this dictionary so if i save it nothing happens but but we are in the right track now once we have defined our input now what we have to do is whenever anybody would enter anything in here that has to be handled in a javascript way not with the html tag way so what happens we have to create a functionality within our class which is to say handle our change handle the change in our inputs so i would say handle change and i will expect any event an event meaning anything or any interaction which user does so that's the event for us so whenever any event happened so we can just simply do something let's say event happened and we can do console.log okay let's alert first alert and something let's say fire right now default jj now how to associate this change in here so input so what we have to do is we have to say on change that's the things comes with the jsx here on change we have to call this dot handle change and i save it now if i click ok there is one more thing which we can do here is the value and we can bring it from this dot state dot here we have given input 1 right so input 1 so if i save it now and you can see hella came there so i would just so i made it hello and so so far we are good now if i make any change as you see i i'm getting a alert which we wrote there so so this is good now i would just simply say inspect here so that we can keep on tracking instead of alert because that kind of makes sense to do something more so right now what we want is we want to change this particular value based on the users given information so how to do it it's very simple let's just simply first explore again so when we say alert i mean let's not sell it console.log and event so this is what happens but event comes with a attribute called dot target and this is what is really important to us to understand for a form so now i have redone everything i will just say a and as you can see here this is the target now i'm i'm writing anything and it's it's showing me the event.target and it is not letting me print anything here because everything has to be handled or whatever i'm typing is not reflecting in the ui it's just getting populated in my console the reason we everything has to be handled by javascript and javascript has to update that value so what we have to do now is we got this state this state gets updated with the value which comes with that particular event so what i am going to do is this dot set state what we want to do is we want to set the state whatever target name the user has given so just to understand dot name plus i would just say and i space here so that it's clear and value so i will save it and as you can see now this is fine but still i'm i'm able to okay i will just remove it first and now hello f d s so because we are not maintaining the state but but this is how it is so input 1 is our name and the hello d or s whatever is getting printed is our value so i think it's clear now so i will just say i will just remove this so set state and our state is a dictionary and within that dictionary i will have my first block which would talk about what name i want to update and the value with which it has to get updated i will just do it here now save and now if i do this one something is wrong what times cannot read property set state of undefined and this is supposed to be happen the reason is i have to bind this change to that particular attribute so this dot handle change is equal to this dot handle change dot bind with this and if i save it now i type a and as you can see it's allowing me to take the value and throughout the time it is also showing me how the value is getting changed so this is the first lesson we learned how to take the input at least in the world of react so everything is getting handled by javascript now the second part now we have to click let's say i click the summit nothing happens actually because in the summit we have not given what needs to be done with it so similarly in the form i have to say on submit something has to be done and that's something we have to define here so similarly we have written handle change we have to return we have to write handle submit and similarly the input would be event now things has to be written here what needs to be done after written that's the whole point here now for the handle submit this time i won't miss it i will just do it immediately handle submit handle submit and in here i have to just call this dot handle submit and i save it so in my handle summit let's do something i will say alert and let's pass the value which we have written here in the submit so i would say this dot state dot input 1 and we will alert it when the summit happens so a everything takes alert whatever value we written is now being created here or being shown in the alert but this is not our objective is our objective is to make a post call yes now to make a post call we have to do a lot of here and there things so let's jump ahead i mean let's jump into the writing the actual logic so we want our form to have the form of entire whatever things the user want to fill so let's first do that so in our form we want to have this many inputs it's going to take a lot of time to me but i'm just writing it and you can just do it in your own system as well so just to give an example how i mean i'm doing it for the first three so that we all are in same page so in here i have the text which is fine i have the input 1 which is also fine right now at this particular point we also have to now manage it everywhere so this dot state instead of input 1 we want all the other informations like gender and what value of the gender the value would hold as a default then similarly married and what value it will hold as a default and dependent what value it will hold as a default so that is first then we also need to provide it in here value dot first is gender then we have married okay so let me first do it so in my ui it was everything was in a table format so we have to do it in the table format here as well so i will call the table inside the table the javascript or the jsx ask us always to have it inside the t body so that's what i'm going to follow otherwise it throws an error in the console for for like so much time in here i would just after before submit here now all my t so inside my t body for the first one t r and i would say gender so in the tr i need to have td that's how and the next this particular one i will just cut i will say td then i will start another td i will delete this rest and i will finish it here and i save it and it's perfectly fine now ah the another thing which i have to do is i have to add the style so i am going to add the style in here as i am using the plain one in a table so this is fine now it looks more now in here as i have done for the standard i mean for the gender i have to do for all the other variables which we want to use it to fill it as an input so now i am going to add everything and i will just explain what it is so after adding this i have to add all these variables in our constructor as well so that it can be managed so after reading all this information of a form i have to add all these values in our state as well which is here so i have it ready so in here i will just remove this and replace it with this one so it has all the values and now if i save i get my form filled now when i upload i mean when i submit this form i have to make a rest call with this values changed based on what user has given that get handled by using this handle change function now with the summit we have seen it shows us as the console log or the alert now what we need to do here is in our handle submit we have to aggregate all those data which get reflected or change by the javascript by the event which the user has given we have to do a post method or the post call here to our rest service of django so now comes the interesting part let's say in here i have written hello world so where i have the hello world i will make it uniform with what we have seen there so in our home js instead of hello home i would just simply say this one and i would just change it to something else and enter details to get approval chance of your application which is fine now coming to the main point where we have to do a post call of handle submit now there is one more interesting thing in my actual ui i was also showing the result in the same page so right now in our render where we have a form i will in encapsulate it inside a div which is here and this do gets closed here now after this i will add another div and what it will do is div and i will say the probability of score or getting approval is something and now that has to come through from our back end so right now let's do an exercise how to show it so i will just simply say score but this not gonna work i have to say this dot state dot score and now this state dot score we have to handle it or manage it in here so i would say score and some value for now let's see one which is fine now so if i do this so do can i do it here and yes so the probability of getting approval is one which is coming from the default now let's say by submit action which we have here uh here i i would just update it for now and let's see how it works so i would say this dot set state set state of what we want to set the state of score score with let's say 10 right for now and save and if i score is not defined okay good enough this dot state dot score and we are here let's summit and that submit action is not able to update the value so then something is not correct actually if i just try it one more time and submit ah perfect so what we have to do is event dot so that that is what the problem was the the value was getting updated but it was not reflecting if if you were not able to see it just observe it here at at this particular point so if i submit 10 and it gets back to 1 again back so the reason is we have to call prevent default so event dot prevent default and we are good then now simply i just submit and now 10 and it stays there so that's how it works now we have learned one thing now we have to just do the post call to post any i mean to post a call we have to use a fetch library of the javascript and i i have a very tricky i mean hacky way of what code has to be written i can just simply come here in my postman and i click on the code and in code if i select javascript fetch it gives me what needs to be written and it's it's simple right so that's what we have to call here so this is the code but i will be writing it again so just to show how to get if you get stuck or somewhere this is how you can get a code ready for you for yourself to save your some time so to start with we will start by defining our variables so in here if something is not supposed to be changed over the period of time you define it by using const keyword so i would just say const and i will say url now my url would be what so again i will get it from here so this is my url which i want to call so this is my url now similarly i have a i would have another const which would give what are the options we want for our uh request to be made so i would say request opt so this is now my variable here i would say method and my method is post then i would say headers and my headers would be because we are sending a um json response here so my header would have value of content application json so now we are at the right point now here we have to just so this is this is good enough for a request header and the url now next is we have to create a body on which we want to send the data across to the post method using post method so i would say const i mean this we are not changing in this part so i would just simply say body data and this particular one we want to send through which the user has changed right we and we don't want to send the default one so the way we have write written here the simply simple thing has to be written again but in a different manner and it's going into a body so it has to be in a string format rather than a json format so what i would do is json dot stringify this converts any json to word text or a string and then here i have to write a lot of things again so gender and this would be this dot state dot gender similarly for everything i have to write so i am just going to do it so here we have then i have added the all the others so area then education just so that we can see it then application which is correct then loan term so all the forms are getting filled here now we have to call the fetch part so this is where things gets closed now i would fetch in the fetch i would say url and this is going to be pretty fast so i don't see any point of using await but using await is always a good good practice and we will see how to do it in our next part which is the form file upload and getting the response back so fetch then our entire url then once this would bring so the fetch has already got the output let's assume here so after the fetch happens we say then what needs to be done with that so we want to say okay save the output or get the output and convert it into a json format so this is what we give as a command then if i want to do another then what to do with that afterwards then we want to take that json format in some other format let's say i mean just a variable declaration and we want to update our score which we have defined here we want to update our score with the outcome which we have got from the back end so if i see here i get a json response with her score key and the values associated to it so in here i would say this dot set state set state of so what we had done in the on submit here set state score inside here score and what would be resp j dot and i think we are kind of done here body data is assigned a value but never used which is fine we would pass it in here so when we are passing it in here we want to send it in the body so just to confirm if i see the code here you can see body raw and raw has to be json stringify so here body is equal to body data save it body is not defined actually this has to be inside our this part and now this part needs to be pulled back down here and save it unexpected which is fine i have to just do it this way and i come here and i submit fetch url okay handle dot submit constant and the error which i found is typo method post i submit and i see another problem here what is wrong everything has some or other problem today cut paste save and submit again finally finally i wanted to reach to this particular error so now what this error says is no access control alone allow origin and this is what we have to make our other system that is our back end to allow the cross header calls right so our course header so what we need to do is we have to be here in our django application and in our settings we have to allow course header so the first we have to add in our installed apps course header that is the first change second change is we have to add this particular middleware courseheader.middleware.cosmiddleware so this is second change and then we have to add another configuration and this is the third change so once i am done with it which is here i am all in right place just let's see if my application is up and running or not yes it is running now i submit button which is fine i will just restart it this is also running which is fine and in here we have score file which is not correct we have to call it's for jason i call it here score jason and i save it i come back here i submit okay still compiling uploaded submit and as you can see my score got updated so finally something is done and that is the first part where we wanted to have i will just add one h3 and then i will close it here s3 i save it and i submit it i got my score so our first part is done of our application that is having a form updated by a back-end django and the ui is created by the react now we will come back to the next part that is batch processing and in here we want a file to be uploaded and this file uploaded file should go to the django system and from there we will get these codes and we will show a list so let's start with the third part of our react app so in this particular part we have to cover how to upload a file then make a post call but now as we can think of when we send a file it can be a big file as well and it can take a lot of time to process so right now in our previous fetch or previous post call we were not doing or we were not awaiting or we were not expecting any delay in the response but in here we have to be prepared for a delay in our response from the backend server and that's why we would call the fetch using the async function now in here our form is not a big deal but our output is of a big deal so we will get a lot of output from the back end in terms of a dictionary or a list and that we have to populate in our ui so let's start with building the functionality for our upload form so same i would again take part of creating a class i would say form form batch then i will say extends and extends to component and in the component as you have see now kind of a familiar we have to say first render in the render we would say return and in return we will return our jsx so here i would say div and in the div i would create a form and in this form i would have a let's say a label for now which says batch processing i would be careful about my input would be file and let's say name is going to select file we will come to the on submit later and this is how our input gets defined and then we need another input which says type is equal to submit and then name value is equal to i save it form batch not used form batch has to be called here now we don't need okay let it be there for now and we call the component and in here i can see my file uh the another thing is i would not want batch processing here i would just simply give it as a heading in here which makes more sense to me batch processing choose file and submit now in the choose file we have given a name uh select file what we're gonna do is we have to create a constructor here constructor which would take a constructor would take props then in here i would call super which would take props and this now i would say set state this dot state so this dot state then i have to update it so this dot state is going to i have my first element that is select file i'll just define it here and that would be null for now and then yeah this is this is good now let's say once my response is received i want to show something here right that's the whole idea so i will add can i do it here div and i want to say whether file got posted or not i mean in a simple word so response from server i would say let's say for now or we can give a boolean but for now let's start with null this so in here i would say this dot state dot response for server so we will come to this later but right now um so let's say we have this form i have rendered it then now i have select file once i have my select file we would want when the user select it should actually get accepted by the javascript so right now we have to say handle file we will create a function like we did earlier for our normal form so in handle file i will call event and whatever has to be written i will write it here i will just close it this one now earlier which i forgot so this dot handle file is equal to this dot handle file dot bind so once we have it we will call it here on change call this dot handle file which is fine now so when we will reach here let's say console dot log event dot target dot value so that we see if it really works or not so we come here choose file we upload a file and it reflected meaning it is working and in simple words so as we can see the log name also came in here so right now we are good here and our kind of work is not completely done now once we see that file we have to reflect it to our select file so in here what i have to do is this dot set state set state of what so we would ask event dot target dot name whichever it gets and from there whatever value it has so event dot target dot value and we close it here so can we reflect it what file has been chosen here there dot select file choose file select a file and and we can see the file here so we are kind of good in this particular part so we are able to save it we are able to retain it using the javascript now the next part is we have to handle the upload so when i have to handle the upload i would first create a function handle upload and i would say event and then done so i have to attach it here so from on submit i want to call this dot handle upload so which we are fine now now in here in handle upload as we have already discussed we have to do a fetch right so the first and foremost is we have to bind it first so now this dot handle upload is equal to this dot handle upload dot bind save it which is fine now in here we have the event handle upload now like wise earlier i would just prevent it from getting re reset so prevent default and i close it now once we are here our main objective is to upload the file to the relevant place so to know more about how it actually work so we have already clear created this score file right and we were pushing a file there so same i will come to code and i can see in a script fetch how to send a fetch file to the server so this is this is what it is now so we want to add a file path which we will do then file input dot files so the first element and then the name so this is how we want to send a form data so we will create a form data we will send this values which we have stored in this dot state dot set file i mean where the file element is select file and then we will do this particular call so in here if i see our request option has method body in the body we have the form data and we are just sending it so i will just close it and i will now start writing it here so first and foremost i will create some variables constant my url and my url is this one once i have my url i will create my another constant that is the the file which we want to send file to send so just one thing to remember so whenever we upload a file here it gets read in a binary format and that's got sent to the system how to get to know about it so even if i see here i i will just send it one more time and we get all these things i will come back to the code and as you can see here if i see the python requests so it's written in a binary i mean it has been read in a binary and it's being sent so similarly same action would be happening in my javascript fetch as well so that's why we want this this kind of a functionality to send the data so constant whatever file we want to send so that is our this dot state dot select file in here this is second element now let's see how does it look like console dot log and file to send let's just view it once so i have my upload url is okay i select my file which is fine and now i click on submit and in the submit you see it has been printed again so that is what is happening in here in the file to send now the next thing is we have to prepare our form data which we saw in here if i open the code so this this form data i am just doing what exactly is written here so i will just copy paste it and i will paste it here so my where form data which i created now append in the form data this operation needs to then file path is what i am expecting in my django application so in here i would just simply say remove all this this dot state dot select file which is fine now and in here in the name of in the in the position of the name what i have to do is this dot state dot select file dot name and we are good so this is how we created our form data now the next thing is we have to create another variable which we will have the request options in the request option we have now method in method we would say post then we have body and in the body we would send the form data which we have just created and i think we are good here so this becomes my request option now the second thing is as i said earlier this process can take a quite bit of time to get the response back from the server and that's why we want to use await functionality or the async functionality so if we would be writing it in a function way then we have to write it in a async functionality and that's why we have to change this part a little bit so in here i would say async and then the value event on which we i'm expecting and then this way and and it's it's done this is what the change we needed to do from the previous to this one so now from here onwards i can have a weight functionality in my values so i will say con another variable which going to be constant a response just a variable name is equal to await which is this is really important here await fetch our url which we have created and then the request option which we have just created here request option and then close it then the next part is whatever is coming to us we have to wait for it so constant the response from the system in second variable name await then whatever response we have got from the previous dot json format so that we can read it so far we are good now how to show this response back to our system and back in our ui and this is where in our state we have only kept two values select file and response from server so we can take the response from server and update it with the resp 2 which we just created so this dot set state in the set state i would say response from server and resp2 and if i check here my response come in a result so dot result and that's how i updated my response so let's save it once and see how our ui behaves i click and i will also keep an eye on my this system i will click on this file and i click submit and uncaught type error called execute append on form data is not of type blob so the reason for that particular error is because we have taken the file as a value which is absolutely incorrect so instead i have to save files and i have to select the first element and we are kind of done but now we have to remember one more thing what we have done at the end here is we have we have printed the select file which was just the name earlier but now it's a blob or it's the binary object here so this will also start creating a problem so let's just see once i will just select one thing and see it started giving me an error again and it says either you show something which is html format so this is not an html format so i will save it back and this time i will just simply say train and submit and if i check in here it has got the request at the same time now we want to show that result in here in a tabular format and also uh how to confirm whether we have received the value or not so in here i have saved it in the resp from server and dot result so i will just instead of that i will paste it here i save i choose the file i select it and as you can see the output is displayed so we will now arrange it so it's like id and the score id and the score id and the score this is good this is good we are at good place now now there is one more interesting thing which has to be understood so right now whatever we where we have done is inside in this class right everything is written in here and whatever we want to return was written in here so let's say right now you want to publish that result here so either you would use this response right you would you just get it and now you have to write a loop here to make it valid so let me it's look it looks in a tabular format but to write anything kind of a loop or or in javascript world we have to write dot map to create a tabular data from this one particular large array and that cannot be done in this particular part here that is not even at all possible the reason in this particular variable we cannot say dot map and start our work so that's where we will use the render component so whatever is in here in return we won't write it here but actually we will write about the return and that value we will bring back into the render so let's see how it can be done i would say just give yourself some time and and think about what i just said right now can you do a dot map here with this particular way i tried and i found the solution by writing everything in the render so now in here i will just say i will define variables let's say the response which i have got from the state so my state is rest from server so i would say trade data is equal to this dot state not set state state dot so this will give me all the data now now from here onwards i have to do is i will store it in some other thing so constant array table is equal to iterate data dot map once in the map i would define a variable so once i have my x i need to create a table here so let's let's first show it x only let's say only x so if i save which is fine but i have not used the error table and also if i read here it says but never use no used parameters which is fine so in array table can i call this array table here i think yes i call this error table here and again it gives me another error cannot read property map of null now this is has to be understood so right now we defined our variable which is in state here res from server null and when we are loading it first it's not going to be iterated it's not iterated object so it cannot be iterated over so that's where we have to have another information whether we need that or not so i came up with the hack and that is i will create another variable and i will call it output is equal to false so if output would be false i won't be doing all this operation and if output gets true i will do this all operations and what i am going to do is once i reach here and in here after all this response i will set this dot set state to output to true because we will get the output after the loop runs so now in here i will i will just remove this now as we have got the hold of it so i will first instead i will i will get this value which is fine now i will also check whether my output is ready or not and i will call it checkpoint and i will say this dot state dot and now in here what i will do if so now conditional statement has to be written so if my checkpoint would be true which is if it is true if my on submit button sets its true then only this all code would get executed and it would be like const table data is equal to my iterate data dot map and in map i would have x and right now i'm just going to print it i'm not going to do anything right now and x and i will just close my this now from here onwards at least now i would see my x now else nothing needs to be done so i would just simply say table data is equal to no response just for now and i save it and it says okay this way and table data is not defined so if i do this it still saves me expected an assignment or function all this the reason is we are returning a iterator which html or dom does not does not understand actually so we have to write it in a sum tag which it can be represented so a list tag just for the starter and i save it and now let's just simply make a call which is still fine cannot read property map of null true perfect we are not bothered about it at least it is working now in here we still have the problem if the data is not completely pushed or fetched from the server and that's why it is making this problem and to do that we have to just reorder one thing and that is because this is getting set before even setting the result so i will just do it again response and as you can see now i am able to see the values at least now it is working and now this is just about the div which we are rendering so we have no problem with it so right now i have to arrange them in a tabular format so we have already dealt with the issue of not having the response and then finally showing it now at this particular point the way we want to render it is using a table so not by using this thing we want to render it using a table so how to render it using a table we have to add a table segment here so in here i would so this table data which we have created so this is where the map actually stopped so i would say final table data is equal to it has to be in final table so table and as mentioned earlier it has to be within a body within my body i would have pr in this tr i would have td which says id and then i need another td which says the probability once we are done what i will do is i will add this table data and i will perform so what i will do is in here i would say tr then i will have td and i will pass my x here now the x the first element is my ids and the second element is my probabilities if i save it what happened here tr td td dr oh sorry i do not need another tr and now let's do it one more time test data and we are good so here i have my table and this table should have the properties of this particular css why it is not able to take it oh god final table has to be rendered here save it final table is not defined which is good i have to do it here also final table data is not defined table data is this and then const choose a file test loan submit from here i have to remove it choose a file test loan submit finally so all demo is kind of finished so home button submit probability get changed batch processing probability get changed blah blah blah blah so overall at the end of this video it was kind of a long process to do in the react but i'm glad i did this exercise so in last four days i learned the react i was able to implement it and somehow i was able to manage to prepare the video as well thanks for the people who asked me for this particular tutor special shout out for naman and manu who said they they would really look forward for a react integration my feedback after learning the react yeah it's little bit more effort for writing if i have to create some application but yes it's kind of uh it kind of gives me a more overview how the front end developer has to expect the output from the backend server or any microservice so it's kind of a good exercise for me and i'm hoping i would make something more interesting after learning the react the the the learning curve for the react was quite steep i was able to do things because i was kind of clear what task i am looking for and most of the things where the javascript things came into the picture also were kind of easier to understand and there were a lot of supports available in the online community or maybe in the stack overflow so there is ton of things to be learned in the react these are the basic which i learned and i was able to create this application thanks for your patience i hope you are able to understand this particular video and this particular full stack application development and i would recommend to comment your thoughts and if you are stuck somewhere please let me know and i hope you have a great day and happy learning thanks for your time and have a great day

Channel: Technology for Noobs

Views: 6,607

Rating: 4.9601989 out of 5

Keywords: django, web framework python, python django tutorial, data science, 2020, python tutorial, django python, tutorial, vcode, python debugger, vscode for django, django react integration, django app, rest api, django project, reactjs, django rest api, machine learning, classification project, react frontend, navigation in react, post form in react, file upload in react, post file in react, home loan classification project, full-stack application, class in react, fetch in react

Id: Tnto7gi6Zzo

Length: 107min 57sec (6477 seconds)

Published: Sun Jun 14 2020