Краткое руководство по Dash — Python веб-фреймворк для создания дэшбордов

Краткое руководство по Dash — Python веб-фреймворк для создания дэшбордов. Installation + Dash Layout

Сегодня предлагаю погрузиться в один из удобнейших веб-фреймворков в связке c Python под названием Dash. Появился он не так давно, пару лет назад благодаря разработчикам фреймворка plotly. Сам Dash является связкой Flask, React.Js, HTML и CSS.

Выступление Криса Пармера на PLOTCON 2016

Давайте сразу установим фреймворк. Обновленные версии уточняйте тут.

Друзья, если вы действительно хотите разобраться в данном фреймворке, читайте публикации до конца, так как зачастую сначала следуют примеры, а уже после детальный обзор кода. Если вам все равно непонятно — советую читать документацию по Dash на английском языке в оригинале. Также в рунете есть несколько статей, которые объясняют концепции, которые я решил пропустить в данном туториале.

Начнем.

Приложения Dash состоят из двух частей. Первая часть — «layout» описывает то, как выглядит наше приложение. Вторая часть описывает интерактивность приложения, о ней мы поговорим в следующей статье.

Dash предоставляет Python классы для всех визуальных компонентов приложения. Разработчики предоставляют набор компонентов в так называемых dash_core_components и dash_html_components . Но также вы можете построить свой компонент используя JavaScript и React.js.

Важно

В dash_core_components содержатся различные динамические формы такие как, например, выпадающие списки, графики и чек-боксы.

В dash_html_components содержатся html конструкции, которыми можно завернуть наши формы. Например Div блоки или теги заголовков H1, H2, и так далее. Разработчики предоставляют нам некую абстракцию от html с помощью словарей Python.

Чтобы начать разбираться, создадим файл app.py , в котором будет содержаться следующее:

И запустим его из текущей директории командой:
$ python app.py

. Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

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

Переходим по адресу http://127.0.0.1:8050/
и видим:

Примечание

На заметку

Dash содержит привычную веб разработчика фичу: hot-reloading . Она активируется в тот момент, когда запускается функция app.run_server(debug=True) . Эта фича обновляет ваш браузер всякий раз, когда вы делаете правки в коде и сохраняете результат. Таким образом нет нужды каждый раз перезапускать сервер.

Как мы помним, Dash содержит компонент для каждого тега HTML. Но также он может принимать все аргументы ключевых слов, как и элементы HTML.

Давайте немного изменим наш код:

Обновляем страницу, и видим:

В этом примере мы изменили стили html.Div и html.H1 с помощью свойства style .

html.H1(‘Hello Dash’, style=<'textAlign': 'center', 'color': '#7FDBFF'>) отрендерится в приложении Dash как:

Но есть несколько важных замечаний:

Многоразовые компоненты

Продолжая, представим, что нам нужны некоторые элементы, которые будут меняться, например в зависимости от входных данных пользователя нашего приложения. Для этого в Dash предусмотрены так называемые reusable components . Рассмотрим их на примере таблицы, данные для которой будут загружаться из Pandas dataframe.

Немного о таблицах

Давайте вспомним что из себя представляет таблица в HTML.

HTML таблица определяется тэгом table.

Каждая строка таблица определяется тэгом tr. Хедер таблица определяется тэгом th. A ячейки таблицы заполняются с помощью тэга td.

Получается такая структура:

И выглядит она так:

Компоненты ядра (Основные компоненты)

Как мы уже сказали ранее, dash_core_components включает в себя высокоуровнвые элементы. Такие, как: выпадающее меню, графики и прочее.

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

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

Давайте рассмотрим следующий код:

Тут мы видим, что мы создали как обычно один общий Div блок, в котором содержатся наши различные компоненты ядра. Выглядит это как-то так:

Остались вопросы?

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

Summary

Ранее нами изученый layout описывает то, как выглядит наше приложение. По сути он содержит древовидную иерархию HTML тэгов и высокоуровневых элементов ядра Dash, которые содержатся в dash_core_components .

В следующей части мы изучим то, как сделать нашу страничку интерактивной. Если вам понравился данный туториал, ставьте плюсик и подписывайтесь на меня.

* Здесь скоро будет ссылка на следующую часть *