Building a Weather Website with Flask: Your Personal Meteorological Hub



Introduction:

Imagine having your own weather website, where you can check the latest weather conditions of any location in the world with just a few clicks. In this step-by-step guide, we'll walk you through building a weather website using Flask, a powerful Python web framework. With the help of an external weather API, we'll fetch real-time weather data and display it in a user-friendly interface. So, let's get started on your meteorological adventure!

Prerequisites:

  1. Basic knowledge of Python and HTML.
  2. Python and Flask installed on your system.

Step 1: Setting Up the Flask Environment

Create a new project folder for your weather website. Inside the folder, create a virtual environment to manage dependencies and isolate your project:

$ mkdir WeatherWebsite
$ cd WeatherWebsite
$ python3 -m venv venv
$ source venv/bin/activate (on Windows, use "venv\Scripts\activate")

Step 2: Installing Dependencies

Next, install the necessary packages using pip:

$ pip install Flask requests

Step 3: Creating the Flask App

Create a new Python file named app.py. This will be the main file for your Flask app.

# app.py
from flask import Flask, render_template, request
import requests

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        city = request.form["city"]
        weather_data = get_weather(city)
        return render_template("weather.html", weather_data=weather_data)
    return render_template("index.html")

def get_weather(city):
    # Replace 'YOUR_API_KEY' with your actual API key from a weather service provider
    api_key = 'YOUR_API_KEY'
    url = f'http://api.openweathermap.org/data/2.5/weather?q={city}&units=metric&appid={api_key}'
    response = requests.get(url)
    return response.json()

if __name__ == "__main__":
    app.run(debug=True)

Step 4: Creating HTML Templates

Create a new folder named templates inside your project directory. In this folder, create two HTML files: index.html and weather.html.

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Weather Website</title>
</head>
<body>
    <h1>Welcome to Your Weather Website!</h1>
    <form action="/" method="post">
        <input type="text" name="city" placeholder="Enter city name" required>
        <button type="submit">Get Weather</button>
    </form>
</body>
</html>

weather.html:

<!DOCTYPE html>
<html>
<head>
    <title>Weather in {{ weather_data["name"] }}</title>
</head>
<body>
    <h1>Weather in {{ weather_data["name"] }}</h1>
    <p>Temperature: {{ weather_data["main"]["temp"] }}°C</p>
    <p>Weather: {{ weather_data["weather"][0]["description"] }}</p>
    <p>Humidity: {{ weather_data["main"]["humidity"] }}%</p>
</body>
</html>

Step 5: Running the App

Finally, run your Flask app and open it in your web browser:

$ python app.py

Visit http://127.0.0.1:5000 in your browser. You'll see the welcome message and a form to enter the city name. After submitting the form, the weather data for the entered city will be displayed.

Conclusion:

Congratulations! You've successfully created a weather website using Flask and retrieved real-time weather data from an external API. With this foundation, you can further enhance your weather website by adding more features like forecasts, historical data, and geolocation-based weather. The sky's the limit! Happy coding!