This Weather App is a Flask-based web application that provides weather forecasts using the OpenWeatherMap API.
These instructions will guide you through setting up and running the application on your local machine.
- Python 3
- pip (Python package manager)
- Access to the terminal or command line interface
Follow these steps to get your development environment running:
Clone this repository to your local machine:
git clone git@github.com:Infopercept/python-weather-app.git
cd python-weather-appCreate a virtual environment in the project directory:
# For Unix or MacOS
python3 -m venv venv
# For Windows
python -m venv venvActivate the virtual environment:
# For Unix or MacOS
source venv/bin/activate
# For Windows
.\venv\Scripts\activateInstall the required packages using pip:
pip install -r requirements.txtSet up the OWM_API_KEY environment variable with your OpenWeatherMap API key:
# For Unix or MacOS
export OWM_API_KEY='your_api_key_here'
# For Windows
set OWM_API_KEY=your_api_key_hereRun the Flask application:
python main.pyOnce the application is running, open your web browser and navigate to http://localhost:5000 to view the Weather App.
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
This project is licensed under the MIT License - see the LICENSE.md file for details.
Building a Python project from scratch without relying on a tutorial taught me a lot but I was also able to implement the app's key functionality (getting and displaying weather data) due to the work I did with APIs in Angela Yu's Python bootcamp. While deploying this web app, I learned about git and version control as well as storing API keys as environment variables with .env and the purpose of .gitignore. This project turned out to be frustrating and complicated at times but I learned and grew a lot as a developer by tackling each problem. For instance, I struggled to make this website responsive because I discovered that the Chrome browser tools are not entirely accurate for the mobile view. Hence, when the app was deployed, the website didn't look the way I expected ore desired on mobile. So I switched to a free desktop application called Responsively and it provided views for multiple devices which allowed me to improve my CSS. In addition, I had difficulty positioning my footer at the bottom of my page and had to refer to this resource to adjust my CSS accordingly.
If I were to do this project again, there are a few changes I would make. I would make the website render beautifully on iPads as well by eliminating the space between elements. I also wasn't sure how to add more functionality to this app while maintaining a seamless UI/UX design this time and I would love to do so in the future. E.g. I could add an option for users to specify the country of the city they enter (if multiple countries share the same city name). I could also display the low and high temperatures for each day in the five day forecast instead of only displaying the temperature at noon (which I understand is not an accurate estimate of the overall temperature). It would also be useful to enable location detection to allow the user to get more accurate weather data for their current location by using their precise coordinates instead of relying on the geocoding API provided by OpenWeather.
- OpenWeather API Documentation
- Guide to Flexbox
- Guide to CSS Grid
- StackOverflow Post on Centering in CSS Grid
- Youtube video on searching blog posts with Flask
- Article on retrieving HTML form data with Flask
- StackOverflow post on building Flask app search bar
- Article on storing API keys as environment variables – StackOverflow post on storing API keys in Heroku
- Making a footer stay at the bottom of the page both in mobile view and desktop view