как запустить скрипт python в браузере

Запуск Python и python-скрипт на компьютере

Код, написанный на языке Python, может храниться в редакторе кода, IDE или файле. И он не будет работать, если не знать, как его правильно запускать.

В этом материале рассмотрим 7 способов запуска кода, написанного на Python. Они будут работать вне зависимости от операционной системы, среды Python или местоположения кода.

Где запускать Python-скрипты и как?

Python-код можно запустить одним из следующих способов:

Запуск Python-кода интерактивно

Для запуска интерактивной сессии нужно просто открыть терминал или командную строку и ввести python (или python3 в зависимости от версии). После нажатия Enter запустится интерактивный режим.

Вот как запустить интерактивный режим в разных ОС.

Интерактивный режим в Linux

Откройте терминал. Он должен выглядеть приблизительно вот так :

После нажатия Enter будет запущен интерактивный режим Python.

Интерактивный режим в macOS

На устройствах с macOS все работает похожим образом. Изображение ниже демонстрирует интерактивный режим в этой ОС.

Интерактивный режим в Windows

Запуск Python-скриптов в интерактивном режиме

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

Для выхода из интерактивного режима нужно написать следующее:

И нажать Enter. Вы вернетесь в терминал, из которого и начинали.

Есть и другие способы остановки работы с интерактивным режимом Python. В Linux нужно нажать Ctrl + D, а в Windows — Ctrl + Z + Enter.

Стоит отметить, что при использовании этого режима Python-скрипты не сохраняются в локальный файл.

Как выполняются Python-скрипты?

Отличный способ представить, что происходит при выполнении Python-скрипта, — использовать диаграмму ниже. Этот блок представляет собой скрипт (или функцию) Python, а каждый внутренний блок — строка кода.

При запуске скрипта интерпретатор Python проходит сверху вниз, выполняя каждую из них. Именно таким образом происходит выполнение кода.

Но и это еще не все.

Блок-схема выполнения кода интерпретатором

Это набор инструкций, которые приводят к финальному результату.

Иногда полезно изучать байткод. Если вы планируете стать опытным Python-программистом, то важно уметь понимать его для написания качественного кода.

Это также пригодится для принятия решений в процессе. Можно обратить внимание на отдельные факторы и понять, почему определенные функции/структуры данных работают быстрее остальных.

Как запускать Python-скрипты?

Для запуска Python-скрипта с помощью командной строки сначала нужно сохранить код в локальный файл.

Возьмем в качестве примера файл, который был сохранен как python_script.py. Сохранить его можно вот так:

Сохранить скрипт в текстовом редакторе достаточно легко. Процесс ничем не отличается от сохранения простого текстового файла.

Но если использовать командную строку, то здесь нужны дополнительные шаги. Во-первых, в самом терминале нужно перейти в директорию, где должен быть сохранен файл. Оказавшись в нужной папке, следует выполнить следующую команду (на linux):

После нажатия Enter откроется интерфейс командной строки, который выглядит приблизительно следующим образом:

Теперь можно писать код и с легкостью сохранять его прямо в командной строке.

Как запускать скрипт в командной строке?

Источник

Как запустить скрипт на python по URL?

Есть скрипт написаный на python3. Устройство делает http запрос вида 10.0.0.1/search.action (на устройстве запрос настроить нельзя).

На сервере стоит apache и лежит скрипт search.py в DocumentRoot.

При выполнении запроса в браузере вида 10.0.0.1/search.py скрипт отрабатывает и возвращает данные.

Как настроить apache что бы при запросе 10.0.0.1/search.action отрабатывал скрипт search.py?

но в целом редкий случай

Спасибо. Нашел решение по вашей ссылке.

sudo apt install libapache2-mod-wsgi-py3

Не очень хорошая идея запускать питоновский скрипт через CGI. При этом каждый раз запускается заново интерпретатор и такое решение не будет быстрым и эффективным.
Вы могли бы воспользоваться каким-то микрофреймворком вроде flask или bottle, тогда питон будет запущен постоянно, фреймворк будет обрабатывать http запросы на своём порту, а апач вам нужно настроить так, чтобы он проксировал порт питоновского сервиса.

Ещё можно покопаться в описании конфигурации апача и прописать там алиас урла, но это уже костыль, а раз уж вы взялись за костыли, то попробуйте просто переименовать свой скрипт `search.py` в `search.action`, а внутри первой строчкой пропишите шебанг вида: `#!/usr/bin/python3`
Должно помочь. Я уже давно не пользуюсь апачем и не уверен, что он не смотрит по расширению чем запускать тот или иной срипт. В любом случае прописать правило по аналогии с тем, что там есть в конфиге по поводу `.py` скриптов будет не сложно. Пробуйте.

Но пока, сделал это так

sudo apt install libapache2-mod-wsgi-py3

В итоге наступил на ограничение при загрузки модуля в python. И переделал на flask.

Сергей Паньков, Ошибка возникает периодически в apache при вызове скрипты. Сам скрипт ругается на ошибку загрузки модуля (from lxml import etree).

Все как вы говорили. Вообщем FLASK рулит.

При этом каждый раз запускается заново интерпретатор и такое решение не будет быстрым и эффективным.

Источник

Brython: Python в вашем браузере

Если вы веб‑разработчик, который предпочитает Python, а не JavaScript, то Brython (реализация Python, работающая в браузере) может быть привлекательным вариантом.

JavaScript де‑факто является языком интерфейса веб‑разработки. Сложные механизмы JavaScript являются неотъемлемой частью всех современных интернет‑браузеров и, естественно, побуждают разработчиков кодировать интерфейсные веб‑приложения на JavaScript. Brython предлагает лучшее из обоих миров, делая Python равноправным гражданином в браузере, который имеет доступ ко всем существующим библиотекам JavaScript и API, доступным в браузере.

В этом уроке вы узнаете, как:

Как разработчик Python среднего уровня, знакомый с веб‑разработкой, вы получите максимальную отдачу от этого урока, если у вас также есть некоторые знания HTML и JavaScript. Чтобы освежить в памяти JavaScript, посмотрите Python против JavaScript для Pythonistas.

Содержание

Запуск Python в браузере: преимущества ↑

Хотя JavaScript является повсеместным языком интерфейсной веб‑разработки, к вам могут относиться следующие моменты:

Какова бы ни была причина, многие разработчики предпочли бы альтернативу JavaScript на основе Python для использования возможностей браузера. Запуск Python в браузере дает несколько преимуществ, что позволяет:

Одним из побочных эффектов использования Python в браузере является потеря производительности по сравнению с тем же кодом в JavaScript. Однако, этот недостаток не перевешивает ни одного из перечисленных выше достоинств.

Реализация изоморфной веб‑разработки ↑

Изоморфный JavaScript или Universal JavaScript (универсальный JavaScript), подчеркивает, что приложения JavaScript должны работать как на клиенте, так и на сервере. Предполагается, что серверная часть основана на JavaScript, а именно на сервере Node. Разработчики Python, использующие Flask или Django, также могут применять принципы изоморфизма к Python,при условии, что они могут запускать Python в браузере.

Brython позволяет создавать интерфейс на Python и обмениваться модулями между клиентом и сервером. Например, вы можете поделиться функциями проверки, такими как следующий код, который нормализует и проверяет номера телефонов в США:

Доступ к веб‑API ↑

Интернет-браузеры предоставляют стандартизированные Веб‑API для JavaScript. Эти стандарты являются частью стандарта жизни HTML. Вот некоторые примеры веб‑API:

Brython позволяет не только использовать веб‑API, но и взаимодействовать с JavaScript. С некоторыми веб‑API мы будем работать в следующем разделе.

Библиотеки прототипов и JavaScript ↑

Python часто используется для создания прототипов фрагментов кода, языковых конструкций или более масштабных идей. С Brython эта распространенная практика кодирования становится доступной непосредственно в вашем браузере. Например, вы можете использовать консоль Brython или интерактивный редактор для экспериментов с фрагментом кода.

Откройте онлайн-редактор и введите следующий код:

Вот как работает этот код:

Обратите внимание, что при выполнении этого кода в редакторе Brython блокировка может иметь значение True или False. Он должен иметь значение True, если вы выполняете тот же код в консоли Brython.
Щелкните Выполнить над панелью вывода, чтобы увидеть следующий результат:

Попробуйте изменить язык с fr на es и посмотрите на результат. Коды языков, поддерживаемые этим API, перечислены в документации HelloSalut.

Примечание. HelloSalut — один из общедоступных API-интерфейсов, доступных в Интернете и перечисленных в проекте GitHub Public APIs.

Вы можете изменить фрагмент кода в онлайн-редакторе, чтобы использовать другой общедоступный API. Например, попробуйте получить случайный общедоступный API из проекта Public APIs:

Скопируйте приведенный выше код в онлайн-редактор Brython и нажмите «Выполнить», чтобы отобразить результат. Вот пример в формате JSON:

Поскольку конечная точка получает случайный проект, вы, вероятно, получите другой результат. Дополнительные сведения о формате JSON см. В статье Working With JSON Data in Python (Работа с данными JSON в Python).

Вы можете использовать прототипирование для проверки обычного кода Python, как в интерпретаторе Python. Поскольку вы находитесь в контексте браузера, Brython также предоставляет способы:

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

Обучение студентов Python ↑

Brython — это и компилятор Python, и интерпретатор, написанный на JavaScript. В результате вы можете компилировать и запускать код Python в браузере. Хороший пример этой функции демонстрирует онлайн-редактор, доступный на веб‑сайте Brython.

В онлайн-редакторе Python работает в браузере. Нет необходимости устанавливать Python на машину, нет необходимости отправлять код на сервер для выполнения. Пользователь получает немедленную обратную связь, и такой подход не подвергает серверную часть вредоносным скриптам. Студенты могут экспериментировать с Python на любом устройстве с работающим браузером, например на телефонах или Chromebook, даже при нестабильном подключении к Интернету.

Учет эффективности ↑

На сайте Brython отмечается, что скорость выполнения реализации сопоставима с CPython. Но Brython выполняется в браузере, и ссылка в этой среде — это JavaScript, встроенный в движок браузера. В результате ожидайте, что Brython будет медленнее, чем написанный вручную, хорошо настроенный JavaScript. Brython компилирует код Python в JavaScript, а затем выполняет сгенерированный код. Эти шаги влияют на общую производительность, и Brython не всегда может соответствовать вашим требованиям к производительности. В некоторых случаях вам может потребоваться делегировать выполнение кода JavaScript или даже WebAssembly. Вы увидите, как создавать WebAssembly и как использовать полученный код на Python в разделе, посвященном WebAssembly.

Однако не позволяйте воспринимаемой производительности отвлекать вас от использования Brython. Например, импорт модулей Python может привести к загрузке соответствующего модуля с сервера. Чтобы проиллюстрировать эту ситуацию,откройте консоль Brython и выполните следующий код:

Заметна задержка до появления подсказки (390 мс на тестовой машине). Это связано с тем, что Brython необходимо загрузить uuid и его зависимости, а затем скомпилировать загруженные ресурсы. Однако с этого момента нет задержки при выполнении функций, доступных в uuid. Например, вы можете сгенерировать случайный универсальный уникальный идентификатор, UUID версии 4, с помощью следующего кода:

Вызов uuid.uuid4() генерирует объект UUID, строковое представление которого печатается в консоли. Вызов uuid.uuid4() немедленно возвращается и выполняется намного быстрее, чем первоначальный импорт модуля uuid.

Развлечение ↑

Вы, если ещё читаете сей труд, вероятно, заинтересованы в написании кода Python в браузере. Наблюдение за выполнением кода Python в браузере «щекочет» большинство питонистов, пробуждая веселье от бесконечных возможностей.

Автор Brython, Пьер Кентель и все участники проекта, взяв на себя огромную задачу по обеспечению совместимости этого языка с веб‑браузером, как и вы, помнили об удовольствии от Python.

Чтобы доказать это, вызовите в браузере интерактивную консоль Brython и в командной строке Python введите следующее:

Подобно Python на вашем локальном компьютере, Brython компилирует и выполняет инструкции на лету и печатает The Zen of Python. Это происходит в браузере, и выполнение кода Python не требует какого-либо взаимодействия с внутренним сервером:

Можете попробовать еще одно классическое пасхальное яйцо Python в той же среде браузера со следующим кодом:

В Brython присутствует тот же юмор, который вы найдете в эталонной реализации Python.

Теперь, когда вы знакомы с основами работы с Brython, познакомитесь с более продвинутыми функциями в следующих разделах.

Установка Brython

Поэкспериментировать с онлайн-консолью Brython — хорошее начало, но оно не позволит вам развернуть код Python. Есть несколько различных вариантов установки Brython в локальной среде:

Инструкции для каждого из этих методов приведены ниже, но не стесняйтесь сразу переходить к предпочтительному варианту, если уже приняли решение.

Установка CDN ↑

Content Delivery Network એ (CDN) — это сеть серверов, которая позволяет повысить производительность и скорость загрузки онлайн-контента. Вы можете установить библиотеки Brython из нескольких разных CDN:

Вы можете выбрать эту установку, если хотите развернуть статический веб‑сайт и добавить динамическое поведение на свои страницы с минимальными накладными расходами. Вы можете рассматривать этот вариант как замену jQuery, за исключением использования Python, а не JavaScript.

Чтобы проиллюстрировать использование Brython с CDN, вы воспользуетесь CDNJS. Создайте файл со следующим HTML‑кодом:

Вот ключевые элементы этой HTML‑страницы:

Сохраните файл как index.html, затем дважды щелкните файл, чтобы открыть его в интернет‑браузере по умолчанию. Браузер отображает окно сообщения с надписью «Hello Real Python!» Нажмите ОК, чтобы закрыть окно сообщения:

Чтобы уменьшить размер загружаемого файла, особенно в производственной среде, рассмотрите возможность использования минимизированной версии brython.js:

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

Установка GitHub ↑

Установка GitHub очень похожа на установку CDN, но позволяет реализовать приложения Brython с последней версией разработки. Вы можете скопировать предыдущий пример и изменить URL-адрес в элементе head, чтобы получить следующий index.html:

После сохранения этого файла в локальном каталоге дважды щелкните index.html, чтобы отобразить в браузере ту же страницу, которую вы получили при установке CDN.

Установка PyPI ↑

Пока что вам не нужно было ничего устанавливать в локальной среде. Вместо этого вы указали в HTML‑файле, где браузер может найти пакет Brython. Когда браузер открывает страницу, он загружает файл JavaScript Brython из соответствующей среды, либо из CDN, либо из GitHub. Brython также доступен для локальной установки на PyPI. Установка PyPI для вас, если:

При установке Brython из PyPI устанавливается brython‑cli, где используется командная строка, который можно автоматизировать такие функций, как создание шаблона проекта или упаковка и объединение модулей для упрощения развертывания проекта Brython.

Для получения дополнительных сведений обратитесь к документации по локальной установке, чтобы узнать о возможностях brython‑cli, доступных в вашей среде после установки. brython‑cli доступен только при этом типе установки. Он недоступен, если вы устанавливаете из CDN или с помощью npm. brython‑cli в действии вы увидите позже в этом руководстве.

Перед установкой Brython вы хотите создать виртуальную среду Python для этого проекта.

В Linux или macOS выполните следующие команды:

В Windows вы можете поступить следующим образом:

Вы только что создали специальную среду Python для своего проекта и обновили pip до последней версии.

На следующих шагах вы установите Brython и создадите проект по умолчанию. Команды одинаковы в Linux, macOS и Windows:

Вы установили Brython из PyPI, создали пустую папку с именем web и сгенерировали скелет проекта по умолчанию, выполнив brython‑cli, скопированный в вашу виртуальную среду во время установки.

Для проверки этого недавно созданного веб‑проекта, можете запустить локальный веб‑сервер Python с помощью следующих команд:

При таком подходе файлы JavaScript Brython загружаются непосредственно из вашей локальной среды. Обратите внимание на атрибут src в элементе head index.html:

В HTML‑файле продемонстрированы несколько новых функций Brython:

Оператор используется для добавления дочернего узла к элементу DOM. Вы увидите более подробную информацию об использовании операторов, специфичных для Brython, в DOM API в Brython.

Установка npm ↑

Если вы хорошо разбираетесь в экосистеме JavaScript, то установка npm может вам понравиться. Перед установкой требуются Node.js и npm.

Установка с помощью npm сделает модули JavaScript Brython доступными в вашем проекте, как и любые другие модули JavaScript. После этого вы сможете воспользоваться преимуществами своего любимого инструментария JavaScript для тестирования, упаковки и развертывания интерпретатора и библиотек Brython. Эта установка идеальна, если у вас уже есть существующие библиотеки JavaScript, установленные с npm.

Примечание. Если в вашей системе не установлены Node.js и npm, прочтите оставшуюся часть этого раздела только для информации, так как вы можете спокойно пропустить саму установку. Дальнейшая часть руководства не зависит от метода установки npm для любого из примеров.

Чтобы интегрировать Brython в свой проект, выполните следующую команду:

Вы можете игнорировать предупреждения и отметить, что Brython был добавлен в ваш проект. Для подтверждения откройте package.json и убедитесь, что у вас есть свойство dependencies, указывающее на объект, содержащий запись brython:

Что касается предыдущих примеров, вы можете создать следующий index.html и открыть его в своем браузере. веб‑сервер для этого примера не нужен, потому что браузер может загружать файл JavaScript node_modules/brython/brython.js локально:

Браузер отображает index.html и загружает brython.js из URL-адреса скрипта в index.html. В этом примере вы увидели другой способ установки Brython, который использует преимущества экосистемы JavaScript. В оставшейся части руководства вы напишете код, основанный на установке CDN или установке PyPI.

Обзор вариантов установки Brython ↑

Брайтон одной ногой находится в мире Python, а другой — в JavaScript. Различные варианты установки иллюстрируют эту кросс-технологическую ситуацию. Выберите инсталляцию, которая кажется вам наиболее привлекательной, исходя из вашего опыта.

В следующей таблице приведены некоторые рекомендации:

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

Общие сведения о том, как работает Brython ↑

Тур по различным способам установки Brython дал некоторые общие сведения о том, как работает реализация. Вот краткое изложение некоторых характеристик, которые описаны в этом уроке:

В следующих разделах вы подробнее узнаете, как работает Brython.

Основные компоненты Brython ↑

Ядро Brython содержится в brython.js или brython.min.js, минимизированной версии движка Brython. Оба включают следующие ключевые компоненты:

Вы увидите каждый из этих компонентов в действии, проработав примеры этого урока.

Стандартная библиотека Brython ↑

Теперь, когда у вас есть общее представление об основном файле Brython, brython.js, вы узнаете о его сопутствующем файле brython_stdlib.js.

brython_stdlib.js есть стандартная библиотека Python. По мере создания этого файла Brython компилирует стандартную библиотеку Python в JavaScript и объединяет результат в пакет brython_stdlib.js.
Предполагается, что Brython максимально приближен к CPython, эталонной реализации Python. Для получения дополнительной информации о CPython ознакомьтесь с вашим руководством по исходному коду CPython и внутренним компонентам CPython.

Поскольку Brython работает в контексте веб‑браузера, у него есть некоторые ограничения. Например,браузер не разрешает прямой доступ к файловой системе, поэтому открыть файл с помощью os.open() невозможно. Функции, не относящиеся к веб‑браузеру, могут быть не реализованы. Например, приведенный ниже код работает в среде Brython:

os.unlink() вызывает исключение, поскольку удаление локального файла из среды браузера небезопасно, а API записей файлов и каталогов — это только черновик предложения.

Brython поддерживает только собственные модули Python. Он не поддерживает модули Python, созданные на C, если они не были повторно реализованы в JavaScript. Например, hashlib написан на C в CPython и реализован на JavaScript в Brython. Вы можете ознакомиться со списком модулей в дистрибутиве Brython для сравнения с реализацией CPython.

Вам необходимо включить brython_stdlib.js или brython_stdlib.min.js для импорта модулей из стандартной библиотеки Python.

Brython в действии ↑

На этом этапе вам может быть интересно, как Brython ведет себя в браузере, который знает только о своем движке JavaScript. Повторно используя предыдущие примеры и инструменты, доступные в браузере, вы узнаете о процессе, участвующем в выполнении кода Python в браузере.

В разделе, посвященном установке сервера CDN, вы видели следующий пример:

После загрузки и анализа HTML‑страницы brython() выполняет следующие шаги:

Другой вариант — загрузить код Python из отдельного файла:

В этом случае файл Python будет выглядеть так:

Отделение кода Python от кода HTML — это более чистый подход, который позволяет вам воспользоваться преимуществами и функциональными возможностями редакторов кода. Большинство редакторов поддерживают встроенный JavaScript в HTML, но не поддерживают встроенный Python в HTML.

Внутреннее устройство Brython ↑

В этом разделе более подробно рассматривается процесс преобразования кода Python в JavaScript. Если вас не интересуют эти подробности, пропустите этот раздел, так как он не требуется для понимания остальной части урока. Чтобы проиллюстрировать этот процесс и заглянуть внутрь Brython, выполните следующие действия:

В браузере JavaScript REPL введите и выполните следующий код:

python_to_js() анализирует и компилирует предоставленный код Python в JavaScript, а затем выполняет JavaScript в веб‑браузере. У вас должен получиться следующий результат:

Когда вы создаете приложение Brython, вам не нужно явно вызывать функцию в модуле __BRYTHON__ JavaScript.
Этот пример предназначен только для демонстрации того, как Brython работает за кулисами. Знание __BRYTHON__ может помочь вам прочитать код Brython и даже внести свой вклад в проект по мере того, как вы набираетесь опыта. Это также поможет вам лучше понять исключения, которые могут отображаться в консоли браузера.
Объект JavaScript __BRYTHON__ доступен в глобальной области JavaScript, и вы можете получить к нему доступ с помощью консоли JavaScript браузера.

Использование Brython в браузере ↑

На данный момент у вас достаточно понимания Brython, чтобы работать с более подробными примерами. В этом разделе мы собираемся реализовать калькулятор Base64, чтобы поэкспериментировать в браузере с DOM API и другими функциями, которые обычно доступны только в JavaScript.

Мы начнём с изучения того, как управлять DOM с помощью Python и HTML.

DOM API в Brython ↑

Чтобы поэкспериментировать с манипуляциями с DOM, доступными в Brython, создадим форму для кодирования строки в Base64. Готовая форма будет выглядеть так:

Создайте следующий HTML‑файл и назовите его index.html:

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

Соответствующий код Python, в main.py, выглядит следующим образом:

Код Python показывает определение функций обратного вызова и механизм для управления DOM:

Для управления DOM Brython использует два оператора:

Вы можете увидеть оба оператора в следующем операторе, взятом из display_map() :

Вы можете прочитать приведенный выше код как «добавить к элементу таблицы элемент заголовка таблицы, содержащий элемент строки таблицы, состоящий из двух смежных элементов ячеек данных таблицы. Он отображается в браузере как следующий HTML‑код:

Код HTML показывает вложенную структуру для строки заголовка элемента таблицы. Вот более читаемый формат того же кода:

Чтобы увидеть результат в консоли Brython, вы можете ввести следующий блок кода:

Чтобы выполнить полный код, вам необходимо запустить веб‑сервер. Как и раньше, вы запускаете встроенный веб‑сервер Python в том же каталоге, что и два файла index.html и main.py:

Мы расширим возможности этого примера в разделе Веб‑API браузера, разрешив сохранение данных между перезагрузками страницы.

Импорт в Brython ↑

Вы можете использовать импорт для доступа к модулям Python или модулям Brython, скомпилированным в JavaScript.

Модули Python — это файлы с расширением .py в корневой папке вашего проекта или для пакета Python, во вложенной папке, содержащей файл __init__.py. Чтобы импортировать модули Python в код Brython, вам необходимо запустить веб‑сервер.
Чтобы узнать больше о модулях Python, ознакомьтесь с уроком Архитектура приложений на Python — модули и пакеты.

Чтобы изучить, как импортировать модули Python в код Brython, следуйте инструкциям, описанным в разделе об установке с помощью PyPI, создайте и активируйте виртуальную среду Python, установите Brython и измените index.html следующим образом:

В HTML‑файле выше представлены модули, импортированные из основного движка (браузера), из стандартной библиотеки (sys) и из локального модуля Python (функциональный). Вот содержание function.py:

Если вы попытаетесь открыть index.html из файловой системы в браузере, в консоли браузера появится следующая ошибка:

Для импорта модуля Python требуется запуск локального веб‑сервера. Запустите локальный веб‑сервер и укажите в браузере адрес http://localhost:8000. Вы должны увидеть следующую HTML‑страницу:

При работающем веб‑сервере браузер смог получить модуль function.py при выполнении функции импорта. Результаты обоих значений, sys.version и чисел, вставляются в файл HTML двумя последними строками встроенного скрипта Python и отображаются браузером.

Уменьшить размер импорта ↑

В каталоге проекта из предыдущего примера, чтобы уменьшить размер импортированных модулей JavaScript и предварительно скомпилировать модули Python в JavaScript, вы можете использовать brython-cli с параметром —modules:

Это сгенерирует brython_modules.js, и вы можете изменить элемент заголовка index.html следующим образом:

Строка 4 изменяет исходный источник скрипта с brython_stdlib.js на brython_modules.js.

Открытие index.html в браузере или указание в браузере локального сервера отображает ту же HTML‑страницу. Обратите внимание на следующие моменты:

Примечание. Как и при импорте модуля Python, загрузка модуля Python с элементом сценария HTML требует запуска веб‑сервера. Рассмотрим следующий элемент сценария HTML:

Когда функция Brython выполняется и загружает содержимое скрипта, указывающее на файл Python, он пытается выполнить вызов Ajax, который может быть выполнен только при работающем веб‑сервере. Если вы попытаетесь открыть файл из файловой системы, то в консоли JavaScript браузера отобразится ошибка, подобная следующей:

IOError: невозможно загрузить внешний скрипт в file:///project/main.py
(Вызовы Ajax не поддерживаются протоколом file:///)

Защита безопасности предотвращает загрузку main.py из локальной файловой системы. Вы можете решить эту проблему, запустив локальный файловый сервер. Дополнительные сведения об этом поведении см. В документации Brython.

Взаимодействие с JavaScript ↑

JavaScript ↑

Вы можете увидеть предупреждение в действии в следующих трех примерах, запущенных в консоли Brython, а не в стандартной оболочке интерпретатора CPython:

Или вы можете использовать окно:

Или вы можете написать так:

Вот основные модули Brython, обеспечивающие доступ к функциям JavaScript:

Помимо функций JavaScript и API-интерфейсов, доступных в браузере, вы также можете получить доступ к написанным вами функциям JavaScript. В следующем примере показано, как получить доступ к пользовательской функции JavaScript из Brython:

Вот как это работает:

Вы можете использовать ту же функцию для доступа к библиотекам JavaScript. Вы увидите, как это сделать, в разделе Web UI Framework, где вы будете взаимодействовать с Vue.js, популярным фреймворком веб‑интерфейса.

Веб‑API браузера ↑

Браузеры предоставляют веб‑API, к которым вы можете получить доступ из JavaScript, а Brython имеет доступ к тем же API. В этом разделе расширим возможности калькулятора Base64 для хранения данных между перезагрузками страницы браузера.

Вы можете получить доступ ко всем функциям веб‑API из браузера и других подмодулей. Документация высокого уровня по доступу к веб‑API доступна в документации Brython. Для получения дополнительной информации вы можете обратиться к документации по веб‑API и использовать консоль Brython для экспериментов с веб‑API.

Вы можете проверить оба варианта в онлайн-консоли. Использование window.btoa() будет работать только в контексте Brython, тогда как base64.b64encode() может выполняться с помощью обычной реализации Python, такой как CPython. Обратите внимание, что в версии CPython base64.b64encode() принимает массив байтов в качестве типа аргумента, тогда как JavaScript window.btoa() принимает строку.

Если производительность вызывает беспокойство, рассмотрите возможность использования версии JavaScript.

Структура веб‑интерфейса ↑

Популярные JavaScript-фреймворки UI, такие как Angular, React, Vue.js или Svelte, стали важной частью набора инструментов фронтенд-разработчика, и Brython легко интегрируется с некоторыми из этих фреймворков. В этом разделе мы создадим приложение, используя Vue.js версии 3 и Brython.

Приложение, которое мы создадим, представляет собой форму, которая вычисляет hash એ строки. Вот скриншот работающей HTML‑страницы:

Тело HTML‑страницы декларативно определяет привязки и шаблоны:

Если вы не знакомы с Vue, ниже вы быстро расскажете о некоторых вещах, но не стесняйтесь обращаться к официальной документации за дополнительной информацией:

Соответствующий код Python описывает Vue и прилагаемую бизнес-логику:

Декларативный характер Vue.js отображается в файле HTML с директивами и шаблонами Vue. Это также продемонстрировано в коде Python с объявлением компонента Vue в строке 11 и строках 28–35. Этот декларативный метод связывает значения узлов DOM с данными Vue, обеспечивая реактивное поведение фреймворка.

В Python для доступа к полям объекта Vue необходимо обратиться к объекту Vue с помощью javascript.this() :

Если это введение Vue в сочетании с Brython вызвало у вас интерес, тогда вы можете посмотреть проект vuepy, который предоставляет полные привязки Python для Vue.js и использует Brython для запуска Python в браузере.

WebAssembly ↑

В следующем примере, демонстрирующем способ использования WebAssembly, вы реализуете функцию в Rust и вызываете ее из Python.

Это не является исчерпывающим руководством по Rust. Это только царапает поверхность. Для получения дополнительных сведений о Rust ознакомьтесь с документацией по Rust.

Начните с установки Rust с помощью rustup. Для компиляции файлов Wasm вам также необходимо добавить цель wasm32:

Создайте проект с помощью Cargo, который устанавливается при установке Rust:

Приведенная выше команда создает скелет проекта в папке с именем op. В этой папке вы найдете Cargo.toml, файл конфигурации сборки Rust, который вам нужно изменить, чтобы указать, что вы хотите создать динамическую библиотеку. Это можно сделать, изменив файл следующим обрахом:

Измените src/lib.rs, заменив его содержимое следующим:

В корне проекта, где находится Cargo.toml, скомпилируйте свой проект:

Затем создайте веб‑каталог со следующим index.html:

Строка 6 выше загружает следующий файл main.py из того же каталога:

В том же веб‑каталоге скопируйте op.wasm из target/wasm32-unknown-unknown/debug/op.wasm:

Макет папки проекта выглядит так:

Это показывает структуру папок проекта Rust, созданного с помощью Cargo new. Для наглядности цель частично опущена.

Теперь запустим сервер в сети:

Наконец, укажите в своем интернет‑браузере http://localhost:8000. Ваш браузер должен отобразить страницу, подобную следующей:

В этом проекте показано, как создать WebAssembly, который можно использовать из JavaScript или Brython. Из-за значительных накладных расходов, связанных с созданием файла Wasm, это не должно быть вашим первым подходом к решению конкретной проблемы.

Если JavaScript не соответствует вашим требованиям к производительности, возможно, вам подойдет Rust. В основном, это полезно, если у уже есть код Wasm для взаимодействия: либо ваш код, либо существующие библиотеки Wasm.

Применение асинхронной разработки в Brython ↑

Представьте себе такую ​​технику, в которой сначала выполняется А, B будет вызван, но не выполнен немедленно, а затем будет выполнен C. Вы можете думать о B как об обещании быть выполненным в будущем. Поскольку B не блокируется, он считается асинхронным. Дополнительные сведения об асинхронном программировании можно найти в статье Приступая к работе с асинхронными функциями в Python. JavaScript является однопоточным и полагается на асинхронную обработку, в частности, когда задействованы сетевые коммуникации. Например, для получения результата API не требуется блокировать выполнение других функций JavaScript.

С Brython у вас есть доступ к асинхронным функциям через ряд компонентов:

Promise JavaScript в Brython ↑

Вот пример, показывающий, как использовать объект JavaScript Promise из Brython. Вы можете работать с этим примером в онлайн-консоли:

В веб‑консоли вы можете сразу увидет, как выполняется код Python:

В приведенном выше примере тайм-аут искусственно имитирует длительную функцию. Реальное использование обещания может включать сетевой вызов. Через 3 секунды Promise успешно завершается со значением «Будущее сообщение».

Вы можете увидеть результат успешного выполнения обещания на подобном изображении:

Когда вы запускаете код в консоли, вы можете видеть, что сначала создается объект Promise, а затем, по истечении тайм-аута, отображается окно сообщения.

Ajax в Brython ↑

Чтобы вызвать HTTP GET асинхронно, вызовите ajax.get() следующим образом:

Чтобы получить API в режиме блокировки, установите для параметра блокировки значение True:

Следующий код показывает разницу между блокирующим вызовом Ajax и неблокирующим вызовом Ajax:

Приведенный выше код иллюстрирует оба поведения, синхронное и асинхронное:

Когда вы запустите полный пример и нажмете Async Get и Blocking Get, вы увидите следующий экран:

Асинхронный ввод-вывод в Brython ↑

С asyncio у Python 3.4 появились новые асинхронные возможности. В Python 3.5 асинхронная поддержка была расширена синтаксисом async/await. Из-за несовместимости с циклом событий браузера Brython реализует browser.aio как замену стандартному asyncio.

Сопрограммы

Вы можете использовать run() и sleep() для создания сопрограмм. Чтобы проиллюстрировать поведение сопрограмм, реализованных в Brython, воспользуемся примером сопрограммы из документации CPython:

За исключением первой строки импорта, код такой же, как в документации CPython. Он демонстрирует использование ключевых слов async и await и показывает run() и sleep() в действии:

Сначала выполняется сценарий, затем отображается «hello» и, наконец, отображается «world».

Дополнительные сведения о сопрограммах в Python можно найти в статье «Асинхронный ввод-вывод в Python: полное пошаговое руководство».

Специфические веб‑функции

Чтобы выполнить асинхронный вызов API, как в предыдущем разделе, можyj написать функцию, подобную следующей:

Вот пример того, как вызвать process_get() :

Более полный пример кода показывает, как использовать ключевые слова async и await и как aio.run() и aio.get() дополняют друг друга:

Как и в самых последних версиях Python 3, вы можете использовать ключевые слова async и await :

На снимке экрана показана последовательность шагов, выполняемых после нажатия Async Get. Комбинация использования модуля aio и ключевых слов async и await показывает, как можно использовать модель асинхронного программирования, которую продвигает JavaScript.

Распространение и упаковка проекта Brython
Метод, который вы используете для установки Brython, может повлиять на то, как и где вы можете развернуть свой проект Brython. В частности, для развертывания в PyPI лучше всего сначала установить Brython из PyPI, а затем создать свой проект с помощью brython-cli. Но при типичном веб‑развертывании на частном сервере или у облачного провайдера можно использовать любой метод установки по вашему выбору.

У вас есть несколько вариантов развертывания:

Вы изучите каждый из них в следующих разделах.

Ручное и автоматическое веб‑развертывание ↑

Ваше приложение содержит все статические зависимости CSS, JavaScript, Python и файлы изображений, необходимые для вашего веб‑сайта. Brython является частью ваших файлов JavaScript. Все файлы могут быть развернуты «как есть» у выбранного вами поставщика. Вы можете обратиться к Руководствам по веб‑разработке и автоматизации развертывания Django с помощью Fabric и Ansible для получения подробной информации о развертывании ваших приложений Brython.

Развертывание в PyPI ↑

Следуя инструкциям в разделе по установке из PyPI, выполните следующую команду в своем новом веб‑проекте:

Вы можете протестировать установку этого нового пакета локально следующим образом:

Развертывание в CDN ↑

Создание расширений Google Chrome

Общедоступные расширения доступны в интернет‑магазине Chrome. Учить, устанавливаете расширения Google Chrome из локальных файлов:

Прежде чем приступить к реализации расширения Google Chrome в Brython, вы сначала реализуете версию JavaScript, а затем переведете ее в Brython.

Расширение Hello World в JS ↑

Для начала вы реализуете расширение, которое будет выполнять следующие действия:

На следующем снимке экрана показано это поведение:

В пустой папке создайте файл manifest.json для настройки расширения:

Важным полем для этого примера является всплывающий файл по умолчанию popup.html, который вам также необходимо создать. Для получения информации о других полях и многом другом, вы можете обратиться к документации по формату файла манифеста.

В той же папке создайте файл popup.html, используемый для определения пользовательского интерфейса расширения:

HTML‑файл включает ссылку на бизнес-логику JavaScript расширения и описывает его пользовательский интерфейс:

Также необходимо создать popup.js:

Перед установкой этого расширения выполните следующие действия:

На экране отобразятся ваши установленные в настоящее время расширения, если таковые имеются. Это может выглядеть так:

Чтобы установить новое расширение, вам необходимо выполнить следующие действия:

Если во время установки или выполнения возникают какие-либо ошибки, вы должны увидеть красную кнопку ошибки справа от кнопки удаления карты расширения:

Расширение Hello World в Python ↑

Если вы дошли до этого момента, значит, вы уже выполнили самые сложные шаги, в основном для ознакомления с процессом создания расширения Chrome и его установки. Шаги будут аналогичны с Brython, но с некоторыми отличиями, о которых вы сейчас узнаете.

Файл манифеста будет отличаться,с другим именем расширения и, для удобства, другим описанием:

HTML‑файл также будет иметь несколько обновлений, а именно:

Код HTML очень похож на тот, который вы использовали для создания расширения Chrome в JavaScript. Стоит отметить несколько деталей:

Наконец, вы можете увидеть основную логику этого приложения в следующем коде Python:

После этого вы готовы приступить к установке и тестированию, как и для расширения Chrome для JavaScript.

Тестирование и отладка Brython ↑

Модульные тесты Python ↑

Фреймворки модульного тестирования Python, такие как встроенный unittest и pytest, не работают в браузере. Вы можете использовать эти фреймворки для модулей Python, которые также могут выполняться в контексте CPython. Никакие специфичные для Brython модули, такие как браузер, не могут быть протестированы с такими инструментами из командной строки. Для получения дополнительной информации о модульном тестировании Python, ознакомьтесь с Getting Started With Testing in Python.

Selnium ↑

Модульные тесты JavaScript ↑

Существует множество фреймворков для тестирования, ориентированных на JavaScript, таких как Mocha, Jasmine и QUnit, которые хорошо работают в полной экосистеме JavaScript. Но они не обязательно хорошо подходят для модульного тестирования кода Python, работающего в браузере. Один из вариантов требует глобального доступа к функциям Brython для JavaScript, что противоречит лучшим практикам. Чтобы проиллюстрировать вариант предоставления функции Brython для JavaScript, вы воспользуетесь QUnit, набором модульных тестов JavaScript, который может выполняться автономно в файле HTML:

В одном файле HTML вы написали код Python, код JavaScript и тесты JavaScript для проверки функций на обоих языках, выполняемых в браузере:

Для выполнения модульного теста не нужно запускать веб-сервер. Откройте index.html в браузере, и вы должны увидеть следующее:

Представление функции Python для JavaScript показывает, как можно использовать среду модульного тестирования JavaScript для выполнения Python в браузере. Хотя это возможно для тестирования, в целом не рекомендуется, поскольку может конфликтовать с существующими именами JavaScript.

Отладка в Brython ↑

На момент написания этой статьи не существовало удобных инструментов для отладки вашего приложения Brython. Вы не смогли сгенерировать файл исходной карты, который позволил бы вам выполнять отладку шаг за шагом в инструментах разработки браузера.

Это не должно мешать вам использовать Brython. Вот несколько советов, которые помогут с отладкой и устранением неполадок вашего кода Brython:

Изучение альтернатив Brython

Каждая реализация подходит к проблеме с разных сторон. Brython пытается заменить JavaScript, предоставляя доступ к тому же веб-API и манипуляциям с DOM, что и JavaScript, но с привлекательным синтаксисом и идиомами Python. Он упакован как небольшая загрузка по сравнению с некоторыми альтернативами, которые могут иметь другие цели.

Как сравнить эти фреймворки?

Skulpt ↑

Skulpt компилирует код Python в JavaScript в браузере. Компиляция происходит после загрузки страницы, тогда как в Brython компиляция происходит во время загрузки страницы.

Хотя у него нет встроенных функций для управления DOM, Skulpt очень близок к Brython в своих возможностях. Он включает в себя использование в образовательных целях и полно‑функциональное приложения Python, как показано у Anvil.

Transcrypt ↑

Transcrypt включает инструмент командной строки для компиляции кода Python в код JavaScript. Компиляция считается опережающей (AOT). Полученный код затем можно загрузить в браузер. Transcrypt занимает мало места, около 100 КБ. Это быстро и поддерживает манипуляции с DOM. Отличие от Skulpt и Brython заключается в том, что Transcrypt компилируется в JavaScript перед загрузкой и использованием в браузере с помощью компилятора Transcrypt, что обеспечивает скорость и небольшой размер. Однако, при этом невозможно использовать Transcrypt в качестве платформы для обучения, как и другие платформы.

Pyodide ↑

PyPy.js ↑

PyPy.js использует интерпретатор Python PyPy, скомпилированный в JavaScript с помощью emscripten, что делает его совместимым для работы в браузере.

На текущий момент проекта PyPy.js, представляющий собой большой пакет, около 10 МБ, что совершенно недопустимо для типичных веб-приложений, не развивается. Однако, PyPy.js все еще можно использовать в качестве платформы для изучения Python в браузере, открыв домашнюю страницу PyPy.js.

PyPy.js компилируется в JavaScript с помощью emscripten. Pyodide делает еще один шаг вперед, используя emscripten и Wasm, в частности, для компиляции расширений Python C, таких как NumPy, в WebAssembly.

На момент написания этой статьи PyPy.js не поддерживался. Что-то в том же духе относительно процесса компиляции рассмотрим Pyodide.

Заключение ↑

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

В этом руководстве вы узнали, как:

Опубликовано Вадим В. Костерин

ст. преп. кафедры ЦЭиИТ. Автор более 130 научных и учебно-методических работ. Лауреат ВДНХ (серебряная медаль). Посмотреть больше записей

Источник