Building a Mobile App with Django & Flutter

hey what is going on everybody and welcome to this stream where we are going to build out a mobile application with django and flutter here so i have my friend tadas here tadasa let me know if i'm saying that right wrong or if i have a major accent but we are going to be building out an awesome mobile application here we're not awesome it just can be a to-do list application but i really wanted to answer a lot of questions here and show people how this can be done a lot of people especially in the beginning stages are not really sure of what django is fully capable of and it's not just for web applications you can do quite a bit with it and the question that i get a lot is can you build out a mobile application with django so in this case i want to show you exactly what part django can play in this process because you can actually build out a mobile application but you can build out a part of your mobile application which is going to be the api here so this is what we're going to do in this uh in this live stream here i'm going to build out the back end and then tadasa is going to build out the front end here and we're going to connect those two and we're basically just going to make a simple to do app and that's about it so if you can introduce yourself i also want to show your channel but if you can talk about what you do and flutter itself and maybe how it works with apis and how you see this connecting sure so i make youtube videos on flutter i've been working with flutter for about uh like three years now kind of before it even came out so while i was still in beta i started working with it i was just playing around with it for the most part but then um like a little bit over a year ago now a year and a half i decided to just start making some content because there wasn't so much there wasn't that much content out there for flutter so i created a youtube channel first videos weren't too great i started building it out and then like things kept going from here now i work at this company called agora as a developer advocate a developer evangelist which is uh pretty much the same thing but um and there it's like it's like a sdk for real-time engagement and they do have stuff like video calls all that stuff and i work with the flutter part of it um we actually just released a package for flutter for with aguero where you could create a video call up in three lines of code so that's that's pretty cool and then also now i'm a google developer expert for flutter and dart as well so i got a little bit of uh experience with working with flutter and it's great so flutter is a google product right yes yeah so react native which a lot of people automatically jump into react native uh which is another way of building mobile apps here uh flutter is google though so let me just show your channel really quick so this is the channel make sure you check it out it's also a link down in the description i just uh tagged us here so uh you'll see them or see him there so go ahead and check it out a lot of flutter tutorials here so uh let's go ahead and close this out here and i'm gonna bring my face back in so we'll go back to our faces so you typically build with uh with firebase for your apis right that's usually what you use for the back end um i put out a tweet actually asking this and that was a big response that i saw was firebase a lot of people using uh node and express for their api specifically for mobile applications so uh firebase can you tell me a little bit about that and how that might differ differ from like an application like django or a framework like this so i probably won't be able to answer that question too well because i'm not that knowledgeable about django and like real back-ends um like i said i've only used firebase mainly for every flutter app that i've built just because it goes so well together it seemed like i mean they're both google products they mesh very nicely and like it's just very simple and then i've also worked with um aws amplify which is a very similar concept they make it really easy for you to get like started and build uh not now you don't really even really have to build back ends you just kind of put some stuff in and it works um okay i i i know the with with firebase for example you could do everything through like the firebase console you don't even really need to write much code the only time you ever really need to write code is these things called like cloud functions um so it's kind of like uh what's that called just like like web hooks or something like that like just like back-end stuff that runs either like you can either make it like on a time on a scheduled basis or stuff like that um so it's very simplistic and i know like with django you get a lot more uh customizability and all that stuff more control but i to be honest i've never worked with this so don't know too much gotcha i guess the question was more directed at how it is uh how does firebase handle that but that's a i'll definitely have to check it out i think i've seen their interface i spent like a week and i randomly check out these different frameworks and technologies so i remember messing with it for a little bit but that was like two years ago yeah so uh before we start coding oh sorry go ahead so i was just going to mention one more thing it's like uh with firebase they have like services they provide so for example there's like authentication there's storage um like actual storage for like videos and pictures and then they have like their databases and they have like separate services for each type of thing you want to do and then you just kind of click and create and then use it within whatever you're building and it's uh it's nice it's simple got you okay so uh one thing i wanted to answer then uh question is is this for ios and android and to my understanding flutter does bold not just that clutter does ios android web and desktop awesome oh desktop i actually did not know that that's right i talked to danny thompson on the or about that during the stream so uh it looks like your channel was not linked up so just look up here just uh go ahead and search up to us on uh on youtube i'm gonna try to link it right now so sorry i forgot to add that tag so just want to do that so react native is also uh android and ios so that's the cool thing about these frameworks is that you have the ability to build out for both i believe and again i'm not familiar with mobile applications but if you are or i've never really built any out but if you were doing it the old school way you'd be using something like java right and then there's swift for ios and uh basically having to manually do everything yeah so so not anymore well swift still for ios but for android it's pretty much kotlin now that's the new language that you write absent um but yeah react native is a similar concept to flutter but obviously i have a bias yeah a little bit of bias there i'm not a big fan of react native or react even but um and that that's a different conversation maybe yeah see as somebody that that knows react i'm i'm also gonna be biased there too and i kind of figured that's where i would start yeah but yeah i'll have to check out both so i just linked up just linked up your channel so it should be in the description if you have any issues with it if anyone has issues let me know and it's there so i thought i put the tag in there and it should have showed up but at this point okay so it's there it's officially there i want to make sure people find you so uh let's go ahead and just get started if you want to add anything else let me know um i just figured i'll just start coding and we're going to start with the back end we're going to build out an api with django and we're going to start from scratch so it's not gonna be a full django tutorial like i'm gonna move through things pretty fast here i do have a beginner's tutorial on youtube i have a lot of projects also on udemy i have a django 2021 course which i'll link up after the stream so there's a lot of other videos that you can watch and figuring out django by default as a teacher i tend to try to explain things anyway so i can't help it sometimes and try to explain everything as i go here but i'm going to build an api we're going to deploy on heroku and then uh taras is going to go ahead and connect to that api so i'm going to make five endpoints which is going to be uh to retrieve some notes we're going to add in it's going to be a to-do list or a notes app so we're going to get the notes he's going to be able to send a request to retrieve a single note and then we're going to do crud which is going to be create read update and delete so we've already kind of worked through this i talked about the endpoints and now we're going to start building it so with that being said let's go ahead and get started if you want to watch the chat too uh you can ask me questions as we go here if somebody in the chat has a question i'm going to try not interacting too much because i still want to make it a tutorial but if we see a relevant question that we feel like can help us here we'll go ahead and just answer those so that being said let's go ahead and do a screen share and i think i'm going to go full screen so i thought about doing this here but if i do this then if somebody's watching this tutorial later they get this a tiny screen so i'll start like this and then we'll just expand it if anything once we get into the code so let's go ahead and start with setting up our django application so django does use python again this is me going into teacher mode here so make sure you have python installed if you're following along and i'm also going to zoom in here so make sure you have python installed and we're going to get started by installing django so i'm going to try to go from the very beginning all right let's see 175 percent zoom here so you know uh guard from silicon valley you ever watched that show it's that girl with the big bug-eyed glasses this is how i feel when i'm coding for tutorials because to everyone else it looks normal but i'm so zoomed in it just feels hilarious like it takes up most of my screen okay so videos you always got to zoom in and i i don't even like seeing it so big but yeah do it for the audience okay so i'm cd into my desktop this is where i'm gonna set up my django application i have python installed i am on python 3.9.5 so the latest version of django does require python 3.6 or up and the first thing i'm going to do here is create a virtual environment which uh if you don't have one just go ahead and set one up you can use pip env or virtual env so in this case we're going to set that up this is not required but it is good to set up a virtual environment so we're going to do a virtual env and just give it a name so i'm going to call that env this is going to take a minute it's going to go ahead and set that up so again to run that command you are going to need virtual env or piping v there's a few different options so i added in my virtual environment into my desktop here so it's sitting right here so i'm going to go full screen to make sure we can see that i want to make sure that's all visible for everybody on the phone and we want to activate that environment so we basically set this up to make sure that you don't have any uh any conflicts with other parts of your application so we just make sure we have an environment set up just for that okay so i activated my virtual environment we see env right there and to install django we're just gonna do a pip install django so this is gonna be some basic stuff here just basic bingo introduction so what i like to do here is i like to make my installs i set up my virtual environment and create my django project and then i bring in my virtual environment into my django application so i like to keep them connected so i can i can actually have it work right within my application so they're not separate so now that my virtual environment's installed i have django installed i ran a pip install i can go ahead and start my django project by just doing django dash admin start project and then i need to give it a name here so the next command here is going to be the project name and i'm just going to call this notes like that so i could call it backend or whatever but this is going to give me my boilerplate files for my django application so i'm going to go ahead and close out my command prompt i'm using vs code so i want to use that terminal and i'm going to drag in my django project to this screen here so i have two screens and what i do here is i take my virtual environment and i like to drag it into my django application so once i do this i can go ahead and open up vs code here so let's go ahead and open up a window here open up a blank project and we're just going to go into my desktop here so that's where i'm storing my project and we call that application notes so i'm gonna do a quick rundown here i'm not sticking to the basics of django here but uh in here we have a manage.py file don't edit this uh there's some situations where it may be something that you need to do but we're not gonna touch it we have our virtual environment which we dragged in here and we have our application so notes right here so in here we have our urls which configures all of our url routing this is where we'll set all the paths here we have our settings.py this is like the main configuration to your application for those of you that understand react this is like your package.json basically your projects configuration then we have our wsgi file which is our web server gateway interface this is our server and then there's asgi for asynchronous django we're not going to get into this but the main two files we're going to work with are settings and urls here so we have our project set up here and i'm going to go ahead and open up my terminal and i just want to go ahead and make sure my virtual environment is activated so if that's not activated go ahead and activate it and in django we have this concept of apps here so our project is like the project file that's like our website but the actual core functionality of your application is gonna be is gonna be the actual or uh the core functionality of your application is gonna be in something called apps here so apps are basically files where we store our database urls uh if we're using templates or where we build out our api and so on so it's like the business logic of things so we have our project and we want to create our first app and typically you would have multiple apps in your application or in your website so for example think of this as let me just show my face here while i'm talking so think of apps like if you were working with facebook.com facebook would be like your django project right that's the website but if you were to build out like users or a system to authenticate users that would be a single app so everything to do with users would be in one app then everything to do with your feed would be another app you would have an app called feed and that would be posts comments likes all that information would be stored in a sub-component if you had groups groups would also be in its own app so one project would have multiple apps so that's kind of the structure here so it's a little bit of a side tangent but the concept of apps always confuses people because they kind of think of mobile apps and it just it's kind of weird to think about it so in this case we're going to do python manage py and if you are on a normal terminal here make sure you're cd into your django project so our app needs to be inside of our django project so we're just gonna do python manage.py start app and in this case i'm just gonna call my app api so we're just gonna have one app for the entire project this is a simple notes app and that's it so now we have this folder called api and we can see models here which is going to be our database tables that's where we build them out as python classes we see our views this is going to be like the business logic of our application so let's go ahead and first configure our app to our django project so at this point the file is inside of our django project but django has no idea about this project it doesn't know it it exists or the app so in settings.py we need to go ahead and let django know about this so by default there are already apps here for like sessions different parts of our application so in this case we're gonna go ahead and connect our app which is called api and we need to go into apps here so this is the folder inside of our app we see api and then apps and we need to connect it to the app's configuration class here so we're doing api apps and then app config so if your app was called different or if you named your uh let's see this is supposed to be api like that so api config so if you named it something something different then you would obviously follow that naming structure so that configures our django project to our app and let me just go ahead and run these default installs here make sure that's set up so we have our app here and let me just pull up my notes here i actually think i closed everything out so i kind of have a small cheat sheet that i'm working with so we have our project set up and the first thing i want to do is render out some json data make like a simple api so inside of our app folder called api we're going into our views here and we just want to return a simple json response so i'm not going to work with templates so we don't need this i'll remove that this is inside of views.py and we're just going to import django so django.http and then import jsonresponse so before we actually start using the django rest framework i want to show you how just to make a simple response and connect our urls so in this view we are going to use function based view so i'm going to create a view called get routes and i just want to show everyone the routes that we're going to be using so our first route is going to be like the documentation to our api so we create a python function here and we are going to return json response here and what i'm going to do here is instead of actually typing out all the routes here i'm going to go into a file that i have and just paste something in here to output these routes so inside of this view here i'm going to go ahead and paste this in right here so this is a variable called routes i want to make sure the indentation is right and this is going to show us all five endpoints that we have so this is going to be a description so the first one is going to be to get notes i set the method and then any data that needs to be sent and then the description of that endpoint so this is what tadasa is going to see here he's going to read this documentation and then follow the instructions here so we're going to take this python list of dictionaries this is what this is a dictionary and we're just going to output this into json response so the variable was called routes so if you actually want to type this out i'll go slow here just scroll like that so we're taking this variable and we're just outputting it into the json response now with the json response you can only in a normal situation just output a python dictionary so we're going to set save to false and this means that we can turn any kind of data into json data so save false means that we can actually output this list so now that we have this in our django project make sure you're cd into that in our project's called notes here we just want to start up our server so gingo comes with quite a bit here we can just activate our server so we'll just do python manage.py run server so when i run this here we're going to ignore these errors and uh this is going to tell me we'll take care of this in a minute this is going to tell me what port django is currently active on or where my project is so i can copy this right here and just go ahead and open up my browser so open up a new window and typically what i do here is i paste in the port number and then i like to save it into a tab here so once we open this up here here one second i just realized i have another server running so that's not supposed to happen one second so when i open up poor 8000 this is my default django application so we're not actually rendering out any of those views here so let's go back into our views here and let's actually render this out so we can view this so once we have our view that just returns this json data we need to create a file called urls.py so this is going to handle all the url routing so we're just going to go ahead and run an import we're going to do from django.urls and we're just going to import path here and then we need to import our views so we need to make sure that we can actually trigger these functions to render that data so we're just going to do from dot and then we'll import views so the file structure is right here so they're next to each other that's why i run the import that way and then we need to create a variable called url patterns so this is going to be a python list of paths that we can access here so in this case i'm going to set this to an empty string that routes view is going to be that home view and we're just going to trigger the views so we're going into this file and we're going to do get routes here so we'll just do views dot get routes so now when we go to the home page we should trigger this function and render out this so before we can do that we built this inside of an app here so we need to go back into our django project and we have another urls.py file here so i'm going to go ahead and just remove this string here those notes and we need to connect our root urls file to our apps urls here so we need to let our project know about that so in this case i'm going to import something called include and this is going to allow me to include an entirely separate file here so we'll set a path here and we're going to set an empty string and then we're just going to use include and we are going into api so into the api folder or the app and we're going to connect it to urls here so there we go so now when someone goes to the home page it's going to send them to this urls file and this file is going to take care of all this routing so now if i go to this page we're not going to get that default django page here if i refresh that we just see json data so that's all we get back we just turned that python list of dictionaries into some json data and that's a pretty standard very simplified api that we have here so let's go ahead and actually use the django rest framework so at this point we would still have to be building out our application by hand all our api stuff things like serializing our python objects here this would be kind of a pain to do this on our own and to make this faster we're going to use the django rest framework here so this is a toolkit or a package built on top of django that makes for building apis a lot easier so it's specifically designed for making apis so this is the documentation here and uh what i'm going to do here is just refer to this as we go i'm not going through everything here so the first thing i want to do is get this installed in my django application so if you go to this domain django dash rest framework.org go ahead and go to this url and then go into installation and the first thing we want to do is install it so we're just going to run a pip install we're not going to worry about these two so i'm not going to grab these i'm just grabbing this one and copying that and vs code is being a little bit weird for me right now it's not connecting the file path in my computer so what i need to do is i need to run python m first and then i'm going to pip install django rest framework so i just pasted that in so my server is still on i just opened up another terminal so we're going to run that install and this is going to give us access to the django rest framework and then to actually connect it i need to go down here and add rest underscore framework inside of settings.ui so my app's configuration or my project configuration i keep messing up the names uh as i go through this so we're gonna go ahead and add this into installed apps and now django knows about the django rest framework so we can actually start using things from here so if i go into the django rest framework documentation i'm going to go into api guide and we want to talk about request and responses so to actually make this a django rest framework response here we need to add in either a decorator if we're using function based views or a mix-in if we're using class-based views so this will give us all access to what the django rest framework lets us do with an api so in this case we're going to make a few imports here so this is a the docs for the docs to the request and response cycle and i'm looking for something specific here so i'm just going to code it out by hand i actually do remember what it is so i guess at this point we won't use the documentation so let's go back into our application and what we want to do is modify this response here so it's not technically an api it's just a json response and we want to change that so inside of views.py let's go ahead and actually remove json response so we're no longer using this and we're just going to do from rest underscore framework dot decorators so we're going to import a decorator and this decorator is called api underscore view so that's a decorator that we're going to put on top of our views here and then we also want to import something called response so we're going to do from rest framework dot response here and then we're going to do import response and that's going to be a capital r so now all i have to do is go to my view here and we're going to add a decorator so we're just going to do api view trigger that and in here we take a list of methods that this view can accept so we're going to tell it that this view can only take in a get method now if we wanted to allow a post method we can do that and we can add in an entire list of different methods like that so at this point we're just accessing a get request and we're just telling it that a user can only get this data so for the response here we imported response right here so let's go ahead and modify this we're changing that to response and because we have that all we need to do is pass in routes and we don't need safe anymore so if i save this i want to make sure my server is still on and i don't have any issues let's go ahead and go back in here and refresh that and here we go so this is now the response it's all nice and formatted and now tadas can see all the endpoints that he needs to access here to actually make these calls so in this case we're going to the domain nodes to get an array of nodes then the nodes for a specific object here so we pass in the id and so on so this is what the django rest framework gives us it's like an interface to our api so we kind of it looks a little bit nicer and it's formatted so in here we can see more information like the type of request here we can even bring in raw json data so we can see it formatted like this which we pretty much had earlier and that's about it so it's a nice little interface and we really haven't done much with our api so the next thing i want to do here is actually set up our database so we want to actually go ahead and get some data from our database and render this out so in django to make a database what we're going to do here or to set things up is we are going to build in some models here so models are simply going to be python classes that represent database tables so your class name would be your table uh every single attribute in that class would be like a table column and we are using an sqlite database to test with so by default django gives us one in a production environment i typically like to use postgres uh you could use mysql and you can even connect a nosql database like mongodb so you have a lot of different options but at this point we have our database and there's nothing in it right now so we're going to create a class here and we're just going to call this note so we're creating our first database table and in order to make this a model we're just going to inherit from models.model so we imported models right here that's why we can do that and then we need to set all of our database tables so we're going to add in some attributes here so the first thing is for the note the only real table or column that i want here is going to be the body so we're not having a title or anything like that we're just going to have a body and this is going to be set to models dot text field so it's going to be a text field which basically allows us an unlimited amount of characters unless we specify some kind of max length here then i want to create an attribute to know when this note was updated so anytime we modify our note we want to take a timestamp so this is going to be dot date time field and in here we're going to set auto underscore now and this is going to be true so auto now ad where auto now is basically telling it that we are not going to modify this column here anytime the save method is called or any time we save this entry whether that's on creation or on update we're just going to take a time stamp and that's it so auto now means go ahead and do that yourself we don't want to have to do anything here so the database will automatically take a snapshot now the next attribute i want to add here is going to be created so we're going to do created and this is going to be a lot like the updated attribute except for we want to take a timestamp only when this database table or this instance was created so in this case we're going to do auto now and then underscore add so that means that the timestamp will only be taken when we actually create now the last thing here because this is a python class i want to set the string value here so if we're not accessing an actual attribute we're just going to go ahead and have a string representation of this so we're just going to do return self dot body so we're taking the body the body attribute and if this is a long note let's say somebody writes a an entire like diary entry here or journal entry we want to only return the first 50 characters so we can still access the body but for the string representation that's going to be it so in this case i also want to make sure that we have a default ordering system so our notes can be ordered by any attribute here in this case we're going to set ordering and this is going to be to the attribute of updated so we're going to do updated and then if i do dash i believe it's going to set it to ascending so the latest updated item will always be at the top of every query set when we query the database so this is a list which means that we can order by created or any other attribute here so we're not going to do that so that's our database right there so let's go ahead and actually add this to our database so we created the model and this is the database schema here but by default django actually creates a lot more for us so we have a sessions table there's a users table that gets built in by default we're not going to worry about all of that so at this point we just want to go ahead and prep some migrations for our database so what's going to happen here is if i open up this app and i run python let's see here formatting looks kind of weird so i'll just do cls clear that so we're just going to do python manage dot py make migrations so we're going to prep our migration so this isn't going to actually add it to the database it's basically going to build a schema for running this migration so when i do this we're going to see this migrations folder and we just added in this file here so it built this file and it's basically saying once we actually run our migrations go ahead and execute these and add this to the database so we ran make migrations now we just want to run python manage py and then migrate so when we run migrate we're going to get rid of all those weird looking errors that we saw here so these unapplied migrations we just triggered those and we also ran the migrations that i set up here so if you look right here we see all these tables being built out and now we have a database table here so where we have all of our database tables so what i want to do from now here or from here is that i want to create a super user so a user to access the django admin panel so django or django gives us an awesome interface to actually view our data without having to build it ourselves so now that we have our database we can do create super and it's going to prompt me for a username so i'm just going to go ahead and add it we'll just do dennis ivy it's going to prompt me for an email and i'll just do dennis at email.com make some kind of fake email and then it's going to ask me for my password so as i'm typing the password is being entered you just won't see it for security reasons and once i confirm that or confirm that my user was created so my server is running at this point so let's go ahead and make sure we'll just refresh that and now if we go back into our root directory if we go into nodes here inside of urls we can see this path called admin so that gives us access to the admin panel so i just want to see some things here and then add some notes so if i go to poor 8000 here we're just going to go ahead and do forward slash admin this is the admin panel now that i have a user i can log in so my information by default was auto filled and here we can see all the users in our database and we have a table called groups there's also a few tables that are not shown in the admin panel so to actually see our notes model here we want to just go ahead and register this with the admin panel so the admin panel is not something that's actually required so this is optional so in this case uh we're just going to import our models into admin.py so we'll do from models import and then we'll just do note and then we want to register this with the admin panel so we'll do admin.site.register and we'll throw in notes so we're basically telling django go ahead and show this database table in this awesome admin panel so now if i refresh it we're going to see this new table appear here so what i want to do here is create some notes and then we're going to start working with this api so we want to actually create some routes to get this data and serialize it and then render this out so in this case uh let's just go ahead and add some notes so uh the first one um we'll just do like get milk or something like that that'll be a note here and then let's say we have some kind of to-do list within our to-do list so we'll just say walk dog any other tasks audience that you want to recommend let me know we'll say clean room and meet let's say this person has a very easy schedule so the last one here we'll just do buy flower so i just want to add three notes here so in the admin panel now we can see all this information we can add data to our database and this is the interface that we have so we're not really working with our api yet i just wanted to add some data to see it so let's go ahead and actually render this data out so we're going to close out our admin panel we had some prep work that we had to figure out first and let's go ahead and go into our routes here and we'll go back into our views and let's actually start with the fun stuff so in order to render this data out if we go into our views so inside of our api or our api app if we go to our views here we were able to render out these routes here so this python list of dictionaries and this response function right here have no problem taking care of that now when we're querying the database we are actually going to have python objects so these are going to be classes or instances of these classes and the response method cannot render this out so we're going to need to do something called data serialization so we're going to have to serialize this data which is going to take these objects and turn them into a json response or json data and then we can actually render these out so if i go into the django documentation or the django rest framework documentation let's go into serializers so in serializers there's actually quite a bit that we can do here i want to pull up model serializers so we can actually serialize multiple types of data i want to take our notes model and i want to serialize it and actually convert that into json data so if we look at this example we're going to have to run an import and we're going to create a class that's going to take a specific model that we provide to it and then we can set the fields that we want to actually serialize here so in this case we would serialize the id this is what would be rendered out here so uh the id here the account name and basically any other attribute of our model so let's go ahead and create a new file in our api so we're going to create a new file and this is going to be called serializers py and in here if we had multiple serializers we would add them all in here but at this point we're just going to have one serializer so this is just something that we have to do before we can actually render this so in this case i'm gonna run an import this is gonna be from rest framework dot serializers and we want to import model serializer so that's the model serializer that allows us to actually convert this into json data then we need to go into our models file and take this note and then serialize it so we want to import that first so from models let's import the note and now we can create our serializer so because this is python this is like one extra step that we ought to do uh i've seen people create node and express applications and you don't have to do this because the data is already json data so in this case the convention that i do for my serializer is i name it the model or by the model and then i just do serializer so any kind of serializer that i would make i would specify the name of the model and then just adding serializer so in this case we just in here for a model serializer and in here we're just going to add in class meta and we have two minimal required fields that we actually need to add here so we need to add in the model that we want to serialize so in this case we'll just do model and then that's going to be note and then we need to specify the fields that we want to serialize so in this case instead of adding in the list here we'll just do underscore all and then double underscore so this is going to serialize all the fields here and now i can actually start using this so i can go back into my views and we'll scroll to the top here and i'm just going to import the serializer so we'll just do serializer import note serializer and then we're going to go and get our model so we'll just do from.models the file path is the same right here so from.models import node so we have our node and we have our serializer now we want to create a route to get these so in this case we'll use another function based view we'll say get notes here and we take in the request object here and i also want to add in the decorator so we'll just go ahead and do at api view and this is only going to take in a get request so we're getting all of our nodes here and inside of the notes here what i want to do is actually query the database so we'll just do notes and to query the database we can access the model name so we'll just do note dot objects so that's the model manager we can go ahead and access that and then we can do dot all so that's going to get us all the notes from the database once we get these notes remember we can't just do return and then response this would not work so we can't do this because these are still python objects and this will not be able to serialize that so in this case we're going to set our serializer and i remember how to spell that that's one of those words i always have a hard time spelling and we're going to start using this model serializer or this note serializer so now we can just do note serializer and we're going to specify the query set that we want to serialize so all the models here or all the items or objects so we're going to pass in the notes and what we need to do here next is set mini and this needs to be true so the serializer can either sterilize one single object which in this case if we just got one object we would set that to false or we want to serialize an entire query set so many is going to be set to true that means we're going to serialize many nodes here so once we do that serializer is a class so we're going to pass serializer in here and we're going to access the data attribute so we are just going to return back the data of all these nodes or the data of this serializer so let's go ahead and go into our url so we have this view called get notes and the next thing i want to do here is go ahead and add in a comma and create a new path here so we're just going to go ahead and set that string and this is going to be called notes like that so we have to end that with a forward slash connect that to the view so we'll do view or views.get notes so we have our view and our endpoint to get this information so now if i go back into my front end here in port 8000 i'm just going to do forward slash notes and let's see creating a model serializer without fields so i must have misspelt that name here so if i go into my serializer this is supposed to be field so it's supposed to be plural and now if i refresh that here we go so in this route which is poor 8000 forward slash notes we can see all the notes in the database so at this point we have three different nodes so if i go into my admin panel let's go ahead and add in another one we'll just do test here and later on we will do this from the front end so we're going to take care of that we won't use the admin panel but now if i refresh it i can see every single note in the database so now we have four we see the id which gets created by default with that model and it just auto increments and then we see the timestamps and so on so there we go we got some notes here and today let me know if you have any questions at this point i know i kind of just shot through that but i just wanted to power through that right now there was a whole discussion in the comments whether this was a live live stream or whether this was a recorded video that was edited because you were going you were in the zone i try not going too fast but i want to make sure you have time to code up your session yeah i'll be honest i did i think i have very little experience with like writing up backhand so i didn't catch a lot of that but i mean i get i get over like basics of how um building up a back end works so that was that was cool to see cool so this is just giving me a moment i guess to breathe so yeah yeah okay so this is the first endpoint that uh that we're gonna be hitting i guess i always use the term hitting i don't know if that's the right term i always just say hitting an endpoint so we have our data now and in python we have to go through that serialization process and i hope that part makes sense because it's not json data we have to go through that i guess um transformation process of turning it into json data so um i guess i'll just go into the next section so now we just need to create some endpoints so most of the the heavy lifting has been done we set up our database uh we have our views our projects configured and all we need to do is basically just create the route so this next section here is going to be pretty quick here so we'll go through this pretty fast so this is now the detail view so i'm gonna go into my notes here that i'm following i'm just gonna cross some things out so i don't accidentally do something twice and uh i'll uh set the screen back to full screen so let's go ahead and uh get to this next section so we have our root domain which gives us all the endpoints it shows us what our api is about and we have our notes which gets us a i guess an array now of json objects and now we want to access a single node so this route is going to look something like this so if we wanted to get this first route here we would just do nodes and then the id of it and then that would give us that object so let's build that in so at this point like i said this is going to go a lot faster now all we have to do is repeat this process so what i'm going to do here is actually just copy this view and we're just going to paste this down here and i'm going to change this to get note so we're taking out the s the request method or the type of method that we can use here is uh just a get request so we're just getting a note for the notes themselves here what we're going to do here is pass in the primary key or the id so this is how we can pass in objects or parameters into our urls so once we pass that in we can get an object by this parameter so we're going to change all to get and then we're going to access it by an attribute which we can use any attribute in our database so we're going to set pk in here so we're going to pass in the primary key and then we're going to query a note so we're going to change that to note like that in our serializer we're going to go ahead and use the same methods here except for now we're passing in a note and then mini is going to be set to false so now we are returning back a single object so that's what mini does here so this one is true that's saying give us a query set and this one is false now for return and response we're just serializing that data and then rendering that out so if i save this let's go ahead and go into our urls now i'm just going to copy this url paste that down here and we're just going to go ahead and add in a dynamic parameter here so we're going to end that with a forward slash use these two angle brackets and this can be a few things so we can do int we can do slug for the actual field type in my case because i typically use uuids which are a string i'm going to set that to an str so that's going to say that this value is a string and then we're going to pass in the name of that so this is going to be in a dynamic parameter here so now we want to trigger the get note view here so we're just going to customize that so it looks very similar the paths are just slightly modified and so are the views so to actually get this let's go ahead and go back to our api so if i go ahead and try to get this one here so this is walk clean room and eat and we see those line breaks right here so if i want to get that one all i do is pass in the id and that with the forward slash and there we go so now we are returning back an object so tadius knows where knows to get this endpoint by hitting the id here so if we go into four we're just getting back these json objects so that's it for getting the detail the next one here is going to be to create an item and this is the cool part of the django rest framework instead of using postman we can actually send these kinds of requests straight from this interface right here the only issue is if we are using json web tokens or any kind of extra data that needs to be passed in our headers it won't work here so in that case we'll want to use something like postman but because we're not sending a token we're going to do that straight from that interface so the second view is complete let's go ahead and go to the third one here the third i guess view for our notes here and in this case i'm gonna write this one from scratch so we're gonna go ahead and create a view called create note and this is going to take in request here and we're going to do api underscore view and in this case the parameter that we're going to allow here is going to be a post request or the type of http request so we are sending data to the backend now so that means we want something to be created so the method here is post so we were using get earlier now we are using post so with the gengo rest framework we have access to something called request.data which is just going to be a python dictionary so it's like the json response from the front end so it's a python dictionary that we can access so we can actually get the data that's sent from this post request so we set that variable we want to get that data then to actually create a note we're just going to set note here and in this case i actually want to return the note to the front end so i'm going to set that in a variable and now we can do note dot create or note.objects.create and i'm going to show you a few different ways of actually creating objects and saving them so in this case we're just going to use the create method and our model here has the body attribute so that's the only one that we want to update so now you know to go into this body attribute and send the body from that post data so we're just accessing body so that's the only request that we need and this object will be created and added to the database as long as it's a post request in that sent now we just want to go ahead and return this so we're just going to run through the serialization process so we'll just do serializer and this is going to be note serializer we'll pass in the actual note and then we want to return back one object so many will be set to false so we are returning one object then we're gonna do return response and we pass in serializer dot data okay so let's go ahead and test this so at this point we pass in the body as long as we have this we're gonna create the note and then we're gonna serialize it and return that so let's test this endpoint first we need to connect our urls here so let's see how do i want to do this i want to make sure there's no conflicts here so we're going to go into here and i'm actually going to add this just above our notes for a single note here so because of the because of the way that i'm setting things up in theory this application or this api is not restful and i talk about that in my course it's just an api and we're not going to be following the rest practices here so that's not the i guess the main point of this video or this stream so this endpoint here the user has to go to notes and then create and then we're going into views dot create note okay we need to add in the comma there and there we go so that endpoint is set up so let's go ahead and test that so if i go to my api here let's go ahead and add in create so look at this this is a really cool interface again we don't have to use postman right now all we have to do is simply add in some content so at this point this is a get method so it's telling us that we cannot use a get method but go ahead and send some post data so the django rest framework will actually provide us with this uh this i guess uh interface or this file field here form field to actually send a request so this is how you're going to send it from the front end you're just going to need to send me an object here so in this case we're just going to go ahead and send the body so that's going to be the key and then the values in this case let's just say note added from api so we'll just do that so if i open this up inside of another route here so if i go into nodes we see four so we see test here we see by flowers and then that note walk clean room whatever and then get milk so if i send this request i can actually send it directly from here so in this case i'm just going to submit post right here and i get that response so we see that we got a new object created here we see notes added from api the time that it was added and then if i refresh this now we see that right here so all we had to do was send that object with the body and it created that for us so that's a post request now for updating things that's going to be the next route here we'll need to go into our view here so let me just go ahead and get things prepped here and in this case what i'm going to do here is just copy this one right here so this is our create note view we're going to add this down here and i'm just going to modify this so this will be a put request so a put request is for updating parts of our object here so this is usually when you update something you'll send a put request so in this case we're going to get the data the view will be called update note we get the data here and then what we can do here is the first thing i want to do actually is get the primary key so we want to get the note so we'll set note here and that's going to be note objects dot get then we're going to get that by the id so we'll take in that primary key and then i can actually get rid of all of this and do something a little bit different so i'm going to use a serializer so we're going to use this serializer right here so note serializer and instead of just passing in the mini to false here instead of doing this i can actually pass in data so we'll just do data and then that's going to be request dot post like that so we're going to pass in that body into the serializer directly so if you're familiar with model forms it's kind of like a model form so we can actually do if serializer is underscore valid and once we check if it's valid so this is just going to make sure that all the fields line up in this form or this serializer can actually save this object to the database we're just going to do serializer.save so we're calling the save method and this will actually add that note to the database in this case we're not adding it to the database i got that wrong we are updating this note so we're adding in the new fields here and we're submitting it so we set the instance so it knows to update this note based on the id so that's it for update no so in our urls here we also want to set that so we want to add in update underneath create so let's actually take the create view and what i want to do here is pass in the id so we'll just do str for a string pass that in as a primary key and then we'll just do update like that and then we'll change this to update note so now we have the end point and the view to update that so let's go back into the front end now and let's make sure we can update it so we can go ahead and go into the note with the id of five so note added from api and we want to update that so we'll just do five and then update and at this point again this is just the interface that django is going to give me it's going to give me a form to actually send this data so the get method is not allowed it's giving me this form and it's saying go ahead and update some data so in this case we have this note here so if i go into notes like that we see this note with the idea 5 and the body says notes added from api so what i could do here is create an object set the body key here and we're just going to say updated so now this note will be renamed right here and we're also going to see the timestamp update when it was updated so if i send that we're going to send a put request now and this will be done later using javascript tadasa is going to do this from flutter so if i submit that let's see so maybe that did not update so that was supposed to return this so if i take the note here the fun part about live streaming so let's see so we is it potentially a data request that post should be a put ah okay well no we're sending the put request right here what about line 76 on in the in the views 76 serializer says data request equals post is that correct ah okay yes that's the mistake that's supposed to be data like that so we're passing in the data correct good catch so let's try this one more time so let's go in here so it shows that i sent that empty or it responded with an empty object so it didn't actually give me anything so go ahead and add the body again and we'll just do updated and just do all caps like that so now we are sending a put request and there we go so we get that response this is the id of five and we see updated so if i refresh this now we see updated so it didn't add a new one it simply updated it so uh we have our update endpoint and the last thing i want to do or the last two things we want to do here is add in our delete endpoint and then we need to configure our course configuration so todaz can actually access this api here so in this case we're going to go back here we're going to add in the last view so we're going to create a new one here and this is going to be called delete node pass in request and then we're going to do api underscore view and this is going to be a delete view so from here we're going to add in the list here and we'll just do delete this is going to take a delete method here and then we just want to return response and we'll just say note was deleted so we're just going to send a user or a note back to the user here so let's say deleted and then let's go ahead and actually delete the node so in this case we're going to pass in the id so we'll pass that in as a primary key we want to get this note so we're not actually sending any data so i'm just going to copy that request here we're going to do note and then we'll just do note dot delete it or delete like that so that will actually remove the item from the database and that's it for that view so very simple then we can go in here let's copy this one here so we're going into notes then the id and then we just say delete so let's go ahead and delete this most recent note so we'll go back into our api and let's go ahead and delete this note right here so the id of five go ahead and add that and then we'll just do delete by default it's a get request this interface lets us do this i don't need to send any data with it all i have to do is submit that delete request okay so i did one thing wrong here i forgot to update the view name here so we'll just do delete i thought that looked weird but delete note so if i go ahead and refresh this now now we get this and this is going to send a delete request on my behalf here so if i hit delete confirm that note was deleted that's the response here and if i go back to notes boom roasted as bucky roberts would say so now we just have our original four notes if i want to delete test here let's go ahead and get that ugly guy out of here so we'll just do four and we'll just do delete confirm that send the request so this will all be done from the front end in a second here where once tada starts doing this and if i remove that or refresh that now we have our original three notes so uh do you know how to explain course configuration would you be able to do that for a second while i refresh here course configuration yeah so cross-site or cross-resource origin sharing no idea okay so if i if you're dealing with the with the back end you're typically going to have to work with this so course error so let's just do that let's just do coors and then um we're gonna go ahead and just do a google image let me pull up my screen again so why do i see a picture of feet right there freaking google okay so if you've ever dealt with chorus configuration or cores errors you're probably going to see this ugly looking error so let me just open up the image so what's happening here is our api at this point because we're on the same server we're able to make requests to our api uh if we're on the same server but if you have an api that you don't want the public having access to what's going to happen is right now if you try to make a request you're going to see this error somewhere in your browser so django's gonna say hey you don't have access to touch this api i don't know who you are so it's gonna find wherever you're sending this request from and it's gonna block you so cross origin resource sharing somebody said that in the comments here so it's going to block that request so what i need to do is a few things here so one i can make it a completely public api so i can say let anybody access this i can also give a list of domains so let's say i want to just give you access to this so i would say hey what's the the the url that you're going to be making these requests from and then i can add that into a list and i can basically provide a list of urls that are allowed to access my api so it's basically therefore blocking certain requests so in this case you're going to get this error if you try to make a request right now so i need to configure this so let's just look up django cores here so there's a library called django cores headers and i'll just take out headers like that and let's find the api so we're just going to have to run this pip install and configure our application so i'm going to follow the documentation here and let's just go ahead and open up our terminal so my server is still on here so we'll just open this up i'm going to open up another terminal and i'm going to do python dash m and then pip install django dash cores headers so yeah if you're working with folder i'm assuming it's already pretty much built into it so that's probably why you haven't seen it or maybe just haven't aren't familiar with it it's probably already set up for that because flutter just we're not fluttering i keep saying flutter firebase yeah firebase yeah so we just installed that so in the documentation if we scroll down here we have a few ways of doing this the first thing is i need to add this into my installed apps adam that's a one of the main maintainers of django awesome guy so it looks like he's working on this let's see we'll go into our settings.py so we ran that install and we're just going to add that underneath rest frameworks of course headers now the last thing to make this work we have a few options here dang i forgot i forgot about this part we need to add this to our middleware so this is where that i guess um the block or allowing the request is going to happen so we'll go into settings.py let's just paste coors middleware coors middleware and then now for the last section so i typically like to show the error first and then fix it but at this point because you're just gonna have access to the api we'll have to do it right now so we have a few different options one is we want to or we could set this variable called cores allowed origin so i'll try to zoom in so this is going to be the option to just create a list of domains so this is kind of like what it would look like right here so we would say okay allow example.com to access this api allow this domain and so on now we could use this method here which i believe just allows us to create some regex paths here rejects never know how to say that that's one way of doing it or we could set the variable which is chords allow all origins this is going to make it open to where anybody can access this api so we're going to go into settings.py and i'm just going to add this at the bottom of the file and we're just going to set cores allow all origins and this is going to be set to true that's it so at this point instead of going through that deploying process here we have most of what we need already set up here so i'm going to zoom out with my screen here and uh i want to talk about this uh transition process here so let me uh just go ahead and remove the screen sharing so in this process right now i've completed the back end so this is where django and flutter or django and swift or react native whatever you're using this is where those two would connect i have the api set up and typically if we're working in localhost like on the same computer i can just show him the endpoints or show us the endpoints to to hit and he can access it uh in this case we're going to pretend that this application is going to be on one server or on two separate servers so i would use heroku to deploy it i would deploy the application and then there would be a live url to actually connect to we're not going to show that url because tadas actually has this we built this in or we already built this out in preparation for this if i show that i just know a bunch of people are going to start making requests and messing with us so we're not going to show it but now to us your job is to access these endpoints and pull that data into your app so i guess uh take it from here i'm a little bit winded here talking fast trying to get this done that was that was impressive you got a lot done in that like short period of time but it seems like there's a lot of uh setup that goes into it but then once you got it like set up and everything adding all the different like front operations wasn't that bad um all right so now for the part that i know a little bit more about is the the flutter part um you want to share my screen i think i don't yeah so let me uh just add it to the stream here yeah all right and can you make a full screen if you need i'm not sure if you have access to do that or not can i make it full screen i don't think so okay so in that case i think i have to do that so i'll just set that from here yeah and then let me increase the font a little bit too yeah i was gonna say so on here it looks okay but i know that somebody's gonna be watching this on their phone yeah all right so this is the basic flutter app that you get when uh whenever you install flutter um we're gonna go through like the very basics from the very beginning um and let me pull up the packages that we're gonna need so do you need anything external like this like it's not using node or anything like that like if you're using react you typically have to have node installed any pre-configurations so there's gonna be one package that we're going to need for this and it's going to be called let me bring it into the screen here as well we're going to need http package so just to connect to to make http requests so this package you can read through how to use it and everything and then you just copy it uh we can minimize that and paste it into our prospect i am also the powerspec.yemo is like the configuration um configuration part of your flutter project can i ask how you set the set the files up sorry i don't want to interrupt too much i'm just curious myself so how did you get this right here so you have like some boilerplate files uh it looks like you already did some prep work here yeah so not really um this all this prep work comes from like let me show you make the terminal bigger too so in order to create a flutter project you have a command called flutter create so let's say um let's back up and then create like clutter create demo and go app so it creates an app for you so that gives you the boilerplate files yep and then like sophie cd into demo django and then open up visual studio code it'll open up on the wrong screen but you should see the same exact thing we have right now cool so that one command preps all this yeah so this is the boilerplate flutter code that you see here's the pub spec fam uh spec.yaml file that we have where we added http into here and that's all we've done at this point um so i'm going to go back to this one because i have a special file here called urls which has the secret urls that dennis doesn't want us to share and we're going to be using that to connect to everything so at this point we have everything installed that we need and we can actually run it because flutter has hot reload so you can see everything that you do real time and we'll see a pop-up on the right side here and then we can implement some stuff we're going to have a couple files we're going to add so we're going to have a create arc file which is going to be the screen for creating um note so we're just going to call that create page and so the material we're going to have another one we can actually just copy that and name it update and then one more for a model the lib folder in case you're wondering in flutter is the main folder where like everything runs my computer's struggling a little bit right now because it's trying to debug this thing but um we're going to create a note.dart which is going to be very simple class where you can define make like a note object within flutter itself so we're going to have it id and string of note where the actual node is and then this is just creating a data class with this a flutter vs code extension that does all this stuff for you um yeah you don't need to worry about that too much but we're going to have to rename this too so are you modeling the data at this point yeah so this is this is just like creating a a model that i'm going to use locally so this is because i see so you're going to retrieve the data from the server and then you're going to convert it so it's just easier to use within flutter itself okay um so that we have everything set up now now the main like part of this is gonna come in the main file so i'll just remove all the comments so you don't really need to see that and soon you'll see the very basic boilerplate flutter app pop up what's your vs code theme i think i see somebody asking it's called pitch black pitch black yeah as i've been using it forever i really like all like the contrasty colors um so here's the the basic flutter demo app you have just a counter where you can increment it and all that stuff it's pretty cool but we're going to switch it up a little bit so first we're going to call this and go demo app and then you just save it and then it updates real time right there whenever people see that for the first time they're pretty impressed we're gonna change this um [Music] so i guess let me go over the basic concept for those who aren't familiar with flutter flutter is pretty much just widgets everything's a widget and flutter and you basically just layer stuff on top of each other and it should like everything just lays out in like a little widget tree for your whole application so the main widget we have is our app and then the widget below that in the tree is the home page and the widgets below that in the tree is the scaffold which is kind of like the back the base of your application then inside that we have two widgets called the app bar there's a thing up here and then a center which is the main part here and within that we have columns with two texts and then a button down here so that's that's a very very brief overview of what flutter is just think of everything as just a big widget tree so it's like a single page application right technically like if this was i'm familiar with react so i'm just curious if that's like the same structure um i'm not too sure because you can you can navigate to like you can navigate to other things i i haven't worked much with like react or um all those things so i'm not really exactly sure what the definition of a single page application is but i'm not sure to be honest okay yeah i know i've worked with i did a project in next year so i've worked with react a little bit but like i don't know the terminology for a lot of that stuff um but here we're gonna just create a column of notes and we're going to just leave it at the top so you'll see this will update with nothing and then we can have a text here saying note one and this aligns to the center will just align at the top that's your note now we need to replace this with actual the data that we get from there um let me pull that up to the side real quick so i don't i don't lose anything all right so we installed that http package so we're going to create a client with that package and actually i like to define all my variables and we're going to call it client and from the http package that we need to import it's not imported it is but i'm going to import it as an object already so we can just use it and it's a little bit cleaner i'm going to create a client with that object there we go what's going on here that's just the naming part of it but whatever that's fine so this is the client we'll actually use to retrieve the data from the the setup that dennis made and we can remove this counter remove this increment and then we're going to change this to add note so well i don't know how you did all that like talking while you were typing all that stuff out it's a lot harder than you make it let's see just do your thing and maybe i can try to ask some questions along the way yeah i was so used to it and you're you're on in the zone for this whole thing i was like wow i was impressed so this init state for every there's two types of widgets in flutter so like there's this whole widget tree that we're talking about and there's two types of widgets that could be part of that widget tree there's stateful widgets and then there's stateless switches so stay full you can hold values for example we're holding the state of the client you can hold stuff in there and stateless switch is just kind of there's nothing to hold you're just trying to display things so here we're using a stateless widget and you have this function called init state so whenever you uh whenever this part gets rendered this function gets called so in here we're going to do a couple things and let's set up our list of notes before we even get to that part this note is what we defined in the little class we're just going to use that because it's easier to work with than json strings and we're going to define it to an empty string for no empty array so on the initialization we're going to have a function called retrieve notes the way in flutter this underscore means this is a private function so that's why you see that all over the place and actually we could use private variables too but it looks nicer without an underscore so it doesn't really matter too much while you're making a small application so whenever we initialize it we want to do this retrieve notes [Music] and then in here we're going to do the actual call to the so set it to nothing set it to empty field at first because we're going to do it multiple times whenever it updates just so we can have nice things we could not have notes show up double time and we're going to have a list of their response from the django backend and where this also needs to be an asynchronous since we're calling something outside of our application we're not sure when it's going to come back but we're going to just do a simple await the client we defined up there and then a get method url is called retrieve url and that's defined in that url file we have so this is this is what i defined to actually get the data back and then we're going to want the body and we have to put another parentheses around because the return of that we want the body from that and then do a nice json decode bring that in and i'm missing a bracket i believe yes there we go this looks a little bit complicated but basically we retrieve the data from the url which we defined for it which is i mean when dennis was doing it it was localhost for us we have the actual deployed url and then slash notes and actually i have the oh where is it if you're if you're trying to show the endpoint maybe we can just do like a screenshot or something like that so this is the end point for retrieve url is this slash notes it's a little more pixelated than i would hope but hopefully you understand this the slash notes is the retrieve yeah so then we get the response in there and then i lost the file i had on the right side is your uh retrieve url is that the full url or are you just accessing the like that the the root domain and then the forward slash nodes or whatever so it's the root domain and four slash nodes it's the whole thing so i have okay so once i have several ones set up for retrieve and then i have a delete url for example where i pass into id and it creates the url for you okay so just to make sure everyone's familiar all those url paths uh those are all in variables so you're not gonna actually see those yeah but we're actually accessing those endpoints that i built out earlier on yeah so for example this delete one i have a function called there to go yeah delete url i'm passing the id and it does the url plus notes id and delete so similar thing that you saw happening in the chrome url that dennis was using but here we're just going to do it programmatically uh all right so we have this response and then right now it's just going to be a json so we want to go through each of these elements and take this notes array that we have and add a note and we can even do this thing called no dot 2 from map there we go map and then element this will create add the note to our list of notes and then this from map function it's a it's a name constructor so this happened with the generator that we had so it's just it's a factor constructor actually so it takes all the things we had from there and we actually need to rename it would probably be better if i just named the string body instead of note but whatever basically takes the map that we have and puts that data into the note so uh somebody was asking why the dart extension so flutter uses dart is that correct yes so it's kind of like the equivalent of how in django every file we have is dot py so it's a python file but django is just a framework so in this case flutter is built on top of dart if i said that right yep that's exactly right and they're both developed by google which is kind of nice because they all work together with like updates and all that stuff and then the most important part here at the end is this set state um the set state basically tells this build method that the stateless widgets have so remember there's two widgets stateful and stateless the staple widget has a build method and every time you call this set state it rebuilds that part of it so basically what we're saying here is when you treat the notes update that uh update the view to show the new notes all right and then we're gonna actually remove this column and have a thing called list view builder so this builds out the list of stuff for you depending on like what size it is and all that that fun stuff and then item count right so the length of this list is going to be notes.length and then the item builder we're going to return a list tile you saw me put the a in there because i'm talking and typing at the same time so list tile we have a title of notes index note and that's a text that we have so let me type that out correctly first now i'll let you know what we just did here all right i think now if we refresh or hopefully it didn't break i reload completed um it's going to be in its state and go through get the notes and then display those notes to us over here okay so it's just uh re-rendering that right now so we're making the api call yes okay let me uh okay i just want to make sure the end point was good so we see wash car today's agenda bob from down the street so that's a funny little method that i like to use when i try to remember names like if i meet someone i always use my notes app in my iphone so i'll like say their name and where i met them so like if i run into them later on i always know their name and they're all confused on how the heck i was able to do that but yeah so that so for anybody that wonders why that note looks like that that's actually something that i would do that's a good idea i just forget the names just move forward with it um all right so let's add a little little small detail here so we can finish up on this screen we're gonna wrap it in a refresh indicator but they thought they recognized your voice sorry i just wanted to show your face um and then on the refresh indicator it's a synchronous we're going to call that retrieve notes function again so this we won't see any changes now but we'll have a little refresh indicator pop up from the top when we swipe down so we can update and see everything all right uh last couple things here we need to have two more things within this list tile it's an ontap function whenever you click on it we want to go and update that specific thing and then a trailing icon which is a trailing thing so something at the end here that's gonna be an icon button and i think icon icon icons dot delete so it already comes in with the um flutter has a ui kit is that correct is that where you're accessing yes you just you just got some like icon buttons from i have no idea where so that's the nice thing that's what i was telling you about before like flutter has its own like ui element so there's this material.dart okay so you imported all those yeah so it comes with material ui and there's also cupertino so for ios looking stuff and it comes with these components that you've been seeing so we have an app bar that's at the very top we just put in what we want in there and it shows it nicely like refresh indicator is another one so you can saw we just add a widget called refresh indicator around everything and then it works and then we have this list tile which is that we can tap it and everything so it has like all of its events and all that yes so i had a question if you don't mind that might be asking them can we use something like uh in theory like the fetch api or axios or even um what was the other one gosh ajax no ajax yeah can we actually use those like web-based requests to do this like did you have to use your your import that you used right now which was like some http import so do we have to use them yeah i guess what i'm saying is can we use something like fetch or axios inside a flutter so i remember uh like flutter has its own things i'm not sure how how they correlate with fetcher axios i remember using that stuff before but they have like this package called like the way you you know how like in react and stuff you npm install whatever when we brought that package into here that's pretty much what we did with a flutter application i see okay yeah i remember that initial setup yeah so that's that's that's the equivalent of npm install like http package and there's other ones like uh dio that you can also do stuff with i heard that one's a little bit nicer but http is like the main one that like flutter supports um got you okay all right i don't know how those how do and http relate to like what you you kind of yeah we'll have to do like a we'll have to do a full like web and app based you know comparison like because it's like it's a completely different world now from web-based stuff to apps i'm like well this doesn't look that familiar to what i'm used to so it's like yeah it's just a whole different beast holy all your your whole part looked like something i'm not used to as well so all right um so we have a couple things that we need to do still on this is the whenever we go to delete we want to be able to delete that note and we have [Music] a we can set up a function actually to make it simpler um so we have add note and actually we don't really need this add note we're just going to push it to a new screen and then that's where we're going to do that whole part so we have delete note and in here we're just going to do client dot delete and we need to pass a url and then id so the id has sent here in the url is the delete url and we're going to pass in the id and it's going to put that thing together for us and then we're going to also call that retrieve notes function again it's going to you know retrieve the new notes set it to nothing and then reload the screen because you know we deleted it so here we can call that delete out and the id we have notes index for the specific note we're in and then we have the id for that index all right we can actually see this in action now we'll be able to delete let's say wash car you might have to reload so the sometimes so flutter has these two things we have like a hot restart and a hot reload so it actually worked sometimes all this stuff doesn't work perfectly with the hot restarts sometimes you need to reload the whole flutter application but let's try it again click delete and it disappears like that so that's making that delete request to the api so we have the button i see floating action button that triggers the events i'm trying to understand this on press what function is that triggering or where is it activating that so on press so this floating action button is this button down oh i see that we haven't implemented it yet the button that caused the delete is this icon button over here that's so we have a list view which shows gives you a list of stuff inside the list view we have a list tile for each item in the list we have a list tile and then each tile has a button so then when we clicked it we called this delete note function that passed the id of that specific note and that delete node function was up here we called client.delete the client we defined as the http client so we're just connecting to the internet we're deleting with the url that we give it so yeah so you set that url to delete url which is hidden that'd be kind of nice if we can find a way to hide that i would really like people to see that url but that's a basically a hidden variable and then he passes in the id so that sends a request to my back end which is currently on heroku so if i pull up my heroku application i'm going to see only two notes items instead of the three that were originally there so yeah that's what the request looks like that looks good so that's what that sends yeah so this is this delete url is equivalent to this um and then this id so if it was like five or something that's what it would be uh all right so then we have two more screens we have the create screen and the update screen we can navigation flutter is a little bit complex well not too complex but there's there's some um i mean navigation any language is a little bit complex but here it gets a little verbose with the how you write it out so we have a material page route and i can make this go away so it's a little bit bigger and here we're gonna have context and we're gonna pass the create page uh actually it wasn't too bad so we have a page route and we're building out the create page whenever we click this button so now if we click add hopefully come on my computer is a little bit slow now with this whole live stream and the debug session going but oh we we got some time all right i have to do a whole reload it's the create page it's pretty empty right now okay so all these are sitting inside of what folder again let me follow this file structure so you said the create page yeah so there's a lib folder is kind of where everything happens okay so in the lib folder we have the main page which was that list then we have update and then create i don't okay the delete one was inline okay got you i see what i missed here stupid mistake material page wrote dot of the text so people in the comments section are saying navigation navigator.push is what you're missing i think robert um brun branage or yeah that's i i know he's another flutter developer so for anybody looking for more flutter content also has a channel filled with good content on flutter so go check it out that's the picture i just brought them up on the screen so we defined that material pedro we just defined that specific page but we didn't actually push it onto the screen so remember i told you it was a little bit verbose i missed them so push renders out the actual piece of content correct okay and then then we define the actual page you want to push to so i only define a page up there and do the actual pushing of it now if we hot reload once this is done when you're not streaming and not debugging this is like takes like a second but we got some time here i click it and i should see a black screen so this is if you remember i told you about the whole scaffold component so that scaffold is like the base layer of your application uh would you uh would you mind if i added a robert to the stream just says commentary would that bother you or that distract you oh go ahead okay robert i'm going to find you on discord while we're doing this if you want to join oh he says never mind he can't all right so when you're def you're adding a whole scaffold to page are we in the right one yeah it might not show up right away when you make like really big changes um hot reload doesn't always work but that should have worked come on can i save it what am i missing here i think i wrote the app beforehand um so while you're looking for that uh just to kind of take some i guess pressure off you i had somebody one time in a tutorial in a udemy tutorial they ranked my course four out of five and they said in the tutorial he said false but he wrote true and i got knocked down an entire star for not saying the right thing when you're typing your fingers aren't exactly correlated with what your mouth is trying to say and what your brain is thinking i was like all right i guess uh i guess i can agree with that at least they gave me a four-star review that's tough but it happens i'm not too sure what's going on here this should like i mean it's pretty simple layout here the scaffold app wire so somebody's saying add o body or data no add container so it's a container function if you look at the stream yards link emanuel was posting this scaffolding he's a scaffold needs body container uh gotcha so awesome thing about streaming people uh people helping out everybody my emulator messing up i've been having some problems recently uh so clement's asking or he's asking me to join if this is on a discord server i'm just talking about privately messaging so uh it's not like a server that we're using publicly and robert says he can join so let me send him this link he's not gonna share i'm not gonna show his face but he's a little shy um all right let me keep building this out because this i'm pretty sure this is the correct code and then i'll reach i'll try to restart the emulator so navigator of context.push someone's saying maybe that can help i don't know navigate out of context.push that's that's what i got all right this is the create page i pushed the right thing um yeah this should be should be all good to go let me uh let me just keep going with this i'm pretty sure this is something with the emulator but then we add a text editing controller this is something that lets you control your text fields which we're going to have so we can update the whole um update our note or add our note in this case we don't need to update anything and also we're going to pass a client so we can use that client within this page okay so do your thing i'm going to add robert here so we'll uh add them to the stream robert okay so we can hear you officially now i just added you um your face won't be shown even though the mic camera's not on any uh any help for uh for us here nah it looks great he's doing fine this this things are always so stressful when you're trying to figure things out while you're like explaining like simple things are always forgotten but like i'm pretty sure this was simple enough to like where it's just creating a stateful widget it shouldn't that should work perfectly fine a black screen again nice which which part were you on so i got navigator.push and i'm pushing the i'm pushing the contacts page which is correct let me copy paste what i had in the working code pretty sure this is the right thing except without client because we haven't defined that yet emmanuel saying line 87 seems to know his stuff he's been posting some tips here i don't know maybe if he's catching something or not line 87. no wait what am i doing is there anything in the debug console that'll probably tell me i just haven't been having it up he's saying remove dot of also in the stream yards chat i'm not too sure about that that should be fine there are two ways of navigating in flutter so you have navigator.of context and to push a new page or you can have the shorthand way of use doing navigator.push but that one calls the navigator. i know what it is you guys are going to be mad all right let's see and so um this create page i remember when i made a copy paste from from the last one this one's called create page as well oh it's container yeah update page and now if we go to this we bring in a required argument client that should work so there the reason we see a black screen is when you don't have any like kind of material in the background so there we go on this page that status is on now he has a scaffold which makes it have a material and that is white but if it doesn't have that it will just become a black screen okay so did you get did you catch what's happening it was a stupid mistake when i did the when i created this update page i did a copy paste from this but i never changed the class name so they also the component is the same name interfering with that so i was changing this create page but it was still rendering this one it wasn't showing the create page makes sense that's live coding for you all right so text fill we have a controller um but this controller basically i mean controls your field for your text and then you got elevated button on press we're gonna create in this case and then we have a child of create note all right and then we're going to do stuff like max line is going to make it a little bit bigger so you can write your note in here and then whenever you're ready to go you do client so widget dot client which since this is a stateless widget we're passing in the client value from like in the actual widget but we're using it within the state so we got to make sure you get the client that was passed into this widget and then we do a um post yeah so since this is creating the note it's it's a post from this you see we do note slash create method post for updating we use put so we have a create url this one you don't need to pass an id or anything and then we're going to do navigator navigator.pop all right so that should be good we can now create a note saying something like bring robert into the stream nice uh create a note pop back here you don't see it update because we don't have it like that's why we put in this refresh indicator so if we pull it down now so if we pull it down now come on what'd i do wrong this time uh widget client.post let's try to reload interesting maybe the client didn't get maybe i was already in that stateless widget before and we didn't get the client correctly let's try again try to bring up the console i feel like there's some heat in there probably maybe not i know nice body and include that um so here we pass controller dot text so i think we just created two empty notes probably or maybe not but all right that should be good now my first time working with django so you know try three write the notes not refresh technically you're not working with django you're just uh calling a an api somewhere in the dark true that's right that's the point i always try to kind of explain to people that they don't have to be connected in any way and somebody asked if this can be done with react native yes it can be done with react native uh swift or whatever you're just accessing an api that's it yeah so there we go all right we got that working um now there's one more thing is to update it so a control c i'm just gonna have to remember to change it back to a update page update page update page state and i don't know why this last one didn't catch but here as well all right now we should have something similar when we click on the actual note and here we got let's copy paste this since it's a little verbose like i said ctrl c ctrl v and we're gonna pass it we're gonna go to the update page this time man you can have your head on a stick for controlling or copying and pasting i got some nasty messages for copying and pasting i try to do it at a minimum because they're going to be somebody that's just livid about it really trade lightly i know people still like to see you type it out i'm just teasing do it do it you please i'm gonna do what you want i'm just poor stories from the comments section keep that in mind um so we got we need two more fields for this one since we're going to be updating it we have the id and then the actual note for it and you got to bring that into the constructors required required there we go all right so now we have all the data we need here um if you remember that init state we had in the last widget doesn't want to pop up i won't do copy pasting this time do one line above it override i think it always gets screwed when you do it on the same or just above yeah oh you can copy and paste i was just uh i could do this one without copy paste this one's not too bad all right there we go um and then here we're gonna do controller at controller dot text equals um widget dot note so we're going to input that note that we already had into this field so that when you're editing it you don't got to start from scratch and then you want to set state again which i'm not sure if you need set statement yeah all right and then whenever you press instead of doing a post you do a put you go to the update url instead you got the id which is widget dot id and we pass the controller body dot text again so there we go that should be it and then here we're need to pass the id which is notes index dot no oh no ip there we go and then an actual note value of it notes index dot note all right there should be fully working hopefully come on faster reload come on are you currently on the update page or is this create that's the that was the create page okay now you see when you do some bigger changes things sometimes go wrong so you gotta you gotta read reload everything no constructor update page with matching arguments oh just gotta wait just be patient all right so now if we go into for example try three there we go so we can get in there and then we update it to let's say try four and then create note i should probably update that to um say update instead of create but there we go i pull down to refresh and it is working now just to make make it fully perfect call it update node instead and at the top do update all right there we go that's fully working so now we can add a new note say do stream with dennis create the note you can refresh there's ways to make it refresh like on pop but i figured that's not necessarily key out of the scope a little bit yeah and then we can update it to have more data and then we can see the refresh happen so there we go and then we delete the try for and that's a fully working notes app with flutter and django backend nice so uh let me um i think it's gonna is there a way to remove robert off the screen if he's without removing him from the audio remove your call you can kick me oh robert are you a are you okay with answering some q and a's with us or tadasa if you i keep wanting to say toddius i don't know why cool so i have a few questions for you all and everybody in the chat uh who wants to ask a question go ahead and shoot now i've been missing kind of a lot of them but uh first of all how do you get this on your phone like a web application it's on your browser right like you go to a url what's the process of getting this on your phone i'm sure a lot of people are asking that um so there's like like you to debug it if you're just working like to try some stuff out a flutter you just plug in your phone and it works like there's a if you're using ios you have to enable this one special thing in the settings and then um i think you have to you might have to do the same thing in android but you just kind of build it for that thing and it just debugs on your phone you can usually see it so you probably have to set up like an account on some kind of application first right like you'd have to appear if you're debugging no um if you're trying to release the app to the app stores then you would have to so if you're if you're if you write an app and you're playing to actually get it released and have people use it then you need to have an apple developer account or a google play console google play account as well one quick example you can give is when you are in visual code you can hit f1 and you can select device and right off the bat you can see all of the devices you have connected to your computer and you can also see for example if you have chrome installed i think that application uses only the http package so you can probably start this on a browser right away and it should work yeah so we can actually show off how this is actually working as a web application and a mac os but i'll get that running in the background and then hopefully if it doesn't run into any problems we can show the screen gotcha so how about uh ios and android right so flutter can do both how do you how do you go about like do you have to change anything for the application to do one or the other is there anything you need to configure the settings do you have to write is there any difference i guess between the two so it really depends on the application of i would say like 90 to 95 of the code you don't have to change anything there's i mean depending how like precise you want to go with stuff so for example some people like to write um design their applications different for ios and flutter so you could check which platform you're building to you can have different designs or different like widgets like remember i told you everything so widget we have like the app bar for the material design you can check whether it's ios or whether it's uh android and give either the material design or the cupertino design um and then there's there's a subtle differences between web and between apps so for example web you have a pointer right when you're using your a website you have like hover effects like with when you're using a phone there's no such thing as hover so there's little things like that um but for the most part it's very similar gotcha okay cool how about uh how about freelancing opportunities for flutter like are you is that what you do you said you work out a company okay so no you're not freelancing you're working at a company but have you took on projects or robert have you done anything with it um i had a friend asked me to ask you all so he's also learning flutter praveen is in the chat he's asking that i haven't done any for probably for both of us it becomes quite biased because probably it's very easy for us to get clients we can very easily reach out but i've seen a lot of people especially people have been following me and people on twitter a lot of people had quite an easy time finding freelancing jobs but it also kind of depends like a lot of people have experiences from three years ago and it takes a bit of time for um like the the workplace to actually get into flutter but i've seen like this past one and a half year or maybe even two years it has really started stepping up and a lot of people are finding like jobs and freelancing jobs and a lot of that okay cool so you're saying that flutter was in beta you said earlier on and it just recently went into like full whole steam or how did i i heard that wrong maybe yeah so i started working with it when it was in beta so that was like three years ago it came out like uh it's been it's been like full release for a while now um i think it's been two years and then like yeah this year maybe or late late last year the two 2.0 version that released and now it's 2.3 i believe cool nice well uh i don't see too much more in the chat i had those questions myself i'm definitely gonna have to give flutter a try i'm again also from a react background i have to give that a shot too but at some point i'm gonna have to try mobile app development so yeah if you want to share my screen by the way i have sure all three apps working except one so the mac os app something went wrong with the with the call to the database but um so here we have built a website our application on the phone and then also a native web app but it's not showing the content correctly but i'm sure there might be some either a special little thing you got to do from a mac app or something like that maybe yeah some settings enable some http or networking for mac apps yeah so there's like some settings to enable networking to actually be able to see this but there you go like you can if your computer is powerful enough you can literally write this code and just be constantly debugging and hot reloading and all and checking all three things at the same time and with the mac os it's really easy because you could like you know change up how the window looks really simply and um it's great for like responsive uis and stuff like that cool nice looks great all right well uh thanks for thanks for joining on robert thank you for coming in last minute i've had a couple of streams like that where i'll see somebody in the chat and i'll just like hey jump on in uh thanks for uh for spending your time too to us to to build this messaged you last week i really wanted to try this so i might have to do something like this with react native and any other app developers that want to come on maybe at some point do the same thing but i think everybody's going to get the idea i'm really trying to break django more into the mobile app world and i don't know if it's exactly the best option i know uh mitch from coding with mitch builds mobile applications and he's always using django for the back end so i actually know a lot of people that do it so i want to bring that to the light or to the public light because most people you talk to don't compare django to uh to mobile apps at all even though they're not the same thing in any way but for the apis i'm just noticing people go to firebase or stick to node.js i just think django is absolutely awesome and i just want to show it in this light but yeah that was the point of it that is especially true in flat s flat is very like new in a way a lot of new developers join it so most of the content that that is out there is usually pointing to firebase or like those out-of-the-box solutions you don't have to do a back-end so i really feel like actual content about django backgrounds or django back-ends and that's really it's really good yeah i'm gonna i'm probably gonna do a follow-up video after this and it'll be like a five-minute video and i'll i'll put some kind of title like can you build mobile apps with django and like i just know i'm gonna get just a form of people commenting before they even see the video so i'll do that and slowly start i guess attracting the light to it but yeah cool all right well i don't want to take any of your time so thank you for everyone for joining thank you guys for coming on this was fun fun for me to learn too thanks for having me i i want to i'm going to i'm going to try to build a back end myself with django and see how it works and go through the whole process and learn about it more so you just might like it yeah alrighty well i'm going to end the broadcast right now

Channel: Dennis Ivy

Views: 47,362

Rating: 4.9416971 out of 5

Keywords:

Id: VnztChBw7Og

Length: 116min 31sec (6991 seconds)

Published: Wed Jul 14 2021