7 minutes to polling with Django and HTMX 🗳️

Tom here welcome back to the channel in this I'm going to be showing you the simplest way to add polling to Jango with HDMX this is great if you've never used htx before it's going to be really simple about me I'm building loads of products and content and here's a product that I'm building at the moment in Alpha app.on design.com and it's designed to build UI particularly janga UI extremely quickly for you so you just enter in something like an elegant dashboard like this and then it will start generating An Elegant dashboard for you fully responsive which you can then customize or then St use as your template for building anyway let's get into it so we're going to show the simplest way to add polling to Jango with HDMX here we are in our new project and we're going to set up ajango app so just copy this in into our terminal there you go and then we' created our app which we're core and then our app is called Sim and the standard procedure so you're going to set up and register Sim by going into core settings and then installed apps and then just name it Sim Sim is just the name that I've decided to give this app it's the standard name I use now section two we're going to add the data dashboard okay so we add our data dashboard we're going to be showing new sales and creating sample data so copy this and then go into our views file here and paste it in these are all your initial purchases our index page and then this is going to be getting new purchases which we're going to get as HTML using HTM X and then insert into our index page as HTML and you can see we're randomiz creating random fake purchases using Faker which is a nice Library great so we've done that now we want to add our templates so we're going to go to Sim and then create a directory called templates and now we're going to add so we added our directory and now we're going to create one file inside it called table rows. HTML careful with the title yeah we'll add it to it and then copy this in this will render a table Row for each purchase as you can see now we add another template called table row not table rows here table row. HTML which contains our individual table row just to keep things really neat and we can actually get rid of that and then we're going to add our index page index template so create another one another template in here called index.html and then paste this in and you can see if I make this a bit bigger you can see that we're showing including all the table rows with particular purchases which we'll render from our view and now we're going to add you might think okay where's the HTM X well that's coming but let's add our URLs first so go into core and then copy this over the top just to set our top level admin and then include our routing to our app URLs and then we're going to actually add our app URLs go into SIM create a file called urls.py inim and paste this in here and then this gives our two Roots which are the index and then the get new purchases and that's the root that HTM X will take to get back the HTML with the new purchases okay now we're going to add HTM X so we can just go back to our views page and then we're going to you see HDMX is there we're loading and you can copy this and paste over the top and the difference here is now besides actually adding HDMX there is that we have this line which will send a get request every 2 seconds to get new purchases which is our route here which goes to this View and then it will swap that after the beginning of this element which of our Target which is table body because we want so it we will go to this table body and then add them in the beginning for this line and after this line and yeah that's a quick explanation it's as you can see it's quite declarative and clear okay style the dashboard so let's run our server and check it out so we'll go and now we'll run our server M py let's move my head python manage.py run server and visit it and there we go we've got our unstyled and then we can see that we're randomly new sales are coming in so we've got a sale there Computing for speech and language up another one for jewelry designer two more for fine artist and Armed Forces operation area officer so you get the idea every second it's or every two seconds it's fetching more data from the back end and then with a bit of Randomness so you could use this to get real- time data from your back end and keep your front end completely up to date in just a tiny number of lines so if we want to style this to make it look even better because looks pretty bad at the moment because it looks pretty bad at the moment and we can go to my product Photon designer activate Jango mode and then generate some UI for this so let's type in let's go to our Index popy this in and then so just pasted in all that template and say something like generate amazing styling for my sales dashboard and keep all the keep all the HTM X tags in place and then click generate see what we get that's little bit of a bug there just need to put that to get rid of that line but it looks okay okay so I think we've got we will have something there we can't got our table rows there we could play around with this if we wanted make it even better so we got yeah make it even better that looks I think all yeah it's all right a reasonable start let's let's try it out so I just need to change that to HTML it's like bug there which I'm fixing and if we copy it in paste it over the top let's see how good it is and then we go back to our app and there you go and if we wait a few seconds perfect as you can see there is more there are more sales coming in and really we can just we can make this a lot nicer we can say uh add really nice rounding make it elegant and beautiful but even we are we've got something there which look better looks better than before which we can work with and we can edit from that but you can get a lot better results if you spend a if you get a better prompt and with phot design you can get some really amazing outcomes this looks better it's rounded yeah well let's try putting that in as well um see that and then oh just edit that and I need to I'll be fixing this era shortly and let's try refreshing this on our page yeah cool it looks better that's pretty nice um we could and you can also CH choose your color scheme so with this I chose these particular colors and so then the AI generated with these colors in a responsive way but you can customize that and there are a lot this is fairly basic but it gives you the idea of what you can get doing and yeah there a really amazing outcome you can produce so yeah I hope you enjoyed that besides that I'm making loads of free Jango content weekly as well as other py and useful AI guides yeah here are some more videos in the meantime all the best to you

Channel: Tom Dekan

Views: 796

Keywords:

Id: N9HEV1a_kd8

Length: 7min 37sec (457 seconds)

Published: Fri May 24 2024