Python as the Backend Language#

Python’s simplicity and extensive libraries make it suitable for server-side logic. It handles tasks such as making API requests, processing received data, and interacting with a web framework like Flask. Its requests library simplifies the process of sending HTTP requests, and its built-in JSON handling capabilities are essential for working with API responses.

Flask Web Framework#

Flask is a micro web framework for Python. It provides the necessary tools to handle incoming web requests from users (e.g., asking for weather in a specific city) and send back responses (e.g., an HTML page displaying the weather data). Flask uses routes to map URLs to Python functions, allowing specific code to execute based on the requested web address. It also supports templating engines (like Jinja2, which is default) to dynamically generate HTML content.

OpenWeather API#

APIs act as intermediaries that allow different software systems to communicate. The OpenWeather API provides weather data via HTTP requests. A user’s application sends a request to the OpenWeather server, specifying the desired location and including authentication information (an API key). The OpenWeather server processes the request and sends back weather data, typically in a structured format like JSON.

API Keys#

Accessing most commercial APIs, including OpenWeather, requires an API key. This key is a unique identifier provided to a developer upon registration. It serves several purposes:

• Authentication: Verifies the identity of the application making the request.
• Authorization: Determines what data or services the application is allowed to access based on the subscription level.
• Usage Tracking: Allows the API provider to monitor request volume for billing and rate limiting.
• Security: Helps prevent unauthorized access and misuse of the API.

Keeping API keys secure and not exposing them directly in client-side code (like JavaScript running in a browser) is a critical security practice.

HTTP Requests and JSON#

Communication between a web application’s backend and an API often occurs using the Hypertext Transfer Protocol (HTTP). The application sends an HTTP request (specifically a GET request to retrieve data) to the API’s server. The API responds with data, frequently formatted using JSON (JavaScript Object Notation). JSON is a lightweight, human-readable format for representing structured data, making it easy for programming languages like Python to parse and work with.

Step 1: Setting Up the Development Environment#

Before writing code, the necessary tools must be installed.

1. Install Python: Ensure Python 3 is installed on the system. Python installers are available for Windows, macOS, and Linux.
2. Install Flask and Requests: These libraries are installed using pip, Python’s package installer.

   1
   pip install Flask requests
   

3. Obtain an OpenWeather API Key: Register on the OpenWeather website (openweathermap.org) to get a free API key. The key is required for all API requests. Note that it may take some time for a new API key to become active.

Step 2: Designing the Flask Application Structure#

A typical Flask application is structured with a main application file (e.g., app.py) and a directory for HTML templates (commonly named templates).

1
weather_app/
2
├── app.py
3
└── templates/
4
    └── index.html

The app.py file will contain the Flask application instance, routes, and logic for interacting with the OpenWeather API.

Step 3: Interacting with the OpenWeather API#

This step involves writing the Python code that fetches weather data from the OpenWeather API.

The OpenWeather API provides various endpoints. A common endpoint for current weather data is api.openweathermap.org/data/2.5/weather. The base URL is combined with the endpoint and query parameters (like city name, API key, and units).

1
import requests
2

3
API_KEY = "YOUR_API_KEY" # Replace with your actual API key
4
BASE_URL = "http://api.openweathermap.org/data/2.5/weather?"
5

6
def get_weather_data(city_name):
7
    """Fetches weather data for a given city from OpenWeatherMap API."""
8
    complete_url = BASE_URL + "appid=" + API_KEY + "&q=" + city_name + "&units=metric" # or units=imperial
9

10
    try:
11
        response = requests.get(complete_url)
12
        response.raise_for_status() # Raise an HTTPError for bad responses (4xx or 5xx)
13
        data = response.json()
14

15
        # Check if city was found
16
        if data["cod"] != "404":
17
            # Extract required data
18
            main_data = data["main"]
19
            current_temperature = main_data["temp"]
20
            weather_description = data["weather"][0]["description"]
21
            city = data["name"]
22

23
            weather_info = {
24
                "city": city,
25
                "temperature": current_temperature,
26
                "description": weather_description
27
            }
28
            return weather_info
29
        else:
30
            return {"error": "City Not Found"}
31

32
    except requests.exceptions.RequestException as e:
33
        # Handle connection errors, timeouts, etc.
34
        print(f"Request Error: {e}")
35
        return {"error": "Error fetching weather data"}
36
    except Exception as e:
37
        # Handle other potential errors (e.g., parsing errors)
38
        print(f"An error occurred: {e}")
39
        return {"error": "An unexpected error occurred"}
40

41
# Example usage (can test this function independently)
42
# weather = get_weather_data("London")
43
# if "error" not in weather:
44
#     print(f"Weather in {weather['city']}: {weather['temperature']}°C, {weather['description']}")
45
# else:
46
#     print(weather['error'])

The code uses the requests library to make a GET request. The response.json() method parses the JSON response into a Python dictionary. Error handling includes checking for successful API response status codes (raise_for_status) and handling potential issues like connection errors or the city not being found (indicated by data["cod"] == "404" in OpenWeather’s specific response structure).

Step 4: Integrating API Data into the Flask App#

The Flask application needs routes to handle user requests. A route for the home page (/) is typically used to display the form and the weather results.

1
from flask import Flask, render_template, request, redirect, url_for
2

3
# Assume the get_weather_data function from Step 3 is defined here
4
# from your_weather_module import get_weather_data # If in a separate file
5

6
app = Flask(__name__)
7
API_KEY = "YOUR_API_KEY" # Define or import your API key
8
BASE_URL = "http://api.openweathermap.org/data/2.5/weather?"
9

10
# [Paste the get_weather_data function from Step 3 here or import it]
11

12
@app.route('/', methods=['GET', 'POST'])
13
def index():
14
    weather_data = None
15
    error_message = None
16

17
    if request.method == 'POST':
18
        city_name = request.form['city']
19
        if city_name:
20
            data = get_weather_data(city_name)
21
            if "error" not in data:
22
                weather_data = data
23
            else:
24
                error_message = data["error"]
25
        else:
26
            error_message = "Please enter a city name."
27

28
    # Render the template, passing the weather data or error message
29
    return render_template('index.html', weather=weather_data, error=error_message)
30

31
if __name__ == '__main__':
32
    app.run(debug=True)

This Flask code defines a route / that accepts both GET and POST requests. When a POST request is received (typically from a form submission), it extracts the city name from the form data, calls the get_weather_data function, and stores the result. It then renders the index.html template, passing the fetched weather data or an error message.

Step 5: Creating the Frontend (Basic HTML Template)#

The templates/index.html file uses Jinja2 templating to display the form for city input and the weather information received from the Flask backend.

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>Weather App</title>
5
    <style>
6
        body { font-family: sans-serif; }
7
        .weather-result { margin-top: 20px; border: 1px solid #ccc; padding: 15px; }
8
        .error { color: red; margin-top: 10px; }
9
    </style>
10
</head>
11
<body>
12
    <h1>Get Weather Information</h1>
13

14
    <form method="POST">
15
        <label for="city">Enter City:</label>
16
        <input type="text" id="city" name="city" required>
17
        <button type="submit">Get Weather</button>
18
    </form>
19

20
    {% if weather %}
21
        <div class="weather-result">
22
            <h2>Weather in {{ weather.city }}</h2>
23
            <p>Temperature: {{ weather.temperature }} &deg;C</p>
24
            <p>Description: {{ weather.description }}</p>
25
        </div>
26
    {% endif %}
27

28
    {% if error %}
29
        <p class="error">{{ error }}</p>
30
    {% endif %}
31

32
</body>
33
</html>

This template includes a form that submits the city name via POST to the / route. Jinja2 template tags ({% if ... %}, {{ variable }}) are used to conditionally display the weather results or error messages based on the data passed from the Flask route function.

Step 6: Running the Application#

With app.py and templates/index.html created, the Flask application can be run from the terminal within the project directory.

1
python app.py

If debug=True is set in app.run(), Flask will provide helpful debugging information. The application will typically run on http://127.0.0.1:5000/. Opening this URL in a web browser displays the weather application interface.