Full Stack React & Django [1] - Basic REST API

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys so in this series we're going to be building a full stack application with react Redux and Django alright now this isn't going to be like a really quick cookie cutter tutorial we're gonna jump in and we're gonna write quite a bit of code especially in react and redux because the django api we're using something called the Django rest framework which is very high level so we don't have to write a ton of code in order to get what we need as far as functionality so we'll create a REST API and we'll implement react and redux and then we're gonna add on ocation with tokens we're going to use something called Django rest Knox so there's going to be a lot to this the application itself will be very simple it's just a lead manager where we can add leads with a name email message but like I said we'll have authentication we'll be able to login and each user will have their own leads so if I create a lead as one user and then login as another I won't be able to see or manage the other person's lead so it's something that I think you'll learn a lot from on both sides Django and react so hopefully you enjoy it and let's get started now this is the the documentation for Django rest framework which is very very in-depth all the different concepts are here such as view sets which will be using serializers routers all that stuff and then this is a tutorial that I kind of base this upon but this is very simple they don't use redux they don't use authentication I basically just took this and then built on to it and they did a lot of things different in here as well like they used virtually E&V we're gonna use be using Pippy and V but what I do want to show you is the way that they implemented react which is what we're gonna do and is something different than I've done before so usually what I would do is I would have a stand-alone API and then a standalone react single page app like that like for number two here what we're gonna do is have react in its own front-end django app okay so we're gonna create a special app for react where we install web pack we install react react Dom all that stuff and then we load a single HTML template and let react manage the front-end okay so that's what we'll be doing and I will put this tutorial link in the description and then this is another five-part tutorial with Django and react and basically I got a lot of ideas for authentication from part four of this tutorial so if I if I'm doing something that you don't quite understand you might want to just take a look at these tutorials take a look at the documentation it's kind of a supplement alright so let's jump in I'm gonna open up a terminal and I just have an empty folder called lead manager react Django so just go to whatever folder that you want to use as your project and then you want to make sure you have Python 3 installed I'm gonna make this a little bigger so if I do Python 3 - - version you can see I have 3.7.0 I believe 3.72 is the latest but that's fine if you don't have python 3 just go to python.org and download and install it now since i have to use python 3 i after you why isn't this clearing I have to use pip 3 if I want to install something globally now the only thing I want to install with pip 3 is pipi and V because once we have that that will allow us to create a virtual environment and then we can install stuff with pipi and V in that environment so you just want to run pip 3 or pip whatever one is Python 3 and then pip env mine will go really quick because I already have installed alright once you do that you can just do pip E&V shell and that's going to go ahead and create a virtual environment for our project and it's going to create something called a pip file so I'm gonna actually open vs code in this directory and over here you'll see we have a pip file and this is where all of our packages will go when we install any packages so I want to install a few things so I'm going to say pip env and let's do install Django we also want Django rest framework and then something called Django - rest - Knox which has to do with token authentication we'll get into that later so let's install these three things and you'll see that they're going to get added here to our packages it's also going to create a lock file with all the dependencies in their versions and then once that's done I'm going to generate a new Django app so I'm gonna say Django - admin and let's say start project I should say a Django project a project and an app are two different things in the Django world so I'm gonna call this lead manager alright and then over here you'll see that it created a folder called lead manager with a managed PI file ok this manage dot pi is basically like the CLI for Django we can create migrations run the server all that stuff so I want a CD into lead manager and if I do an LS I should see manage PI alright so before we go any further if you're using vs code you want to select the correct environment for your Python interpreter so just go ahead and do a command shift P or ctrl shift P and start to type in Python and you'll see select interpreter and you want to make sure you select the one that has your folder name and then pippi and V okay I make sure you do that all right next thing we're going to do is we're going to generate a django app like i said there's a concept of apps so different parts of your project and we want one called leads so I'm going to say Python manage dot pi start app and we're gonna call this leads alright and then that's gonna create this folder called leads now whenever you create a new app you want to go into your your core file here which is called whatever your project is and go to the settings file now in settings you have this installed apps list and you just want to add your app to this so leads and then since we're using Django rest framework we need to also add rest framework all right now as far as the database I'm just gonna stick with SQL Lite which is the default just so I don't have to install postgrads or get that set up but if you want to do that you can just make sure MySQL or Postgres you put in your the the engine the password database name stuff like that it's all in the Django Doc's alright so we'll save that and now what we want to do is go into our leads folder so our leads app and we want to create a model okay so the model is basically the different fields that we want so it's gonna be in class form so we're gonna say class we're gonna call it lead and we want to pass in models dot model because we want to be able to use some of the proper to some of the objects and stuff from the core model class and if you're not that familiar with Python we don't do this like a C syntax language we put a colon and then we end in alright and then we're gonna define the fields we want so let's do name equals model dot char field that's what I'm gonna use which is just like text and then I'm gonna do a max length of 100 that should be good for the name and we're gonna have an email so models dot and there's actually an email field that will validate it as an email and we'll set a max length for that to 100 as well now I don't want to be able to have two of the same lead or the same email for each for the leads so I'm going to set this to unique okay so we'll say unique equals true and again if you're new to Python make sure you use a capital T for your boolean because that is looked at as a variable all right so next we want the message and that's gonna be models dot char field we'll do max length of let's say 500 and I want this to be optional so I'm going to say blank equals true otherwise it'll have you'll have to put a message and then finally we will do created hat which is gonna be a date/time field and I'm gonna put inside here Auto now add look didn't mean to do that I'm gonna do Auto now add equals true that way it'll just add the date automatically ok so let's save that and that's our model now we're creating the model doesn't do anything other than just creating a file we need to actually create a migration and then run that migration in order to put that table and that those columns in the database so back in our terminal here we're going to run Python manage dot PI make migrations leads okay and that's going to create this initial one initial dot PI which you can see is right here which has all of our fields and stuff now to actually add it to the database we want to run Python managed PI migrate and that's going to run all migrations and Django by default has a bunch of migrations to run because it creates a bunch of default tables for things like users and permissions and stuff like that alright so now that we have our database setup let's start to think about our API now with the rest framework we create something called a serializer and serializers as you can see allow complex data such as query sets and model instances to be converted to Python data types that can be easily rendered to Jason XML and other content types so this is obviously going to be a JSON API that's what we wanted to serve so we need to create a serializer to take our model or a query set of leads and turn it into JSON so I mean there's a lot of different ways to do this but we're going to do something very very simple which is right here create a serializer class and then a class of meta basically going to overwrite the class of meta or add to it set the model to lead and then set our fields all right so let's do that let's go into our leads folder our leads app create a file called serializers dot pi all right and then in serializers dot pi we want to bring in from the rest framework we want to import serializers we also want to bring in our lead model so from leads dot models we want to import lead ok and then we'll create our serializer so class lead serializer and we're gonna bring in from serializers the model serializer so that's what we're doing is we're basically turning this turning our lead model into a serializer a creating one from it and we can do that like saying class meta set our model to lead which you just brought in above and then fields now we could do fields and we could put like name email I'm just gonna put all we can just do this double underscore all like that okay so that's our serializer now the next thing we need to do is create our API so inside the leads folder I'm going to create a new file called API dot PI and in here I'm gonna bring in the model so from leads dot models we want to import lead and from the rest framework we want to import view sets and permissions all right and then we also of course we want the serializer we just created so from serializers we want to import the lead serializer all right now let's create our lead view set now a view set is is it's kind of hard to explain basically it allows us to create a full crud api create read update and delete without having to specify explicit methods for the functionality it's kind of like how Ruby on Rails works with their with the resources and if you want to read more about it you can go to view sets and this will give you some more information about it so we create a view set and then we don't even have to create explicit routes we can use what's called the default router and just basically register an endpoint like API slash leads and we can make get requests post requests all that stuff so to create this we're going to create a class called lead you set and we're going to bring in from view sets Model View set and then we need to specify a query set which is going to be a query that grabs all the leads so we'll take the model oops lead and then objects dot all that'll get all the leads and then we need permission classes which is going to be a list and we just want to say permissions dot allow any for now we're going to change that later so that you can only access your own leads but for now it'll just be wide open and then we need to just specify a serialized class which is the lead serializer that we created all right so that's it we'll save that now we need to create our URLs now if we look in lead manager there's a route URLs dot pi file let me just get rid of these comments and by default there's the admin because Django does come with an admin area we're not going to be using this though so I'm also going to bring in from Django URLs include so I can include a separate file and I'm gonna say for the path of nothing basically the route I want to include the leads app URLs file okay so leads dot URLs and let's see actually you know what this needs to be in quotes okay so we'll save that now right now there is no leads URLs file so we're going to go into the leads folder and create a new file called URLs dot pi and for you guys that have worked with Jango before you've probably probably done this however we're not going to explicitly create paths like this in this file we're going to use the router from rest framework so let's say from rest framework we want to import routers okay we also want to bring in from our API file the view set so lead be set and then we're gonna set a variable called router two routers dot default router and let's say router dot register because we can register our routes and the endpoint is gonna be API slash leads all right and then we pass in our view set and then just a name which we're gonna call leads and then finally for our URL patterns okay so instead of doing this URL patterns and then just a list of different paths we're simply going to set it to router dot URLs and that'll basically just give us the URLs that were registered for this endpoint and that's it we should have a basic crud API so we can test this out by running our server let's clear this up and let's run Python managed dot pi run server okay and as you can see it's on eight thousand now I'm gonna open up postman that's what I'm gonna use to make my requests if you want to use something different that's fine but postman is friggin fantastic and easy to use so we can make all types of requests so gonna make a get request to HTTP localhost colon 8080 I slash leads okay so what we get is an empty array which is what we should get because we didn't add any leads so let's open up a new tab and let's make a post request and let's make a post request to the same URL however we're going to add four headers we want to add a content type of application slash Jason and then for body I'm gonna go to raw and let's put in a name okay this is Jason so we need our double quotes can I make this bigger all right so name let's say John Doe so we have name we have email and we have message which can be anything I'll just say please contact John I don't know all right so let's try this out let's send and see we get a 500 error back oh you know what they believe we have to add an ending slash like that there we go so what we get back is a status of 201 which means everything's okay and something got created and it gives us what was created it gives us the ID the name email message and created at all right so if you don't want the ending slash you can add a set a config value in the settings but it's fine I'm just gonna leave it now if we want to let's create one more we'll say Sam Smith send okay so now if we go back to this tab and we do a get request you can see that now we have to con our nut contacts leads inside of our database now if we want to get one of these we could make a get request to let's say slash and then the ID so slash one and it gives us John if we go to two it gives us Sam if we want to delete we can choose delete make sure that you have an ID here to delete and we'll send that along gives us the the lead back that we deleted but let's go back to get and check it out just API leads oh you didn't get deleted let's see delete lead / - I don't think that worked let's put a slash oh is that why yeah we got to put a slash so now if we go back to get leads whoops okay so that was deleted so unless you're doing just API leads you have to put a trailing slash and if we wanted to update we could do a put request as well so we have a full crud API and you can see with it was a very small amount of code that we that we wrote because we used a view set so I planned on this video being longer but I think it's a good place to stop just because it's we've completed just a simple Django rest API so in the next video we'll start to implement react and like I said we're going to create a Django app called front-end and we'll install web pack react react Dom all the stuff we need to be able to compile a react application in that front-end app alright so I'll see you in the next video

Channel: Traversy Media

Views: 471,422

Rating: 4.9590902 out of 5

Keywords: django rest api, django, react django, django react, django rest framework

Id: Uyei2iDA4Hs

Length: 22min 42sec (1362 seconds)

Published: Tue Jan 29 2019