Como usar Pyscript para criar aplicativos da Web em Python

Ao considerar o desenvolvimento web, provavelmente você pensa automaticamente em JavaScript. Há um bom motivo para isso, já que JS é uma das linguagens mais populares do mercado. Uma das razões pelas quais o JavaScript é tão popular é que ele pode ser executado nativamente em um navegador da web, portanto, não são necessários tempos de execução extras.

Mas então veio o WebAssembly, que é uma linguagem semelhante a assembly de baixo nível que usa um formato binário compacto e desempenho quase nativo para permitir que linguagens como C, C++, Rust e Python sejam executadas na web.

Isso não significa, entretanto, que você pode simplesmente escrever código Python tradicional e executá-lo em um navegador da web. Para que isso aconteça, você precisa usar PyScript. Com a ajuda do PyScript, você pode desenvolver frontends ricos com Python para a web e até mesmo fazer uso de vários módulos Python, como NumPy.

PyScript fornece uma API simples e limpa, componentes conectáveis ​​e extensíveis e suporte estendido para HTML. Embora o PyScript não tenha a intenção de substituir o JavaScript, é um ótimo complemento para o seu kit de ferramentas de desenvolvedor.

Quero mostrar como o PyScript torna isso possível, demonstrando como criar um simples Hello, World! aplicativo que é executado em um navegador da web.

O que você precisará

Vou demonstrar isso em uma instância do Ubuntu Server 22.04, assim você terá um servidor web Apache à sua disposição. Você também precisará de um editor de texto e de um navegador da web. Para instalar o Apache, você também precisará de um usuário com privilégios sudo.

É isso. Vamos ao trabalho.

Instalando o Apache

A primeira coisa que faremos é instalar o Apache. Para fazer isso, faça login em sua instância do Ubuntu Server e emita o seguinte comando:

sudo apt-get install apache2 -y

Quando o comando acima terminar, o Apache deverá estar instalado e funcionando. Você pode verificar isso abrindo um navegador da web e apontando para http://SERVER (onde SERVER é o endereço IP do servidor de hospedagem). Você deverá ver a página de boas-vindas do Apache.

Criando seu arquivo HTML

Agora que o servidor está instalado e funcionando, você pode criar o arquivo HTML que abrigará o código PyScript. Primeiro, vamos criar um arquivo HTML básico com o comando:

sudo nano /var/www/html/pyscript.html

O conteúdo do arquivo básico é assim:

Olá, mundo!

Salve e feche o arquivo. Se você apontar seu navegador para http://SERVER/pyscript.html, você verá Olá Mundo! impresso. Isso é ótimo, mas é HTML puro. Como fazemos isso com PyScript?

Vamos abrir o arquivo pyscript.html para edição novamente com:

sudo nano/var/www/html/pyscript.html

A primeira coisa que faremos é vincular o PyScript ao nosso arquivo HTML. Sem essa ligação, nosso arquivo pyscript.html não teria acesso à interface PySript.

Para isso, adicionamos duas linhas na parte inferior da seção . A primeira linha está vinculada a um arquivo CSS de pyscript.net e tem a seguinte aparência:

Se você abrir esse arquivo em seu navegador (com o endereço https://pyscript.net/alpha/pyscript.css), perceberá que é uma folha de estilos bastante longa.

Na próxima linha, adicionaremos links para o arquivo JavaScript pyscript.js, que se parece com isto:

Nossa seção agora se parece com isto:

Finalmente, temos que adicionar o código que irá imprimir o Hello, New Stack! mensagem na página do navegador.

Se você se lembra, o código Python para imprimir uma sequência de caracteres é simplesmente:

print("Hello, New Stack!")

Execute o procedimento acima e você verá a saída correta.

A forma como adicionamos esse código ao nosso arquivo HTML é com a linha:

print(“Olá, nova pilha!!”)

Dentro das tags , usamos as tags para indicar nosso código.

Agora, todo o nosso arquivo HTML fica assim:

print(“Olá, nova pilha!!”)

Salve e feche o arquivo. Atualize a página em seu navegador e você verá o tempo de execução funcionar e, eventualmente, imprimir “Olá, nova pilha!” na página.

Vamos nos divertir. Criaremos um aplicativo web simples que traduz inglês para fala pirata.

Para isso, precisamos criar três arquivos:

• pirate.html – o arquivo principal que inclui nosso código HTML e Pyscript.
• pyscript.json – informa o navegador sobre determinadas configurações do aplicativo.
• main.py – define o comportamento do aplicativo.

Crie o arquivo pirate.html e cole o seguinte conteúdo:

Digite uma frase em inglês e clique em Traduzir

Traduzir

Como você pode ver, vinculamos uma folha de estilo e o núcleo JavaScript na seção e chamamos nossos arquivos main.py e pyscript.json na seção . Também adicionamos uma seção de entrada que permite aos usuários digitar uma frase para ser traduzida.

Crie o arquivo pyscript.json e cole o seguinte conteúdo:

{
“pacotes”: (“arrr”)
}

O que este arquivo faz é chamar arr.py, que é o pacote arr do Python.

Por fim, crie o arquivo main.py e adicione o seguinte:

importação
do documento de importação pyscript

def traduzir_english(evento):
input_text=document.querySelector(“#english”)
inglês = input_text.value
saída_div = document.querySelector(“#saída”)
output_div.innerText = arrr.translate(inglês)

As duas primeiras linhas definem o que estamos importando. O próximo bloco define uma função nomeada traduzir_inglês() que pega o texto inserido e o traduz do inglês para arr speak.

Todos esses três arquivos devem ser colocados no diretório /var/www/html/. Para um projeto maior, você deseja adicioná-los ao seu próprio diretório.

Depois de salvar todos os arquivos, aponte seu navegador para http://SERVER/pirate.html. Você deveria ver Digite uma frase em inglês e clique em Traduzir. Abaixo disso, você encontrará um campo de texto e um botão Traduzir. Digite uma frase e clique em Traduzir e você receberá a tradução do Pirate Speak para a frase digitada.

Arr amigo.

E é assim que você usa PyScript com HTML para criar aplicativos web Python simples.

A postagem Como usar Pyscript para criar aplicativos da Web em Python apareceu pela primeira vez em The New Stack.