Давайте создадим простое приложение погоды ⛈️- Часть 1


Введение

С помощью технологий мы теперь можем отслеживать погоду с гораздо большей точностью, чем когда-либо прежде. Используя погодное приложение, мы можем в режиме реального времени получать информацию о погодных условиях в нашем регионе.

Погодное приложение может стать отличным инструментом для планирования своего дня или недели. Оно также может помочь вам избежать плохих погодных условий. Существует множество различных погодных приложений, и они действительно полезны. Но почему бы не создать свое?

Для этого проекта мы будем использовать RapidAPI, WeatherAPI и Streamlit.

Что такое RapidAPI?

RapidAPI — это платформа, которая позволяет разработчикам легко находить, подключать и использовать API. Платформа предоставляет разработчикам единое место для поиска API, просмотра документации и тестирования API. RapidAPI также позволяет разработчикам управлять своими ключами API и отслеживать их использование.

Так что зарегистрируйтесь на RapidAPI или войдите в систему, чтобы начать работу!

API погоды ⛈️

Это сердце нашего приложения. Погодный API!

WeatherAPI.com — это мощный полностью управляемый бесплатный поставщик API погоды и геолокации, который предоставляет широкий спектр API, начиная от прогноза погоды, исторической погоды, будущей погоды, погодных предупреждений, данных о качестве воздуха, поиска IP-адресов и астрономии до спорта, часового пояса и геолокации.

Мы можем получить наши учетные данные двумя способами

  • Зарегистрироваться на сайте WeatherAPI.com
  • Использовать WeatherAPI в платформе RapidAPI

Я предпочитаю использовать RapidAPI, потому что мы можем изучить все API в одном месте, и мы будем использовать его в моих будущих проектах. Все зависит от вас!

Мы будем использовать API Realtime Weather для получения текущей информации о погоде в данном месте. Вы можете увидеть игровую площадку, как показано ниже.

Чтобы использовать API, нажмите на тестовые конечные точки.

Мы будем использовать Python в качестве языка для создания нашего приложения. Вы можете найти фрагмент кода для каждого примера на большинстве возможных языков. Выберите Python -> Запросы. Вы сможете увидеть фрагмент кода, как показано ниже. Отложите его в сторону. Мы будем использовать его позже.

Давайте построим его! ⚒️

#01 Импортируйте необходимые модули

  • Модуль Requests — Requests — это элегантная и простая библиотека HTTP для Python, созданная для людей.
  • Модуль Streamlit — Самый быстрый способ создания приложений для работы с данными в Python.
  • JSON — В Python есть встроенный пакет json, который можно использовать для работы с данными JSON.
  • streamlit.components.v1 — Для отображения HTML-строки в iframe.
import streamlit as st
import requests
import json
import streamlit.components.v1 as components
Вход в полноэкранный режим Выход из полноэкранного режима

О JSON

JSON — JavaScript Object Notation — самый известный и широко распространенный формат обмена данными — первоначально разработанный Дугласом Крокфордом.
Ознакомьтесь с моей темой о JSON

Аадарш Каннан
@dotaadarsh
Нить о JSON 👇
21:06 PM — 08 Jul 2022

#02 Отображение текстов

st.title("Weather App") # Displays title
st.subheader("Exploring RapidAPI's weather Endpoints") # Displays subheader
Вход в полноэкранный режим Выход из полноэкранного режима

#03 Настройка API погоды

url = "https://weatherapi-com.p.rapidapi.com/current.json"

  headers: {
    'X-RapidAPI-Key': 'YOUR-API-KEY',
    'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
  }

Войти в полноэкранный режим Выход из полноэкранного режима

#04 Запрос ❓

Мы получим данные о местоположении от пользователя с помощью функции st.text_input и нам нужно создать параметр запроса, поэтому мы сопоставим местоположение с ключом q с именем словаря querystring, который мы вызовем методом GET с URL конечной точки.

location = st.text_input("Enter the location", "Chennai")
querystring = {"q":{location}}
Вход в полноэкранный режим Выход из полноэкранного режима

#05 GET: Получение ресурсов с сервера

Мы будем использовать импортированный нами ранее модуль requests, который имеет метод .request() для выполнения семи основных видов запросов к веб-серверу.

response = requests.request("GET", url, headers=headers, params=querystring)
result = response.text
Вход в полноэкранный режим Выход из полноэкранного режима

response.text возвращает содержимое ответа

#06 Играя с JSON

Метод json.loads() можно использовать для разбора правильной строки JSON и преобразования ее в словарь Python.

data = json.loads(result)
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы можем визуализировать json с помощью функции st.json. Это поможет понять, что мы получим после ответа от сервера.

st.json(data)
Войти в полноэкранный режим Выход из полноэкранного режима

Вы также можете использовать инструмент JSON Visio для мгновенной визуализации данных JSON в виде графиков. Попробуйте понять данные, которые мы получили из ответа.

#07 Отображение данных

С помощью функции st.columns мы можем создавать колонки, которые вставляют контейнеры, расположенные рядом друг с другом. Для добавления элементов в возвращаемые контейнеры можно использовать нотацию with (предпочтительнее) или просто вызывать методы непосредственно на возвращаемом объекте.

Давайте получим доступ к данным из JSON и отобразим их в виде двух колонок, расположенных бок о бок.

col1, col2 = st.columns(2)

with col1:

    st.write(f'Name: {data["location"]["name"]}')
    st.write(f'Region: {data["location"]["region"]}')
    st.write(f'Country: {data["location"]["country"]}')
    st.write(f'Local Time: {data["location"]["localtime"]}')
    st.metric(label="wind_kph", value= f'{data["current"]["wind_kph"]}')
    st.write(f'Feels like: {data["current"]["feelslike_c"]} ℃')

with col2: 

    st.write(f'Temp in Celcius: {data["current"]["temp_c"]}')
    st.write(f'Temp in Farenheit: {data["current"]["temp_f"]}')
    st.write(f'Condition: {data["current"]["condition"]["text"]}')
    st.image(f'http:{data["current"]["condition"]["icon"]}')
    st.metric(label = "Humidity", value = f'{data["current"]["humidity"]}')
Войти в полноэкранный режим Выход из полноэкранного режима

#08 Завершение работы

Отображение информации с помощью функции st.info

st.info('⛅ Current weather or realtime weather API method allows a user to get up-to-date current weather information in json and xml. The data is returned as a Current Object.')
Вход в полноэкранный режим Выход из полноэкранного режима

components.html работает, предоставляя вам возможность встроить iframe внутрь приложения Streamlit, содержащего нужный вам вывод.

components.html(
    """
    <a href="https://www.weatherapi.com/" title="Free Weather API"><img src='//cdn.weatherapi.com/v4/images/weatherapi_logo.png' alt="Weather data by WeatherAPI.com" border="0" target="_blank"></a>
    """
)
Вход в полноэкранный режим Выход из полноэкранного режима

#09 Run 🏃

После того как вы создали свой скрипт, скажем weather.py, проще всего запустить его с помощью streamlit run

streamlit run weather.py
Войти в полноэкранный режим Выйти из полноэкранного режима

Это приведет к запуску браузера, и вы сможете увидеть приложение в реальном времени.

Вы можете запустить его в самом начале и создать свое приложение, визуализируя каждый элемент. Это поможет вам быстро понять.

#10 Ошибка ❌

Попробуйте выполнить поиск в другом месте. Вы увидите, что некоторые места не найдены и выдается ошибка. Для решения этой проблемы мы будем использовать простые условия if else. Код состояния будет 400, если не найдено местоположение, соответствующее параметру ‘q’. Мы можем прочитать код состояния, используя response.status_code.
Так, если response.status_code == 400, то с помощью функции st.error укажем пользователю, что местоположение не найдено, и попробуем поискать другое местоположение.

if(response.status_code == 400):
    st.error("No location found matching parameter 'q', try searching for a different location.")

else:
    # rest of our code
Вход в полноэкранный режим Выход из полноэкранного режима

Развертывание 🚀

Streamlit позволяет пользователям свободно развертывать приложения. Проверьте развертывание с помощью Streamlit

Подождите!!! А как же учетные данные? Это же небезопасно, верно? Они находятся в коде. Как защитить и использовать их и безопасно развернуть наше приложение?

Управление секретами 🔐

У всех нас есть секреты, мы храним их при себе и не делимся ими, если нам не доверяют. То же самое касается и приложений. Всякий раз, когда мы подписываемся на API, учетные данные будут генерироваться только для вас. Это наша цель — беречь наши секреты.

В streamlit cloud ☁️ есть функция управления секретами, которая поможет вам безопасно хранить все учетные данные, не раскрывая их другим. Вы сможете увидеть опцию Secrets в настройках вашего приложения, как показано на рисунке ниже.

Мы будем предоставлять переменные окружения и другие секреты нашему приложению, используя формат TOML.

X-RapidAPI-Key = "YOUR_API_KEY"
X-RapidAPI-Host = "weatherapi-com.p.rapidapi.com"
Вход в полноэкранный режим Выход из полноэкранного режима

Как использовать секреты в вашем приложении Streamlit?

Мы можем получить доступ к секретам как к переменным окружения или запросом к дикте st.secrets. Замените заголовок на функцию st.secrets.

Пример

headers = {
    "X-RapidAPI-Key": st.secrets["X-RapidAPI-Key"],
    "X-RapidAPI-Host": st.secrets["X-RapidAPI-Host"]
}
Войти в полноэкранный режим Выход из полноэкранного режима

Чтобы узнать больше об управлении секретами в streamlit -> Управление секретами — Streamlit

  • Полный код приложения ️
  • Живая демонстрация 🌪️ нашего приложения.

Ссылки

  • RapidAPI Создание и управление аккаунтом
  • Документация API
  • JSON
  • API Streamlit
  • Компонент Streamlit

Заключение

Следите за новостями во второй части, в которой мы попытаемся изучить почасовую погоду, API спорта, API астрономии, API часовых поясов и другие конечные точки, связанные с погодой.

На этом мы заканчиваем. Спасибо за чтение и не забывайте делиться своими отзывами. Вы можете найти меня в Twitter — @dotaadarsh. Оставайтесь с нами, чтобы узнать больше!

Оставайтесь в безопасности 😷 распространяйте любовь ❤️ и продолжайте исследовать 🚀

Оцените статью
devanswers.ru
Добавить комментарий