Creating a Simple Weather App with Flask
Creating a Simple Weather App with Flask
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.