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

Key Takeaways

[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.com 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 Jang go all right now this isn't going to be like a really quick cookie cutter tutorial we're going to jump in and we're going to write quite a bit of code especially in react and Redux because the D Jango 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 going to add authentication with tokens we're going to use something called D Jango rest KNX 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 uh leads with a name email message but like I said we'll have authentication we'll be able to log in and each user will have their own leads so if I create a lead as one user and then log in as another I won't be able to see or manage the other person's lead um so it's something that that I think you'll learn a lot from on both sides sides D Jango and react um so hopefully you enjoy it and let's get started now this is the the documentation for D Jango rest framework which is very very in-depth all the different concepts are here such as view sets which we'll be using serializers routers all that stuff and then this is a tutorial that I kind of Base this upon um 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 um and they did a lot of things different in here as well like they used virtual EnV we're going to use be using pip EnV um but what I do want to show you is the way that they implemented react which is what we're going to do and it's something different than I've done before so usually what I would do is I would have a standalone API and then a standalone react single page app like the like ver um number two here what we're going to do is have react in its own front end D Jango app okay so we're going to create a special app for react where we install webpack 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 uh with Jango and react and basically I got a lot of ideas for authentication from part four of this tutorial so if I if I'm 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 uh as kind of a supplement all right so let's jump in I'm going to 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 going to 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 have to 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 pippy and V because once we have that that will allow us to create a virtual environment and then we can install stuff with Pip EnV 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 all right once you do that you can just do pip EnV 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 going to 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 D Jango we also want D Jango rest framework and then something called D Jango Das rest- KNX 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 and their versions and then once that's done I'm going to generate a new Django app so I'm going to say django-admin and let's say start project I should say ajango project a project and an app are two different things in the Django world so I'm going to call this lead manager all right and then over here you'll see that it created a folder called lead manager with a manage.py file okay this manage.py 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.py all right 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 uh command shift p or control 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 pip EnV okay make sure you do that all right uh next thing we're going to do is we're going to generate a d Jango app like I said there's a concept of apps different parts of your project and we want one called leads so I'm going to say python manage.py start app and we're going to call this leads all right and then that's going to 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 going to stick with SQL light which is the default just so I don't have to install postgres or get that set up but if you want to do that you can just make sure MySQL or postgres whatever you want to use is on your system and you put in your the the engine the password database name stuff like that it's all in the the Django docs all right 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 the different fields that we want so it's going to be in class form so we're going to say class we're going to call it lead and we want to pass in models. model because we want to be able to use um some of the propert some of the um objects and stuff from the core model class and if you're not that familiar with python we don't do this like a cyntax language we put a colon and then we indent all right and then we're going to define the fields we want so let's do name equals model. charfield that's what I'm going to use which is just like text um then I'm going to do a max length of 100 that should be good for the name and we're going to 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 to be able to have two of the same lead uh 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 uh for your Boolean because that is looked at as a variable all right so next we want message and that's going to be models. charfield 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 ha you'll have to put a message and then finally we'll do created at which is going to be a date time field and I'm going to put inside here Auto now add didn't mean to do that going to do auto now add equals true that way it'll just add the date automatically okay 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 m migration in order to put that table and that those columns in the database so back in our uh terminal here we're going to run python manage.py make migrations leads okay and that's going to create this in this 00001 initial dopy 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 manage.py migrate and that's going to run all migrations and D Jango by default has a bunch of migrations to run because it creates a bunch of default tables for things like uh users and permissions and stuff like that all right so now that we have our database set up let's start to think about our API now with the rest framework we create something called a serial izer 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 Json 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 our 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 or leads app create a file called serializers.py all right right and then in serializers.py 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. models we want to import lead okay and then we'll create our serializer so class lead serialized and we're going to 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 or creating one from it and we can do that by saying class meta set our model to lead which we just brought in above and then Fields now we could do fields and we could put like name email I'm just going to put all we can just do this double uncore 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. pi and in here I'm going to bring in the model so from leads. 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 um methods for the functionality it's kind of like how Ruby on Rails works with the with resources um 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 uh an endpoint like API leads and then we can make get requests post requests all that stuff so to create this we're going to create a class called lead view set and we're going to bring in from view sets model view set and then we need to uh 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 doall that'll get all the leads and then we need permission classes which is going to be um a list and we just want to say permissions. 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 specif ify a serializer 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 root urls.py file let me just get rid of these comments and by default there's the admin because D Jango 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 going to say for the path of nothing basically the root I want to include the leads app URLs file okay so leads. URLs and uh 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.py and for you guys that have worked with Jango before you Pro you've 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 view set and then we're going to set a variable called router to routers do default router and let's say router. register because we can register our routes and the endpoint is going to be API leads all right and then we pass in our view set and then just a name which we're going to call leads and and then finally for our URL patterns okay so instead of doing this URL patterns and then just a list of of different paths we're simply going to set it to router. URLs and that'll basically just give us the URLs that were registered for this endpoint and that's it we should have a like a basic crud API so we can test this out by running our server let's clear this up and let's run pyth python manage.py run server okay and as you can see it's on 8,000 now I'm going to open up Postman that's what I'm going to use to make my requests if you want to use something different that's fine but Postman is fraking fantastic and easy to use so we can make all types of requests so I'm going to make a get request to http Local Host colon 8000 SL API slash leads okay so what we get is an empty array which is what we should get because there's 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 for headers we want to add a content type of applications Json and then for body I'm going to 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 let's see we get a 500 error back um oh you know what I believe we have to add an ending slash like that there we go so what we get back is a status of 2011 which means everything's okay and something got created and it gives us what was created 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 um a config value in the settings but it's fine I'm just going to leave it now if we want to Let's create one more we'll say Sam Smith and send okay so now if we go back to this tab and we do a get request you can see that now we have two con or not contacts um 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 he didn't get deleted um let's see delete leads slash two 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 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 a uh just a simple D Jango rest API so in the next video we'll start to implement react and like I said we're going to create a Jango app called called front end and we'll install webpack react react Dom all the stuff we need to be able to compile a react application in that front-end app all right so I'll see you in the next video