Django and React: Full CRUD part1 backend API

welcome in this tutorial I'll show you how we can create a django restful api to serve our awesome back-end and how we can connect that with a front-end react application so there is a lot of things to cover and I will go a fast if you'd like to know that more in details I have our course on udemy at the moment it's almost 12 hours but if I will finish it will be probably around 20 hours so I will provide a coupon code with this good price for you if you're interested so that will be on on the comments there so we'd like to know more go ahead you know and you can take a look at this one so what we will actually use in our tutorials first we'll use a jungle framework that's based on the Python and with the jungle framework we'll also use the jungle rest framework which is it that will help us creating our API on the front-end we'll use our react.js very popular front-end framework to have that and working with a that will need to have a few things installed so we'll need to have an own loggia so go ahead and install that from this website also we'll need to have a Python installed on our machine you have adults and you need to have a Python at least 3.5 in order to work with the latest version of Django also as for our IDE how to use a patron for writing my Python and I will use Visual Studio code for writing our react script we have all of that is installed so go ahead and do that first and then we can continue our tutorial so I will go to the terminal here I will go to desktop and then I will go to react Django folder that is prepared and inside I have two folders back-end and front-end so we'll go to the package first and let's create a few things here so I will create a drunk application here so what I will need to do is I will need to create a new virtual environment so I'll do Python 3 and the enfant I will name it the same way we so that will create a new virtual environment and I will also need to activate it so I will update activate it now and the way you activate it is different on different operating system I mentioned that in the course I mentioned that before a so if you are a curious a just google it how to activate a table to an environment on your operating system and then to you will easily discover that so once I have that I will install few rings and I will use the pip once you have the Python installed the pip comes with it so pip install will need to have a jungle we need to have a jungle the rest frame work all together and then also you will need to have Django cores headers with slashes so the moment three packages will be installed for me okay that is done you can do LS we have that installed individual Angermann so what we can do is I can do Django - admin and then we can do start project and name of our project let's say I will call it backend API now once we have the backend API project what we can do is we can create our application so I will go to the project where we just created that we just created so back in the API here and what I will do is I will do Django admin start up and I will name our application we you can have more than one application inside inside your product I will name it API that's a broad name and but we'll use it okay we have everything set up here what we can do is we can switch now to the PI term and we can finish or set up things there okay I have that folder open you can see my fear - an argument and back-end API here so I can open that also what's handy here is I also have that terminal open here so I can finish doing things directly here so I am at the moment in the backend API folder so everything is available for me here what I can do is I can do a Python 3 manage P I and then I can do my grade so we will make my grade all the built-in things in the jungle into our database and then what I can do is I can do Python 3 managed by create super user and I will leave it as blank so that would be the name of that I'm currently login email address I can leave it blank password I will do the same Christian and I will repeat it again and password is too similar to the username I don't mind this is not a production version so we have our user created ok so what will we need to do I will go to the backend API here into the settings and I will change few links here first thing we need to add the installed apps so I will add rest frame work course headers and then also I will add our API like that so once we have that I will do my grade again and you can see nothing is too up like sometimes when you have you are installed apps you will have some migrations with it and then you apply it to your database whatever you do migrate that means you take the migrations and apply it so what we can do and now is we can start our server so if I will do run server like that it will start a new server so you can copy that and paste it in a browser or you can just click on it and you can see here our jungle application is up and running so this is already working we haven't done much it but at least the application is ready so we will go to back to our PyCharm and we'll do a few things so I will open API which is our application and we'll need to add few things at the moment we don't have anything in the models but we will use the models that are coming built-in which angle so at the moment we need to we don't need to add anything here so what I will do is I will create a new a view set for our users and also I will create a new serializer so let's start with our users first whatever need to do is from rest framework I will import views it's also from Django contribute authentication models our import user so once I have these two things imported I can create a new class and I can name it user view set like this you can name it whatever you like but that's the conversation I have so view set and the name of the model and then we can use the view size we imported and then we will use model view set and that will come with all the methods and we can specify that we'd like to use the query set of the model user and then objects and then I will select all for them all like that also what we can do is you realize our class we can use the see user see your Lizer at the moment we don't have that user serializer so what we need to do now we create a new file so Weiser's PII and here we can create a new serie rather for our user what I will do is I will copy that and paste it here instead of you that will import serializers and we'll also need that model so I will create another class and I will name it exactly as we have it here so user see realizers and I will use serializers model serializer another thing what I need to do is I will need to class new class meta and inside here we can do model it's going to be our user and also I will specify the fields and that's going to be array and I will have it ID and then I will have user name also I will have a password and we will come back to this later on at the moment we have that user serializer what I will need to do is also need to import it so from C realizers import user 0 okay the moment we don't have any errors so what we need to do is also I will create a specific URL so new file URLs PII and I will put all the URLs we have there so at the moment I have in my back and API which is our project URLs and like that I can remove the comment and from here I will redirect several copy this I will redirect to my URLs and then I will have a specific URLs to our API in in the separate file here so I will import from Django conf URLs I will import include and I can use this function to include the other URLs I have so I will include API API URLs okay so once I have that I can copy some of it and I will create a new URL part here but this time we are not gonna include admin again an API what we'll do is we'll have a empty part and it will register all our all our robot with our Road a router so I can import from rest framework import routers and I will create a new router router it will be equal to routers and now we'll use default router so what we can do is we can on our router we can register and I will register users that will be our end point and I will register user you said at the moment I don't have it imported so from from wheels import user review set and we have that so at this point I have and this on the router so what I you need to do is I will include this router URLs so what I have here is on the main URLs file I have admin which is say comes by default with a jungle and then I have API so that API will redirect to this user and then I have whatever I have registered on the user so to get to the users I will have localhost / API slash users so we have that and so no no model named a router we have some errors here and this one we need to have it like that because we refer to this local variable so I will save it now and I will kill it now and I will run the server again so the moment server is up and running so what we can do is I can open up postman post on if is very popular tool for testing the API so what I can do is I can create a new up here and if we go here we starts our starting point that's our URL if I will copy that to the postman and then I can do slash API and slash users and then slash and I will use metal to get on it so I will save it send it and you can see here that's my user I've created with a create super user so our application is running we have our endpoint already here and so that will be available for us to use it in that case we can actually fetch our data from our API in insight or a front-end so at the moment we have users and everything is unlocked and you can query the users if you have more users in your database then you can you will see it all all of them and the ID username and password these are the fields I specified here so ID username and password basically what we will need to do is we need to have a few things a setup we need to have out integration for the specific user and also we'll need to have a way to create a user so to create a new user what I can do is I can do an postman on the same endpoint I will have post and then what I will need to do on the body I will do form data and what I can do is I can specify the key and the value so I will have user name and let's say I will have Christian too and then I would provide password and then Christian too as well so if I will send it on the same and what it users with a post sending you can see here ID username and password has been sent if I will change back to the gate and send it again you can see at the moment I have two users in our database but there is a one problem the password isn't some normal text so what we need to do is we only need to hide this password from the from the view and also we need to hash the password that is coming from here so in that case wherever someone will query the user from the database he is not gonna see any password so let's do that now so we'll go to the serializers Naruto extra quarks new object and I will do password there's going to be another object and I will do right only that's going to be true also I will do a quiet it will be true so what I'm saying this is right only so it's not going to be displayed will be skipped when I is Rollie but it is required if you want to create a new one so if I will save it now and go to the postman and I will send it you can see ID and username the password is hidden because it's our right only so what we'll also need to do is we need to overwrite the built-in method we have for this user and we will use our own in that way we can hash this password so I will do def create and that will be validated data so we refuse err and it will be user objects great user and normally I can pass the username and password what I can do is I can do that's right Astrix validate the data and then I can do return user so basically I recreated built in the function but this one I create an object user with a built-in option and I take the validated that we which is the data that is coming query that from the form we send it that Christian Christian Christian - Christian - and that will create a user but this time it will hash it so for the moment if I will comment this out and let's come back to our postman here if I will send it to get you can see my password is back again so let's create another post and create Christian 3 and Christian 3 so I would say that send it now you can see at this time the password has been hashed so now our new method is working I will do get and we have this one is harsh because we created with a great super user this one is not bad past because we didn't have that metal yet and this one is passed again so everything is working fine now we can uncommon this and I will come back here and then we'll hide our password so another get sending and everything's fine so what we can do is actually we can at least I you the lista user and we can also create a user what we'll need to have we'll need to have to our user the way to authenticate so we will send a username and password and in that way the our user will be authenticated so let's do that now so I will go to their views here API views here and we can add another authentication or I can actually create that in the our main URLs here so we'll have admin API and we can add our extra one so a loop at I will need to import from rest framework authentication token this I will import obtain authentication token and I can use it here so I will create a new part here and that will be out like that you can name it whatever you like and then we'll use this here also what we will need to do is what we need to come back to the settings here and we will also need to add that identification here so I will do rest framework out token like that so once we have that I will stop the server so control-c stop the server and then we'll need to do python 3 managed p i migrate we also need to put a comma there so that's the mistake and then will migrate that means will apply as you can see from authentication token we platings to our database and at the moment we can expect this users will have will have the high token so what I can do is when we go to our locker server when the jungle is running we can go to that admin section at the moment our server is not running so we need to run it again so run server this is running so I will go here and you can see that admin has been built in the URL so it is available here and I can authenticate with my super user if you create a super user it will have an access to this Django administration and here you can see all the data you have in your database so what I can do is I can go to the users you can see all my users has been listed here and I can go here and see more information about that user so everything is working fine but what I want to do is if I go here you can see that's a new token from the authentication token and at the moment I don't have any token stirrer so what I we need to do is how we need to create our token for a user and if I would select my Christian I can save it and that's my unique token for that user the rest of users don't have it because I didn't have that yet when I created my user so how can we actually do token for the new users if we go to the serializer what I can do is I can do token I will do one token first I'm going to import it so from rest framework authentication token models import token and then I can do a token dot objects and then I will do create and then I can specify user will be the user I have here so once I have it I can return it so if I will save it now going to postman let's do another post method here so this time I will go 4 & 4 so what I'm expecting it might create a new user and also I'm expecting to create a new token for this user so I will send it we have a new user created so I'll go back here and we refresh this and we have another token for this Christian 4 so at the moment we have our tokens created for us and they are automatically generated so how can we actually have that token box so if I will use method get' and then I will do method out indication here this is the URL that we set up here so if I go to URLs we read here so out indication and then we use obtain out implication token method there so if I will send it the same username and a password here and so Matt would get not allowed I need to use the method post sorry so i sending here and you can see in return i have two token so this is the way i can actually log in my user so what i can do is i can send this URL with the username password and i have the token that will be me my authentication so that's one method that we will use another method will be api users for post into username and password and will create a new user names so at this point our application is functional with the users so what i can do is i can come back here and then we can start building our front-end application so i will go see d again i have one more and then we are we will go to city front-end and here we'll create a new react application and we'll do that in the next video

Channel: Krystian Czekalski

Views: 34,803

Keywords: django, rest, api, django api, django rest api, auth user, login, regster, backend, react, fetch api, django react

Id: junWE5DoaVk

Length: 24min 33sec (1473 seconds)

Published: Wed Jun 26 2019