Как да вградите приложение Dash в съществуващо приложение Flask

Снимка на Джезаел Мелгоза на Unsplash

Dash (от Plotly) е с отворен код, лесна за използване рамка Python за изграждане на красиви уеб приложения, управлявани от данни.

Ако се интересувате да научите повече за рамката, преминете към „Представяне на тире“, официалното съобщение за изданието или разгледайте многото примери от тяхната галерия.

Важното е обаче, че Dash използва Flask за задния край.

Ако сте запознати с Flask, ще знаете, че има минималистично ядро, той е много адаптивен и се предлага с лесни за добавяне разширения.

И така, естествено е да мислим, че приложенията на Dash трябва да бъдат лесно интегрирани в съществуващо приложение Flask.

Съдържание

  • Съществуващи решения
  • Самостоятелен пример
  • Разположете приложението Dash в собствената му подпапка
  • Множество приложения за тире на един флаш сървър
  • Изключителни точки
  • Бележки за настройка, direnv и virtualenvwrapper
  • Дневник на актуализациите

Съществуващи решения

Ресурсите за интеграция на Dash със съществуващо приложение Flask са оскъдни и непълни.

Търсенето на „флашка за интеграция на тире“ извежда код от официалните документи при разполагането. B̵u̵t̵ ̵i̵t̵’s̵ ̵h̵a̵r̵d̵l̵y̵ ̵e̵v̵e̵n̵ ̵a̵n̵ ̵e̵x̵a̵m̵p̵l̵e̵. Екипът на Dash се справи чудесно и адресира молбите на общността. Независимо от това, новите примери използват само настройка на колбата с голи кости.

Други резултати от търсенето сочат въпроси към StackOverflow, като стартиране на приложение Dash в Flask приложение или към изданието github на Dash, което изисква лесен работен пример за вграждане на тире в колба под път.

Тези ресурси все още са недостатъчни и обикновено имат няколко от следните проблеми:

  • примерите не са самостоятелни, трудни за тестване, неорганизирани
  • изискват нереално опростено приложение Flask
  • не адресират специфични основни изисквания, като удостоверяване

И така, ако и вие сте прекарали часове в търсене, четене и тестване през десетки вложени връзки, без голям успех, вероятно сте стигнали до същото заключение.

Нуждаем се от документирана стратегия за вграждане на приложение Dash в съществуващо приложение Flask!

Самостоятелен пример

Създадох лесен за тестване и самостоятелен пример, който интегрира приложение Dash в реалистичен Flask проект.

За да го тествам

Клонирайте хранилището на github:

git clone https://github.com/okomarov/dash_on_flask
CD dash_on_flask
докосване .envrc

Добавете детайли на конфигурацията към .envrc файла (не е ангажиран):

експортиране FLASK_APP = dashapp
експортиране FLASK_ENV = развитие
експортиране DATABASE_URL = sqlite: ///$PWD/app.db
експортиране SECRET_KEY = secret_key_change_as_you_wish_make_it_long_123

Заредете детайлите на конфигурацията, създайте виртуална среда (по избор, ще се върнете към това), инсталирайте python зависимости, инициализирайте базата данни и стартирайте приложението:

източник .envrc
pip install -r изисквания.txt
колба db init
колба db мигрира -m 'init'
актуализация на колба db
колба тече

Накрая, проверете приложението на http://127.0.0.1.1000000/dashboard!

Трябва да бъдете пренасочени към форма за вход, като първо трябва да се свържете с линк. Тоест, таблото за управление изисква удостоверяване:

Проба от формата във формата

Точно това искаме! Първо се регистрирайте, след това влезте и се върнете към / таблото за управление.

Сега имаме независимо изградено приложение Dash, обслужвано от нашето приложение Flask, което играе добре с нашата автентификация и други разширения.

Подробности за изпълнението

Приложението добавя показания по-долу прост плотер за плотове (модифициран да използва цените на Yahoo):

Адаптиран от примера на тире на тире

до Flask приложение, което използва:

  • модела на фабриката на приложението и чертежите
  • база данни за управление на потребители (sqlite с Flask-SQLAlchemy и Flask-Migrate)
  • удостоверяване (Flask-Login)

Това е стандартна настройка за повечето Flask приложения. Стъпките и кодът за това как да внедря инфраструктурата, използвана в моето репо са адаптирани директно от отличния мегаурок Flask Mega от Мигел Гринберг.

Трябва да отбележим няколко неща. Нека да разгледаме структурата на папките:

,
├── приложение /
│ ├── __init__.py
│ ├── extensions.py
│ ├── form.py
│ ├── models.py
│ ├── шаблони /
│ │ └── ...
│ └── webapp.py
├── app.db
├── config.py
├── dashapp.py
├── миграции /
│ └── ...
├── .envrc
└── изисквания.txt

Първо, приложението / папката съдържа всичко, свързано с нашето приложение Flask или сървъра, както е посочено в документацията на Dash. Ние създаваме основния план и маршрутите в webapp.py (редактиран за по-голяма яснота):

и дефинирайте фабриката на приложенията в __init__.py:

Второ, dashapp.py е файлът, който изпълняваме с пускане с колба. Този файл създава приложението на сървъра Flask, което се използва повторно от приложението Dash.

Освен това файлът се използва и за дефиниране на оформлението и обратните обаждания на приложението Dash и за защита на неговите маршрути / изгледи (редактирани за по-голяма яснота):

Разположете приложението Dash в собствената му подпапка

Както вероятно сте забелязали, файлът, който създава приложението (понякога наричан run.py), е по-затрупан от обикновено. Например приложението Dash наистина трябва да принадлежи на собствената му папка.

Така че, ако не използвате фабричния модел на приложенията, вероятно сте по-добре с по-простата структура, описана в този отговор.

Следвайки решението, обяснено в този отговор, можем да поставим кода на приложението Dash в собствената му подпапка под / app:

,
├── ап
│ ├── __init__.py
│ ├── dashapp1
Assets │ ├── активи /
│ │ ├── callbacks.py
│ │ └── layout.py
│ ⋮
│ └── webapp.py
├── dashapp.py
⋮

където оформлението и обратните обаждания са в техните отделни файлове (едно до друго редактирането е по-лесно, отколкото да има обратни повиквания под оформлението):

Инсталацията на приложението Dash вече се извършва вътре в __init__.py (за подробности проверете хранилището на github) и основният ни dashapp.py е просто:

от импортиране на приложение create_app
сървър = create_app ()

Чувства се добре!

Множество приложения за тире на един флаш сървър

Сега, когато знаем как да разделим приложението си Dash в неговата собствена подпапка, можем да създадем няколко Dash приложения под един и същ сървър.

Пълното решение е на github под функцията на клон / multiple_dash_apps.

Като странична забележка, ако не използвате фабричния модел за стартиране на Flask сървъра, пропуснете този раздел и следвайте официалната документация как да структурирате приложение за много страници.

Нека предположим, че имате още едно приложение Dash, което създадохте под / app / dashapp1:

,
├── ап
│ ├── __init__.py
│ ├── dashapp1
Assets │ ├── активи /
│ │ ├── callbacks.py
│ │ └── layout.py
│ ├── dashapp2
Assets │ ├── активи /
│ │ ├── callbacks.py
│ │ └── layout.py
│ ⋮
│ └── webapp.py
├── dashapp.py
⋮

Можем да адаптираме нашия /app/__init__.py към:

Вече можем да стартираме нашия Flask сървър и да отидем до / табло за първото приложение Dash или до / пример за второто приложение!

Изключителни точки

Шаблониране на Jinja: при достъп до маршрута на таблото за управление, приложението Dash се зарежда в собствената му страница вместо елемент div, който може да се впише в нашите шаблони за Jinja. Този отговор описва решение как да използваме отново шаблона си Jinja за приложението Dash.

Бележки за настройка

direnv

За да изпълним примера, трябва да създадем някои променливи на средата, които след това автоматично се импортират от config.py. Поставяме тези променливи във файл, наречен .envrc и ги извеждаме, когато е необходимо.

Позволявам на direnv да зарежда автоматично магически променливи на средата, специфични за проекта, дефинирани във файла .envrc, когато влизам в папката.

virtualenvwrapper

Преди да инсталирате изискванията, препоръчвам да създадете виртуална среда. Един от начините за това е като стартирате от корен на проекта:

python3 -m venv env
source env / bin / activate

Друг начин сред многото е да управлявате и организирате вашите среди на едно място с virtualenvwrapper, което използвам във връзка с интеграцията на direnv.

Дневник на актуализациите

  • Начална публикация - 2019/01/02
  • По-добра организация на файловете за приложения на Dash - 2019/02/21
  • Множество приложения на Dash под един сървър Flask - 2019/05/05
  • Добавен контекст на флашка към приложенията на Dash - 2019/07/09

Нека поддържаме връзка

Ако тази публикация ви е харесала и искате да получавате подходящи актуализации или да знаете за бъдещите теми, тогава нека образуваме по-дълбока връзка!

Регистрирайте се в моя бюлетин. И не се безпокойте Опитвам се да създавам качество и качество отнема време (и също мразя спама).