Python WebAssembly PyScript и хостинг вебсайта на Azure Static с помощью visual studio code / forpes.ru

Главная
Python WebAssembly PyScript и хостинг вебсайта на Azure Static с помощью visual studio code

Python WebAssembly PyScript и хостинг вебсайта на Azure Static с помощью visual studio code +4

11.08.2022 15:25

zfima 0 1500 Источник

Привет

Сегодня мы создадим небольшое приложение .py и загрузим его в Azure.

Требования: учетная запись Azure + желание узнавать новое и экспериментировать. Также нужен VSCode (бесплатная IDE).

Когда мы закончим, мы получим:

Что мы будем делать?

Общие сведения о WebAssembly (WASM)
Общие сведения о загрузке сайта в Azure

Итак, начнем

WebAssembly (WASM) — можно прочитать здесь или здесь, но вкратце — это возможность писать на языке программирования (Python, Golang, C# и т. д.) прямо в HTML-страницу.

Простая HTML-страница выглядит так:

<!DOCTYPE html>
<html>
<head>
<title>PyScript Example</title>
</head>
<body>
<p>This is a PyScript example.</p>
</body>
</html>

Простой код Python, отображающий график, выглядит так:

import matplotlib.pyplot as plt
import numpy as npx = np.random.randn(n)
y = np.random.randn(n)
x, y = make_x_and_y(n = 1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig

Кто не знаком с этим языком программирования, может прочитать о нем, но хотя бы визуально он выглядит иначе. Я надеюсь :-)

Итак, давайте объединим: HTML и Python!

Откройте VSCode.

Откройте расширения (или нажмите Ctrl Shift X).

Установите расширения: Live Server, AzureStorage.

Создайте новый текстовый файл (или нажмите Ctrl N).

Вставьте следующий текст:

<!DOCTYPE html>
<html lang=”eng”>
<head>
<title>PyScript Example</title>
<link rel=”stylesheet” 
ref=”https://pyscript.net/alpha/pyscript.css" />
<script defer src=”https://pyscript.net/alpha/pyscript.js"></script>
<link 
ref=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap
min.css" rel=”stylesheet” crossorigin=”anonymous”>
<py-env>
- numpy
- matplotlib
</py-env>
</head>
<body>
<h5>PyScript Tests</h5>
<py-script ouput = “plot”>
import matplotlib.pyplot as plt
import numpy as np x = np.random.randn(1000)
y = np.random.randn(1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
</py-script>
<h1> Pyscript REPL</h1>
<br>
<h5>Click ‘Shift Enter’ after line</h5>
<div>
<py-repl id=”my-repl” auto-generate=”true”></py-repl>
</div>
</body>
</html>

Сохраните его как html-файл.

Откройте Command Palette (или нажмите Ctrl Shift P).

Напишите: "Open With Live Server"

В результате вашего кода вы получите страницу браузера, как представленно на верхней картинке

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

Откройте Azure

Перейдите к Azure storage account