Как работать с PyScript — фреймворком для фронтенда на Python
В веб-разработке Python используется в основном на бэкенде с такими фреймворками, как Django и Flask. А сегодня, к старту курса по Fullstack-разработке на Python, расскажем о PyScript, который даёт возможность запускать Python прямо в HTML.
До сих пор Python не имел такой большой поддержки на фронтенде, как другие языки, например JavaScript. Но, к счастью, разработчики Python создали несколько библиотек для поддержки своего любимого языка в браузере, например Brython.
А на конференции PyCon 2022 анонсировали фреймворк PyScript от Anaconda для использования Python в вебе с помощью стандартного HTML. Вот твит о запуске фреймворка:
Нам понадобится
Чтобы писать код по этой статье, вам понадобятся следующие инструменты и знания:
любимый текстовый редактор или интегрированная среда разработки;
браузер (рекомендуется Google Chrome).
Что такое PyScript?
PyScript — это фронтенд-фреймворк для создания программ на Python в браузере с использованием HTML-интерфейса, а также мощи Emscripten, Pyodide, WASM и других современных веб-технологий. В соответствии со своими целями он призван дать такие возможности:
упрощённый и чистый API;
систему подключаемых и расширяемых компонентов;
поддержку и расширение стандартного HTML для чтения и надёжных, и своенравных компонентов с миссией «Программирование для 99% [людей]».
В последние 20 лет Python и продвинутые языки пользовательского интерфейса, такие как HTML, CSS и JavaScript, не работали вместе. В Python не было простого механизма создания привлекательных пользовательских интерфейсов для подготовки и развёртывания приложений, а на освоение современных HTML, CSS и JavaScript может уйти много времени.
С возможностью применять в Python соглашения из HTML, CSS и JavaScript решаются не только эти две проблемы, но и те, что связаны с разработкой, подготовкой к развёртыванию, собственно развёртыванием и распространением веб-приложений.
Однако PyScript не заменит JavaScript в браузере, а, скорее, даст разработчикам Python, особенно дата-сайентистам, больше гибкости и мощи.
Почему PyScript?
С PyScript язык получает последовательные правила оформления кода, простоту освоения и больше выразительности за счёт:
поддержки в браузере: с PyScript появляются поддержка Python и возможность размещения без серверов и конфигурации;
возможности взаимодействия Python и JavaScript: в программах может осуществляться двунаправленная связь между объектами и пространствами имён Python и JavaScript;
поддержки экосистемы: PyScript позволяет использовать популярные пакеты Python (Pandas, NumPy и др);
гибкости фреймворка: PyScript — гибкий фреймворк, на основе которого разработчики легко могут создавать расширяемые компоненты прямо в Python;
управления средой: PyScript позволяет разработчикам определять файлы и пакеты для запуска кода своей страницы;
разработки пользовательского интерфейса: с PyScript разработчики могут легко работать с доступными компонентами пользовательского интерфейса (кнопками, контейнерами и др.).
Начало работы с PyScript
PyScript довольно просто освоить: следуйте инструкциям на сайте или загрузите zip-архив.
В этой статье научимся использовать PyScript через сайт, связав компоненты в HTML-файле, и выведем первый Hello World в PyScript.
Создаём HTML-файл
HTML-файл нужен для отображения текста в браузере с помощью текстового редактора / интегрированной среды разработки:
Привязываем PyScript
После создания HTML-файла в теге <head> нужно указать в нём ссылку на PyScript, чтобы получить доступ к интерфейсу PyScript:
Выводим в браузере
Связав PyScript с HTML-файлом, выводим Hello World с помощью тега <py-script>, который позволяет запускать многострочные программы на Python и выводить результат выполнения на странице браузера. Помещаем тег внутри тега <body>:
Весь код HTML-файла:
В браузере вы должны увидеть:
Совет: в редакторе VSCode, чтобы перезагружать страницу при обновлении HTML-файла, используйте плагин Live Server.
Другие операции с PyScript
Прикрепляем метки к элементам
В PyScript переменные из кода на Python в HTML передаются с помощью метода write из модуля pyscript, в теге <pyscript>. Используя атрибут id, передаём строки, отображаемые в виде обычного текста.
В методе write принимаются две переменные: значение id и переменная, которая будет предоставлена:
Запускаем REPL в браузере
В PyScript код Python запускается и через интерфейс. С помощью тега <py-repl> компонент REPL добавляется на страницу, где пишется выполняемый код:
Мы получим вывод:
Импортируем файлы, модули и библиотеки
Одно из преимуществ PyScript — его гибкость. Здесь можно импортировать локальные файлы, встроенные модули или сторонние библиотеки. Для объявления зависимостей понадобится тег <py-env>.
Для локальных файлов Python можно поместить код в файл с расширением .py, а пути к локальным модулям указываются в строках вида пути: ключ (YAML) тега <py-env>.
Создадим файл Python example.py с функциями:
Импортируем его в HTML с тегом <py-env>, в <head>:
Вот что вернётся:
PyScript поддерживает сторонние библиотеки:
Настраиваем метаданные
С помощью тега <py config> в формате YAML можно задать и настроить общие метаданные приложения PyScript. Использовать этот тег можно так:
Вот необязательные значения, которые предоставляются <py-config>:
autoclose_loader (логическое значение): если оно false, загрузочный экран-заставка в PyScript не закроется;
name (строка): название пользовательского приложения;
version (строка): его версия;
runtimes (среды выполнения): список конфигураций среды выполнения с полями src, name и lang.
Заключение
Вы узнали, что такое PyScript и как его использовать в HTML-файлах для запуска кода Python в браузере, а также познакомились с различными операциями и функционалом PyScript. С помощью PyScript проще запускать и выполнять операции Python в вебе. Это отличный инструмент для всех, кому не терпится опробовать Python в Интернете.
PyScript находится на ранних стадиях разработки и активно дорабатывается. Он остаётся на стадии альфа-тестирования и сталкивается с известными проблемами, такими как время загрузки, которое может повлиять на удобство использования (на момент написания этой статьи другие операции не отображались из-за проблем с производительностью). Поэтому пока не стоит использовать его в продакшене: вероятно, будет много критических изменений.
А пока PyScript развивается, мы поможем прокачать ваши навыки или с самого начала освоить профессию, актуальную в любое время:
Гайд Web-интерфейс для Python
Хаю-хай с вами ивангай, порылся на bh и вроде бы не нашёл данного гайда/информации, поэтому решил написать свой крутой красивый прикальдесный гайд как приклеить веб-интерфейс к мозгам на питоне, если такая тема уже есть, не надо пожалуйста проявлять агрессию в мою сторону пж, заранее спасибо.
В этом гайде я разжую вам как можно соединить языки разметки гипертекста(html,css) и язык программирования/бэкэнда "Python" на простых словах — html/css — тело, python — мозги. Так же хочу сразу сказать, в этом гайде я не буду писать какую либо программу, а вот в следующем гайде мы будем писать красивое крутое приложение с показом погоды, или какой нибудь плеер, это лишь вводный гайд по теме веб-интерфейса и python, тк такую вещь как DevelNext не каждый может понять.
Что нам нужно:
1. Python, скачать(клик) можно с официального сайта, качаем последнею версию для вашей винды или другой ос, думаю про разрядность системы не стоит упоминать.
2. Библиотека EEL, pip install eel — на простых словах — крутая вещь для связи веб интерфейса и python.
3. Библиотека PyInstaller, pip install pyinstaller — на простых словах — чтобы скинуть вашу приколюху вашему другу без заморочки с установкой питона.
4. Иметь представление, хотя бы чуть чуть об гипертекстовых языках — css/html — на простых словах, html — абсолютно все, что вы видите в интернете, css — одежда для сайта(цвета,формы, размеры и тд.)
5. Уметь пользоваться компьютером и не путаться среди 2х папок в папке.
Итак начнём. После установки питона, открываем командную строку на Windows это сочетание Win+R, по русски — кнопка с квадратами + англ. R или рус. К.
Готово, командная строка у нас открыта, я же буду использовать эмулятор командной строки, потому что — потому. Он ничем не отличается от обычной кроме наличия некоторых удобств и функций.
Перед вами примерно такая картина:
Заходим на любой нужный диск и создаём там папку где и будет хранится наше приложение, я же буду использовать диск "C".
Затем прописываем в командной строке "cd c:/python/program" ПО РУССКИ — cd (ваш диск):/ваша папка/файл или еще 1 папка где будет сама программа.
В моём же случаи, программа будет храниться на диске C в папке python и в папке program. Думаю понятно объяснил.
Если видим такую ситуацию как ниже, то я вас поздравляю, вы в директории вашей будущей программы.
Как надо:
Теперь создаём в этой папке 1 текстовый файл и 1 папку.
У текстового файла расширение .txt меняем на .py, если у вас не видно расширения и у вас Windows 10, то в этой же папке, чуть выше нажмите "Вид" ставим галочку "Расширения имен файлов"
Включаем возможность изменять расширения файлов:
Теперь, когда у нас есть .py файл(у меня это who.py) нам нужно создать папку, желательно с каким то нужным названием например: web, interface или что то такое, я же назову "why" так как я показываю вам пример. В папке которая рядом со скриптом создаём файл — название.html, у меня же это who.html, так же сразу там можно создать папку css.
Основная папка:
По русски — здесь у нас так сказать логика/мозги — .py, а в папке тельце для наших мозгов, так сказать сайт с бэкэндом на Python, только это будет приложение.
Папка с интерфейсом:
В файле .html у нас будет основные элементы приложения, а с помощью css мы сделаем его ультра красивым!
Python, играет роль не только как открывашка html,css,js в формате приложения, но и как эффективный язык программирования, паралельно с интерфейсом, например тот же тэг <p> в html мы можем просто заменить оператором "print" в питоне, но это нам не надо, я вижу питон как решение сложных и даже не возможных задач для html.
Сразу решим вопрос с python, открываем наш .py файлик любым текстовым редактором но не блокнотом, я же использую sublime text 2, затем пишем там следующее:
Теперь, при запуске нашей программы у нас будет открываться наше приложение.
Запустить программу через консоль: переходим в директорию с нашей программой, и пишем "python название.py", если у вас есть ошибки в коде — командная строка сообщит об этом и программа не запуститься.
Итак, приложение у нас есть, но что в него запихать? Да всё что угодно, можно запихать туда то же navbar меню, написать его в стиле сайта но это не совсем логично и глупо, можно приклеить тот же калькулятор, считать будет python, а за оформление приложения будут отвечать css и html.
Давайте напишем стандартную структуру html страницы и 1 фразу в нашем приложении.
Давайте запустим наше приложение! Пока мы еще его не скомпилировали в exe, откроем через консоль! Заходим в директорию с нашим творением и пишем — python название.py я же пишу — python who.py.
Если после принта, у вас нету ошибок значит всё прекрасно и приложение успешно запустилось!
Если у вас всё так же, то я готов вас поздравить у вас всё получилось, а те кто знают хотя бы чуть чуть html,css,js уже поняли что можно сделать)
Я же покажу вам лишь несколько интересных вещей только на html, в следующем гайде как я уже сказал будем писать мозги на python, возможно даже и игру.
Итак, наложим красивый гридиентовый фон для нашего приложения!
Открываем папку css и создаём там любой файл с расширением .css, затем вставляем в него:
Фон раздвоился поскольку у нас всего лишь 1 элемент! Нечего страшного, сейчас мы свами подключим библиотеку bootstrap и добавим меню в наше приложение.
Теперь давайте взглянём на наше приложение!
Так оно будет выглядит в полном окне:
А вот так в стандартных размерах или на телефоне с ОС Android:
Опять же полоски, смотрится не очень красиво я согласен, но опять же у нас нечего нету) Давайте добавим тег <audio> и добавим 3 песни в наше приложение, чтобы хоть чем то занять это место, кстати ниже можно сделать информативную штуку как на многих сайтах, честно не знаю как это называется :D.
Создадим в папке с нашим веб-интерфейсом папку "source" и кинем туда 3 трека(просто ради примера), я буду использовать свои любимые.
Как подключить скрипт на python к html странице?
Как подключить скрипт к определённой странице в OpenCart
Подскажите пожалуйста, как подключить скрипт только к одной странице в OpenCart? И ещё хотелось.
Как дважды подключить один и тоже скрипт на странице?
На странице присутствуют два одинаковых блока (галерея картинок) использующих один и тот же скрипт.
Как подключить к странице еще одну html?
Здравствуйте! Очень прошу помощи! Суть в том, что у меня многостраничный сайт и на всех страницах.
Как подключить JavaScript к HTML странице и заставить работать?
Здравствуйте форумчане! Мне нужно отобразить математические формулы с помощью скрипта.
Загрузка...
