Загрузка данных и первый интерфейс — Streamlit: создание интерактивных dashboards на Python

Данные в видео:

product,price,category
Laptop,1200,Electronics
Phone,800,Electronics
Chair,150,Furniture

Добро пожаловать в курс по Streamlit.

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

Это очень похоже на реальную разработку. Сначала у нас появится простая загрузка CSV-файла. Затем мы научимся фильтровать данные, добавим графики, пользовательские элементы управления, несколько страниц, интерактивную работу с таблицами и постепенно превратим всё это в полноценное web-приложение.

И здесь возникает главный вопрос: а зачем вообще нужен Streamlit?

Представьте довольно обычную ситуацию. У вас есть CSV-файл с продажами, клиентами, заказами или какими-нибудь аналитическими показателями. Вы открываете его через Pandas, строите графики, делаете расчёты… и в какой-то момент понимаете, что хочется показать результаты другим людям в удобном виде.

Например:

менеджеру;
коллеге;
заказчику;
преподавателю;
или просто самому себе.

И вот тут раньше начинались сложности. Нужно было изучать frontend, писать backend, разбираться с API, HTML, JavaScript и кучей других технологий. Streamlit стал популярным именно потому, что позволяет пропустить почти весь этот сложный этап. Вы пишете обычный Python-код, а получаете полноценное web-приложение с интерфейсом, таблицами и интерактивностью. Причём происходит это удивительно быстро. Иногда достаточно буквально нескольких строк кода, чтобы получить первый рабочий dashboard.

И именно это мы сегодня и сделаем.

К концу урока у вас уже будет настоящее Streamlit-приложение:

с интерфейсом;
таблицей;
загрузкой данных;
и первыми показателями.

Что вы узнаете в рамках статьи

В этом уроке мы познакомимся с основой всей дальнейшей работы. Вы установите Streamlit, создадите первое приложение, научитесь запускать его через терминал и поймёте, как устроена базовая структура проекта. Также мы подключим Pandas, загрузим CSV-файл и отобразим его внутри интерфейса приложения. По сути, именно сегодня начнётся создание нашего первого dashboard.

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

Ключевые термины

Streamlit - Python-библиотека для создания интерактивных web-приложений и dashboards.
Dashboard - Интерактивная панель с таблицами, графиками, фильтрами и показателями.
CSV - Текстовый формат хранения табличных данных.
Pandas - Python-библиотека для работы с таблицами и анализа данных.
DataFrame - Табличная структура данных в Pandas.
streamlit run - Команда для запуска Streamlit-приложения.
Hot Reload - Автоматическое обновление приложения после изменения кода.
st.title - Функция для отображения заголовка.
st.write - Универсальная функция для вывода данных.
st.dataframe - Функция для отображения таблиц.

Что такое Streamlit

Если попытаться описать Streamlit максимально просто, то это способ превратить обычный Python-скрипт в web-приложение. Причём именно в этом и заключается его главная магия. Вы пишете код примерно так же, как писали бы его в Jupyter Notebook. Но вместо обычного вывода в консоль вы получаете настоящий интерфейс в браузере.

Например, вот такой код:

import streamlit as st

st.title("Мой первый dashboard")
st.write("Привет, Streamlit!")

уже создаёт полноценную web-страницу.

Для новичков это обычно выглядит немного неожиданно. Особенно если до этого был опыт только с обычным Python или Jupyter Notebook.

Установка Streamlit

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

разные версии библиотек;
конфликты зависимостей;
путаница между проектами;
ошибки после установки новых пакетов.

Виртуальное окружение позволяет изолировать зависимости конкретного проекта. Проще говоря, ваш Streamlit-проект будет жить в собственной “мини-среде” со своими библиотеками и настройками.

Сначала создадим папку проекта:

streamlit-dashboard

Перейдём в неё через терминал и создадим виртуальное окружение:

python -m venv env

После этого в проекте появится папка:

env

Теперь виртуальное окружение нужно активировать.

На Windows:

env\Scripts\activate

На macOS и Linux:

source env/bin/activate

После активации терминал обычно начинает показывать название окружения слева от строки ввода. Например:

(env)

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

Теперь можно устанавливать Streamlit:

pip install streamlit

Также сразу установим Pandas, потому что почти весь курс будет связан с работой с таблицами и CSV-файлами:

pip install pandas

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

Создаём первый проект

Внутри папки streamlit-dashboard создадим файл app.py. Во многих Streamlit-проектах именно app.py является точкой входа для запуска приложения.

Теперь добавим самый первый код:

import streamlit as st

st.title("Dashboard продаж")
st.write("Мое первое Streamlit-приложение")

Пока что здесь всего две строчки интерфейса, но уже через пару минут они превратятся в настоящее web-приложение.

Запуск приложения

Теперь наступает один из самых приятных моментов — первый запуск.

Откройте терминал внутри папки проекта и выполните:

streamlit run app.py

После запуска Streamlit:

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

И вот здесь происходит важный момент.

Вы ещё не писали:

frontend;
HTML;
CSS;
JavaScript;

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

Горячая перезагрузка

Теперь попробуем изменить текст приложения.

Например:

st.write("Приложение обновилось!")

Сохраните файл. Скорее всего, вы сразу заметите, что браузер автоматически обновился.

Это называется hot reload — горячая перезагрузка. И на практике это невероятно удобно. Вы меняете код, сохраняете файл и практически мгновенно видите результат. Не нужно каждый раз вручную перезапускать сервер или заново собирать проект. Когда приложение становится большим, такая скорость разработки начинает ощущаться особенно сильно.

Подключаем данные

До этого момента интерфейс был довольно “пустым”. Теперь пришло время добавить настоящие данные.

Создадим файл:

sales.csv

Например, с таким содержимым:

product,price,category
Laptop,1200,Electronics
Phone,800,Electronics
Chair,150,Furniture

Теперь подключим Pandas и загрузим CSV:

import streamlit as st
import pandas as pd

df = pd.read_csv("sales.csv")

st.title("Dashboard продаж")

st.dataframe(df)

После обновления страницы вы увидите настоящую интерактивную таблицу. И это уже начинает напоминать реальный dashboard.

Разбираем код

Сначала мы импортируем библиотеки:

import streamlit as st
import pandas as pd

streamlit отвечает за интерфейс, а pandas — за работу с таблицами.

Дальше происходит загрузка CSV-файла:

df = pd.read_csv("sales.csv")

Pandas открывает файл и создаёт объект DataFrame — специальную табличную структуру данных.

А затем Streamlit отображает этот DataFrame внутри интерфейса:

st.dataframe(df)

Причём таблица получается интерактивной автоматически. Streamlit сам добавляет:

прокрутку;
удобное отображение;
адаптацию под интерфейс.

Именно это делает разработку настолько быстрой.

Добавляем первые показатели

Хороший dashboard почти всегда содержит какие-то показатели или метрики.

Пока что сделаем совсем простую информацию:

st.write("Количество строк:", len(df))
st.write("Количество столбцов:", len(df.columns))

Теперь приложение выглядит уже заметно “живее”. Появляется ощущение, что это не просто вывод CSV-файла, а начало полноценного аналитического инструмента.

Полный код приложения

В итоге приложение сейчас выглядит так:

import streamlit as st
import pandas as pd

df = pd.read_csv("sales.csv")

st.title("Dashboard продаж")

st.write("Количество строк:", len(df))
st.write("Количество столбцов:", len(df.columns))

st.dataframe(df)

И это отличный результат для первого урока.

Наиболее частые ошибки

ModuleNotFoundError - Обычно это означает, что Streamlit или Pandas не установлены в текущем окружении Python.

Решение:

pip install streamlit pandas

CSV-файл не найден - Очень частая ситуация на старте — файл лежит не в той папке.

Например:

app.py находится в одной директории;
а sales.csv — в другой.

На первых этапах проще всего хранить оба файла рядом.

Streamlit не запускается

Иногда команда:

streamlit run app.py

не работает из-за настроек Python или окружения.

Тогда можно использовать:

python -m streamlit run app.py

Изменения не появляются в браузере - Чаще всего проблема очень простая — файл не сохранён. Это кажется мелочью, но на практике такая ошибка встречается постоянно, особенно у новичков.

Наиболее частые вопросы

Нужно ли знать frontend для Streamlit? - Нет. И именно это делает Streamlit настолько удобным. Вы создаёте интерфейс полностью на Python.
Streamlit подходит только для аналитики? Нет. Streamlit давно вышел за рамки исключительно аналитики. На нём создают полноценные dashboards, внутренние корпоративные инструменты, интерфейсы для работы с файлами и таблицами, demo-приложения для презентации идей или сервисов и так далее.
Можно ли публиковать такие приложения? - Да. В конце курса мы научимся выкладывать проекты в интернет через Streamlit Cloud.

Итоги

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

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