Placeholder Image

Subtitles section Play video

  • welcome to the start of a new tutorial, Siri's, and this is called Teach Me Jenga, which is a project built with Django and react, showing you how you can work with multiple users in a kind of mock online system where you can create assignments, filled them in and see the results of those assignments on your profile.

  • And so this is the finished product off that project, and what I'm going to do is just walk you through what it looks like.

  • So you get an idea of what we're actually working towards in this tutorial, Siri's.

  • So I'm gonna go ahead and log in, and I already have a user created for this, and we don't have any assignments just yet, so we'll go ahead and create one so we'll give it a title.

  • As this is, the first assignment will set the question to be.

  • Is the school well, so the answer is yes.

  • And then we'll add a choice where the 1st 1 could be Yes, and the 2nd 1 can be no.

  • And then we can have a question, and I'll say, this one is Django is awesome.

  • We'll say the answer is true.

  • then the choices are true and false.

  • And then we can submit this.

  • And now we have our assignments, an assignment that is loaded here.

  • Everything click on it and we see we get the questions.

  • Yeah, and we've only got two questions.

  • So we've got is the school will say Yes, Go to the next one.

  • We'll see.

  • Django is awesome.

  • And let's say I want to go back and I'm actually gonna change my mind.

  • Several ST No, this isn't cool.

  • Go forward, jangles.

  • Awesome will say true everything.

  • Click, submit.

  • And if we head over to our profile, you can see we've got 50% for that assignment.

  • And that's because we said that jangles not cool.

  • Where's the answer was yes, it actually is cool.

  • And so before judging how complete this project is in terms of validation and seeing detail, views and thinking, there's a lot more stuff to be displayed and that this is really just too basic.

  • You'll be surprised as to how much actually goes on in the back in to get this to work.

  • And so we're going to be jumping into ah whole lot of customization of serialize er's and a lot of reactors.

  • Well, so this is what we're going to be building in this project way.

  • The two different kinds of users were looking at our students and teachers.

  • Only teachers can actually create these assignments, and only students in theory should be allowed to answer these sons.

  • And so we're gonna walk you through the process of creating this multiple users system.

  • And let's get started with it now.

  • So to get started, you're going to want to open up V s code.

  • I've got absolutely nothing here, an empty directory which we'll use to store all the project content and get started actually going to clone something from our get up Paige.

  • And this is a boilerplate project that we created for getting started with Django and react.

  • And that is here.

  • The Jenga react boilerplate.

  • And this is just to help getting started with adding projects that a bolt with Django and react because it seems we're going to be doing this for quite a while.

  • So I'm just going to grab this year l here and going to clone into this depository so we'll just say, get clone.

  • And that will bring this repositories into this folder, and today we have it.

  • We've got the V s code project settings.

  • We've got home directory, which is basically our Django project, and we're currently using three different settings files, depending on whether you're in production or development.

  • And then we have a source folder which has a basic react project set up a swell.

  • Now I'll link a video showing you everything that's contained inside this project, which recovered in one of our videos, showing you how to set up with indication between Jango and react.

  • So everything in that video we basically took and just compiled it into a boilerplate repositories so that we could just pull that easily so we don't have to keep on repeating ourselves that way.

  • We already have a nice set up to get started with, and we can get working from here.

  • So what I'm going to do is just bring all of the folder contents inside this directory that I'm working with and there we go.

  • Now I'll just clear out the terminal and we can take a look at what we've got.

  • We've got TVs, code settings, which basically is just sitting pilot and the python part of Virtual environment path and some files to exclude.

  • In obvious code editor, we've got the Home directory which has a base settings for all the installed abs, middle way templates and some other things that will need for both development and production and then in development.

  • You've got the allowed hosts being our local host, debug being true.

  • The W s job application for development and a DBS collect three daughter base set up with the local host off 3000 being in our course origin White list and then in production, we've got our domain withdrew.

  • Need to add the different Ws July application for production a daughter base set up for post grace which we don't actually have those credentials set up just yet.

  • But we've got the configuration.

  • They we've got orthe password validators and static file storage for when we use white noise.

  • And this is all with the intention to eventually hostess on Hiroko.

  • That's why we have a profile here.

  • But we'll get into that towards the end.

  • So we also have the source folder which currently has ah, wrap dress which is water trying to sign up.

  • We're using react redox hence these maps, state props and map dispatch methods that were connecting to our app.

  • We've got a higher order component which basically returns the Children off the props that up Austin.

  • And we've just got a layout, a log in and a sign up container which again also comes from that video tutorial on authentication with Django and react.

  • And so what we want to achieve in this video is basically to set up the Jang arrest framework arrest orthe, which is what we're going to use to authenticate uses on the back end.

  • But we're going to need to customize that if we want to actually have our own custom user.

  • So we're going to create our user.

  • We're gonna create the serialize is for that user and show you how you can customize the rest orthe to allow for those users.

  • So we'll get started by opening up the terminal and just creating ourselves a virtual environment which will just name virtually envy.

  • And there it is.

  • We can activate that and we'll say, Put in stole, dash our requirements dot t x t and we'll open up another terminal here to install on no dependency.

  • So just run in P.

  • M.

  • I.

  • And we can get started with creating ourselves a users app, and this is where we're going to create our custom user.

  • So it's a python managed up.

  • I start app and will say the name is users and we can go into our home directory to settings based on pie and inside the installed APS, weaken, scroll down and add our users.

  • And with that, we can close based on pie, and we'll go into our users Appiah and we're going to the models.

  • And what we're going to do is import the abstract user, which comes from Jang Go's contra orthe models.

  • So we'll say from Django that contract that oft of models import the abstract user.

  • I'll see you get two types of users that are prompted.

  • One is the base using one's the abstract user.

  • Now the abstract base user will require a lot more configuration.

  • Have also covered this in another video where we actually used the abstract base user to create our own custom user and show you how you can link that up to be the default user of your sight.

  • Whereas if you use the abstract user.

  • It's actually a lot simpler, so we're going to go ahead and use that.

  • We'll add close you and called us the user, which inherits from the abstract user.

  • And basically what this means is that it has all those attributes like username, password, email.

  • All of that configuration has done for you.

  • Except now you can add the fields that you particularly want to actually add that will make your users that much more unique.

  • Now, in our case, we're going to store two kinds of users.

  • We're going to have a student and a teacher.

  • You could be both at the same time, but we're not too worried about that.

  • And so the way that we're going to handle that is by adding two fields on the user, and he's going to be Boolean Fields.

  • So we're going to have the Is Student, which will be models dot boolean Field.

  • So either true or false, and then we'll have the is teacher, which is also a model's dot brilliant field.

  • So that means is that when we create the user, we're going to need to pass in whether this user is a student, so either true or false and reading to Parson.

  • If it's a teacher and they will just say define the string method, which takes himself and also return self dog used name because remember, this doesn't hear it from the abstract user that is our base user, and that is what will be using when we create our users.

  • Now what I'm also going to do is define another classier, which is thief student, and this will just be a model stop model.

  • And all we're doing is basically a signing a 1 to 1 field with the user, so that instead of working with the base user that we created here, will work with student model when we need to refer to a an actual student.

  • And we're not going to add too much configuration to this model.

  • But it's just a little bit more convenient because here on the student, you could then passing a lot more other fields, like what classrooms they belong to, what grade they're in, et cetera.

  • You could do a whole bunch of things like that.

  • We as the user, you just want to define whether that uses a student or a teacher.

  • That's the whole purpose off.

  • This model here will just say that the user equals to a 1 to 1 field with the user that we just created here and will say on delete equals two models dot cascade so that if the user is pleated, then their student is to lead it as well.

  • And then we'll just say Define string, which takes himself and say Return self dot user dot e mail, for example, or using it.

  • We could do as well and so that we then need to go Intel Django that our default user is actually inside out users app.

  • So we're going to go into the home directory to settings based on pie, and we go all the way to the bottom here, and we'll just say that the oath user model equals two uses dot user.

  • So basically what it's saying is look inside, users don't models and find the user model that is our default.

  • Or use a model to use when authenticating users animus against had one was sitting here, which is for unique emails.

  • So will say that the account, unique email equals two.

  • True, Basically, this will ensure that we don't get any duplicate e mails off our users and like that weaken now try and make migrations so we'll just bring up the terminal will say, manager pie, make migrations and we see we get create model user and create model student.

  • And then we'll say, managed a pie migrate to actually migrate those and we also get the base migrations for the entire project.

  • And now, if we were to try and create a super user, then you'll see that you'll actually run into an era because it's going to use our custom user, which has two extra fields on it.

  • So it's going to tell you that is, student cannot be null, and his teacher cannot be no in that user.

  • So to create an admin news, we're going to need to create it through the pipe and shell.

  • So we'll say Pontin managed a pie shell and here will say from users.

  • Top models Import user will say that a equals to a user.

  • We'll say that a dot use the name equals to admin.

  • A dark password equals two.

  • Let's say dude, 123 we'll say a dot is staff equals two.

  • True so that it's a staff member and ADA is super user equals, true as well.

  • And then just say a dot save and you see that it gives us the user's user.

  • That is, student cannot be no.

  • So we say a dot is student that said it equal to false.

  • And we say a dog is a teacher equals two True.

  • And now we can say a don't save and now it's correctly saving.

  • And if we were to say user objects dot all, then you can see yet a query set response with the user off admin, So we'll exit out of that now.

  • And let's call Pathan managed a pie run server so we can actually run the server and viewed in the browser.

  • This is what we have by default because we already have a bold directory appear in our project.

  • We have the Build directory, which is what's being referenced inside are based settings to use aesthetic files so we could actually come here to the log in and let's try and Logan, without user will say admin and pause in dude 123 And it seems that that didn't work.

  • Let's check the consul and we get a server responded with status off 400 bad request.

  • And if we take a look at the server here, it's not giving us any information.

  • It's just saying that the post to this euro wasn't successful.

  • It was a bad request.

  • And the reason for this is purely because we haven't set up rest or to understand our new custom user.

  • Because the custom users trying to see the default Django user that it's used to.

  • But we're not using the default use that we're using Island Custom User.

  • So we need to go into our base top.

  • I mean, we need to configure the wrist orthe serialize er's and the rest or register serialize er's, and you can check this in their documentation.

  • If you just sexual custom.

  • Django wrist orthe.

  • Then here.

  • The first link is a configuration for Jenga Restaurant Soup or 9.3.

  • So if we check that out, then here you can see it says you can define your custom.

  • Serialize is for each end point without overriding murals and views by adding rest or to serialize er's dictionary in your Django settings.

  • Possible key values are the logging serialize er that token serial Isa.

  • The user details serial Isa and all these.

  • So, for example, it says three rest or serialize is a dictionary where the Logan serialize er is a path to a custom Logan serialize er and the same thing for the token serializing.

  • And it also says, yet you can define your custom.

  • Serialize is for registration, however, note the custom of register serialize.