Modern Python Projects Transcripts
Chapter: Let's build an app
Lecture: GUI for the uptimer

Login or purchase this course to watch this video and the rest of the course contents.
0:01 We will continue using our uptimer.
0:03 But this time I have turned it into a very simple GUI application.
0:08 So instead of using it from a terminal,
0:10 we will have a simple graphical interface that will be more user friendly.
0:15 Let me quickly show you how this application looks like.
0:18 I have removed all the additional files from the previous chapter and I left only
0:23 the setup.py and two python files.
0:26 First one is called helpers and this is where I store some helper methods. Here,
0:32 I have left only the check URL method because I no longer need to
0:36 use click if we are not going to run this application from the terminal.
0:41 That way I will also have less external dependencies because I no longer have to install
0:46 Click. But if you like,
0:47 there is nothing wrong with leaving all the files from the previous chapter and then just
0:52 adding this new file with the GUI.
0:55 That way you will be able to run this module either from the terminal or from
1:00 the graphical interface. Speaking of graphical interface,
1:05 I also have the second file called gui.py.
1:13 Here I've added some functions to create a very simple GUI.
1:17 I've decided to use the tkinter Library.
1:21 There are other libraries, but tkinter is a builtin modules,
1:24 so that's the easiest one to use.
1:27 Let's first start this application so you can see the interface,
1:30 and then I will talk you through the code.
1:33 So let's go to the terminal.
1:38 I already have some venv activated,
1:40 but I need to create a new one.
1:47 As usual, we start by creating a new virtual environment,
1:50 and then we activate. Next,
1:54 we have to install some dependencies.
1:59 So if we go to the setup.py.
2:00 you can see that I still depend on the request library.
2:06 So let's install it. As you saw in the previous chapter to install dependencies from
2:11 the setup.py.
2:12 We have to run Python setup.py install.
2:20 This will install both the request and also our application that I'm now calling
2:26 guptimer because it's a GUI application.
2:30 And as you can see, we have the entry point that it's now pointing to
2:33 the main function from the GUI file in the tree uptimer module, so we should
2:39 be able to run guptimer in the terminal and that will start the graphical interface
2:44 for us. Let's give it a try.
2:50 So, that's how it looks like.
2:52 Depending on how you install tkinter,
2:54 you might get some duplication Warning.
2:57 I think I'm using tkinter that comes built in with Mac OS,
3:01 and it's some kind of old version,
3:04 but as long as it works,
3:05 we don't have to worry about that.
3:08 So this is our simple application.
3:09 And if we try to put some URL's here,
3:16 we can click check. And now we have this green 200 saying that everything is
3:22 fine with this url. Let's see the code behind this.
3:27 Move this here, in the Gui.py.
3:46 We have the main function, but when we run it,
3:50 this function is called. At the top,
3:53 We have the check_urls(),
3:54 but we can skip it for now and then we have a function that creates this
3:59 window. It changes the color to a light gray so we can see where we
4:04 have a text area and where we have just a background.
4:08 Next, we are the label here.
4:10 We add the textbox and we add another textbox.
4:14 But this time we disable it, so users can't modify it by hand.
4:22 Then we create some tags, and we can later use those tags to change the
4:26 color of the text. And finally,
4:30 we place the button at the bottom and we connect this button to attract
4:35 urls Command. And just before the end of this function,
4:38 we start the main loop, so our program will actually respond whenever we click the
4:43 button.So when we click the button,
4:46 the command check_urls() is called and this command grabs the list of urls
4:52 from the textbox and strips them and creates a list from them.
4:57 Next, we have to change the state of this response box,
5:00 and that way we can actually edit it.
5:03 When the state is disabled, you cannot modify the text that is there.
5:08 Next we go through each URL in our list and we call the helper function,
5:12 check URL to get the status code.
5:15 If we get the status code,
5:17 we write it to the response box.
5:20 Then we grab the color corresponding to that status code,
5:23 and we colorized this text And if we don't get a status code,
5:27 we just write wrong Url and use the default magenta color.
5:32 And finally, we again disabled this response box so users can't edit it.
5:37 Let's test it with a few more.
5:38 urls, At the bottom of this page,
5:43 I have a few more test urls
5:44 That will return
5:45 Different Http codes. So let's copy them.
5:49 Let's run them here. Correct.
5:59 So this is how it's working.
6:01 We can modify things and you can see the changes are reflected on the right side
6:06 So this is the simple GUI for the uptimer that we will be using in this chapter.