An Introduction to Django-Unicorn

hi there and welcome to this video on django unicorn we're going to see what django unicorn is but basically it's a django library that gives you some very useful functionality for making dynamic and interactive websites you can see on the documentation here it adds modern site functionality you can quickly add interactive elements to django templates and you can skip all the javascript ecosystem the build tools that you get and things like react.js and angular this is kind of a purely django and python oriented way of doing reactive websites so it's quite useful and we're going to dig into what this library offers in this tutorial so i've prepared a blog post as well and we're going to work through some of the concepts in this blog post and then we're going to create a web application that allows us to create a django unicorn component and we're going to see what that means and how to do that in this tutorial so the objectives are to learn about django unicorn and also to build a small moving list component and with that you're going to be able to add movies to a list and delete movies from a list so we're going to see how to do that later on a quick deep dive here there are some central concepts in django unicon one of them is components now these are kind of similar to components and react if you know that and they basically allow you to define some contained functionality um in a python class and they interact with the template and that's another part of the core components of django unicorn you have the component templates so every component class has an associated template that renders the html and it can be changed in ways that are kind of similar to how it's done with react and angular so we'll see a bit more about that later on you also have a concept of actions which are events that occur in the user interface for example a change event when an input element changes when you're typing into a text field a key up event for that for that one as well you may have a click event when a button is clicked these are all called actions in django unicon so any dom event can be supported and finally you have native integration with django models and query set objects so we'll see more about this as we go on in this tutorial let's now get started with the setup what we're going to do is we're going to create a movie list component and we're going to create a django project from scratch here with these commands so if i copy that and what i'm going to do is go to the visual studio code editor and we can paste that command in here it's going to start a new project called moving list and once that's done we can cd into the created folder and we've got the resources created there like the manage.pi script and a folder containing the movie list so i've opened that folder in visual studio code and now what i'm going to do is run pythonmanage.pi start app we're going to create an app which we'll call movies and that will create another directory and here called movies as you can see here with some basic django files like views.pi next thing i want to do is pip install django unicorn and this is the library obviously that we're going to look at in this tutorial so that should install that and that might take a second and once that finishes installing what we need to do is go to our settings.pi file and i'm going to remove this comment and we're going to add to the installed apps both the the movies app that we created and also this is important you need to add django unicorn to that installed app that will register as an installed app and what we're now going to do is create a very simple model in django we're going to call it movie and here it's from models.model it's going to have a single field that's all we need for this introductory tutorial and that's going to be a car field and it's going to be the name of the movie and that requires a max length let's say one two eight so we can store the name of the movie for example the godfather or any other movie in this field and i do need to spell length correctly that should do the trick and now what we're going to do is we're going to run make migrations and that will create the migration for the movie model and then we can migrate and that will create the database the sqlite database so the next step i want to do is within our movies app we're going to create a templates directory and that's going to contain a very simple index.html file and i'm going to copy and paste some code in here and this is going to be used as the index.html file so what we have at the top is a special django load command we're loading the unicorn tags into this template now that's important if you want to use django unicorn you need to load the template tags and then down here we are referencing a particular template called movie list now this template doesn't exist at the moment but we are going to create it in a minute and you can see that the body of this html is very simple we have a csrf token for security purposes and we have a very simple div here which contains a bit of text then there's a main tag which contains the unicorn component so now we need to build that component and one of the things that django unicorn provides is a an actual manage.pi command a management command so i'm going to run manage.pi and the name of the command is start unicorn so start unicorn and then we provide two arguments to the start unicorn command the first one is the app where we want to create this component and the second one is the name of the component and i'm just going to call this movie list so if we run that command you should see some successful output here and within the movies app we now have a new directory called components which contains a file called movie list dot pi which is the same as this movie list component here so we now have a movie list component that we can look at and we see that it's just a normal python class that inherits from the unicorn view so we're going to build this component in a second but first of all we're going to create a very basic djangle view and it's going to be a template view so i'm going to copy paste the import and what we can do is we can create a class called movie view and this is going to be for viewing the movies and the application that'll inherit from template view and we can then set the template name attribute to be equal to index.html which we've just created and now we need to create a url for this view and we also need to wire up django unicorns urls as well so let's see how to do that we're going to create a urls.pi file within our app and then we can go to the project urls file and we can include those urls so we need to import include from django.urls and then we'll set up a path to those urls now just basically an empty path will be sent to movies dot urls so within our urls.pi file now within the app what we can do is i'm going to do a couple of imports and then we can set up our url patterns the first one is going to go to the unicorn endpoint and what we're going to do now is we're going to include again so i need to import include actually already got it there we include the django unicorn app that we've now got in installed apps dot urls that's um an attribute on that so that'll include all the default urls for django unicon to do its processing and we also are going to set an empty url here which will take the movie view that we've just created and render that as a view so that should be all we need to do so now we've got that url what we can now do is actually build out a component for showing and displaying movies on the page so we're going to build the component now and what we're going to do is go to the component template now the component that we got here um as a class so you can see that here it's a class in python but we also have in the templates directory we've got a unicorn subdirectory within there with our movie list components html file now this is the component template that we're going to edit um now one important thing to note is that the template code has to have a um a single parent attribute and so you can't have like a dev and then an h2 down here or something like that no you need to have a single parent component so we'll put the component code within a div and again this is quite a lot of html so i'm going to copy paste it and then we can look through the code so pasted that in there what we've got is a header tag saying movie list and then a very simple line break and below that we've got some unicorn directives now let's walk through what these are we want to allow a user to enter a new movie so we have an input of type text and this is important here unicorn model this binds this input to a property on the component that we're going to create in a minute and then we have a button which um when it's clicked we'll call a function within our python class the component class so we'll see how that looks in the front end in a second we also have another button that allows us to delete all of the movies from the list and that again is referencing the unicorn click action and this action the values of these actions are set to properties or functions on the component itself finally what we're doing is we're um we're iterating over all of the movies in our movies list and we're showing the name of that movie so the idea is when we click delete all without a reload we want to dynamically delete all of the movies and do that on the front end and when we add a movie we also want to dynamically add that interactively on the front end without a reload and django unicorn provides that functionality for us so the next step is simply to build out the unicorn view now this is the most important part of this tutorial so i'll save these files and we can go back to the component so at the moment this is an empty class but what we can do is we can look at the front end here and we see you know some rather ugly looking front end to be honest but it's not not a tutorial about css or anything like that what we can do is when we type in here and you can see some post requests have been sent when you type in but if you look at the the template for this component it's of type text and it's bound to an attribute called name on the class so we need to create that attribute the unicorn model directive tells that field that it's bound to a particular attribute on the class so if we create a name field this is the name of the new movie that we're typing in and by default that's going to be an empty string so we can also type hint that as a string and the second thing we want to do is define movies now this is going to be something called a query set type of movie and by default it's going to be none because we don't have any movies at the beginning so we'll see none there and we need to import this from django unicorn components and we also need to import the model object as well so we'll do that just now now that's the two attributes we have in this template let me just quickly take you through that we've got movies here now this has to also exist in the unicorn component so we've now created movies by default there will be no movies but there's a special method in django unicorn called mount similar to the use effect hook and react if you know about that this can be used to perform instantiation actions on the component mounting so we can set the movies to movie.objects.all now by default there are no movies but when we mount the component we want to go to the database and get all of the movies from that database so the mount will populate the movies field and when the user types into this text box then the name field will also be populated with some text so we have a couple of functions we need to define when we click the add movie button we want to dynamically add the movie to the database and then render it on this list this can be done without any reloads without any javascript needing to be written django unicorn provides all this functionality for us so let's now write the add movie function so it's another function on the component and this one is going to take in the self argument so the purpose of this function is to create a new movie so what we're going to do is say movie dot objects dot create and remember there's only a single field on the movie and that's the name and we're going to set that equal to the self.name which of course references this field here that is populated as the user types okay so that will create a new movie and then we can update the self.movies attribute to be movie.objects.all there's probably a more efficient way of doing that just appending the movie but for now that will do and one other thing we want to do is when we add a movie we want to set the name back to an empty string so that will have the effect of when we click add movie this will remove interactively the text from that field there and the final function to define is also in the component template and that's called delete all so if i define that take some self and this one is very simple it's going to delete all of the movies in the database so movie.objects.all dot delete and of course we then set self.movies to be movie.objects.none and that will clear out the front end so that when it iterates over all of the movies which of course is mapped to this component here there are going to be no movies because we've deleted them all from the database and then we've dynamically updated that field on the component so i think that might be all we need to do let's give it a test now so we're going to add some movies on the front end and see how this unicorn component works with these actions so let's start by adding taxi driver and godfather and you can see that we're not reloading the page or anything but these new movies are being dynamically added to the list here and we can keep doing that for as long as we want and let's add fargo and then if we inspect the network tab here on the developer tools if i add a new movie let's even if i type a new movie so let's type big lebowski you can see that post requests are being sent here to the movie list endpoint and that's all done by django ninja we've not written any javascript to send these ajax requests but every time you type in it is dynamically updating the name attribute of this component and that's because of this unicorn model directive so that's how that works and then finally when we click add movie if i just clear off that we click add movie and it sends another request and that's hitting the function here dynamically again we've not written any code but we're adding the movie to the list and finally we can delete all in the movies from the database and and then update the movies field on this component by clicking this delete all button and dynamically all the movies are gone so this is very nice functionality very easy to do and we aren't using any fancy front-end frameworks this is all part of the django ecosystem we write django templates and component classes so it keeps things very simple it keeps things all within the django ecosystem and i think that's a nice feature of the django unicorn library and it's a library that i'm very interested in and hopefully we'll make more videos on that in the future but that's all for this video this has been a longer one so thank you for watching and if you have any questions please leave them in the comments and if you enjoyed please like and subscribe and we'll see you in the next video

Channel: BugBytes

Views: 473

Keywords:

Id: oCOd2kEhD5U

Length: 17min 0sec (1020 seconds)

Published: Fri Nov 05 2021