Четыре способа написать Hello world, или инструменты для создания GUI на Python
После написания программы ее можно модифицировать и добавить графический интерфейс — с Python это проще, чем кажется. Для программирования красивого и функционального GUI иногда достаточно простого знания html и css.
Под катом — подборка некоторых инструментов для создания интерфейсов на Python. Сохраняйте статью в закладки и предлагайте свои варианты в комментариях!
Привет! Меня зовут Влад и уже более пяти лет я пишу на Python. Успел перепробовать многое — от олимпиадного программирования и решения исследовательских задач до BackEnd-разработки и RPA.
Могу сказать однозначно: если с программой работаете не только вы, но и, например, ваши коллеги, для нее нужно сделать интерфейс. При этом неважно, какую задачу она решает. Поэтому я собрал подборку инструментов для создания GUI на Python и мини-инструкции по работе с ними.
Если вам интересен такой формат, напишите, какую тему можно разобрать в будущем. За самую интересную идею отправим плюшевого тирекса и другой мерч Selectel.
Tkinter
Наверное, каждый заклинатель змей пробовал работать с Tkinter. Для меня это была одна из тех библиотек, с которой началось знакомство с возможностями Python.
Tkinter — это один из самых известных модулей для программирования интерфейсов под Windows, Linux и Mac.
Преимущества модуля:
- Простая установка. Достаточно установить модуль и импортировать его в программу.
- Интуитивная логика. Все просто: вызываете объект, создаете и добавляете графические элементы.
Когда-то давно я писал программу для «местных бухгалтеров», которая сравнивала электронные таблицы. Нужно было сделать интерфейс, чтобы заказчики могли работать с программой самостоятельно. И для этой задачи Tkinter хватило с запасом.
С помощью этого модуля можно делать простые десктопные приложения. Исходя из моего опыта, Tkinter отлично подходит для начинающих исследователей, которым наскучил софт вроде LabVIEW и хочется написать свой интерфейс для расчетов.
Пример работы
Для создания простой кнопки, которая при нажатии будет выводить Hello world, достаточно импортировать модуль, инициализировать фрейм и добавить соответствующий объект.
# импортируем модуль from tkinter import * def hello_world(): print("Hello world") # создаем окно main main = Tk() # добавляем кнопку, настраиваем ее форму и цвет # при нажатии сработает функция hello world btn = Button(main, width=20, height=7, text="Кнопка", bg="white", fg="black", command=hello_world) btn.pack() main.mainloop() 
Пример работы программы на Tkinter, простая кнопка.
Что нужно учитывать
Tkinter — это одновременно простой и сложный инструмент для создания GUI. Так, при построении «масштабных» интерфейсов возникают трудности: работать можно только с кодом, а механика размещения элементов не всегда очевидна.
Вы можете использовать сетки grid и менеджеры геометрии place и pack. Наверное, изучение этих инструментов — самый тяжелый этап при погружении в Tkinter. Особенно, если вы хотите научиться делать адаптивные интерфейсы.
Способы размещения элементов в Tkinter.
Eel
Знаете html и css — воспользуйтесь модулем Eel. С помощью него можно создавать веб-интерфейсы в виде отдельных программ. Яркий пример, который написан на Electron, прародителе Eel, — Discord.
С помощью библиотеки Eel можно не только написать красивый интерфейс на html и css, но и динамические анимации на базе JavaScript.
Пример работы
Шаг 1. Сначала нужно создать html-документ и добавить в него разметку.
T-Rex Hello, T-Rex!
project/main.html
Шаг 2. Далее необходимо запустить html-документ с помощью Eel.
import eel eel.init("") eel.start("main.html", size=(700, 700)) project/start.py
Готово — после запуска программа откроет в браузере html-документ project/main.html:
Что нужно учитывать
Модуль создает GUI на базе ядра Chromium. Плохо это для вашего проекта или нет — знаете только вы. Но потенциально могут быть проблемы с оптимизацией, потреблением оперативной памяти.
Однако с помощью Eel можно выиграть в гибкости и упростить разработку сложных адаптивных приложений — достаточно использовать старый-добрый flexbox. Например, если вам нужно приложение для просмотра больших таблиц, на базе Eel можно просто создать GUI с html-фреймом Google Sheets.
При этом пользователь приложения как бы выполняет роль клиента и сервера одновременно. Eel запускает localhost:8000 и открывает браузер — Chrome или Windows Edge — с флагом —app , который позволяет задавать размер окна по умолчанию. Проект можно скомпилировать с помощью PyInstaller или Auto PY to EXE и распространять как исполняемый файл.
Интересен Python? Мы собрали самые интересные и популярные запросы разработчиков в одном файле! По ссылке — материалы по геймдеву, машинному обучению, программированию микроконтроллеров и графических интерфейсов.
PyQt
До сих пор мы рассматривали модули, на базе которых можно именно написать интерфейс. Но есть более удобный (имхо) и профессиональный инструмент для создания GUI — библиотека PyQt. Ее преимущество — совместимость с билдером Qt Designer, который предоставляет набор готовых интерфейсных элементов.
Qt Designer, интерфейс редактора.
Пример работы
Для создания интерфейса достаточно установить PyQt через пакетный менеджер pip, набросать интерфейс в QtDesigner, сохранить его в формате .ui и подключить к программе.
Посмотрим на примере, как написать простой интерфейс и обрабатывать нажатия кнопки (pushButton):
# подключаем необходимые пакеты from PyQt6 import uic from PyQt6.Widgets import QApplications # эта функция срабатывает при нажатии кнопки def hello_world(): print("Hello world") # подключаем файл, полученный в QtDesigner Form, Window = uic.loaduiType("interface.ui") app = QApplication([]) window, form = Window(), Form() form.setupUi(window) window.show() # настраиваем сценарий для элемента pushButton form.pushButton.clicked.connect(hello_world) # запускаем окно программы app.exec() После запуска и клика по кнопке программа напечатает Hello world — проверьте это самостоятельно. Но настоящие преимущества PyQt раскрываются во время разработки сложных интерфейсов.
В своей практике я использовал PyQt для кроссплатформенных GUI под задачи по автоматизации. Яркий пример — конвертер статей из Google-документов на Хабр, о котором я рассказывал в предыдущей статье.
Что нужно учитывать
Встроенных элементов Qt почти всегда было достаточно. Однако иногда могут встречаться объекты, которые некорректно срабатывают. Например — QTextBrowser, который не умеет считывать сложный html-код вроде blockquote.
Главное преимущество PyQt — подробная документация, в которой хорошо описаны все интерфейсные элементы, их параметры и типы данных. Поверьте, для работы с этим фреймворком справочные материалы понадобятся не раз. Но если вам ближе видеоформат, могу смело порекомендовать уроки Олега Шпагина.
PyTouchBar
С 2016 года у некоторых моделей MacBook Pro есть сенсорная OLED-панель. По сути, она просто заменяет функциональные клавиши. Но с ней чуть интересней: на тачбар можно вывести закладки и даже медиаэлементы.
С помощью библиотеки PyTouchBar можно сделать свой интерфейс для тачбара и даже создать игру — без погружения в дебри драйверов и разработки на Swift. О том, как это сделать, мы подробно рассказали в отдельной статье.
Игра с динозавриком Google на тачбаре.
Создание простого веб-приложения: шаги и примеры
Интернет и веб-приложения стали неотъемлемой частью современной жизни. Каждый день мы используем множество приложений, работающих через браузеры, чтобы упростить нашу жизнь. Однако многие из нас не задумываются о том, как эти приложения создаются. В этой статье мы рассмотрим, как создать простое веб-приложение и пошагово объясним основные шаги, необходимые для создания такого приложения.
Чтобы научиться создавать мобильные приложения и зарабатывать на этом, приходите на наш бесплатный вебинар по разработке без кода. Вы сможете задать вопросы, узнать больше про зерокодинг и попробовать себя в новой профессии!
Подготовка к созданию веб-приложения
Первым шагом при создании веб-приложения является выбор языка программирования и фреймворка. Для создания веб-приложения можно использовать множество языков программирования, таких как JavaScript, Python, Ruby и многие другие. Кроме того, необходимо выбрать фреймворк, который облегчит создание приложения и предоставит необходимую функциональность.
Далее необходимо настроить среду разработки. Например, для разработки веб-приложений на Python можно использовать PyCharm, а для разработки на JavaScript — Visual Studio Code. Кроме того, необходимо выбрать базу данных, которая будет использоваться в приложении.
Есть несколько важных факторов, которые следует учитывать при выборе языка программирования и фреймворка.
- JavaScript: Язык программирования JavaScript широко используется для разработки веб-приложений. Он работает на стороне клиента (в браузере) и может использоваться для создания интерактивных пользовательских интерфейсов. Он также может использоваться для разработки серверной части веб-приложений с использованием фреймворков, таких как Node.js.
- Python: Python является популярным языком программирования, который может использоваться для создания веб-приложений. Он имеет широкий выбор фреймворков, таких как Django и Flask, которые облегчают процесс разработки и предоставляют мощные инструменты для создания функциональных веб-приложений.
- Ruby: Язык программирования Ruby также может быть использован для создания веб-приложений. Фреймворк Ruby on Rails является популярным выбором для разработки веб-приложений на Ruby. Он обладает элегантным синтаксисом и предлагает широкий набор инструментов для разработки.
Выбор языка программирования зависит от ваших предпочтений, опыта и требований проекта. JavaScript является универсальным языком, который используется на клиентской и серверной сторонах. Python имеет хорошую поддержку для научных вычислений и анализа данных, а также богатое сообщество и множество библиотек. Ruby может быть хорошим выбором для быстрой разработки веб-приложений с помощью фреймворка Ruby on Rails.
Относительно баз данных, выбор зависит от требований вашего приложения. Некоторые популярные базы данных для веб-приложений включают MySQL, PostgreSQL и MongoDB. MySQL и PostgreSQL являются реляционными базами данных, подходящими для структурированных данных. MongoDB предлагает документоориентированную модель, что может быть полезно для приложений с неструктурированными данными или требующих гибкости.
Важно также учитывать экосистему и сообщество языка и фреймворка. Широкое сообщество разработчиков может предоставить поддержку, документацию, руководства и сторонние библиотеки, что упростит разработку и позволит быстро решать возникающие задачи. Рекомендуется исследовать доступные ресурсы, форумы и сообщества для выбранного языка и фреймворка, чтобы быть в курсе последних разработок и получить помощь, если это необходимо.
После выбора языка программирования и фреймворка, следующим шагом является настройка среды разработки. Рекомендуется выбрать среду, которая облегчит процесс разработки и предоставит необходимые инструменты и функциональность. Например, для разработки на Python вы можете использовать популярные среды разработки, такие как PyCharm, Visual Studio Code, Sublime Text и другие. Для разработки на JavaScript также популярны Visual Studio Code, Atom, WebStorm и другие.
Кроме выбора языка программирования, фреймворка и среды разработки, необходимо также рассмотреть вопрос о выборе хостинга для вашего веб-приложения. Вы можете выбрать между различными хостинг-провайдерами, которые предлагают различные планы и функциональность. Некоторые популярные хостинг-провайдеры включают Heroku, Amazon Web Services (AWS), Google Cloud Platform (GCP) и другие.
Не забывайте также о безопасности вашего веб-приложения. Включение соответствующих мер безопасности, таких как проверка ввода данных пользователей, защита от атак, шифрование данных и другие, является важной частью процесса разработки.
В целом, подготовка к созданию веб-приложения включает выбор языка программирования и фреймворка, настройку среды разработки, выбор базы данных, хостинга и обеспечение безопасности. Это лишь общий обзор, и детали будут зависеть от конкретных требований и контекста вашего проекта.
Создание структуры приложения
После подготовки окружения необходимо определить функциональность приложения и создать базовую структуру проекта. Для этого можно использовать фреймворки, такие, как Flask для Python или Express.js для JavaScript.
Следующим шагом является создание маршрутов и контроллеров. Маршруты определяют, какие страницы и функциональность будут доступны в приложении, а контроллеры обрабатывают запросы пользователя и выполняют необходимые действия.
Разработка структуры веб-приложения включает определение основных компонентов и организацию файлов и папок в проекте. Ниже приведена примерная таблица, показывающая типичную структуру веб-приложения:
Здесь представлены основные папки и файлы, которые могут быть включены в структуру веб-приложения:
- app/ : Это основная папка вашего приложения, в которой содержатся все его компоненты.
- static/ : В этой папке хранятся статические файлы, такие как CSS-стили и JavaScript-скрипты.
- css/ : Здесь располагаются файлы CSS, используемые для стилизации веб-страниц.
- style.css : Пример файла CSS со стилями вашего приложения.
- script.js : Пример файла JavaScript с клиентским скриптом вашего приложения.
- base.html : Основной шаблон, который может быть использован как общий для всех страниц.
- home.html : Пример шаблона для домашней страницы вашего приложения.
- about.html : Пример шаблона для страницы «О нас» вашего приложения.
- settings.py : Файл, содержащий основные настройки вашего приложения, такие как база данных, статические файлы, шаблоны и т.д.
- urls.py : Файл, определяющий маршруты (URL-пути) вашего приложения и их связь с представ
Создание пользовательского интерфейса
Пользовательский интерфейс является важной частью любого веб-приложения, поскольку это то, что пользователь видит и с чем взаимодействует. Для создания пользовательского интерфейса необходимо выбрать дизайн и создать соответствующие шаблоны и страницы. Кроме того, CSS и JavaScript могут быть использованы для улучшения пользовательского интерфейса.
Создание бизнес-логики
Бизнес-логика является основной частью любого веб-приложения, которая выполняет необходимые действия. Для создания бизнес-логики необходимо определить функциональность приложения и создать соответствующие классы и методы. В зависимости от приложения это может включать в себя создание моделей данных, обработку пользовательского ввода и выполнение соответствующих действий, таких как обновление базы данных или отправка электронной почты.
Тестирование приложения
После создания основной функциональности приложения и пользовательского интерфейса необходимо протестировать приложение. Это поможет выявить ошибки и недоработки, а также убедиться, что приложение работает должным образом.
Развертывание приложения
После тестирования необходимо развернуть приложение, чтобы оно было доступно для использования. Существует множество вариантов развертывания, включая использование облачных сервисов, таких как AWS или Heroku, или установка на собственный сервер.
Пример создания простого веб-приложения
Давайте рассмотрим пример создания простого веб-приложения, которое позволит пользователям создавать заметки. Мы будем использовать Python и фреймворк Flask.
- Установка Flask и необходимых зависимостей:
pip install Flask - Создание базовой структуры проекта:
- Создание базового приложения в файле app.py:
- Создание шаблонов для пользовательского интерфейса в файлах index.html, new_note.html и view_note.html.
- Запуск приложения:
makefile
FLASK_APP=app.py flask runЭтот пример представляет собой простое веб-приложение, которое позволяет пользователям создавать заметки и просматривать их. Однако, с помощью Flask и Python можно создавать гораздо более сложные приложения с различной функциональностью.
В заключение, создание веб-приложения может быть сложным и трудоемким процессом.
Создание реактивных аналитических веб-приложений с использованием Python и библиотеки Dash
Библиотека Dash будет полезна тем, кто использует Python для анализа и исследования данных, визуализации, моделирования и отчётности.
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 создаются и публикуются в Сети, поэтому к ним можно применить всё, на что способен CSS. Ниже иллюстрируется пример тонко настраиваемого интерактивного приложения отчётности на Dash, выполненного в стиле отчёта финансовой организации Goldman Sachs.
Вам не нужно писать какой-либо код на JavaScript или HTML, когда ваше приложение на Dash запущено в веб-браузере. Dash предоставляет богатый набор интерактивных веб-компонентов.
import dash_core_components as dcc dcc.Slider(value=4, min=-10, max=20, step=0.5, labels=)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.
React.js также великолепен, например, мы переписали всю нашу веб-платформу и наш онлайн-редактор диаграмм с помощью React. Но есть кое-что, что действительно радует насчёт React — активный и талантливый состав сообщества разработчиков, который опубликовал тысячи высококачественных компонентов, начиная с выпадающих списков и слайдеров, заканчивая календарями и интерактивными таблицами. И всё это публикуется с открытым исходным кодом!
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;
- фронтенд библиотеки Dash;
- библиотека основных компонентов Dash;
- библиотека HTML-компонентов Dash;
- набор инструментальных средств React-to-Dash;
- документация и руководство по Dash;
- Plotly.js —JavaScript- библиотека, используемая Dash.
Прототипирование
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 достаточно различаются, что приводит к необходимости использования разного синтаксиса.
Структурирование данных с MATLAB
Если вы программируете на MATLAB, то вам, возможно, знакома GUIDE — библиотека пользовательского интерфейса для MATLAB. Компания Mathworks была одной из новаторов в области технических вычислений. GUIDE была написана в далёком 2004 году.
Если ваши данные структурированы в базе данных, вы могли бы использовать Tableau или любой другой BI-инструмент. 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, который специализируется на интерактивном обучении.
Как создать приложение на python через html
Перейдите в только что созданную директорию:
Flask по умолчанию использует порт 5000. При желании его можно изменить на более привычный 8000:
Переменные в маршрутах
В URL можно передавать различные значения. Запустите этот код и перейдите по адресу, например, http://localhost:5000/user/EvilAdmin
А так можно передать в маршруте целое число:
GET- и POST-запросы
GET и POST – это HTTP-запросы, которые используются для отправки данных между клиентом и сервером.
GET-запрос применяют для получения данных от сервера. При выполнении GET-запроса клиент отправляет запрос на сервер, а сервер возвращает запрошенную информацию в ответ. GET-запросы могут содержать параметры в URL-адресе, которые используются для передачи дополнительных данных.
POST-запрос используют для отправки данных на сервер. При выполнении POST-запроса клиент отправляет данные на сервер, а сервер их обрабатывает. POST-запросы обычно применяют для отправки форм, с данными из которых нужно что-то сделать на бэкенде.
Рассмотрим простейший пример обработки формы авторизации. Базы данных для хранения учетных записей у нас пока нет, поэтому в приведенном ниже коде мы пропустим всю функциональность для проверки корректности логина и пароля (мы рассмотрим этот вопрос позже, в одном из заданий):
Шаблонизатор Jinja2
Шаблоны в Flask используются для динамического формирования веб-страниц. Шаблоны представляют собой HTML страницы, в которые можно передавать любые данные с бэкенда. К шаблонам можно подключать любые CSS -фреймворки типа Bootstrap и Tailwind , и любые JS -скрипты.
Поведением шаблонов управляет шаблонизатор Jinja 2 – он предоставляет функциональность для создания условий, циклов, макросов, наследования и блоков. Главные преимущества шаблонизатора:
- Может проводить различные операции с контентом самостоятельно, не обращаясь к бэкенду.
- Обеспечивает наследование дизайна и стилей от базового шаблона.
Наследование работает так:
- Базовый шаблон, который обычно называется base.html, содержит общую разметку для сайта.
- В base.html подключаются локальные и CDN-фреймворки (CSS, JS), задаются фоновые изображения и фавикон.
- Дочерние шаблоны наследуют этот базовый шаблон и дополняют его своим собственным контентом.
Продемонстрируем наследование на примере. Сохраните в папке templates два файла. Это содержимое файла base . html – в нем подключается CSS -фреймворк Bootstrap , кастомные стили custom . css из статической папки static, иконки Font Awesome :
Работа с базой данных
Для работы с базами данных в Flask удобно использовать ORM SQLAlchemy. Как уже упоминалось в предыдущей главе о SQLite, ORM играет роль своеобразной прослойки между приложением и СУБД SQLite , и позволяет работать с базами без использования языка SQL . Надо заметить, что работать с базами данных в SQLAlchemy немного сложнее, чем в Django ORM , но гораздо проще, чем в чистом Python .
Начнем с установки SQLAlchemy в виртуальное окружение:
Практика
Задание 1
Напишите Flask -приложение, которое выводит в шаблон index . html приветствие для пользователя. Приветствие зависит от времени суток:
- С 6:00 до 12:00 – «Доброе утро»
- С 12:00 до 18:00 – «Добрый день»
- С 18:00 до 24:00 – «Добрый вечер»
- С 00:00 до 6:00 – «Доброй ночи»
Код для app.py выглядит так:
Это код приложения app.py:
В приложении app . py можно определить только маршрут, вся функциональность по определению уровней доступа находится в шаблоне:
Напишем модель Book и скрипт, который создает и заполняет базу из json-файла. Затем создадим app . py с двумя маршрутами – для вывода всех книг, и для вывода отдельной книги:
Задание 5
Для онлайн-магазина нужно написать модуль, который поможет сотрудникам сделать инвентаризацию. Приложение состоит из базы данных, в которой таблицы связаны сложными отношениями:
- Каждый производитель (Manufacturer) поставляет несколько типов товаров (Category) – ноутбуки, наушники, смартфоны и так далее.
- Одну и ту же категорию товаров могут производить несколько компаний.
- В каждой категории может быть множество товаров (Item).
Нужно реализовать вывод всех товаров по поставщикам и по категориям. Все данные о товарах находятся в файле info.csv.
Файл models . py , описывающий структуру базы данных, выглядит так:
Задание 6
Для супермаркета нужно написать веб-приложение, которое выводит список товаров на складе и позволяет добавлять новые.
Приложение состоит из файлов app.py, create_db.py и models.py. Для добавления новых товаров используется шаблон add . html и маршрут/функция add :
Задание 7
Для ветеринарной клиники нужно написать модуль учета пациентов. В приложении должны быть функции добавления, редактирования и удаления карточек.
Начнем с создания базы данных на основе моделей. Функции add_patient, edit_patient, delete_patient реализованы в приложении app.py. Шаблоны add . html и edit . html обеспечивают добавление и редактирование карточек:
Задание 8
Напишите модуль аутентификации для Flask -приложения. Необходимо реализовать:
- регистрацию;
- проверку учетных данных при входе;
- перенаправление на страницу профиля.
Проект включает в себя файлы app.py, create_db.py и models . py . Кроме того, модуль использует шаблоны:
После регистрации и входа пользователь перенаправляется на страницу своего профиля:
Задание 9
Напишите веб-приложение для хранения заметок. Необходимо реализовать набор CRUD операций – вывод, добавление, редактирование и удаление заметок. При создании базы данных следует учесть, что заметка может относиться только к одной категории, а в категории может быть множество заметок. На главной странице выводятся все заметки, причем текст ограничивается первыми 300 символами. Нажатие на ссылку «Далее» открывает страницу с полным текстом заметки.
База данных для приложения создается с помощью скрипта create _ db . py на основе моделей. CRUD операции описаны в app . py . При нажатии на название категории шаблон и маршрут category выводят все заметки, относящиеся к данной теме.
Задание 10
Напишите Flask приложение для ведения блога. Каждая запись может иметь несколько тегов, но должна относиться к одной категории. Как и в предыдущем задании, нужно реализовать просмотр отдельных записей, добавление, редактирование и удаление постов. При выводе всех записей, а также записей по категориям и тегам посты должны отображаться в порядке убывания даты, т.е. самые новые находятся сверху.
Прежде всего разработаем модели Tag , Category и Post , а затем создадим на их основе базу данных при помощи скрипта.
Приложение использует следующие шаблоны:
CRUD операции реализованы в главном файле приложения app . py . Чтобы самые свежие записи выводились первыми, в models . py мы определили метод newest _ first . При нажатии на ссылку «Читать» выводится полный текст записи:
Подведем итоги
Мы рассмотрели основные приемы разработки простых веб-приложений на основе фреймворка Flask:
- Создание маршрутов и функций представления.
- Получение и обработку данных с фронтенда.
- CRUD операции.
- Основные возможности шаблонизатора Jinja2.
При создании приложений Flask для получения данных с фронтенда обычно используются формы WTF Forms . В этой статье при решении заданий намеренно использовались HTML -формы – так процесс передачи и обработки данных выглядит максимально понятно.
В следующей статье будем изучать NumPy .
- Особенности, сферы применения, установка, онлайн IDE
- Все, что нужно для изучения Python с нуля – книги, сайты, каналы и курсы
- Типы данных: преобразование и базовые операции
- Методы работы со строками
- Методы работы со списками и списковыми включениями
- Методы работы со словарями и генераторами словарей
- Методы работы с кортежами
- Методы работы со множествами
- Особенности цикла for
- Условный цикл while
- Функции с позиционными и именованными аргументами
- Анонимные функции
- Рекурсивные функции
- Функции высшего порядка, замыкания и декораторы
- Методы работы с файлами и файловой системой
- Регулярные выражения
- Основы скрапинга и парсинга
- Основы ООП: инкапсуляция и наследование
- Основы ООП: абстракция и полиморфизм
- Графический интерфейс на Tkinter
- Основы разработки игр на Pygame
- Основы работы с SQLite
- Основы веб-разработки на Flask
- Основы работы с NumPy
- Основы анализа данных с Pandas
Материалы по теме
- ���� Flask за час. Часть 1: создаем адаптивный сайт для GitHub Pages
- ���� Создаем аналог LiveLib.ru на Flask. Часть 1: основы работы с SQLAlchemy
- ��⛩️�� Руководство для начинающих по шаблонам Jinja в Flask
- css/ : Здесь располагаются файлы CSS, используемые для стилизации веб-страниц.
- static/ : В этой папке хранятся статические файлы, такие как CSS-стили и JavaScript-скрипты.