 Right, so hey guys and welcome back to another Python tutorial So today's tutorial is a very interesting one as we're going to go ahead and create a GUI app today That's pretty much going to tell us the weather. So it's going to be based on your location So we're going to be using the information we learned from the last tutorial which is web scraping using beautiful soup and requests to pretty much web scrape a weather website for the region we are in to grab the weather and Then pretty much the weather conditions that we have going in our region So first off what do you want to do is open up cmd to install a few modules that we're going to be needing for this tutorial? So open up cmd and assuming that you have pip already installed on your Python versions. Go ahead and type in pip install Beautiful soup for now beautiful soup for is pretty much going to help us pass the information Into that we grab as an HTML page using the request module So what you want to do is also install the request module if you haven't got it already so pip install requests and Mine is already satisfied. So it's fine. And then lastly what you want to install is pillow. So pip install pillow So pillow pretty much lets us add images to our tick into GUI application Which is good, which is what we're going to be doing to add to make it a bit more interesting So it says already satisfied. So these are the three different modules you're going to have to install And once you're done with this go ahead and open up your favorite code editor for me It's going to be visual studio code and what I'm going to do first off is zooming to the screen like always just so that It's a lot easier for you guys to take a look at Cool. So I'm going to go ahead and create my new file and then save this as save weather app dot Pi because it's a python file. So I'm going to save it as weather app dot pi now Also, I'm going to go ahead and minimize this and show you that I've got my weather dot PNG image on my desktop Which is the same directory as my weather app dot pi So I'm going to be using this image for my app later on. So let's go ahead and start coding So first of all you want to do is import all the stuff that we're going to need now As I said where we're scraping this information about the temperature from the weather dot com website So we're going to be needing requests to make requests to the website and grab the html page. So import requests Then what we want to do to pass the information that's stored as an html document is use beautiful soup so from bs4 Import beautiful soup now. I've done a tutorial on web scraping by itself In my previous tutorial, which is going to be linked in the description So I recommend you watch that before you do this, but if you're already confident with using web scraping then go ahead and continue with this tutorial So what we're going to be needing to do next is import the stuff we need for our GUI. So I'm going to do from tick enter import Label because labels are going to let us put some text to our screen and I'm going to do from tick enter import tk We're just going to let us create different screens or just pop up windows And then lastly from pillow. So it's short form to pill import image tk with a capital I and a capital T and then image So we're going to be using these two classes to pretty much import our image into our GUI application Now first up what you want to do is create a new variable called URL and this variable is going to store the URL to the website That you're trying to scrape so I'm going to go ahead and my Let's take a look. So I'm going to open a new Chrome Browser right here and then type in weather.com and then I've already got my link opened up for my country So I'm going to type in I'm just going to type in the link and press enter So as you see it says not for which is pretty much where I'm located at the moment and then it says the weather conditions So our weather app is pretty much going to include the location the temperature and then the a bit more What's it called and then it's also going to Have the weather prediction, which is like cloudy sunny and so on so it's the three elements. We're going to grab We're going to grab the location We're going to grab the temperature and then the weather prediction So first of all, I'm going to go ahead and grab the link so that I can import that into my request So go ahead and grab the link and paste it in here and now my URL variable knows where to look for the URL cool now what I want to do next is go ahead and Create the master screen. So we're going to be working towards Creating the GUI first. So let's create the master screen and assign that to TK that creates a little pop-up window Then we do master title give screen a title weather app and Then I'm going to do master.config and then I'm going to set my background for the entire application to white because by default It's grayish So I want it to be white now What I'm going to do next is also include my image configurations up here So I'm going to do image equals capital I image dot open and then in here I need to provide the directory to where I want to look for my image. So I know it's C drive then users then forward slash your hand good Dino Then forward slash desktop and then forward slash weather dot PNG which was the image. I showed you in the stock Now this opens the image up and what I want to do next is overwrite this variable to resize it So I'm going to do image IMG equals IMG dot resize and then we pass a tuple in there So I'm going to pass in the size of 150 by 150 units now since the image is resized What we want to do is convert this image Into a tick into a readable image. So we do IMG and then overwrite it with image TK dot Photo image and then pass in the IMG variable there So now our IMG variable is pretty much ready to be used on a label so that it can be added to our GUI later on Cool. So what we want to do next is actually go ahead and create the labels for our screen So the first label I'm going to have on my screen is going to be called location Well, how did I spell that location label? And we're going to equals that to a label which is going to be placed on our screen The label is going to be placed on the master The font is going to be set to Calibri And I'm going to go with Calibri bold so that it's bold as well And then I'm going to make sure that the font size is 20 Now I'm also going to include the background color of this label to be white so that it matches with the overall application background color and Then next I'm going to go ahead and place it. So location labeled grid Where row equals zero sticky equals north which means I want it in the center of my screen and Then I want padding X which is based from left and right of this label to be hundred units Cool. Let's run this to show you what it looks like so far It's obviously it's not going to show up because I forgot to do master.main loop So we got to do master.main loop to put this application into a loop Otherwise it just pops up and goes off. It doesn't really show properly So as you see right here, all we have right now is a little pop-up window and Essentially, it's meant to have text on it But for some reason it doesn't okay So obviously it doesn't have text on it because we've only created the label on it and it's a blank label We haven't given it a text attribute to put text to it because we're going to be adding text to this later on when We grab our information from the website So for now, this is just an empty label that we're going to populate later So what's next is we're going to create a temperature label as well So I'm pretty much going to copy and paste the location label lines. So these two lines we can copy and paste them Let's copy and paste them and I'm going to change location label to Temperature label and then Calibri bold is fine I'm going to go ahead and change the font size to 70 because I want the temperatures to be showing up quite big Background can be white I'm going to go ahead and change this to temperature label as well dog grid and then row equals to one Sticky is going to be to the west because I want this to be placed on the very left-hand side of my screen and Then padding X is going to be 40 because I want it to have a bit of space from the left So 40 units of space cool So what we're going to be doing next is we're going to be adding a label So we don't really need to give it a variable name and this label is going to hold our image So this label is going to be placed on master and then we use the image attribute to give it the image That we have already stored as IMG and then background Of course, it's going to be equals to whites because we've been going with that for the whole time Then we do dog grid. So I'm going to place this on the same row as my temperature But I'm going to place it in the east so on the very right-hand side of my screen So sticky equals east instead of west so we're on this now We should have the image showing up as well. So as you see right here We have the image showing up on the right side of my screen Obviously, it's not showing to the very right side because there's no content in the labels at the moment Once we populate the labels, it will make a lot more sense So at this point, you should have an image that showing up on the right-hand side of your screen now lastly as we said we were going to have weather prediction as well, so Whether it's cloudy sunny or whatever. So I'm going to create another label for that. So whether predict whether prediction Label equals label and then it's going to place on master where the font equals calibrate With a font size of 15 and I forgot to write bold in there because I want it to be bold and Then we do background equals whites background equals white Then lastly, we're going to place this using grid. So Where the prediction label dot grid row is going to be equal to two because the last row we use was one Sticky is going to be waste because we want it to be placed on the left-hand side of our screen and Lastly padding X is going to be 40, which is pretty much the same as the previous one we had Cool. So if I run this now, we're not going to have much But just a bit more empty space towards the bottom of our screen because that's where the label is So it's all empty labels, which is why we can't see anything Cool now for the interesting part what we're going to be doing now is having a function That is going to be grabbing the temperature and all the other fields such as the location temperature and weather prediction from the website On web weather.com and then it's going to be updating these labels right here every every one minute It's going to be grabbing the information So it's pretty much going to grab the up-to-date information from the website every one minute and then update these labels with that information So if any changes happen on the main website, which is weather.com our applications, it should take around a minute to update Cool. So that's what we're going to be doing. So we need to create a function first of all So after we have done our image, we want to do a function called get weather Which is pretty much going to be helping us to get the weather So we're going to create a new variable called page and then we equals that to requests, which is the class we imported Don't get because we're using the get method to get the HTML page from the URL provided Now once we have the page and it's stored in our page variable right here So we are ready to create the soup variable, which is according to documentation And then we type in beautiful soup, which is the name of the class we're using and then inside We pass in the page.content, which is the content of the page being gets using our requests class and then we're going to be using an HTML parser So that we can pass this page into an HTML type so we can read it easier. Cool So once that's sorted out, what we want to do next is go ahead and create a variable called location Now location is going to store the location from our website. So that variable right there It's going to store this being shown right here. Now you may ask, how do you find this? So I'm going to say what you need to do is highlight this using your cursor So highlight all of it and then click right click inspect and You'll be taken to the attribute right here So as you see it's an H1 type element where it has a class of this So this thing right here is the class. So we're going to be getting this element using the class So what we want to do is pretty much what happens here is the whole website or the whole HTML code is stored in the soup object Right here. So we do location equals soup dot find and then we tell what element we're looking for So as I said before we're looking for the H1 element. Was it the H1? Okay, let me look for it again. So let's just inspect Yeah, so we're looking for the H1 element which is displayed right there as it's highlighted So we type in H1 and then what we're looking for the H1 element is we're looking for a class So class underscore equals and then we need to specify the name of the class we're looking for So we need to double click on this and the whole value inside the speech marks We just copy on that. So all the value of class Inside the speech mark we copy that and then we go back into our application right here And then paste it as a value of the class now if I go ahead and print location out Uh print location And I'm going to also run this function Down here before the main loop. So um get weather run the function Let's run this now and if I have done everything correctly I should have the location Cool. So as you see right here, it does return the location But if you see correctly, it's returning the whole element that we're looking for So it's returning the entire h1 element including the class and everything like that But we don't want this rubbish. We only want the text from it So we need to use a dot text attribute on it. So I mean the dot text method on it So we go at the end of the line for location And then at the end of the bracket we type in dot text so that it can gather only the text and not the entire element So let's run this now to see if that worked out And as you see right here, we have Norfolk England weather. So that's literally all we're looking for Let's go back to the website and see if that matches what we're looking for And as you see it does match what we're looking for So we've literally grabbed this element and then placed it into our application variable called location Very cool. So what I'm going to do now is what happened here I'm going to close this off and control B to close that off And since we've got our location now stored in the location variable, we also need to find the temperature Temperature and then we also need to find the weather prediction next. So for temperature, we're going to use soup dot find Now as we did on the previous one, what we're going to be doing is going back to the website And for the temperature, I'm going to select the temperature only and then click on inspect Now as you see right here, the element type is actually a span. So we're going to be using a span type So if I can go back in here And then type in dot find span because that's the type of element we're looking for And then we're going to be using a class again. So class forward slash equals And then we need to copy the class name of it. So let's go ahead and copy the class name So the class name is literally right here. So it's the span and it's the class name is right here inside the speech marks Where it says class so I'm going to double click and copy on that and then go back to visual studio code and paste it in there And then like always, we're going to go at the end of it and type in dot text So it only grabs the text for us and not the rest of it Cool. So now let's print out the temperature that we just stored and let's see if that worked out. So if I run this now As you see right here, it says 16 degrees, which if I open up on my website right here It says 16 degrees. So it's pretty much matching. So we're able to now gather the location and store it in a location variable And we're also able to grab gather the temperature from the website and store it in a temperature variable Very cool. Now for the last bit, what we want to do is grab the weather prediction Whether it's going to be sunny windy cloudy or whatever that is. So weather prediction Equals suit up suit up fine Now we got to look for what type of an element. This is actually so Let's go ahead and check. So if I select cloudy right here And then if I inspect It's a div type element because you can see it right here. It says div And then what It's class is is literally right here So i'm going to copy off the class because I can remember div in my head But I can't remember the whole link for the class, of course I'm going to copy the class go back to reas code I'm going to type in div because I know it's a div type of an element We're targeting and the class has already been copied in my clipboard. So i'm going to paste it in here And then lastly type in dot text in there So I can only grab the text and not the entire element. It's going to print weather prediction now And if it works fine, then we're ready to move on to the next stage. We're just populating the labels So as you see right here, it says mostly cloudy. Now, let's go and check if that's true So as you see right here It says cloudy, but obviously there's some other hidden information behind it, which is okay. See as you see right here It says mostly cloudy. So it even gathers all the hidden information behind and just displays it to us right here Which is mostly cloudy Cool. Now since we have all this information stored in variables We need to put this information onto our labels. So the way we do this is we call our labels. So location label location label dot config And then we enter the text to be equals to our location variable Now what this is going to do if I run this is it's going to put the location on my label So as you see it's populated the value of the Location variable onto my location label And we're going to do the same for temperature label and for the weather prediction label too. So temperature label dot config and then text equals temperature temperature label temperature and then weather prediction label dot config where text equals weather prediction Cool. So now if I run this we should pretty much have the entire GUI ready So as you see right here our GUI application is ready. It's a nice little looking application Which is usable But now the only issue is that if our website which we're using which is weather.com Updates the temperature to like 18 degrees or something Our application wouldn't automatically update because it's not in a sort of loop or anything like that It just once once and it gathers all the information only once from the website and then just chucks it on our GUI So that's the next bit where we're going to be refreshing these labels to grab the information Every one minute from the website to check if there's been any updates And if there are any updates, we're going to update this information on here every one minute Cool. So let's close this off and see how we're going to be doing that So it's a pretty simple method. All we need to do is type in temperature label dot after Then we type in 60,000 61 to 30 so 60,000 And then we need to type in the get weather. So what we're saying here is after After a minute, we're going to grab the temperature label and then update it with um, whatever Value is being one here. Now. What happens here when we use after is that Every one minute this function code get weather is going to be run again So when this function is run again in a minute, it's going to grab the url It's going to go through the new content if it's updated at all It's going to find a new location new temperature and new weather prediction if it has updated And then it's going to populate all these labels with the new information that we have We're also going to do master dot update just for good practice. So that our whole master screen is updated Now let's run this up And it should take a moment and as you see right here, we have our temperatures Which is pretty much up to date with the website Obviously, I can't prove that this is updating every minute But if you hover over this and keep moving around when it's past when it's reached the minute It will kind of start lagging because it's doing its background processes of gathering the website And all the values such as the temperature and location and all that is checking for updates So trust me on this that it pretty much updates itself every minute So if this temperature were to go to 17 for example, it would update here automatically in a minute So you're just going to have to trust me on that for now because obviously this information takes a bit of time to change Because obviously temperatures don't change every second Either way guys, that was it for today's tutorial. Hope you have enjoyed You have your little weather app that you can stick on the top right screen And then just have it and then whenever you want to see the temperature You can now use your own GUI and kind of be proud that you've created it yourself Hope you guys have been enjoying my recent series on these web scraping tutorials If you guys have any new ideas on tutorials, you can drop them in the community tab under my post Whereas if you guys would also like to donate to the channel You can do so by either purchasing a super chat emoji or highlighted message when this video premiers Or by signing up as a patron Using the patreon link in the description Also guys do consider following my socials and discord for a lot of fun And I will see your beautiful faces in the next tutorial. Peace