We need to install:<\/p>\n\n\n\n
- Request<\/a>: to fetch data from API<\/li>
- Tkinter<\/a>: to make our Weather app GUI (Graphical User Interface) based.<\/li>
- DateTime<\/a>: to change the time from API to a different format<\/li><\/ul>\n\n\n
\npip install tkinter\npip install datetime\npip install requests\npip install json\n<\/pre><\/div>\n\n\n
After installing the required libraries from the terminal, we now move to our Python file to code. We start with importing the libraries as:<\/p>\n\n\n
\nfrom tkinter import *\nimport requests\nimport json\nfrom datetime import datetime\n<\/pre><\/div>\n\n\n
2. Initialize the Tkinter Window<\/h3>\n\n\n\n
As a next step, we initialize our GUI window using the Tkinter module.<\/p>\n\n\n
\n#Initialize Window\n\nroot =Tk()\nroot.geometry("400x400") #size of the window by default\nroot.resizable(0,0) #to make the window size fixed\n#title of our window\nroot.title("Weather App - AskPython.com")\n<\/pre><\/div>\n\n\n3. OpenWeatherMap API<\/h3>\n\n\n\n
In our code, we will be using Open Weather API (free tier) to get the current weather information which is accurate and latest.<\/p>\n\n\n\n
- To do so, go to OpenWeatherMap<\/a> website and create <\/strong>an account.<\/li>
- After creating your account, go to profile and then “My API keys<\/strong>“.<\/li>
- This will open a webpage for your API Key<\/strong>, as shown below, copy it for later use in code in the next step.<\/li><\/ul>\n\n\n\n
![\"Open](\"https:\/\/www.askpython.com\/wp-content\/uploads\/2022\/01\/open-weather-api-1024x261.png\")
Open Weather Map API<\/figcaption><\/figure><\/div>\n\n\n\n 4. Weather Function<\/h3>\n\n\n\n
Here, comes the part where we add functionality to our code. This part is the most crucial in getting correct weather information, as this involves fetching data from the API and displaying it in an accurate format.<\/p>\n\n\n\n
We code the most important function of this code, which is for displaying weather, we do so as in the code:<\/p>\n\n\n
\ncity_value = StringVar()\n\ndef showWeather():\n\n#Enter you api key, copies from the OpenWeatherMap dashboard\n api_key = "eda2b2s6d#sd65f4de7c4b8" #sample API\n\n # Get city name from user from the input field (later in the code)\n city_name=city_value.get()\n\n # API url\n weather_url = 'http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=' + city_name + '&appid='+api_key\n\n # Get the response from fetched url\n response = requests.get(weather_url)\n\n # changing response from json to python readable \n weather_info = response.json()\n\n\n tfield.delete("1.0", "end") #to clear the text field for every new output\n\n#as per API documentation, if the cod is 200, it means that weather data was successfully fetched\n\n\n if weather_info['cod'] == 200:\n kelvin = 273 # value of kelvin\n\n#-----------Storing the fetched values of weather of a city\n\n temp = int(weather_info['main']['temp'] - kelvin) #converting default kelvin value to Celcius\n feels_like_temp = int(weather_info['main']['feels_like'] - kelvin)\n pressure = weather_info['main']['pressure']\n humidity = weather_info['main']['humidity']\n wind_speed = weather_info['wind']['speed'] * 3.6\n sunrise = weather_info['sys']['sunrise']\n sunset = weather_info['sys']['sunset']\n timezone = weather_info['timezone']\n cloudy = weather_info['clouds']['all']\n description = weather_info['weather'][0]['description']\n\n sunrise_time = time_format_for_location(sunrise + timezone)\n sunset_time = time_format_for_location(sunset + timezone)\n\n#assigning Values to our weather varaible, to display as output\n \n weather = f"\\nWeather of: {city_name}\\nTemperature (Celsius): {temp}\u00b0\\nFeels like in (Celsius): {feels_like_temp}\u00b0\\nPressure: {pressure} hPa\\nHumidity: {humidity}%\\nSunrise at {sunrise_time} and Sunset at {sunset_time}\\nCloud: {cloudy}%\\nInfo: {description}"\n else:\n weather = f"\\n\\tWeather for '{city_name}' not found!\\n\\tKindly Enter valid City Name !!"\n\n\n\n tfield.insert(INSERT, weather) #to insert or send value in our Text Field to display output\n<\/pre><\/div>\n\n\nAs a final step to adding functionality, we add a function to change the time format, this function checks for the local time as compared to the UTC(Universal Time Coordinated<\/strong>) in which the API gives the output to the time format as per our location. Ex. UTC to IST.<\/p>\n\n\n
\ndef time_format_for_location(utc_with_tz):\n local_time = datetime.utcfromtimestamp(utc_with_tz)\n return local_time.time()\n<\/pre><\/div>\n\n\n
5. Coding the GUI (frontend elements)<\/h3>\n\n\n\n
We now start to code the elements as per the GUI, for heading, text, labels, buttons, etc.<\/p>\n\n\n\n
To start with, we code the text field<\/strong> for the City Name<\/strong> we want the weather for, along with the label to indicate so:<\/p>\n\n\n\n
- We use the Label<\/a> <\/strong>method to generate a label of text to indicate the purpose of the input field for city name.<\/li>
- Entry<\/a> <\/strong>method is used to make an entry field for input of city name, to check its weather.<\/li>
- The textvaraible widget is used to store the inputted value, in the variable named: city_value<\/li>
- Other than these widgets we have also applied some styling to our code, by font size, color, etc.<\/li><\/ul>\n\n\n
\ncity_head= Label(root, text = 'Enter City Name', font = 'Arial 12 bold').pack(pady=10) #to generate label heading\n\ninp_city = Entry(root, textvariable = city_value, width = 24, font='Arial 14 bold').pack() #entry field\n<\/pre><\/div>\n\n\n
We code a Check Weather Button<\/strong>, on which we click to check the weather of the user inputted city:<\/p>\n\n\n\n
- We give our button some styling, along with the name \u2013 ‘Check Weather’. We use the ‘command<\/strong>‘ widget, which shows what function (here, showWeather <\/strong>function) would run on the click (key press) of the button, as coded in the previous step.<\/li><\/ul>\n\n\n
\nButton(root, command = showWeather, text = "Check Weather", font="Arial 10", bg='lightblue', fg='black', activebackground="teal", padx=5, pady=5 ).pack(pady= 20)\n<\/pre><\/div>\n\n\n
After adding this, we add the output elements in our code. The elements on which our Weather information would be displayed.<\/p>\n\n\n\n
- Yet again, we add a label to title our result in the following text box<\/li>
- To display the output we use a text field<\/strong>, which gets its value, every time the “Check Weather” button is pressed. This envokes<\/span> the function to check weather info fetched from the API after processing, [output from the showWeather function]<\/li><\/ul>\n\n\n
\nweather_now = Label(root, text = "The Weather is: ", font = 'arial 12 bold').pack(pady=10)\n\ntfield = Text(root, width=46, height=10)\ntfield.pack()\n<\/pre><\/div>\n\n\n
On execution of our code, the Tkinter displays this as output:<\/p>\n\n\n\n
![\"Weather](\"https:\/\/www.askpython.com\/wp-content\/uploads\/2022\/01\/Weather-app-frontend-in-python.png\")
Weather App Frontend In Python<\/figcaption><\/figure><\/div>\n\n\n\n Final Code for GUI Weather App in Python<\/h2>\n\n\n
\nfrom tkinter import *\nimport requests\nimport json\nfrom datetime import datetime\n\n#Initialize Window\n\nroot =Tk()\nroot.geometry("400x400") #size of the window by default\nroot.resizable(0,0) #to make the window size fixed\n#title of our window\nroot.title("Weather App - AskPython.com")\n\n\n# ----------------------Functions to fetch and display weather info\ncity_value = StringVar()\n\n\ndef time_format_for_location(utc_with_tz):\n local_time = datetime.utcfromtimestamp(utc_with_tz)\n return local_time.time()\n\n\ncity_value = StringVar()\n\ndef showWeather():\n #Enter you api key, copies from the OpenWeatherMap dashboard\n api_key = "eda2b2s6d#sd65f4de7c4b8" #sample API\n\n # Get city name from user from the input field (later in the code)\n city_name=city_value.get()\n\n # API url\n weather_url = 'http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=' + city_name + '&appid='+api_key\n\n # Get the response from fetched url\n response = requests.get(weather_url)\n\n # changing response from json to python readable \n weather_info = response.json()\n\n\n tfield.delete("1.0", "end") #to clear the text field for every new output\n\n#as per API documentation, if the cod is 200, it means that weather data was successfully fetched\n\n\n if weather_info['cod'] == 200:\n kelvin = 273 # value of kelvin\n\n#-----------Storing the fetched values of weather of a city\n\n temp = int(weather_info['main']['temp'] - kelvin) #converting default kelvin value to Celcius\n feels_like_temp = int(weather_info['main']['feels_like'] - kelvin)\n pressure = weather_info['main']['pressure']\n humidity = weather_info['main']['humidity']\n wind_speed = weather_info['wind']['speed'] * 3.6\n sunrise = weather_info['sys']['sunrise']\n sunset = weather_info['sys']['sunset']\n timezone = weather_info['timezone']\n cloudy = weather_info['clouds']['all']\n description = weather_info['weather'][0]['description']\n\n sunrise_time = time_format_for_location(sunrise + timezone)\n sunset_time = time_format_for_location(sunset + timezone)\n\n#assigning Values to our weather varaible, to display as output\n \n weather = f"\\nWeather of: {city_name}\\nTemperature (Celsius): {temp}\u00b0\\nFeels like in (Celsius): {feels_like_temp}\u00b0\\nPressure: {pressure} hPa\\nHumidity: {humidity}%\\nSunrise at {sunrise_time} and Sunset at {sunset_time}\\nCloud: {cloudy}%\\nInfo: {description}"\n else:\n weather = f"\\n\\tWeather for '{city_name}' not found!\\n\\tKindly Enter valid City Name !!"\n\n\n\n tfield.insert(INSERT, weather) #to insert or send value in our Text Field to display output\n\n\n\n#------------------------------Frontend part of code - Interface\n\n\ncity_head= Label(root, text = 'Enter City Name', font = 'Arial 12 bold').pack(pady=10) #to generate label heading\n\ninp_city = Entry(root, textvariable = city_value, width = 24, font='Arial 14 bold').pack()\n\n\nButton(root, command = showWeather, text = "Check Weather", font="Arial 10", bg='lightblue', fg='black', activebackground="teal", padx=5, pady=5 ).pack(pady= 20)\n\n#to show output\n\nweather_now = Label(root, text = "The Weather is:", font = 'arial 12 bold').pack(pady=10)\n\ntfield = Text(root, width=46, height=10)\ntfield.pack()\n\nroot.mainloop()\n<\/pre><\/div>\n\n\nThe Output of the GUI based Weather App is shown below:<\/p>\n\n\n\n
- Entry<\/a> <\/strong>method is used to make an entry field for input of city name, to check its weather.<\/li>
- After creating your account, go to profile and then “My API keys<\/strong>“.<\/li>
- Tkinter<\/a>: to make our Weather app GUI (Graphical User Interface) based.<\/li>