Building a Weather Dashboard App with Docker, Flask, Open Weather API and AWS S3

Hey builders! In this article, we will be going through the contents of a github repository that uses Docker to run a weather dashboard application. This application uses Open Weather API to fetch real-time weather data for multiple cities, and utilizes AWS s3 for secure and scalable data storage.

Python was used for scripting, AWS for cloud management.

This project underscores the principles of modern DevOps including automation, cloud efficiency and error handling.

Here's the github repository for the project, check here

Let's dive in!

---

Prerequisites:

• Docker. To see how to install docker, check the official documentation

• For other prerequisites, please check the github repo

Repository Structure

Here is an overview of the repository structure:

---

Key Files and Their Purpose:

1. web_dashboard.py
This is the main application file. It contains the WeatherDashboard class, which handles fetching weather data from the OpenWeather API and storing it to an AWS S3 bucket.

The class also includes methods for creating the S3 bucket if it doesn't exist and saving weather data to the bucket.

2. app.py
This defines a Flask web application that provides a simple interface for displaying and managing weather data for various cities.

It contains a main function that goes to the s3 bucket to retrieve weather data on stored cities. It also handles a search feature for when a user searches a city, and immediately fetches and stores the weather data in the s3 bucket.

3. .env

This file contains environment variables required by the application, such as the OpenWeather API key and AWS credentials. It ensures sensitive information is not hard-coded into the application.

**4. Dockerfile

The Dockerfile defines the steps to build a Docker image for the application. It installs the necessary dependencies, copies the application code, and sets the command to run the application.

---

Setting Up the Application

1. Clone the repo:

   git clone https://github.com/NonsoEchendu/flask-weather-dashboard.git
   

2. Change directory

   cd 30days-weather-dashboard
   

3. Create a .env file and place it in the project's root directory:

   OPENWEATHER_API_KEY=your=openweather-api-key
   AWS_BUCKET_NAME=your-aws-bucket-name
   AWS_BUCKET_FOLDER_NAME=your-aws-bucket-folder-name
   AWS_ACCESS_KEY_ID=your-aws-access-key-id
   AWS_SECRET_ACCESS_KEY=your-aws-secret-access-key
   AWS_DEFAULT_REGION=your-aws-default-region
   

4. Build the docker image

   docker build -t weather-dashboard .
   

5. Run the docker container:

   docker run --env-file .env -p 5000:5000 -d --name weather-dash weather-app
   

-p 5000:5000 maps the container's port 5000 to your local machine's port 5000, so you can be able to view it on your web broswer

1. Open http://localhost:5000 on your web browser. You should have something like this when you search for a city:

---

Conclusion

By using docker to deploy this application, we are implementing core devops principles: containerization, automation. So instead of installing each of those tools locally, with just 2 commands we get our application running.

Future growth for this project will be seting up CI/CD pipeline for automation.

---

Happy building and Collaborating!