Створення реактивних аналітичних веб-додатків із використанням Python і бібліотеки Dash


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Dash – бібліотека для мови Python з відкритим вихідним кодом, призначена для створення реактивних веб-додатків. Вона була завантажена на GitHub два роки тому в тестовому режимі. Команда розробників Dash вирішила залишити цей прототип у мережі, проте продовжила вести роботу над проектом вже поза платформою GitHub. Завдяки зворотному зв’язку від банків і лабораторій, а також від команд, які працюють з аналізом даних, розробники визначили курс розвитку бібліотеки. Сьогодні вже представлена перша публічна версія Dash, яка підходить як для корпоративних клієнтів, так для клієнтів преміум-класу продукції Plotly. Бібліотека може бути використана як з Plotly, так і самостійно.

Створення веб-додатків на Python за допомогою Dash

Нині Dash можна завантажити, використовуючи диспетчер пакетів Python, за допомогою команди pip install dash. Dash поширюється з відкритим вихідним кодом і з ліцензією MIT. На офіційному сайті Ви зможете ознайомитися з керівництвом по бібліотеці, і на GitHub знайдете вихідний код.

Dash – бібліотека користувацького інтерфейсу для створення аналітичних веб-додатків. Вона буде корисною тим, хто використовує Python для аналізу і дослідження даних, візуалізації, моделювання і звітності.

Dash значно спрощує створення GUI (графічних користувацьких інтерфейсів) для аналізу даних. Ось приклад додатки на Dash із 43 рядків коду, який зв’язує випадне меню з графіком D3.js. Коли користувач вибирає значення у випадному списку, код динамічно експортує дані з Google Finance в Pandas DataFrame:

Код Dash є декларативним і реактивним, що спрощує створення складних додатків, що містять багато інтерактивних елементів. Ось приклад із 5 вхідними даними, 3 – вихідними і з перехресною фільтрацією. Цей додаток було написано на Python, і в ньому лише 160 рядків коду:

Додаток на Dash з декількома вхідними і вихідними даними

Для кожного елемента додатка можна задати власні параметри розміру, розташування, кольору і шрифту. Додатки на Dash створюються і публікуються в Мережі, тому до них можна застосувати все, на що здатний CSS. Нижче ілюструється приклад інтерактивного додатка звітності, що тонко настроюється, на Dash, виконаного в стилі звіту фінансової організації Goldman Sachs.

Додаток Dash, що тонко налаштовується, створений у стилі звіту фінансової організації Goldman Sachs

Вам не треба писати код на JavaScript або HTML, коли Ваший додаток на Dash запущено у веб-браузері. Dash надає багатий набір інтерактивних веб-компонентів.

import dash_core_components as dccdcc.Slider (value=4, min=-10, max=20, step=0.5, labels={- 5: '- 5 Degrees', 0: '0', 10: '10 Degrees'})

Приклад простого повзунка на Dash

Dash надає простий реактивний декоратор для прив’язки Вашого коду аналізу даних до користувацького інтерфейсу Dash.

@dash_app.callback (Output ('graph - id', 'figure'), [Input ('slider - id', 'value')]) def your_data_analysis_function (new_slider_value): new_figure = your_compute_figure_function (new_slider_value)
return new_figure

Коли змінюється вхідний елемент (наприклад, при виборі елементу у випадному списку або при пересуванні повзунка), декоратор Dash надає Вашому коду Python нове вхідне значення.

Ваша функція Python може виконувати різні дії з новим вхідним значенням: може фільтрувати об’єкт DataFrame бібліотеки Pandas, виконувати SQL-запит, запускати симуляцію, виконувати обчислення або запускати тестування. Dash розраховує, що Ваша функція поверне нову властивість для якогось елемента користувацького інтерфейсу, як-от: новий графік, нова таблиця або новий текст.

Як приклад нижче представлений додаток на Dash, який оновлює текстовий елемент при взаємодії з графіком. Код додатка фільтрує дані в Pandas DataFrame на основі вибраної точки:

Додаток нижче відображає метаінформацію про лікарські речовини при наведенні курсора на точки в графіці. Код додатка також додає рядок до таблиці, коли з’являються нові компоненти у випадному списку.

Завдяки цим двом розділенням між компонентами Python і реактивними функціональними декораторами, Dash розмежовує всі технології і протоколи, необхідні для створення інтерактивного веб-додатка. Dash досить простий, щоб прив’язати користувацький інтерфейс до коду Python за один вечір.

Архітектура

Flask і React.js

Додатки на Dash – веб-сервери, які запускають Flask і зв’язують пакети JSON через HTTP-запити. Інтерфейс Dash формує компоненти, використовуючи React.js.

Flask – чудовий фреймворк, який широко використовується співтовариством розробників Python у багатьох проектах. Основний екземпляр Flask і всі його властивості, що налаштовуються, доступні розробникам додатків на Dash. Просунуті розробники можуть розширити можливості додатків за допомогою багатої колекції плагінів Flask.

Dash використовує потужність Flask і React, підлаштовуючи їх під роботу з Python для фахівців з аналізу і обробки даних, які можуть не бути експертами в області веб-розробки.

Від React.js до компонент Python

Компоненти Dash – це класи Python, які кодують властивості й значення конкретного компонента React і упорядковуються як JSON. Dash надає набір інструментів для легкої упаковки компонентів React у вид компонентів, які можуть бути використані в Dash. Цей набір інструментів використовує динамічне програмування для автоматичного створення класів Python з анотованої властивості React – propTypes. На виході класи Python, які представляють компоненти Dash, є зручними для користувача, оскільки вони мають автоматичну перевірку аргументів, рядків документації та інше.

Ось приклад динамічно згенерованої перевірки помилкового аргументу:

>>> import dash_core_components as dcc>>> dcc.Dropdown (valu=3) Помилка: невідомий ключовий аргумент 'valu 'Допустимі аргументи: id, className, disabled, multi, options, placeholder, value

Приклад динамічно створюваних рядків документації:

 >>> help (dcc.Dropdown) class Dropdown (dash.development.base_component.Component)  | Компонент випадного списку. | Компонент випадного списку служить для вибору одного або більше | за елементи. | значення і назви елементів випадного списку визначаються в 'options' | властивість і вибраний елемент (ы) визначаються властивістю 'value'. |
| використайте випадний список, тільки якщо у вас багато варіантів вибору (більше 5), або | коли ви обмежені простором. Інакше ви можете використати перемикачі або чекбоксы, | Які покажуть відразу усі елементи користувачеві. | | Аргументи ключових слів: | - id (рядок; необов'язковий)  | - className (рядок; необов'язковий)  | - disabled (логічний тип; необов'язковий): якщо true, вибір блокується | - multi (логічний тип; необов'язковий): якщо true, користувач може вибрати декілька значень | - options (список; необов'язковий)  | - placeholder (рядок; необов'язковий): сірий текст за умовчанням, якщо нічого не вибрано | - value (рядок | список; необов'язковий): значення поля введення. Якщо 'multi' false (за умовчанням), | то value - рядок, що відповідає своїм значенням, | вказаним у властивості 'options'. Якщо 'multi' - true, то
| можна вибрати відразу декілька значень, а 'value' - | масив елементів зі значеннями, що відповідають у властивості | 'options'. | | Доступні події: 'change

Повний набір HTML-тегів (на кшталт div, img, table) також обробляється за допомогою React, а їх класи Python доступні через бібліотеку dash_html_component. Основний набір інтерактивних компонентів, таких як Dropdown, Graph, Slider, підтримуватиметься командою Dash через dash_core_components. Обидві бібліотеки використовують стандартний набір інструментальних засобів React-to-Dash з відкритим вихідним кодом, який Ви могли б використати за необхідності написання власної бібліотеки компонентів.

Ваший додаток автоматично не прив’язується до бібліотеки компонентів Dash. Бібліотека компонентів імпортується окремо від основної бібліотеки Dash. За допомогою набору інструментальних засобів React-to- Dash можна легко записати або перенести компонент React.js у клас Python, який можна використати в додатку Dash. На офіційному сайті Ви знайдете керівництво по створенню власних компонентів або можете попросити команду розробників Dash написати їх для Вас.

Додатки, розраховані на багатьох користувачів

Властивості додатка на Dash зберігаються в інтерфейсі (у браузері). Це дозволяє використати додатки, написані з використанням Dash, у розрахованому на багато користувачів режимі: може бути відкриті декілька незалежних одна від однієї сесій, у яких дії одних користувачів не впливатимуть на дані інших користувачів. Код додатка на Dash є функціональним: він може прочитувати значення з глобальних властивостей Python, але не може вносити в них зміни. Цей функціональний підхід можна легко обґрунтувати і протестувати – це просто вхідні й вихідні дані без якихось побічних ефектів або властивостей.

CSS і стилі

CSS і стилі за умовчанням зберігаються поза базовою бібліотекою, щоб зберегти принцип модульності й незалежного управління версіями і щоб підштовхнути розробників Dash-додатків налаштовувати вид своїх додатків. Команда Dash розмістила керівництво по основних стилях.

Візуалізація даних

Бібліотека Dash поставляється з компонентом Graph, який відповідає за відображення діаграм за допомогою Plotly.js. Бібліотека Plotly.js підходить до Dash (відмінне доповнення), оскільки вона декларативна і має відкритий вихідний код. Крім того, вона підтримує повний спектр наукових, фінансових і ділових діаграм. Створена бібліотека на основі D3.js (для діаграм якості друкарні й експорту векторних зображень) і WebGL (для високопродуктивної візуалізації).

У бібліотеці Dash елемент Graph використовує той самий синтаксис, що й бібліотека Plotly.py з відкритим вихідним кодом, що дає Вам можливість легко перемикатися між ними. Компонент Graph підключається до системи подій Plotly.js, дозволяючи авторам писати додатки, які реагують на наведення курсора, клацання і вибір певних точок на графіках Plotly.

Репозиторії з відкритим вихідним кодом

Прототипування

Dash – це нова бібліотека в середовищі Python, проте концепції та ідеї, на яких будується Dash, використовують протягом десятиріч на різних мовах і в різних додатках.

Якщо Ви розбираєтеся в Excel, то Вам буде простіше розібратися і в Dash. Вони обидві використовують “реактивну” модель програмування. В Excel осередки з вихідними даними оновлюються автоматично при зміні параметрів осередків із вхідними даними. Будь-який осередок може бути вхідним або вихідним або і тим, й іншим. В осередках із вхідними даними немає інформації про те, які осередки з вихідними даними залежать від них, що спрощує додавання нових осередків з вихідними даними або дозволяє зв’язати декілька осередків. Ось приклад Excel-додатка:

Можна провести аналогію для Dash. Замість осередків у нас є багатий спектр веб-компонентів, таких як движки, поля введення, випадні списки і графіки. Замість написання сценарію Excel або VBA ми пишемо код Python. Нижче представлений той самий додаток, але цього разу він написаний на Dash:

app.layout = html.Div ([ html.Label ('Hours per Day'), dcc.Slider (id='hours', value=5, min=0, max=24, step=1), html.Label ('Rate'), dcc.Input (id='rate', value=2, type='number'), html.Label ('Amount per Day'), html.Div (id='amount'), html.Label ('Amount per Week'), html.Div (id='amount - per - week')]) @app.callback (Output ('amount', 'children'), [Input ('hours', 'value'), Input ('rate', 'value')]) def compute_amount (hours, rate): return float (hours)  * float (rate) @app.callback (Output ('amount - per - week', 'children'),
[Input ('amount', 'children')])def compute_amount (amount): return float (amount)  * 7

Деяким розробникам подобається цей приклад, тому що Excel як і раніше займає домінуюче положення навіть в технічних обчисленнях і у фінансовій математиці. Я не думаю, що домінуюче положення Excel – це технічне питання. Врешті-решт, є легіони програмістів, які вивчили нюанси Excel, VBA і навіть SQL.

Більше того, таблиці Excel легше поширювати, ніж програми на Python, а осередки Excel легше редагувати, ніж аргументи командного рядка.

Проте моделювання в Excel має відомі обмеження: ці таблиці часто стають занадто великими або вразливими, щоб переводити їх на виробничий рівень, проводити експертну оцінку або тестувати і підтримувати. Вам відомий випадок зі знаменитою друкарською помилкою в 2013 році?

Сподіваємося, що Dash зробить використання Python у проектах з обробки даних простіше. Завдяки тим самим функціональним і реактивним принципам, можна легко написати додаток на Dash або аналітичну таблицю. Це, безумовно, потужніший і презентабельний інструмент.

Фреймворк Shiny

Якщо Ви програмуєте на R, то Вам пощастило. Shiny – реактивний фреймворк для створення веб-додатків на чистому R, і це відмінно! Ви навіть можете створювати інтерактивні графіки з бібліотекою Shiny або Plotly для R. Dash і Shiny схожі, але Dash не прагне бути копією Shiny, оскільки філософії Python і R  різняться, що приводить до необхідності використання різного синтаксису.

Інтерактивне веб-застосування, створене за допомогою Shiny на мові R.

Структуризація даних з MATLAB

Якщо Ви програмуєте на MATLAB, то, можливо, ознайомлені з GUIDE – бібліотекою користувацького інтерфейсу для MATLAB. Компанія Mathworks стала одним з новаторів в області технічних обчислень. GUIDE була написана в 2004 році.

Додаток, створений за допомогою бібліотеки GUIDE на MATLAB

Якщо Ваші дані структуровані у базі даних, то Ви могли б використати Tableau або будь-який інший BI- інструмент. Tableau – чудовий інструмент. Компанія встановила новий вектор розвитку у своїй галузі, згідно з яким у кінцевого користувача має бути автономія, щоб він міг досліджувати дані всередині своєї організації. Компанія також допомогла зробити додаток популярнішим за концепцію деталізації даних і перехресної фільтрації.

Перехресна фільтрація в Tableau

Dash також служить доповненням до BI-інструментів, на кшталт вищезгаданих. Вони чудово підходять для структуризації даних. Проте коли справа доходить до перетворення даних і аналітики, перевершити розмах і гнучкість мов програмування і співтовариств, на зразок Python, стає важче. Dash абстрагується від багатьох складнощів у створенні користувацьких інтерфейсів, дозволяючи Вам зробити це красиво для Вашої аналітичної бази даних.

Віджети Jupyter

Нарешті, прийшов час розповісти про віджети Jupyter. Вони забезпечують приємний фреймворк усередині інтерфейсу Notebook. Ви можете додавати движки до Ваших графіків у Jupyter Notebook.

Віджети в Dash схожі на виджети Jupyter. У Jupyter Notebooks є можливість додавати віджети безпосередньо поряд з кодом. У Dash елементи управління зберігаються окремо від Вашого коду. Dash більше націлена на додатки для розширення, ніж на розширюваний код і документацію. Ви завжди можете змішувати і зіставляти інструменти, створюючи свої додатки на Dash у середовищі Jupyter Notebook.

Команді розробників Dash також дуже подобається проект nteract, який знижує поріг входження в Python і Jupyter Notebook, дозволяючи упакувати Jupyter Notebook у вигляді настільного додатка.

Ліцензування і бізнес-модель з відкритим вихідним кодом

Стартап підтримує бібліотеки з відкритим вихідним кодом для Python, R і MATLAB, які взаємодіють з plotly.js. Компанія підтримує веб-додатки для створення діаграм і підключення їх до баз даних (стикувальні бібліотеки також поширюються з відкритим вихідним кодом).

Якщо Ви використовуєте локальну версію з відкритим вихідним кодом, у такому разі обмежень немає. Ви можете управляти розгортанням Dash-додатків самостійно через платформи типу Heroku або Digital Ocean.

Якщо Ви шукайте натхнення для створення своїх користувацьких інтерфейсів в області технічних обчислень, рекомендуємо прочитати статтю Брета Віктора

Вам також може сподобатися проект Explorable Explanations, який спеціалізується на інтерактивному навчанні.

Переклад статті “Create Reactive Web Apps in pure Python”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *