Before you begin<\/h2>\n\n\n\n
The following are must-haves to complete this tutorial.<\/p>\n\n\n\n
- \n
- Understanding of Python and the Flask framework<\/li>\n\n\n\n
- Python 3 installed on your development system<\/li>\n\n\n\n
- An Infobip account. Sign up<\/a> for a free trial<\/li>\n\n\n\n
- OpenWeatherMap API<\/a> – create an account for free<\/li>\n<\/ul>\n\n\n\n
Setup and installation<\/h2>\n\n\n\n
Since we are using the Flask<\/strong> framework for the entire workflow of this tutorial, you need to create a
weatherapi-with-python<\/code> directory in your file system, which will contain all the project files and directories.<\/p>\n\n\n\nTo bootstrap this app, run this command in the terminal window, which creates a virtual environment to manage all the dependencies for your project.<\/p>\n\n\n\n
mkdir weatherapi-with-python\ncd weatherapi-with-python\npython3 -m venv .venv\nsource .venv\/bin\/activate<\/code><\/pre>\n\n\n\nThe
source<\/code><\/strong> command activates the environment and shows the name of the activated environment.<\/p>\n\n\n\n(.venv) (base) \u2601 weatherapi-with-python<\/code><\/pre>\n\n\n\nFlask will handle the application’s client side, allowing users to interact with the app using Python, and it will send notifications to your phone via SMS.<\/p>\n\n\n\n
Let\u2019s install the following Python packages within the activated environment to make this happen.<\/p>\n\n\n\n
pip install Flask\npip install infobip-api-python-sdk<\/code><\/pre>\n\n\n\nThe Infobip SDK<\/strong> is the Python package responsible for sending SMS messages. It is also effective in other communication channels like WhatsApp, Email, MMS, and so on.<\/p>\n\n\n\n
Environment variables<\/h2>\n\n\n\n
The environment variables cut across different programming languages, which serve as a file to keep secrets and protect them from being leaked when pushing your code to GitHub.<\/p>\n\n\n\n
Create a \u201c.env\u201d file within the top level of your working directory and include the OpenWeatherMap API.<\/p>\n\n\n\n
OWM_API_KEY=\"<open-weather-map-api-key>\"<\/code><\/pre>\n\n\n\nPS: Replace the value in quotes with yours.<\/p>\n\n\n\n
Also, for the safety of your private keys, create a .gitignore<\/strong> file and include the .env<\/strong> file. You can include other files you do not want to share.<\/p>\n\n\n\n
Your directory structure will look like this:<\/p>\n\n\n\n
weatherapi-with-python\/\n .env\n .gitignore<\/code><\/pre>\n\n\n\nImplementing the weather data retrieval module,
weather.py<\/code><\/h2>\n\n\n\nBefore updating the project with code, we will work with two Python files for different purposes.
First, create theweather.py<\/code> file in the working directory:<\/p>\n\n\n\nweatherapi-with-python\/\n .env\n .gitignore\n weather.py<\/code><\/pre>\n\n\n\nThe dependencies for this project will include the following in the
requirements.txt<\/code>:<\/p>\n\n\n\nFlask\nrequests\npython-dotenv\ninfobip-api-python-sdk<\/code><\/pre>\n\n\n\nYou can run
pip install -r requirements.txt<\/code> to make sure these are all installed.<\/p>\n\n\n\nThe updated directory structure will look like this:<\/p>\n\n\n\n
weatherapi-with-python\/\n .env\n .gitignore\n weather.py\n requirements.txt<\/code><\/pre>\n\n\n\nCopy-paste this code into
weather.py<\/code>:<\/p>\n\n\n\nimport requests\nimport os\nfrom dotenv import load_dotenv\nfrom dataclasses import dataclass\n\n\nload_dotenv()\nAPI_KEY = os.environ[\"OWM_API_KEY\"]\nOWM_ENDPOINT = \"https:\/\/api.openweathermap.org\/data\/2.5\/weather\"\n\n@dataclass\nclass WeatherData:\n main: str\n description: str\n latitude: float\n longitude: float\n temperature: int\n\ndef get_lat_lon(city_name, state_code, country_code, API_KEY):\n resp = requests.get(f'http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q={city_name},{state_code},{country_code}&appid={API_KEY}')\n data = resp.json()\n if data:\n location = data[0]\n return location.get('lat'), location.get('lon')\n else:\n return None, None\n\n\ndef get_current_weather(lat, lon, API_KEY):\n params = {\n \"lat\": lat,\n \"lon\": lon,\n \"appid\": API_KEY,\n \"units\": \"metric\"\n }\n resp = requests.get(OWM_ENDPOINT, params=params)\n data = resp.json()\n weather = data[\"weather\"][0]\n main = weather[\"main\"]\n description = weather[\"description\"]\n latitude = float(data[\"coord\"][\"lat\"])\n longitude = float(data[\"coord\"][\"lon\"])\n temperature = int(data[\"main\"][\"temp\"])\n return WeatherData(main, description, temperature, latitude, longitude)\n\n\ndef main(city_name, state_name, country_name):\n lat, lon = get_lat_lon(city_name, state_name, country_name, API_KEY)\n weather_data = get_current_weather(lat, lon, API_KEY)\n return weather_data\n\nif __name__ == \"__main__\":\n lat, lon = get_lat_lon(\"Yakutsk\", \"YA\", \"RU\", API_KEY)\n if lat is not None and lon is not None:\n weather_data = get_current_weather(lat, lon, API_KEY)\n if weather_data is not None:\n print(weather_data)\n else:\n print(\"Failed to retrieve weather data.\")\n else:\n print(\"Failed to retrieve latitude and longitude.\")\n<\/code><\/pre>\n\n\n\nWe import the various modules –
requests<\/code>,os<\/code>,dotenv<\/code>, anddataclasses<\/code> – using theimport <\/code>statement.<\/p>\n\n\n\nNext is to call
load_dotenv()<\/code> to gain access to the environment variable and define the variablesAPI_KEY<\/code> andOWM_Endpoint<\/code>.<\/p>\n\n\n\nThe
@dataclass<\/code> decorator creates a structure with data classes to access only the information we need from the OpenWeather API endpoint response objects. That means we define a data class object to store and retrieve the necessary information with their data types mapped to the keys.<\/p>\n\n\n\nThe
get_lat_lon<\/code> function takes in the parameters, and within the function, it reads data from thejson()<\/code> objects and returns the latitude and longitude of a particular location.<\/p>\n\n\n\nThe
get_current_weather<\/code> function will access the current weather data for any location on earth and return theWeatherData<\/code> class, accepting the parameters from the data classes defined in the@dataclass<\/code> decorator.<\/p>\n\n\n\nIn the defined
main<\/code> function, we pass the already definedget_lat_lon<\/code> andget_current_weather<\/code> function, which will be imported as a module in theapp.py<\/code> file.<\/p>\n\n\n\nCreating the
app.py<\/code><\/h2>\n\n\n\nIn the root directory, create the
app.py<\/code> file, the app’s entry point containing the code to send an SMS. The structure of the directory will be as follows:<\/p>\n\n\n\nweatherapi-with-python\/\n .env\n .gitignore\n app.py\n weather.py\n requirements.txt<\/code><\/pre>\n\n\n\nAt this point, add these lines of code to the
app.py<\/code> file:<\/p>\n\n\n\nfrom flask import Flask\n\napp = Flask(__name__)\n\n@app.route(\u201c\/\u201d)\ndef index():\n return \u201cweather app!\u201d<\/code><\/pre>\n\n\n\nStart the development server with the command
flask run<\/code>, which outputs the port onlocalhost:5000<\/code> and displays the messageweather app!<\/code>.<\/p>\n\n\n\nCreating the layout view<\/h2>\n\n\n\n
The layout view handles how the page structure looks using HTML elements. Behind the scenes, Flask uses the templates<\/strong> folder to be able to render the page properly. <\/p>\n\n\n\n
In the working directory, create a new directory called templates <\/strong>and, inside this folder, add a file called
index.html <\/code>with the following code.<\/p>\n\n\n\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <meta\n name=\"description\"\n content=\"Using the open weather API and Infobip to send reports of the weather at a specific location as SMS\" \/>\n <title>Get accurate weather reports from anywhere<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <\/head>\n <body>\n <div class='min-h-screen py-8 flex flex-col overflow-hidden'>\n <h1 class=\"text-3xl font-bold text-center mb-5\">Weather App<\/h1>\n <div class=\"container max-w-7xl mx-auto w-3\/4\">\n <form action=\"{{url_for(\"index\")}}\" method=\"POST\">\n <div>\n <label for=\"cityName\" class=\"block text-gray-700 font-bold mb-2\"\n >City name<\/label\n >\n <input\n type=\"text\"\n id=\"cityName\"\n required\n name=\"cityName\"\n placeholder=\"city\"\n class=\"w-full px-4 py-2 border rounded-lg mb-5 mt-3 text-gray-700 bg-white border-gray-300 appearance-none block leading-normal focus:outline-none\" \/>\n <\/div>\n <div>\n <label for=\"stateName\" class=\"block text-gray-700 font-bold mb-2\"\n >State code<\/label\n >\n <input\n type=\"text\"\n id=\"stateName\"\n required\n name=\"stateName\"\n placeholder=\"KD\"\n class=\"w-full px-4 py-2 border rounded-lg mb-5 mt-3 text-gray-700 bg-white border-gray-300 appearance-none block leading-normal focus:outline-none\" \/>\n <\/div>\n <div>\n <label for=\"countryName\" class=\"block text-gray-700 font-bold mb-2\"\n >Country code<\/label\n >\n <input\n type=\"text\"\n id=\"countryName\"\n required\n name=\"countryName\"\n placeholder=\"NG\"\n class=\"w-full px-4 py-2 border rounded-lg mb-5 mt-3 text-gray-700 bg-white border-gray-300 appearance-none block leading-normal focus:outline-none\" \/>\n <\/div>\n <button\n type=\"submit\"\n class=\"flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-8 sm:mt-0\">\n SMS weather report\n <\/button>\n <\/form>\n <\/div>\n <footer class=\"mt-auto flex items-center justify-center\">\n <p>Infobip © 2024. Build by Teri<\/p>\n <\/footer>\n <\/div>\n <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nThe project directory tree now looks like this:<\/p>\n\n\n\n
weatherapi-with-python\/\n .env\n .gitignore\n app.py\n weather.py\n requirements.txt\n templates\/\n index.html<\/code><\/pre>\n\n\n\nThe
<head><\/code> section contains the meta description: the web app’s information, title, and Tailwind CSS CDN in the script tag. Tailwind CSS provides utility-first CSS classes within the HTML elements.<\/p>\n\n\n\nThe
<body><\/code> section comprises the HTML<form><\/code> tag wrapped around the text input that accepts values from the user and a button that sends a POST request on click.<\/p>\n\n\n\nNext, to handle the request from the
index.html<\/code>, let\u2019s update theapp.py <\/code>file with therender_template()<\/code> method, which renders a template and request object used to access request data from the input.<\/p>\n\n\n\nUpdate your
app.py<\/code> file with this line:<\/p>\n\n\n\nfrom flask import Flask, render_template, request\nfrom weather import main as get_weather<\/code><\/pre>\n\n\n\nThe weather module is from the
weather.py<\/code> file, and the main function with an alias ofget_weather<\/code>.
Also, update theindex()<\/code> function as follows:<\/p>\n\n\n\n@app.route(\"\/\", methods=[\"GET\", \"POST\"])\ndef index():\n data = None\n degree_sign = u\"\\N{DEGREE SIGN}\"\n if request.method == \"POST\":\n city_name = request.form.get(\"cityName\")\n state_code = request.form.get(\"stateName\")\n country_code = request.form.get(\"countryName\")\n data = get_weather(city_name, state_code, country_code)\n if city_name and state_code and country_code:\n data = get_weather(city_name, state_code, country_code)\n message = f\"Weather for {city_name.title()}(lat: {data.latitude}, lon: {data.longitude}): temperature of {data.temperature}{degree_sign}C with {data.description}\"\n print(message)\n return render_template(\"index.html\")<\/code><\/pre>\n\n\n\nThe above code snippets run only when the condition is met for the HTTP method POST request. The
index()<\/code> function queries the OpenWeather API to get the values for the location entered in the input fields. It displays accurate info for latitude, longitude, name of the city, temperature, and the description of the weather in the terminal.
To continually reload the page on file change, enable the debug mode using the--debug<\/code> option in the terminal:<\/p>\n\n\n\nflask --app app run --debug<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/www.infobip.com\/developers\/wp-content\/uploads\/2024\/04\/weather-app-1024x713.png\")
<\/figure>\n\n\n\nIntegrating with Infobip Python SDK for SMS notifications<\/h2>\n\n\n\n
To use and integrate Infobip into the application, you need the following:<\/p>\n\n\n\n
- \n
- Infobip API key<\/li>\n\n\n\n
- The base URL<\/li>\n\n\n\n
- Your phone number you like to send the SMS. If this is a trial account, your verified number for the platform is what is used<\/li>\n<\/ul>\n\n\n\n
All this information can be accessed from your user portal dashboard<\/a> after logging in to your account.<\/p>\n\n\n\n
- OpenWeatherMap API<\/a> – create an account for free<\/li>\n<\/ul>\n\n\n\n