Placeholder Image

字幕表 動画を再生する

  • 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.

  • Her must define a define save method that returns a user model instance, and that's extremely important if we're gonna get this right.

  • So first, let's copy this default configuration.

  • They come back into base added there, and we don't need the token serial isa.

  • We just need the user details serialized.

  • That's basically to tell rest off that this is the user model that were using, and that is the specific serialize er for that model.

  • So we'll copy that.

  • User details serialize er.

  • Let's copy that pace that there and obviously the path will sort out in a second, and we can also specify the rest.

  • Orthe register serialize is which is also important because we're going to need to handle the kind of registration for our custom user meaning when the user's signs up.

  • They need to say whether their student or a teacher, which means that our registration process is going to be different as well.

  • So we'll open up addiction here and in here.

  • We need to specify the register serialize er so we'll add it there and just leave this blank for now.

  • And what we need to do is go back to our users AP and actually add a serial Isar inside it.

  • So we'll just say new file, which will be serialize er's don't pie.

  • How I got this to work is purely just by googling what is required.

  • And so this is primarily focusing on showing you how it comes to work.

  • But the model of the story is that when you don't understand something and you're trying to figure out what to do, google it and keep looking for examples of way.

  • Other people have done it and try to apply that to what you're doing Now.

  • The first serialized that we're going to create is the user serialize er, and this is the one that we've defined here for the user details serialize er.

  • So we're going to specify the path here to be users that serialize er's thought user serialize er and we'll take that name.

  • Come back into our serialize er's and we'll just say class user serialize er that inherits from the serialize er's.

  • And we need to import that.

  • So aside from rest, framework import serialize is and we're going to inherit the model serial izer.

  • And if we need to use that, we're going to need our model.

  • So we'll say from dot models import user.

  • And he will specify the class meta and say the model is a user, and then we'll need to specify the fields and the fields is just a list or fields on our model that we want to include in the cereal izer Now.

  • Normally, you would have things like the email.

  • You would have the user name, and in our case, we're going to also need to pause in the extra fields that we created.

  • So we'll add in parcel it as well, and we're going to add in our is a student and our is teacher and that's it.

  • That's our custom use of cereal, either.

  • That rest orthe now will use when serializing our user and now we need to handle the register serialize er, so we'll do the same kind of concept.

  • Well, say Kloss, custom register serialize er, just so that we don't have a really long name and this is going to inherit from the register serialize er, and we can see here in the register serialized class.

  • It's from rest or third registration dot views that register view and in restaurant registration serialize er's dot register serialize it Now you can either create your own custom serialize and handle it as well, or you can inherit from this rest register serialize er and do it that way.

  • So that's how I decided to do it.

  • So we're going to need to import that so we'll just come back in here and we've got a top and safe from rest orthe on.

  • We can actually remove that.

  • So we're saying from Bristol Registration serialize er's import the register serialize er and we'll install these course now that we have those installed, we've got our register serialize er, and we're going to inherit that in our custom register serialize er, and this is very similar to a model serialize her.

  • We can also specify a class meta and the fields.

  • So I'm going to do that as well.

  • We'll copy all of that right there.

  • However, I'm going to add two fields here as well.

  • So the 1st 1 will be the student and the 2nd 1 will be the teacher.

  • And this will just inherit from the serialize er's Boolean field.

  • And that will also be for the student.

  • And now that's actually jumped into the front end a little bit to handle that form.

  • So I'm actually going to close the models and we'll go into source to our containers and let's go to the sign up.

  • So here we have sign of genius and we've got a registration form, and basically what we want to do is just come all the way down here to the end of the form way.

  • We have the submit button and we want to add another form item inside here, which is basically going to be a select field with two options.