Как создать приложение на python через html

Как быстро создать и развернуть веб-приложение на Python

В этой статье речь пойдет о разработке и развертывании простейшего дашборда по COVID-19 с помощью Streamlit. Streamlit — фреймворк, предназначенный для быстрого создания приложений по обработке данных путем развертывания организованного на Python пользовательского интерфейса. Streamlit не требует от разработчика предшествующего опыта (хотя практические навыки, конечно, не помешают).

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

Настройка виртуальной среды

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

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

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

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

Чтобы настроить виртуальную среду, откройте терминал или командную строку. Если работаете на Mac, перейдите к рабочему столу, набрав cd desktop , а для windows это будет cd C:\Users\YOUR PC USERNAME\Desktop . Затем введите mkdir streamlit_project && cd streamlit_project . В каталоге проекта создайте виртуальную среду с помощью python3 -m venv , за которым следует любое название. Обычно виртуальные среды называют .venv , но в данном примере будет virt_env . Вот как это выглядит:

python3 -m venv virt_env # Mac
python -m venv virt_env # Windows

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

source virt_env/bin/activate # Mac
virt_env\Scripts\activate # WindowsПосле активации вы должны увидеть
(virt_env) .

Создание приложения

Теперь установим streamlit и другие пакеты, которые понадобятся в приложении на Python:

python3 -m pip install streamlit # Mac
python -m pip install streamlit # Windowspython3 -m pip install pandas # Mac
python -m pip install pandas # Windowspython3 -m pip install matplotlib # Mac
python -m pip install matplotlib # Windows

После установки этих пакетов скопируйте и вставьте код из Github-репозитория, сохранив его под именем covid_dashboard.py в каталоге виртуальной среды. Этот файл Python, содержащий приложение streamlit, выполняет две основные задачи.

1) Вычисляет четыре метрики.

2) Строит граф временных рядов новых случаев по штатам.

Объясню каждый раздел более подробно.

@st.cache(allow_output_mutation=True)def load_dataset(): try: df = pd.read_csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv", sep=",") states = list(df['state'].unique()) except: Exception return df, states

Функция load_dataset() извлекает все данные по COVID-19 из аккаунта NYT на Github и создает список штатов США для фильтрации. Важно использовать st.cache над этой функцией, чтобы сохранить весь набор данных в памяти. В таком случае программе не придется перезагружать весь набор данных каждый раз при применении другого фильтра.

def pct_change(data, state, today): 
.

Функция pct_change принимает три аргумента: набор данных по COVID-19, штат, выбранный нами в выпадающем списке и сегодняшнюю дату. Эта функция возвращает словарь с четырьмя метриками (новые случаи, изменение по случаям за 14 дней, новые смерти и изменение по смертям за 14 дней).

def chart_data(data, state): 
.

def chart_data берет набор данных по COVID-19 и выбранный штат из выпадающего списка и возвращает временной ряд данных о новых случаях для выбранного штата.

Переходим к последней части кода (именно здесь вызываются функции, а данные возвращаются и отображаются в приложении). Вызываемая функция load_dataset() создает датафрейм и список штатов США. Затем создаем выпадающий список с помощью st.selectbox , добавляем к нему метку и список штатов. Добавляем логику, когда выпадающий список выбран.

Наконец, streamlit предлагает удобный способ добавления колонок и графов на веб-страницу, создавая более чистый общий формат. Главное преимущество — возможность создавать организованные и отзывчивые HTML-компоненты на чистом Python с минимальным количеством кода.

df, states = load_dataset()state_dropdown = st.selectbox('Select a State', states)if state_dropdown:data_dict = pct_change(df, state_dropdown, today)col1, col2, col3, col4 = st.columns(4)col1.markdown(f"New Cases: ")col2.markdown(f"""14-Day Change: %
""", unsafe_allow_html=True)col3.markdown(f"New Deaths: ")col4.markdown(f"""14-Day Change: %
""", unsafe_allow_html=True)chart_data = chart_data(df, state_dropdown)st.line_chart(chart_data)

Развертывание приложения: начальные шаги

Пока созданное в виртуальной среде приложение streamlit живет только на локальном компьютере. Чтобы поделиться им со всем миром, нужно установить Git и Heroku.

Чтобы установить Git, откройте новое окно командной строки и на Mac введите:

git --version

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

Чтобы установить Heroku на Mac, сначала установите Homebrew (если этого еще не сделали), а затем введите в новом окне терминала:

brew tap heroku/brew && brew install heroku

Если компьютер Mac работает на чипе M1, может произойти ошибка. Для решения проблемы воспользуйтесь страницей поддержки Apple.

Если вы пользователь Windows, используйте следующую ссылку для загрузки Heroku CLI.

После установки этих зависимостей можно опубликовать код на Github. Сначала создайте файл .gitignore , чтобы исключить файл виртуальной среды из репозитория Github, а затем измените его, введя virt_env/ (сохраните файл после внесения изменений):

(virt_env) > touch .gitignore # Mac
(virt_env) > echo.>.gitignore # Windows

Теперь инициализируйте Git в окне командной строки, где активна виртуальная среда, через git:

git init
git add -A
git commit -m "initial commit"

Войдите в аккаунт Github, создайте новый репозиторий, а затем выберите опцию Push an existing repository from the command line. Скопируйте и вставьте фрагмент кода из этой опции в командную строку, где запущена виртуальная среда.

Чтобы завершить этот этап, создайте файл требований с помощью pip freeze. Это сообщит веб-серверу, какие зависимости ему необходимы для успешного запуска приложения.

python -m pip freeze > requirements.txt

Создайте новый файл в каталоге виртуальной среды под названием setup.sh и сохраните в нем следующее:

mkdir -p ~/.streamlit/echo "\[server]\n\headless = true\n\port = $PORT\n\enableCORS = false\n\\n\" > ~/.streamlit/config.toml

Затем создайте Procfile (назовите его просто Procfile ) в каталоге виртуальной среды и сохраните в нем следующее:

web: sh setup.sh && streamlit run covid_dashboard.py

Теперь пришло время добавить файлы requirements.txt , Procfile и setup.sh в репозиторий Github:

git add -A
git commit -m "files for Heroku deployment"
git push -u origin main

Развертывание приложения на Heroku

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

(virt_env) > heroku login
(virt_env) > heroku create

Это создаст случайное url-имя и развернет приложение, что займет 1–2 минуты. Вы должны увидеть в командной строке url, подобный приведенному здесь. Можете скопировать его в свой браузер.

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

Простое руководство по форматированию строк в Python с помощью f-строк
7 расширенных возможностей Python
10 ошибок, которые выдают новичков в Python

Создание простого веб-приложения: шаги и примеры

Интернет и веб-приложения стали неотъемлемой частью современной жизни. Каждый день мы используем множество приложений, работающих через браузеры, чтобы упростить нашу жизнь. Однако многие из нас не задумываются о том, как эти приложения создаются. В этой статье мы рассмотрим, как создать простое веб-приложение и пошагово объясним основные шаги, необходимые для создания такого приложения.

Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

Подготовка к созданию веб-приложения

Первым шагом при создании веб-приложения является выбор языка программирования и фреймворка. Для создания веб-приложения можно использовать множество языков программирования, таких как 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.
    - Создание базового приложения в файле app.py:
    - Создание шаблонов для пользовательского интерфейса в файлах index.html, new_note.html и view_note.html.
    - Запуск приложения:
    Этот пример представляет собой простое веб-приложение, которое позволяет пользователям создавать заметки и просматривать их. Однако, с помощью Flask и Python можно создавать гораздо более сложные приложения с различной функциональностью.
    
    В заключение, создание веб-приложения может быть сложным и трудоемким процессом.
    
    Python & EEL. Делаем просто на Python’е и красиво на JS
    
    Тема красивых интерфейсов была и будет актуальна всегда. Кто-то использует для создания графических приложений C#, кто-то использует Java, кто-то уходит в дебри C++, ну а кто-то извращается с Python, используя tkinter или PyQT. Существуют различные технологии, позволяющие совмещать красоту графических дизайнов, создаваемых на HTML, CSS и JS с гибкостью в реализации логики приложения, которую может дать другой язык. Так вот, для тех, кто пишет на ~~самом лучшем языке программирования~~ Python, есть возможность писать красивые интерфейсы на HTML, CSS и JS и прикручивать к ним логику на Python.
    
    В этой статья я хочу показать на небольшом примере, как же все таки создать простое и красивое десктопное приложение на HTML, CSS, JS и Python. В качестве библиотеки для связи всех компонентов будем использовать EEL.
    
    Установка
    
    Оговорюсь, что я работаю на windows 10 x64.
    
    Для начала установим саму библиотеку выполнив простую команду:
    pip install eel
    После установки одной лишь библиотеки можно начинать наш путь.
    
    Наше приложение будет выглядеть таким образом:
    
    Логика приложения очень простая: при нажатии кнопки “рассчитать” считываются значения в поле для ввода рублей, полученные данные отправляются в Python, где происходит расчет курса валют. Python возвращает нам данные и мы выводим из через JS
    
    Раскидываем по папкам
    
    Разобьем теперь наш проект на модули. В папку “front” будем класть всё, что связано с графической частью нашего приложения. В папку “back” будем помещать все наши исходники на python. Еще создадим папку middle, в которую будем помещать методы, вызываемые из JS (об этом чуть позже). В Главной директории создадим файл main.py, он будет запускать наше приложение.
    
    Логика на Python
    
    В качестве теста реализуем простое приложение конвертер валют (да-да, банально, никому не надо, на гитхабе миллион проектов). Для этого на python установим библиотеку CurrencyConverter:
    pip install currencyconverter
    
    Теперь приступим к написанию логики на python. Реализуем метод, который на вход будет принимать сумму, валюту с которой нам надо перевести и валюту, на которую нам надо перевести. Создадим “convert.py” в директории “back” и запишем в него следующий код:
```
from currency_converter import CurrencyConverter converter = CurrencyConverter() def convert_value(value: float, from_cur: str, to_cur: str): return converter.convert(value, from_cur, to_cur)
```
    Теперь в директории “middle” создадим файл “mid_convert.py” и пропишем следующий код:
```
from back.convert import convert_value import eel @eel.expose def convert_value_py(value:float, from_cur:str, to_cur:str)->float: return convert_value(value, from_cur, to_cur)
```
    Что здесь вообще происходит? Файл “mid_convert.py” будет служит связующим звеном между JS и Python. Декоратор @eel.expose дает нашей программе понять, что функция, описанная ниже, может быть вызвана из JS. Таким образом, любая функция, которую мы в будущем захотим вызывать из JS, должна быть обернута декоратором @eel.expose. Очевидно, что не имеет смысла делать лишних модулей, если у вас простой проект, можно было обернуть декоратором функцию “convert_value” в модуле “convert.py”. В больших проектах разбиение программы на такие слои позволит легче расширять и оптимизировать код.
    
    Подключаем Python к JS
    
    Теперь подключим нашу логику на Python к самому JS. Для этого примера я использую простую страничку, сверстанную чисто при помощи HTML, CSS (или вы можете использовать популярные фреймворки, которые нужны вам для работы с графикой). Первым делом необходимо подключить библиотеку eel к самому JS:
    
    Далее реализуем функционал кнопки “рассчитать”. По нажатию кнопки первым делом необходимо считать значение рублей и пойти по каждой валюте, чтобы перевести значение.
```
async function create_cur_for_rub () < // получаем значение введенных рублей let value_rub = parseFloat(document.getElementById("rub-input").value); // получаем список всех input'ов, в которые надо перевести рубли let list_curs = document.getElementById("list-cur").children; for (let div_cur of list_curs) < // берем название денежной единицы let name_cur = div_cur.getElementsByTagName("span")[0].textContent; // теперь передает значение в Python для обработки let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)(); // выводим на экран полученное значение div_cur.getElementsByTagName("input")[0].value = value_cur; >> document.getElementById("btn-sum").onclick = create_cur_for_rub;
```
    Обратите внимание на строку “let value_cur = await eel.convert_value_py(value_rub, «RUB», name_cur)();”. Важно, что вызов функции из питона происходит в асинхронном режиме, поэтому обязательно необходимо сделать асинхронной ту функцию, в которой есть вызов Python кода. При вызове функции из eel необходимо ставить пару (), где в первые круглые скобки будут передаваться наши аргументы.
    
    Проверим, работает ли.
    
    Как мы видим, все работает.
    
    Запуск программы
    
    Для запуска кода используем файл “main.py”. В нем импортируем библиотеку eel и всё, что мы писали в файле “min_convert.py” для того, чтобы при запуске проекта подтянуть все функции, которые мы оборачивали в eel.expose:
```
import eel from middle.mid_convert import *
```
    Теперь необходимо проинициализировать через eel ту директорию, где лежит front-end нашего приложения. При помощи команды eel.init(args). Далее для запуска самого приложения вызывает метод eel.start(args):
```
if __name__ == '__main__': eel.init('front') eel.start('index.html', mode="chrome", size=(760, 760))
```
    Метод eel.start принимает на вход несколько параметров (подробнее о них см. официальную документацию по eel). Самым интересным параметром является “mode”. При помощи него вы можете запустить свой проект, как в браузере, так и в виде отдельного приложения. Например, вы можете указать параметр “default”, в таком случае приложению будет запускать в браузере по умолчанию. Если у вас стоит google chrome, то указав параметр “mode=chrome” ваша программа откроется в виде отдельного приложения.
    
    Также можно использовать chromium. Для этого скачиваем его с официального сайта. Разархивируем его в какую-нибудь папку и прописываем следующий код в нашем “main.py”:
```
eel.browsers.set_path("chrome", "C:/Users/admin/Documents/chrome-win/chrome.exe") eel.start('index.html', mode="chrome", size=(760, 760))
```
    Вывод
    
    Как мы видим, то создавать красивые десктопные приложения с использованием Python в качестве языка для реализации основной логики не так сложно. Вы можете устанавливать какие угодно библиотеки, реализовать нужный код с использованием Python, а писать красивые интерфейсы на HTML,CSS и JS.
    
    P.S. это моя первая статья на Habr, пишите Ваши пожелания, замечания и отзывы, буду рад увидеть любой комментарий.
    
    Как работать с PyScript — фреймворком для фронтенда на Python
    
    В веб-разработке Python используется в основном на бэкенде с такими фреймворками, как Django и Flask. А сегодня, к старту курса по Fullstack-разработке на Python, расскажем о PyScript, который даёт возможность запускать Python прямо в HTML.
    
    До сих пор Python не имел такой большой поддержки на фронтенде, как другие языки, например JavaScript. Но, к счастью, разработчики Python создали несколько библиотек для поддержки своего любимого языка в браузере, например Brython.
    
    А на конференции PyCon 2022 анонсировали фреймворк PyScript от Anaconda для использования Python в вебе с помощью стандартного HTML. Вот твит о запуске фреймворка:
    
    Нам понадобится
    
    Чтобы писать код по этой статье, вам понадобятся следующие инструменты и знания:
    - любимый текстовый редактор или интегрированная среда разработки;
    - знание 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-файл нужен для отображения текста в браузере с помощью текстового редактора / интегрированной среды разработки:
```
      Title: PyScript  
```
    Привязываем PyScript
    
    После создания HTML-файла в теге нужно указать в нём ссылку на PyScript, чтобы получить доступ к интерфейсу PyScript:
    
    Выводим в браузере
    
    Связав PyScript с HTML-файлом, выводим Hello World с помощью тега , который позволяет запускать многострочные программы на Python и выводить результат выполнения на странице браузера. Помещаем тег внутри тега :
```
  print("Hello, World!") 
```
    Весь код HTML-файла:
```
      Title: PyScript   print("Hello, World!")  
```
    В браузере вы должны увидеть:
    
    Совет: в редакторе VSCode, чтобы перезагружать страницу при обновлении HTML-файла, используйте плагин Live Server.
    
    Другие операции с PyScript
    
    Прикрепляем метки к элементам
    
    В PyScript переменные из кода на Python в HTML передаются с помощью метода write из модуля pyscript, в теге . Используя атрибут id, передаём строки, отображаемые в виде обычного текста.
    
    В методе write принимаются две переменные: значение id и переменная, которая будет предоставлена:
```
     Today is
  import datetime as dt pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))  
```
    Запускаем REPL в браузере
    
    В PyScript код Python запускается и через интерфейс. С помощью тега компонент REPL добавляется на страницу, где пишется выполняемый код:
    
    Мы получим вывод:
    
    Импортируем файлы, модули и библиотеки
    
    Одно из преимуществ PyScript — его гибкость. Здесь можно импортировать локальные файлы, встроенные модули или сторонние библиотеки. Для объявления зависимостей понадобится тег .
    
    Для локальных файлов Python можно поместить код в файл с расширением .py, а пути к локальным модулям указываются в строках вида пути: ключ (YAML) тега .
    
    Создадим файл Python example.py с функциями:
```
from random import randint def add_two_numbers(x, y): return x + y def generate_random_number(): x = randint(0, 10) return x
```
    Импортируем его в HTML с тегом , в :
```
    - paths: - /example.py  Let's print random numbers
 Doe's lucky number is from example import generate_random_number pyscript.write('lucky', generate_random_number())  
```
    Вот что вернётся:
    
    PyScript поддерживает сторонние библиотеки:
```
    - numpy - requests   import numpy as np import requests  
```
    Настраиваем метаданные
    
    С помощью тега в формате YAML можно задать и настроить общие метаданные приложения PyScript. Использовать этот тег можно так:
```
 - autoclose_loader: false - runtimes: - src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js" name: pyodide-0.20 lang: python 
```
    Вот необязательные значения, которые предоставляются :
    - autoclose_loader (логическое значение): если оно false, загрузочный экран-заставка в PyScript не закроется;
    - name (строка): название пользовательского приложения;
    - version (строка): его версия;
    - runtimes (среды выполнения): список конфигураций среды выполнения с полями src, name и lang.
    Заключение
    
    Вы узнали, что такое PyScript и как его использовать в HTML-файлах для запуска кода Python в браузере, а также познакомились с различными операциями и функционалом PyScript. С помощью PyScript проще запускать и выполнять операции Python в вебе. Это отличный инструмент для всех, кому не терпится опробовать Python в Интернете.
    
    PyScript находится на ранних стадиях разработки и активно дорабатывается. Он остаётся на стадии альфа-тестирования и сталкивается с известными проблемами, такими как время загрузки, которое может повлиять на удобство использования (на момент написания этой статьи другие операции не отображались из-за проблем с производительностью). Поэтому пока не стоит использовать его в продакшене: вероятно, будет много критических изменений.
    - Официальный сайт PyScript.
    - Блог Anaconda.
    - Исходный код PyScript.
    - Руководство для начинающих работу с PyScript.
    А пока PyScript развивается, мы поможем прокачать ваши навыки или с самого начала освоить профессию, актуальную в любое время:
    - Профессия Fullstack-разработчик на Python
    - Профессия Data Scientist
    Читать:
    Что то пищит в машине bmw f30