Как быстро создать и развернуть веб-приложение на Python

В этой статье речь пойдет о разработке и развертывании простейшего дашборда по COVID-19 с помощью Streamlit. Streamlit  —  фреймворк, предназначенный для быстрого создания приложений по обработке данных путем развертывания организованного на Python пользовательского интерфейса. Streamlit не требует от разработчика предшествующего опыта (хотя практические навыки, конечно, не помешают).

Начнем с создания виртуальной среды для проекта. Затем напишем код на Python, который будет служить движком приложения. Потом воспользуемся библиотекой Streamlit, чтобы создать пользовательский интерфейс для кода на Python, и, наконец, развернем приложение. Надеюсь, это пошаговое руководство даст вам полное представление о процессе веб-разработки на Python.

Настройка виртуальной среды

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

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

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

Кроме того, виртуальная среда помогает поддерживать чистоту и организованность разработки. Приложение, вероятно, не будет использовать все библиотеки Python, установленные на компьютере. Если создавать его вне виртуальной среды, каждую библиотеку надо было бы включить в так называемый файл требований (подробнее об этом позже), необходимый для развертывания приложения. Это привело бы к значительному раздуванию кода.

Чтобы настроить виртуальную среду, откройте терминал или командную строку. Если работаете на Mac, перейдите к рабочему столу, набрав cd desktop, а для windows это будет cd C:\Users\YOUR PC USERNAME\Desktop. Затем введите mkdir streamlit_project && cd streamlit_project. В каталоге проекта создайте виртуальную среду с помощью python3 -m venv, за которым следует любое название. Обычно виртуальные среды называют .venv, но в данном примере будет virt_env. Вот как это выглядит:

python3 -m venv virt_env # Mac
python -m venv virt_env # Windows

Теперь можно активировать виртуальную среду и приступить к установке пакетов, необходимых для проекта. Чтобы активировать виртуальную среду, введите одну из следующих комбинаций в зависимости от типа операционной системы:

source virt_env/bin/activate # Mac
virt_env\Scripts\activate # Windows

После активации вы должны увидеть
(virt_env) ...

Создание приложения

Теперь установим streamlit и другие пакеты, которые понадобятся в приложении на Python:

python3 -m pip install streamlit # Mac
python -m pip install streamlit # Windows

python3 -m pip install pandas # Mac
python -m pip install pandas # Windows

python3 -m pip install matplotlib # Mac
python -m pip install matplotlib # Windows

После установки этих пакетов скопируйте и вставьте код из Github-репозитория, сохранив его под именем covid_dashboard.py в каталоге виртуальной среды. Этот файл Python, содержащий приложение streamlit, выполняет две основные задачи.

1) Вычисляет четыре метрики.

2) Строит граф временных рядов новых случаев по штатам.

Объясню каждый раздел более подробно.

@st.cache(allow_output_mutation=True)
def load_dataset():
   try:
      df = pd.read_csv(
"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv", sep=",")
      states = list(df['state'].unique())
   except:
      Exception

   return df, states

Функция load_dataset() извлекает все данные по COVID-19 из аккаунта NYT на Github и создает список штатов США для фильтрации. Важно использовать st.cache над этой функцией, чтобы сохранить весь набор данных в памяти. В таком случае программе не придется перезагружать весь набор данных каждый раз при применении другого фильтра.

def pct_change(data, state, today):
....

Функция pct_change принимает три аргумента: набор данных по COVID-19, штат, выбранный нами в выпадающем списке и сегодняшнюю дату. Эта функция возвращает словарь с четырьмя метриками (новые случаи, изменение по случаям за 14 дней, новые смерти и изменение по смертям за 14 дней).

def chart_data(data, state):
...

def chart_data берет набор данных по COVID-19 и выбранный штат из выпадающего списка и возвращает временной ряд данных о новых случаях для выбранного штата.

Переходим к последней части кода (именно здесь вызываются функции, а данные возвращаются и отображаются в приложении). Вызываемая функция load_dataset() создает датафрейм и список штатов США. Затем создаем выпадающий список с помощью st.selectbox, добавляем к нему метку и список штатов. Добавляем логику, когда выпадающий список выбран. 

Наконец, streamlit предлагает удобный способ добавления колонок и графов на веб-страницу, создавая более чистый общий формат. Главное преимущество  —  возможность создавать организованные и отзывчивые HTML-компоненты на чистом Python с минимальным количеством кода.

df, states = load_dataset()
state_dropdown = st.selectbox('Select a State', states)
if state_dropdown:
data_dict = pct_change(df, state_dropdown, today)
col1, col2, col3, col4 = st.columns(4)
col1.markdown(f"New Cases: {data_dict['Cases']}")
col2.markdown(
f"""<p>14-Day Change: <span style="color:red">{data_dict['Case Change']}%</span></p>""", unsafe_allow_html=True)
col3.markdown(f"New Deaths: {data_dict['Deaths']}")
col4.markdown(f"""<p>14-Day Change: <span style="color:red">{data_dict['Death Change']}%</span></p>""", unsafe_allow_html=True)
chart_data = chart_data(df, state_dropdown)
st.line_chart(chart_data)

Развертывание приложения: начальные шаги

Пока созданное в виртуальной среде приложение streamlit живет только на локальном компьютере. Чтобы поделиться им со всем миром, нужно установить Git и Heroku.

Чтобы установить Git, откройте новое окно командной строки и на Mac введите:

git --version

Должно появиться всплывающее окно с дальнейшими инструкциями, позволяющее продолжить установку. Если вы пользователь Windows, используйте следующую ссылку для загрузки Git.

Чтобы установить Heroku на Mac, сначала установите Homebrew (если этого еще не сделали), а затем введите в новом окне терминала:

brew tap heroku/brew && brew install heroku

Если компьютер Mac работает на чипе M1, может произойти ошибка. Для решения проблемы воспользуйтесь страницей поддержки Apple.

Если вы пользователь Windows, используйте следующую ссылку для загрузки Heroku CLI.

После установки этих зависимостей можно опубликовать код на Github. Сначала создайте файл .gitignore, чтобы исключить файл виртуальной среды из репозитория Github, а затем измените его, введя virt_env/ (сохраните файл после внесения изменений):

(virt_env) > touch .gitignore # Mac
(virt_env) > echo.>.gitignore # Windows

Теперь инициализируйте Git в окне командной строки, где активна виртуальная среда, через git:

git init
git add -A
git commit -m "initial commit"

Войдите в аккаунт Github, создайте новый репозиторий, а затем выберите опцию Push an existing repository from the command line. Скопируйте и вставьте фрагмент кода из этой опции в командную строку, где запущена виртуальная среда.

Чтобы завершить этот этап, создайте файл требований с помощью pip freeze. Это сообщит веб-серверу, какие зависимости ему необходимы для успешного запуска приложения.

python -m pip freeze > requirements.txt

Создайте новый файл в каталоге виртуальной среды под названием setup.sh и сохраните в нем следующее:

mkdir -p ~/.streamlit/
echo "\
[server]\n\
headless = true\n\
port = $PORT\n\
enableCORS = false\n\
\n\
" > ~/.streamlit/config.toml

Затем создайте Procfile (назовите его просто Procfile) в каталоге виртуальной среды и сохраните в нем следующее:

web: sh setup.sh && streamlit run covid_dashboard.py

Теперь пришло время добавить файлы requirements.txt, Procfile и setup.sh в репозиторий Github:

git add -A
git commit -m "files for Heroku deployment"
git push -u origin main

Развертывание приложения на Heroku

Чтобы развернуть приложение в производственной среде, введите следующее в командной строке, где запущена виртуальная среда:

(virt_env) > heroku login
(virt_env) > heroku create

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

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

Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи Curt Beck: Rapidly Building and Deploying a Web App in Python

Предыдущая статьяJavaScript 101: метод массива Reduce
Следующая статьяКак настроить Next.js на TypeScript, чтобы получить оценку в 100% от Google Lighthouse и Vercel Analytics