Writing Up the Frontend

We now have channels sending updates from our server to our client over WebSockets. 0:00 We need to set up our client's front end to receive these events. 0:04 So be warned, this video has a lot of HTML, and even some JavaScript in it. 0:07 Now I said we were going to be working on the front end, 0:12 the client side with this video. 0:13 And we are, but we need to make a couple of small back 0:15 end editions to give the front end somewhere to live. 0:18 We'll start by adding a new route to our urls.py. 0:21 So I'm gonna add from votes.views, 0:26 import DashboardView which doesn't exist yet. 0:30 We'll have to make that in a second. 0:36 And a lot of new URL here which is dashboard and 0:39 we'll go to DashboardView.as_View name=dashboard. 0:45 All right, and now we need to edit the views.py here in the votes app, 0:54 which is completely empty. 0:59 Let's clear that out from django.views.generic 1:03 import TemplateView and from .models import Voter. 1:09 And this will make class DashboardView which is a TemplateView. 1:14 The template_name will be votes/dashboard.html and 1:21 in the get_context_data we'll say that 1:28 context_data = super.get_context_data 1:33 with whatever the kwargs are. 1:39 And then we'll say context_data'voters' = Voter.objects.all. 1:43 And we'll return the context data. 1:52 Now the dashboard view doesn't do much because well, it doesn't need to. 1:57 It's mostly just fetching the voters so we'll have some nice labels or 2:01 our dashboard. 2:03 Now speaking of that dashboard in our votes app we need to add a new directory, 2:05 named templates. 2:11 And then inside of templates we need to add another new directory named votes. 2:14 And inside of there you all know this drill. 2:19 We need to add a new file which we're gonna called dashboard.html. 2:23 And I already have some code generated for that. 2:30 So let me copy and paste this in. 2:33 And then we'll talk about what's there. 2:35 For the most part it's fairly simple. 2:36 And it's just some HTML to show the dashboard. 2:40 Couple of things to note about this though, we're using tables the way that 2:45 they are intended for actual tabular data instead of the layout of a page. 2:48 And two, we have these spans that are down here and we're creating these so 2:55 that our JavaScript has like a handle to grab onto to the update values. 3:00 And we're prefacing them with this js-, so 3:04 that we know, by looking at it, that this is for JavaScript not for CSS. 3:08 This is a somewhat common practice nowadays for prefix and 3:11 class names based on what they're doing. 3:16 Okay, so if we make sure that our server is running, and we come over here to 3:19 the dashboard page, we should see a pretty basic dashboard here. 3:26 Now it doesn't look great, all right. 3:32 It's not super pretty. 3:35 We can make it look better and we can also bring in a library that we're gonna need 3:36 with the jQuery library by bringing in bootstrap. 3:41 Now bootstrap as you're probably aware is a collection of CSS and 3:44 JavaScript that lets you add a bit of polish and interactivity or 3:47 just a clean default look to your website. 3:51 And it's often a really good starting place 3:53 if you're not sure how to make your site look great. 3:56 Your site will look okay using dashboard. 3:59 A benefit is that it depends on jQuery, which is a good fit for our needs. 4:02 Now you could of course use a more specific JavaScript library if you wanted 4:06 to, but jQuery's plenty for this workshop and it's, you know, 4:10 what I often reach for. 4:13 So let's bring in the bootstrap CSS, 4:14 which this goes right here in the head. 4:19 And then let's bring in the bootstrap JavaScript and jQuery itself. 4:27 Now we don't necessarily need the bootstrap JavaScript, 4:32 simply because I'm not gonna be doing any bootstrappy JavaScript. 4:39 But it never hurts to have things available, 4:43 just in case you need them later on. 4:46 So I'm gonna save both of those and all of this is going to be in the repo of course, 4:50 so you can check it out from the repo. 4:54 And we've added this class="table" to the table so 4:58 that bootstrap applies some nice styling, and let's refresh and see how this looks. 5:01 Yeah, that's a lot better. 5:06 That looks a lot nicer. 5:07 We can see who's doing want everything's lined up pretty nicely. 5:08 Okay, so now let's add in some JavaScript to handle all the WebSocket stuff. 5:13 So down here, below all of the other script tags, I'm gonna add a new script 5:20 tag and on document.ready, 5:26 we're going to run a function. 5:32 So first off we're gonna make a socket which is 5:35 a new WebSocket and it's gonna go to WS:// and 5:40 it will bring in window.location.host. 5:45 So that way it will work regardless of what our host name is and 5:49 then we'll do socket.onmessage. 5:54 We're gonna run a function, which takes an event. 5:59 Or rather some data like a message. 6:02 We'll say var data = JSON.parse(e.data). 6:06 And then for (var voter in data). 6:13 And for (var category in data voter). 6:18 And now we're gonna bring in our bet of jQuery. 6:26 So we'll do (*.js- " +_voter + "- " 6:29 +_category + "-yes", and 6:36 that text is gonna be updated to 6:42 (data[voter][category]["yes"]. 6:47 So whatever the value is that's in there. 6:55 And let's just copy that and let's change this yes to a no. 6:58 And this yes to a no. 7:04 All right, so those two lines are exactly the same with the exception of yes and no. 7:07 So let's go over this just for a second. 7:11 So we're waiting here until the page is ready to be acted on and 7:14 then we're creating this websocket connection. 7:18 Now when that WebSocket connection receives data which is on this on message. 7:21 We go through the JSON dictionary that we send over a websockets and 7:26 we update the table cells with the right values. 7:29 Our dashboard should now be ready. 7:31 So I'm gonna reconnect here, 7:34 I'm gonna refresh this just to make sure the WebSockets are done. 7:36 And I'm gonna open up the admin over here, and I'm gonna go change this housing vote. 7:40 So let's save it like it is right now, so I'm gonna choose save and 7:45 continue editing. 7:49 And we see this page immediately update, these all got yeses. 7:50 And we've got a no there, and that stuff there. 7:54 So let's say that on this vote, let's say only Chairperson Tompkins and 7:56 Bello voted yes. 8:01 And that Adamson and Perez both voted no. 8:03 So I'm gonna save and update these again. 8:06 And we should see these housing values right here change. 8:08 And they did immediately, I didn't have to do anything, 8:10 that's just, it's real time, it's amazing that, that works. 8:15 So congratulations, we've built a real time WebSockets Power Data dashboard 8:19 powered Channels and Django. 8:24 All that's left is getting it deployed and we'll touch on that in the next video. 8:26