Веб-приложения: Погружение

  • Создайте веб-приложение, которое отображает изображения и воспроизводит звуки
  • Узнайте, как создавать графики данных на Python с помощью Jupyter Notebooks
  • Создайте веб-приложение для панели данных с помощью Streamlit

STREAMLIT

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

Чтобы попрактиковаться в использовании Streamlit, мы возьмем один из наших примеров мобильного приложения из Thunkable и App Inventor и покажем, как это же приложение можно создать в виде веб-приложения с помощью Streamlit. 

ЗАНЯТИЕ 1: ПРИЛОЖЕНИЕ ДЛЯ ЗВУКОВОЙ ПЛАТЫ

Расчетное время: 30 минут

Код веб-приложения Streamlit

  1. Нажмите на кнопку ниже, чтобы загрузить активы (изображения и звуковые файлы), которые понадобятся для создания приложения.
  2. Следуйте за один Из этих видеороликов вы сможете создать простое приложение Soundboard, которое воспроизводит звуки при нажатии кнопки.
  3. Добавьте четвертого человека в свое приложение. Найдите изображение и короткий звуковой файл для добавления в приложение. Вот ссылка на некоторые знаменитые речи.
Загрузите файлы активов

РАБОТА С ДАННЫМИ

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

графики данных

Большинство программистов и специалистов по изучению данных работают с данными на Python с помощью программ, называемых блокнотами. Одним из самых популярных интерфейсов для блокнотов является Jupyter Notebook. Согласно результатам опроса Kaggle Survey 2022, блокноты Jupyter являются самой популярной интерактивной средой разработки (IDE) для работы с наукой о данных, которую используют более 80 % респондентов. 

Jupyter Notebook запускается в браузере, хотя существуют и другие интерфейсы. Например, он может интегрироваться непосредственно в Visual Studio Code. 

Механизм, стоящий за ноутбуком и выполняющий код, называется ядро. Для Python вы будете использовать ядро ipython. 

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

Вы также можете выполнять код Python прямо в блокноте. 

Скриншот ячеек кода в jupyter notebook

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

Блокноты Jupyter помогут вам спланировать и протестировать различные аспекты вашего веб-приложения, прежде чем вы перейдете к редактору визуального кода для создания самого приложения.

БИБЛИОТЕКИ PYTHON

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

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

Примером библиотек, которые понадобятся вам для работы с данными, являются numpy и pandas.

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

Кроме того, существует множество библиотек для построения графиков и диаграмм, которые позволяют пользователям визуализировать данные. Наиболее популярными библиотеками визуализации в Python являются matplotlib, plotlyи seaborn

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

ЗАДАЧА 2: ИНФОРМАЦИОННАЯ КАРТА

Предполагаемое время: 90 минут

Создание веб-приложения Streamlit

В зависимости от того, где вы кодируете - на компьютере или в облаке, - следуйте соответствующему набору видеороликов.
  • На вашем компьютере:
    1. Следуйте этому видео(часть 1), чтобы установить и запустить Jupyter Notebook. Нажмите на ссылку ниже, чтобы загрузить файл блокнота.
    2. Следуйте этому видео(часть 2), чтобы создать приложение для приборной панели данных с помощью Streamlit.
  • В облаке:
    1. Следуйте этому видео(часть 1), чтобы запустить Jupyter Notebook в Github Codespaces.
    2. Следуйте этому видео(часть 2), чтобы создать приложение для приборной панели данных с помощью Streamlit.io.
Ваша очередь: Добавьте еще один график на панель данных. Вы можете выбрать один из других графиков из исходного Jupyter Notebook или создать новый график в Jupyter Notebook, а затем интегрировать код в Streamlit, чтобы добавить его на приборную панель.
Скачать блокнот

РЕФЛЕКСИЯ

Поздравляем, вы создали два веб-приложения в Streamlit! Задайте себе эти вопросы:

отражение
Возникли ли у вас проблемы с установкой или запуском Jupyter Notebook или Streamlit?
Как вы преодолевали проблемы, когда сталкивались с ними?
Как вы можете использовать идеи из этого урока в своем проекте?

ОБЗОР ОСНОВНЫХ ТЕРМИНОВ

  • Jupyter Notebook - популярная интерактивная среда разработки для работы с данными с помощью кодирования на Python
  • Ядро - процесс, который запускается и действует как движок для Jupyter Notebooks
  • Язык Markdown - Язык, позволяющий легко форматировать текст, чтобы он был более читабельным
  • Библиотека - коллекция заранее написанного кода, выполняющего определенные задачи

ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ

Блокноты Jupyter

 

Streamlit