FLUTTER + DJANGO FULL STACK APP BUILDING THE BACKEND (PART-1)

so hey guys what's up welcome back to another video and in this video series we'll be building a full stack to do application uh with the help of flutter and python on our back end so i will be creating our own server and we'll be creating it with the help of django and django is basically a second framework for python like level is for php or nodejs for javascript and whenever we we are using django we get a database by default which is sqlite in this case and i'll be using this database to store my produce and to fetch the to-do's i will be building up a rest api with the help of the django rest framework so guys in this video i will basically be building up our backend and then in the upcoming videos we'll be creating building our app and also connecting it with uh the server or the backend so with this guys let us get started before starting this video if you guys are new to this channel and if you guys want to see more videos related to web and app development then make sure you subscribe to my channel and also press the bell button so that you get notified every time i upload a new video and also you guys can join our facebook group where we discuss new projects and new ideas links will be given in the description below so make sure check it out and do enjoy this video so guys first of all in my desktop i'm just going to create a new folder and i'll call it to-do app and then inside this uh to-do app folder i'm going to create another new folder i'll just call it back-end so this folder will basically contain our server and inside our big back-end folder we need to create some files so for that i'm going to open it with my visual studio code so uh right here i'm going to add the file section and i'm going to open folder the back-end folder okay folder and now uh we have the back-end folder which is uh opened in our visual studio code so i'll be using visual studio for as an ide for this video and right now uh what we need to do we need to open the terminal so we get an uh terminal here which will be quite useful and now uh here i need to run some commands so the first command which i'm going to run is uh the pip env install tango version 3.0.3 which i'll be using in the series enter so basically what it is going to do it is going to create an environment or a virtual environment and it is going to install the django of that given version into that environment and it just takes a couple of seconds uh or maybe a minute or two and now i as you guys can see it has been installed in my system or in my virtual environment now after that uh what i need to do i need to go get access to that virtual environment so for that first of all i'm going to run an another command and it is ppnb shell enter and now i should be inside that virtual environment and this is the name which i didn't decide upon it is just getting created automatically so um you don't have to focus much on that until and unless you are manually creating a such uh such an environment and inside of it first of all i need to get inside my first of all i i need to create a new django project so right now i i have not created in any new django project i have just installed the django uh in my virtual environment so to create a new django project i'll just run the command django admin start project and i'll name the project as to do enter and it should create a new project as you guys can see over here so inside this project first of all we get another folder of the same name and also we get one manage dot ui file so basically this managed vi file is very useful and it is uh it is going to help us run our apps so a django application can consist of several our various apps which combines and works together so now we need to create one app for our to-do's so for that i need to get inside the folder so cd to do app and inside my folder uh what i'm going to do now is i'm going to create a new app so for that uh i'm just going to run python manage dot py start app and i'm going to call it as to do enter and it should create a new app called to lose out here as you guys can see over here and now after that uh what we need to do we need to register this app uh into our project so for that we need to go inside the folder uh which was initially created when you created the new django project and with the same name of course and inside this folder we need to go to the settings.py file and right here you will see the section called installed apps and under this we need to uh just add our app to it so uh for that to do dot apps dot um blues we have now configured our uh app uh the todos app we which we have just created to our django project and now after that uh what we need to do we need to go back to our terminal and we need to run another command to set up the first migration in our initial database so for that i'm just going to run python manage dot ui migrate enter okay so i have mistakenly made a spelling mistake so python man ui great okay so it is now running the migrations and as you guys can see we get a db dot sqlite file which is basically our database file and now after that we need to create our models so basically we need to define uh how each to-do is going to look like so for that first of all let me just save this and i'm going back inside my to-do's folder and there i am just going inside my dot py file and as you guys can see here uh we are been asked to create our models up here and we'll just be needing a single model just to do model out here so let's create it so our class to do and it will be of type model all start model and in python we use the colon and after that uh for our to do we need our two attributes the first one will be the title and the next one would be the description of course so the title would be a basic character field and i think we can set the limits to the title or we can set the character limit to max length equals let's say 200 characters and then we have to define the description and we'll not be giving any limits to the description so we'll just be using the text field so model start text field and after that we have to define the sdr method so for that sdr and it is going to be a self and then it is also going to return the title so it would be self dot title and then uh yes that's it so um that's for our model and now what we need to do we need to go back to our terminal and basically we need to go back to our project so cd to do app and inside of it i'm just going to make the migrations to our database so our database can create a model along with these two attributes so a separate column for each of them the title and the description and inside our terminal uh where we have the virtual environment we need to run a command to make the migrations to uh to create the migration file and then to migrate the changes to our database so for that i'm going to run the command python manage ui and make migrations and we are going to uh need to create a migration file for our to-do set so to do and now it is going to create uh the migration file and now we need to migrate so that we can log out change to our to the project database so for that python manage dot ui and it should be migrate which we have performed earlier also and we are performing it now because we are now making the changes to the models and that's it or we are at adding the models and now after that uh what we need to do we need to register the model to our uh todos app so for that we need to go to the admin.pi file inside the kudus folder and right here i can register my models and for that first of all we need to import from models we can import the to-do model so import to do and after that we can register it by calling an admin dot site dot register method and inside this register method we can pass on our model so that to do model and now let's save it and after that uh we what we can do we can view uh if our models has been created so to view it basically we need to get access to that admin panel and to get access to that admin panel we need to create a super user so to create a super user first of all uh what i'm going to die i'm going to run the command python manage dot py create create super user no spaces please and now it is going to create a super user and i'm just going to name a given name called admin and also i'm going to give a dummy or just a simple mail address admin at the rate of admin.com and then you can give the password so it will basically ask if the password has contained any special characters or not but since we'll be uh working in our local environment so it doesn't matter much so i'm just going to keep the password as admin i'm going to give it again and basically it is just going to show this error or this warning that the password it is too short or it is too common but i will continue anyway so i'll type it y or yes and now the super user has been created and to view it we need to run our server so to run our server first of all we can just write this command python manage dot py run server enter and our server should be running up and running in this link uh and if you follow it okay so i have now opened it up so this is our server and it is just showing that the installation or the setup process has worked correct correctly and we are seeing this because the debug is set to true and definitely when you are uh making your server or your api public you don't want this so you you should uh you you should make your debug to false and after that what we need to do now we need to go to the uh admin panel so for that i'll just give a slash and i'll go to the admin panel and now it is going to ask me for my username so i'll give the username and i'll give the password which is the same enter and okay so now as you guys can see uh you guys can see we have our to-do's model over here and if i open it i can also add the to-do here so let me add one to do and let me just add let me just call it buy milk and i'll just give the description to market just creating some dummy to do's and i'll create another one let's call it a learn python okay let's save this and now we have our two to-do's and we can create as much as we want and we can also delete them and also we can edit them so this is definitely very uh useful but remember that we don't uh want to add or uh delete our to-do uh by going to this admin panel or by going up here we want it to be deleted from our app itself so yeah so we need to take care of that and but i i have just showed you how you guys can create or set up a model and then you guys can go to the admin panel and access it and now what we need to do we need to basically create the api because we want to access it from a different project or from our app so definitely we need to change it to our rest api so that we can we would be access it from our app or from the website from any website so for that uh what we need to do we need to uh use a framework again and that is the django rest framework which will be helping us uh to build our rest api and you guys can go to this website and check out their documentation and also if you guys are finding it difficult to follow through or if you guys uh don't uh have that much familiarity with django or tangora's framework then i'll be listing some uh books down below in the description section so that you guys can check them out and maybe learn from them so now we need to install our uh install this framework that is the django rest framework into our virtual environment so for that as you guys can see we are given some commands so i'll just copy this up the first one and i'll first of all i'll just close my server and right here i'm just going to paste that command and i'll be actually using a version of this framework so i'll just uh uh define a version that is 3.11 then enter and it should install the framework into my virtual environment so that i'll be able to use it and now as you guys can see it has been installed and yes we need to create another app and that would be actually our rest api so for that uh you guys can try on your own so we have done it before so it is python manage dot ui stop ui start app and we'll just call it as apis because it is an api enter and it should create the new app and as you guys can see we got a new folder called apis and um this folder is quite similar to the to-do's folder and these are just basically some apps which are going to work together and uh for our server and now uh inside this apis folder uh we get access to our models and also uh we get access to the views which will be using it later on and since we are we are just working with that to do part here so we will not be creating any new models so we just have one model and after that we need to register this app to our server or to our project so for that i need to go inside my to-do app folder and right here inside the settings dot py file like uh we have been uh installed or we have registered our to-do sap we similarly we need to register the apis app so i think i'll just going to register it here before the to-do set so right here i'm just going to call apis.app start pis config okay give a comma let's save it and now uh we also need to set the default permission for our app and uh in the real world we set various permissions here but uh here so that only uh logged in users could access the api but for now we'll just open the api to everyone to keep the things simple and the api will just be running locally so after all there is no real uh security rigs so for that uh i'm going i'm searching for the section uh called rest framework i guess we don't have it here so i'll just create a uh right here so i'll just call it as rest underscore framework and it is busy it it will basically contain our permissions so right here inside of it just all our mission classes and here we can define the rest framework best framework thought permissions or we need uh as i have told earlier we are just going to make it public so just allow anyone to access it and also since this is uh this will be running in the local server so there is no there is no security rigs for that save this and now after that we will need to work with the serialization so basically uh if i uh can benefit you briefly so tango app needs a dedicated url uh view and a template so to translate the information from that database into the web page and in django rest framework instead we will be uh needing a url of view and a serializer we will not be needing any templates because we will not be working with uh html files as we uh do not intend to create a web project or a website which will be running on this server we'll just be creating the rest api and for that we'll be needing a serializer and not a template so if you have worked with uh tango previously then you guys might be familiar with uh templates so for now i'll just remove all of this and i'll make this clear and right here what um we need to do now we need to add a new file inside our apis folder and i'm just going to call it as serializers serializers notalizer so serializers.py and this file is inside our apis folder and inside this file first of all uh we need to write some codes so from uh from rest framework we're going to import the serializer package so serializer serializers not lines so from to-do's we need to import the model so import models and basically if you guys are familiar with how the web works then you guys might know that the exchange of any data or any information takes place uh from the api to the server or the api to the ff application in the json format basically the information gets converted into json format and then it is distributed to the application or to the receiver so we need to create a class and it will be the to do let's call it to do a serializer and it could be realizers dot model serializer and colon and right here we're going to define our metadata so meta and it is going to basically take some fields so fields and the fields will be first of all we are our uh to do uh up is going to have an id which will be uniquely given then it will also have the title which will define and also the description and yes and then after that specify models equal [Music] model equal models dot since we have a to-do model inside the models uh folder so right here what we are doing uh we are importing our desired model and specify which field we want it to be exposed and now after that we need to define the views for our django rest framework so as i have told you earlier that it basically consists of the url views and serializers for an api so to define the views first of all i am going inside the views.py file and right here we can define the views and since we will not be working with any templates or any html files so uh we'll just needing the models so i'm going to import uh the models so from todos since we have the model inside the folder and that is the only model we are working with remember and we're just importing the models and then we need to import the serializer because uh as i've told you earlier we'll be working with the serializers not the templates and from the serializers we need to import the serializer class which we've just created out here in the serializers.py file so we have this to do serializer class and we are importing it here right in our views dot py file now uh when we want to define what to do we basically want uh two things so the first one so the first few would be the uh list view so the list view would actually define the list of the to-do's which we are going to have and then uh if you want to view every to do individually then it is going to be the detail uh detailed view or uh that to do in a separate detail so for that first of all let us define the list of to-do's or the list to do and here uh we will be using the generic views instead of the traditional views so we will be working with uh with the generic views and will working will be working with several generic views and also it is very similar to the traditional django views here we will be mentioning generics dot list create api view this is going to create a view for api and this uh view will basically be defined all the list or the list of to do are the to-do switch we have and basically we will be defining a query set and this query set uh will basically contain the models dot object dot every uh all the to do so model.objects.all and after that we need to define the serializer also so serializer and it would be the [Music] and after that we need to define another class for the detail uh to do so for that class let's call it detail to do so it is going to show every tour it is going to show a particular to do in detail and it will be generic start retrieve retrieve update okay retrieve date destroy api view so what this is going to do basically we will be able to uh with this uh retrieve update uh destroy a api view uh we will be able to read and then we will be able to edit or update and we'll be able to destroy uh the view or the to do so yes so we will be able to uh perform the crud operation out here in each and every to-do so that's why we need to have it in the detail to do class and if you want to learn more then you can go to the django rest framework and right there in the documentation you can find there are some methods like the retrieve update api view for which you can just read and update it and then retrieve destroy for which we can just read or delete it but we are using this one so we'll be able to read write delete end points so basically it is the um we will be able to perform the current operations here and now after that it will take the same query set uh which we have defined for our uh for our to-do list so okay so here query set will be uh same as this one so i'll just copy this up okay so i've made one small mistake out here so it would be models.to do.objects.all and yes so let's copy this up paste it here and also the serializer will also be the same so i'll just copy this up and i'll paste it here save this and also let's save this one and now uh we need to take care of our urls so for that uh what we need to do we need to go to the to-do app folder and inside of it we need to go to the url.5 app ui folder and right here we need to define uh the url to our api endpoint so the first one would be the path and it would be api slash uh since we'll be um we will be modifying or we'll be updating our api so i suggest you do the proper versioning of your api so i'll set it to version one since we we are just building it up and if you make any changes you can change it to version two you can add another url like this one and you can just uh make it version two and that would be the updated one so yes so i suggest you doing like this and here now since we are using include we need to import it we can import it from our tango dot url so i'll just import it here and inside this include we can include the urls that is apis dot url so basically it is going to contain the urls which are inside our apis folder so here we need to create a file called urls.pi or py so so let's save this and now uh here inside the apis folder close this one and here i'll create a new file and i'll call it as urls.ui and inside this file first of all i'm going to import django urls so jango. and we need to import from it we need to import a path function and after that we also need to import the views so that we will be able to embed it to our url or to display it with our url so from use import the list to do view and these are basically just generic views which i mentioned earlier so we can perform the product operations on them and then here we can define the url patterns we're going to basically be a list and the first one would be uh for our uh list of to-do's so it would just leave it blank so that we will be able to access the list of to-do's so let's do dot as we do method which will use it and then we will define another one for our detail or for our individual to do and this is basically going to be the a query which called as pk so it is it will be automatically set by django and uh this uh this will uh this will actually define the individual to do items and it it will be automatically set by django so you don't have to worry about it and now uh after that we need to present the detail uh to-do view so you get to do dot as view okay let's save this and hopefully we will now be able to access to our to-do's and for that let us go to our terminal and go inside my to-do app okay maybe i have one running over here okay so i'll go back here and i'll just run python manage dot py and run server enter and it should get the server running okay we have one mistake here so it should be serializers let's save this and uh serializers save it and getting some error about the generic so in my views dot py file oh i forgot to import the generics so from rest our framework we can import the generic views or the generics so generally save this and uh let's see what else are we missing it here so okay so uh i think here we cannot give a white space over here so i'll just remove this i'm going to remove the same over here i'll just remove this and uh we also i think we have not added uh the rest framework because we are getting an error as you guys can see over here so we have not added the rest from a framework into our installed app so for that you need to go to uh go inside the to-do app folder and right there you can open the settings dot py file right here we can include the rest framework so rest work let's save this and also let's save this one and let's try running it again and i hope this all so python manage dot ui run server enter and yes now it is working as you guys can see so i'll just open it up into my browser so yes so now as you guys can see since we are not you using the traditional views so uh we will be getting this uh error message because uh we are not using uh such html templates but instead as you guys can see we are given that some two links so the first one is for the admin panel and the next one is for our api so let's go to that link so i'll just copy this up and i'll add a slash and then paste it here and enter and hopefully now as you guys can see we are uh able to access our api and since we have uh just uh left out that url part as blank so here since it is playing so we are directly accessing the list of the two to do switch we have here and this is coming in the form of the django restroom so so it means that our our rest api is successful and we are now being able to get it but if your api becomes more complex and you can check it by using a software called postman so you guys can use postman if you want uh to build a more complex api and if you guys want to test it but uh since we we are just running it locally and since we are just working with a couple of to-do items so i'll just be using this one and uh yes so make sure you have postman installed in your computer because when you are working with such complex apis you can use it and now as you guys can see i can also access an individual to-do so to access an individual to do what i can do is i can basically access it with that uh query which was being automatically set by django so i'll just write it here one and now as you guys can see i can uh i get access to the first uh to do that is uh to go and buy milk and now um here also you can notice the options which we get we have an option to edit it then we had an option to update it we can read we can update it and also we can delete it that's because we have mentioned it in our generic views and if we go back if you go back to our list of to-do's then you guys can see that we cannot create we can create it uh but we cannot uh delete or we cannot update anything because we have not included it yet so if we look at the code if you go to the views dot py so as you guys can see here we can just create here so yes so that this is how our view views are working so guys that's it for this video and i hope you found this video helpful and if you found it helpful do share and like this video and also do subscribe to my channel and in the next videos i will be building the app and also we'll be connecting our api to our app so make sure you stay tuned and yes thanks for watching [Music] you

Channel: BK Codes

Views: 28,421

Keywords: programming, python, flutter, flutter full stack, flutter full stack app, flutter django, django, django rest api, flutter rest api, flutter backend, flutter api, django app, full stack app, flutter tutorial, django flutter tutorial, flutter python

Id: hfee7SIwUTs

Length: 35min 6sec (2106 seconds)

Published: Mon Aug 10 2020