Introduction

Creating a weather app can be a fun and educational project, and Flask is an excellent choice for building such applications. In this guide, we'll explore how to create a simple weather app with Flask, which fetches weather data from a public API and displays it to users. By following this guide, you'll have a foundation for building more advanced weather applications with Flask.


Step 1: Setting Up Your Flask Application

Start by setting up your Flask application and installing the necessary extensions. Here's a sample directory structure:

weather-app/
    app.py
    templates/
        weather.html

Step 2: Accessing a Weather API

To fetch weather data, you'll need to access a weather API. Here's an example of how you can use the OpenWeatherMap API in your Flask app:

# app.py
from flask import Flask, render_template, request
import requests
app = Flask(__name)
def get_weather(city):
    api_key = 'your_api_key'  # Replace with your API key
    url = f'http://api.openweathermap.org/data/2.5/weather?q={city}&appid={api_key}'
    response = requests.get(url)
    data = response.json()
    return data
@app.route('/')
def weather_form():
    return render_template('weather.html')
@app.route('/weather', methods=['POST'])
def weather():
    city = request.form['city']
    weather_data = get_weather(city)
    return render_template('weather.html', weather_data=weather_data)
if __name__ == '__main__':
    app.run(debug=True)

Step 3: Creating the Weather Template

Create an HTML template to display weather data. Here's a basic structure for your weather template (weather.html):

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
</head>
<body>
    <header>
        <h1>Weather App</h1>
    </header>
    <section>
        <h2>Check Weather</h2>
        <form action="/weather" method="post">
            <label for="city">Enter City:</label>
            <input type="text" name="city" required>
            <button type="submit">Get Weather</button>
        </form>
        {% if weather_data %}
        <h2>Weather for {{ weather_data['name'] }}, {{ weather_data['sys']['country'] }}</h2>
        <p>Temperature: {{ weather_data['main']['temp'] }}°C</p>
        <p>Weather: {{ weather_data['weather'][0]['description'] }}</p>
        {% endif %}
    </section>
</body>
</html>

Step 4: Running Your Application

Run your Flask weather app using the following command:

python app.py

Access your web application in a browser and use the form to check the weather for a specific city.


Conclusion

Creating a simple weather app with Flask is a great way to learn about web development and integrating external APIs. By following the steps in this guide, you can set up your Flask application, access a weather API, and display weather data to users. Enhance your weather app with additional features and data sources.