PyScript: Execute O Python No Navegador

Por muito tempo, JavaScript tem sido a linguagem dominante no desenvolvimento front-end devido à sua capacidade de rodar nativamente no navegador e interagir com HTML e CSS através da API DOM. Com o advento do WebAssembly, as coisas começaram a mudar lentamente. Linguagens como Go, Rust, C, C++ e muitas outras agora podem ser executadas no navegador em velocidades quase nativas, e o Python não foi deixado para trás.

Com a introdução do PyScript, os desenvolvedores de front-end agora podem criar front-ends avançados com Python. Além disso, eles também podem acessar o ecossistema Python, que possui módulos científicos úteis, como NumPy , Matplotlib e muitos mais.

Pré-requisitos

Para aproveitar ao máximo este tutorial, você precisará de:

  • Noções básicas de HTML, CSS e JavaScript
  • Familiaridade com a sintaxe do Python
  • Um servidor web. Vamos criar um servidor simples usando Python, portanto, certifique-se de ter o Python instalado em seu sistema
  • Um navegador da web; A documentação do PyScript atualmente recomenda o Chrome

O que é PyScript?

O PyScript é uma estrutura da Web de código aberto que permite criar aplicativos da Web de front-end usando Python. Com o PyScript, você pode incorporar o código Python em HTML ou vincular a um arquivo Python e o código será executado no navegador - sem executar o Python no back-end.

O PyScript foi criado pela Anaconda e foi anunciado publicamente em 30 de abril na PyCon US 2022. No momento da redação, o PyScript está em um estado alfa e está sendo desenvolvido ativamente, portanto, alterações importantes e recursos mais novos são esperados, pois não foi liberado de forma estável ainda.

Como funciona o PyScript?

O PyScript baseia-se no Pyodide , que porta o CPython para o WebAssembly. WebAssembly é um formato binário de baixo nível que permite escrever programas em outras linguagens, que são executados no navegador. Com o CPython no WebAssembly, podemos instalar e executar pacotes Python no navegador, enquanto o PyScript abstrai a maioria das operações do Pyodide, permitindo que você se concentre na criação de aplicativos front-end com Python no navegador.

Configurando sua pasta de projeto para PyScript

Antes de começarmos a usar o PyScript, vamos criar o diretório onde nosso código residirá.

Para isso, abra seu terminal e crie o diretório do projeto usando o mkdircomando no local de sua escolha:

mkdir pyscript_demo

Em seguida, vá para o diretório que você acabou de criar usando o cdcomando:

cd pyscript_demo

Desativando ferramentas de formatação automática como Prettier

Muitas vezes, os desenvolvedores de front-end usam ferramentas de formatação automática como o Prettier em seus editores de texto para formatar o código ao salvar. Embora isso funcione bem para HTML, CSS e JavaScript, isso pode causar problemas no código Python porque o Python é rigoroso quanto ao recuo.

Atualmente, ferramentas de formatação automática como o Prettier não reconhecem a sintaxe PyScript, que tem apenas cerca de dois meses no momento da redação deste artigo. Essas ferramentas formatam automaticamente o código Python como JavaScript, que quebra o recuo do código. Para remediar isso, vamos desabilitar a formatação automática para este diretório por enquanto.

Supondo que você esteja usando o VSCode, podemos desabilitar a formatação automática da seguinte maneira.

No diretório do projeto, crie um .vscodediretório e navegue até o diretório com o seguinte comando.

mkdir .vscode && cd .vscode

Em seguida, crie um settings.jsonarquivo e adicione o seguinte conteúdo:

{
  "editor.formatOnSave": false
}

Com isso, o recurso de formatação automática ao salvar para este diretório foi desabilitado no VSCode e agora estamos prontos para começar a usar o PyScript.

Começando

Agora que nosso diretório está configurado para PyScript, primeiro adicionaremos links para os ativos PyScript compostos por um arquivo CSS e um arquivo JavaScript na <head>seção de uma página HTML.

Depois que os ativos forem adicionados, você poderá usar o PyScript em um arquivo HTML de duas maneiras:

  • PyScript interno : você pode escrever e colocar seu código Python dentro da <py-script>tag em um arquivo HTML. A <py-script>tag pode ser adicionada na tag <head>ou <body>dependendo da sua tarefa em mãos
  • PyScript Externo : Aqui é onde você escreve seu código Python em um arquivo que termina com .pyextensão, que você pode referenciar na <py-script>tag usando o srcatributo

PyScript interno

A maneira mais fácil e rápida de começar a usar o PyScript é incorporar o código Python no arquivo HTML. Vamos fazer isso!

Abra seu editor de texto preferido, crie o hello-world.htmlarquivo e adicione o seguinte conteúdo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello World!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <!-- Put Python code inside the the <py-script> tag -->
    <py-script>print("Hello World!")</py-script>
  </body>
</html>

Na <head>seção, vinculamos ao pyscript.cssarquivo, que contém estilos para componentes visuais do PyScript, REPL, carregador PyScript, etc. Depois, vinculamos ao pyscript.jsarquivo, que configura os recursos necessários para usar o PyScript, como criar tags como <py-script>onde você pode escrever seu código Python.

Na <body>tag, você incorpora o código Python na <py-script>tag. Estamos mantendo as coisas simples por enquanto, então apenas imprimimos Hello Worldpara o usuário.

Certifique-se de salvar seu arquivo na raiz do diretório do seu projeto e abra o hello-world.htmlarquivo no Chrome. Levará alguns segundos para carregar e, depois que a página for carregada, ela será semelhante a esta:

O navegador imprime "Hello, World!"

PyScript Externo

Embora colocar o código Python na <py-script>tag funcione, uma abordagem muito melhor e mais escalável é adicionar o código em um arquivo externo e referenciá-lo no arquivo HTML à medida que você cria mais páginas HTML ou seus scripts ficam maiores.

A seguir estão alguns dos motivos pelos quais você deve considerar o uso do código PyScript em um arquivo externo:

  • O arquivo pode ser armazenado em cache pelo navegador, levando a um desempenho mais rápido
  • Você pode fazer referência ao arquivo em várias páginas, reduzindo a duplicação
  • Seu código Python pode ser formatado com ferramentas como black ou linters Python. Essas ferramentas não funcionam atualmente no código Python incorporado em um arquivo HTML

Para usar o PyScript externamente, criaremos um index.htmlarquivo, um arquivo Python terminando com .pyextensão contendo nosso código Python e, finalmente, referenciaremos o arquivo Python no index.htmlarquivo.

Criando o index.htmlarquivo

Crie um index.htmlarquivo e vincule aos ativos PyScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

O arquivo não está fazendo muito; estamos apenas vinculando aos recursos do PyScript. Para torná-lo mais útil, criaremos um main.pyarquivo onde nosso código Python residirá.

Criando o main.pyarquivo

Vamos criar uma função Python que imprima uma mensagem de saudação.

Em seu editor de texto, crie o main.pyarquivo e adicione o código abaixo:

def greetings(name):
    print(f'Hi, {name}')

greetings('John Doe')

A greetings()função recebe um nameparâmetro e imprime uma mensagem de saudação com o nome armazenado no nameparâmetro. Quando chamamos a greetings()função with John Doecomo argumento, ela imprime hi, John Doe.

Vinculando o main.pyarquivo no arquivo HTML

Agora que você criou o código Python, você fará referência ao main.pyarquivo no index.htmlarquivo.

Abra o index.htmle adicione a linha dentro da <body>tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  // add the following line
  <py-script src="./main.py"></py-script>
  </body>
</html>

A <py-script>tag tem uma srctag, que aceita o caminho do arquivo Python.

Abrindo o index.htmlarquivo no navegador

Agora que tudo está no lugar, vamos abrir o index.htmlno navegador.

No entanto, os navegadores se recusarão a carregar e executar o arquivo Python externo devido ao erro de política Cross-Origin Resource Sharing (CORS) . Para resolver isso, precisaremos usar um servidor. Ainda bem que o Python vem com um servidor web que podemos usar! O servidor não precisa ser criado pelo Python, você pode usar o live-server ou qualquer servidor de sua escolha.

Para criar um servidor, abra o terminal no diretório raiz do seu projeto e execute o seguinte comando:

python -m http.server

Em seguida, abra o Chrome e visite http://0.0.0.0:8000/. O servidor carregará automaticamente o index.htmlarquivo e você verá o seguinte:

O navegador imprime nossa saudação

No restante deste tutorial, faremos referência a um arquivo Python externo, que exigirá o uso de um servidor para evitar erros de CORS e, às vezes, incorporaremos código Python em HTML por questões de brevidade.

Usando o PyScript REPL

O PyScript vem com um Read-Eval-Print Loop (REPL), que você pode usar para experimentar e testar o código Python.

Para usar o REPL, adicione a <py-repl>tag na <body>tag do seu index.htmlarquivo:

<!DOCTYPE html>
  ...
  <body>
  <py-script src="./main.py"></py-script>
  // add the following tag
  <py-repl></py-repl>
  </body>
</html>

Com o servidor ainda em execução, visite http://0.0.0.0:8000/. Você verá uma nova seção onde você pode inserir o código Python.

Você pode importar módulos, avaliar expressões, criar funções e fazer muitas outras coisas. Para ver o que uma expressão avalia, você precisa clicar no ícone verde Reproduzir .

A imagem a seguir mostra algumas das operações que você pode fazer:

O PyScript REPL no navegador

Agora que já sabemos como usar um REPL, a seguir vamos aprender como criar e usar módulos em PyScript.

Usando módulos Python no PyScript

Nesta seção, criaremos um módulo Python personalizado e o usaremos em nosso código. Também usaremos módulos da biblioteca padrão do Python, bem como módulos de terceiros.

Para usar módulos, vamos introduzir uma nova tag, <py-env>, que nos permite referenciar módulos ou caminhos de arquivos de módulos.

Criando módulos personalizados

Vamos criar um módulo local contendo duas funções.

Crie um mathslib.pyarquivo no diretório do seu projeto e adicione o código abaixo:

def add(num1, num2):
    return num1 + num2

def subtract(num1, num2):
    return num1 - num2

Aqui criamos duas funções que fazem operações de adição e subtração.

Em seguida, crie um modules.htmlarquivo e adicione o seguinte conteúdo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>local modules</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
 <py-env>
    - paths:
        - mathslib.py
  </py-env> 
  <py-script>
from mathslib import subtract
print(subtract(8, 4))
  <py-script>
  </body>
</html>

Na <body>tag, usamos a <py-env>tag, que aceita uma lista YAML que tem pathscomo chave. O mathslib.pyé o caminho do arquivo do módulo personalizado em relação ao modules.htmlarquivo. Depois que o caminho para o módulo personalizado for especificado, o PyScript importará o módulo no arquivo.

Com o módulo carregado, na <py-script>tag, importamos a subtract()função mathslib.pye invocamos a função com os argumentos 8e 4.

Com o servidor rodando, acesse http://0.0.0.0:8000/modules.htmle você verá uma página parecida com esta:

O resultado da nossa função de subtração

Importando módulos da biblioteca padrão do Python

O PyScript, com a ajuda do Pyodide, fornece acesso a muitos módulos disponíveis na biblioteca padrão do Python que estão prontos para uso, com exceção dos seguintes:

  • tkinter
  • venv
  • banco de dados

Visite a documentação do Pyodide para ver uma lista abrangente. Além disso, observe os módulos incluídos, mas não funcionais, como os módulos de multiprocessamento, encadeamento e soquetes.

Os módulos da biblioteca padrão estão disponíveis no namespace PyScript por padrão; você só precisa importá-los para usá-los no arquivo.

Ainda no modules.htmlarquivo, modifique o código Python na <py-script>tag para gerar um número aleatório usando o randommódulo:

from mathslib import subtract
import random
print(subtract(8, 4))
print("random number generated: ")
print(random.randint(1, 12))

Agora visite a http://0.0.0.0:8000/modules.htmlpágina e você verá um número aleatório gerado cada vez que atualizar a página:

O resultado de nossa função de subtração e nosso número gerado aleatoriamente

Usando pacotes de terceiros

Além de usar módulos Python embutidos, você também pode usar bibliotecas de terceiros enviadas no Pyodide, como:

Para obter uma lista completa de pacotes de terceiros suportados, visite a documentação do Pyodide ou fique de olho no repositório GitHub do Pyodide .

Para adicionar um pacote de terceiros, crie um novo arquivo HTML third-party.html, e adicione o seguinte código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>local modules</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <!-- thirdparty dependencies added here -->
 <py-env>
    - numpy 
    - matplotlib
  </py-env> 
  <py-script>
import numpy as np
import matplotlib.pyplot as plt
arr = np.array([1, 2, 3, 4, 5])
plt.plot(arr)
plt
  <py-script>
  </body>
</html>

Na <py-env>tag, adicionamos uma lista de pacotes de terceiros que queremos usar em nosso projeto, que são os pacotes NumPy e Matplotlib. Em seguida, na <py-script>tag, importamos NumPy as npe Matplotlib as plt. Em seguida, chamamos o arraymétodo de NumPy, que cria um array que é armazenado na arrvariável. Depois disso, chamamos o plotmétodo do Matplotlib com o array arrcomo argumento para traçar um gráfico.

Certifique-se de que seu arquivo está salvo e visite a http://0.0.0.0:8000/third-party.htmlpágina. Você deverá ver um gráfico semelhante ao seguinte:

Nosso gráfico de linha de exemplo

Agora que você entende como usar módulos personalizados e embutidos e pacotes de terceiros, aprenderemos como acessar e manipular elementos HTML na próxima seção.

Acessando e manipulando elementos HTML usando PyScript

Nesta seção, aprenderemos como selecionar um elemento HTML usando um ID ou uma classe CSS, modificar um elemento, anexar eventos a um elemento e criar novos elementos usando PyScript.

Usando a Elementclasse

O PyScript é fornecido com a Elementclasse, que permite selecionar um elemento HTML usando seu ID.

Para ver como funciona, crie um elements.htmlarquivo e insira o seguinte conteúdo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Element class</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <ul id="navigation">
    <li class="home">home</li>
    <li class="about">about</li>
    <li class="services">services</li>
    <li class="contact">contact</li></ul>
  </div>
  <div id="output"></div>
  <py-script src="./access-elements.py"></py-script>
  </body>
</html>

Na <body>tag, temos um <ul>elemento com um ID de navigation. Usaremos o ID para selecionar este elemento usando a Elementclasse. A instância selecionada nos dará métodos que podemos usar para selecionar os descendentes e manipulá-los.

Outra tag que usaremos é a <div>com um ID de output. Vamos modificá-lo innerHTMLpara escrever um novo valor. Por fim, após a <div>tag, vinculamos ao access-elements.pyarquivo que conterá nosso código Python. Ele ainda não existe, então vamos em frente e criá-lo.

Depois de criar o access-elements.pyarquivo, adicione o seguinte código a ele:

ul_element = Element("navigation")
first_element = ul_element.select('.home').add_class('first')
second_element = ul_element.select('.about').remove_class('about')
div_element = Element("output")
div_element.write("Value set from PyScript")

No código anterior, usamos a Elementclasse para acessar o <ul>elemento usando o navigationID.

Quando um elemento é selecionado usando a Elementclasse, você pode aproveitar alguns dos seguintes métodos:

  • write(): Define o innerHTMLvalor
  • select(): usa um seletor CSS para encontrar elementos descendentes
  • add_class(): Adiciona uma ou mais classes a um elemento
  • remove_class(): Remove uma ou mais classes de um elemento

Na segunda linha, usamos o select()método para selecionar o primeiro elemento filho do <ul>elemento usando seu nome de classe, home. Após selecionar o filho, chamamos o add_class()método para adicionar uma nova classe firstao <li>elemento.

Na terceira linha, acessamos o segundo elemento filho por seu nome de classe about, e, em seguida, removemos sua classe aboutusando o remove_class()método.

Em seguida, chamamos a Elementclasse com o ID output, que fornece uma referência ao <div>elemento que reside após o ulelemento no elements.htmlarquivo. Por fim, chamamos o write()método com a string Value set from PyScript. O método definirá o valor do <div>elemento innerHTMLpara o argumento de string.

Com o servidor ainda ativo, visite http://0.0.0.0:8000/elements.htmle inspecione o <ul>elemento. Você verá que o primeiro <li>elemento agora tem uma classe extra ( first), o segundo elemento não tem classe e o divelemento agora tem o texto que definimos em Python.

Nosso elemento <ul> quando inspecionado

Anexando eventos a elementos

Agora podemos selecionar elementos HTML e fazer algumas manipulações básicas. Nesta seção, anexaremos um evento click a um elemento e faremos com que o código Python seja executado quando o elemento for clicado.

Crie um events.htmlarquivo e escreva o código abaixo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Adding Events</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <button id="click-btn" class="bg-blue-500 text-white" pys-onClick="handle_click">Click</button>
  <div id="output"></div>
  <py-script src="./event-handlers.py"></py-script>
  </body>
</html>

Na <body>tag, temos um <button>com um classatributo contendo algumas classes que fazem parte do pyscript.cssarquivo. A <button>tag também possui um pys-onclickatributo, que anexa um clickevento ao botão. O pys-onclickatributo aceita o nome da função handle_click, que será a função que será executada quando o botão for clicado.

Em seguida, temos o divelemento com um ID de output. Vamos modificar o elemento innerHTMLcom a handle_clickfunção que definimos.

Por fim, vinculamos ao event-handlers.pyarquivo, que conterá a função do manipulador de eventos.

Vamos definir o event-handlers.pye adicionar o seguinte:

def handle_click(e):
    pyscript.write("output", "you clicked the button")

A handle_clickfunção tem um parâmetro, e, que é um objeto de evento passado automaticamente para a função quando você clica no botão. Dentro da função, invocamos o write()método do PyScript, que recebe dois argumentos: o ID do elemento outpute o valor que queremos escrever, no nosso caso, you clicked the button.

Verifique se o seu servidor está rodando:

python -m http.server

Em seguida, visite o URL http://0.0.0.0:8000/events.htmlno Chrome. Quando a página carregar, clique no botão e uma mensagem dizendo “você clicou no botão” aparecerá:

A saída depois de clicarmos no botão

Usando JavaScript para acessar e manipular o DOM

O PyScript vem com um jsmódulo que dá acesso a métodos JavaScript, como querySelector(), createElement(), appendChild(), etc., para acessar e manipular elementos HTML. Com eles, você poderá misturar JavaScript e Python para fazer uma manipulação legal do DOM. Aqui está um exemplo:

import js

print(js.window.innerHeight)

nav = js.document.createElement("div")
js.document.body.prepend(nav)

js.console.log("nav element created")

Como você pode ver, estamos misturando métodos de código Python como print()JavaScript windowou documentpropriedades.

Nesta seção, focaremos principalmente nos documentmétodos e, convenientemente, o PyScript o disponibiliza no escopo do Python automaticamente. Nem precisaremos importar o jsmódulo para usar os documentmétodos.

Crie um dom.htmlarquivo e adicione o seguinte código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mixing JavaScript and Python</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <ul id="navigation">
  </ul>
  <py-script src="./js-dom.py"></py-script>
  </body>
</html>

Na <body>tag, temos apenas um <ul>elemento vazio com ID de navigation. Em seguida, fazemos referência ao js-dom.pyque conterá nosso código Python.

Crie o js-dom.pyarquivo e adicione o seguinte conteúdo:

nav_parent = document.querySelector('#navigation')
nav_texts = ["home", "about", "services", "contact"]
for text in nav_texts:
    nav_item = document.createElement("li")
    nav_item.textContent = text
    nav_item.className = "nav_element"
    nav_parent.appendChild(nav_item)

Na primeira linha, chamamos o querySelector()método do documentmódulo com #navigationcomo argumento. O método encontrará e retornará um elemento com um ID de navigation, que é o <ul>elemento no dom.htmlarquivo.

Na segunda linha, criamos uma lista de texto de navegação e a armazenamos na nav_textsvariável. Depois disso, iteramos sobre a nav_textslista. Em cada iteração, invocamos o createElement()método com uma string lipara criar um <li>elemento.

Depois disso, adicionamos texto ao <li>elemento usando a textContentpropriedade e adicionamos um nome de classe nav_elementao <li>elemento usando a classNamepropriedade. Finalmente, anexamos o <li>elemento ao <ul>elemento chamando the appendChild()com o nav_itemelemento como argumento.

Certifique-se de que seu arquivo esteja salvo e que o servidor ainda esteja em execução. Visite http://0.0.0.0:8000/dom.htmle você verá uma página semelhante à seguinte:

Uma lista de textos de navegação

Se você cavar mais fundo e inspecionar os elementos, verá que os <li>elementos foram criados com o nome da classe nav_element, que definimos em Python:

Listar itens com a classe `nav_element`

Agora podemos acessar e manipular o DOM usando a Elementclasse, anexar eventos a elementos e usar JavaScript para consultar e modificar o DOM. Em seguida, buscaremos dados de uma API usando PyScript.

Buscando e renderizando dados de uma API

Nesta seção, usaremos o PyScript para enviar uma GETsolicitação a uma API para recuperar dados. A API que usaremos é a Random Data API . Vamos criar um botão com um evento click que executa uma função que chama a API toda vez que o botão é clicado.

Crie um fetch_data.htmlarquivo em seu diretório e adicione o seguinte conteúdo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fetch data from API</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <button id="get-name" class="bg-green-600 text-white" pys-onClick="get_random_name">Generate Random Name</button>
  <div id="output"></div>
  <py-script src="./fetch.py"></py-script>
  </body>
</html>

O código deve ser familiar neste momento. A parte mais importante é a <button>tag, que tem o pys-onClickatributo que aceita a get_random_name()função. A função residirá no fetch.pyarquivo vinculado na parte inferior. Vamos em frente e criar o arquivo.

Em seu editor de texto, crie um novo arquivo chamado fetch.pycom o seguinte conteúdo:

from pyodide.http import pyfetch
import asyncio

async def get_random_name(e): 
    response = await pyfetch(url="https://random-data-api.com/api/name/random_name", method="GET")
    data = await response.json()
    first_name = data.get('first_name')
    middle_name = data.get('middle_name')
    last_name = data.get('last_name') 
    output =  f"Random name: {first_name} {middle_name} {last_name}"
    pyscript.write('output', output)

Na primeira linha, importamos o pyfetch()método do pyodide.httpmódulo, o que nos permite fazer requisições de rede assíncronas. Na segunda linha, importamos o asynciomódulo, que faz parte da biblioteca padrão do Python e fornece as palavras-chave asynce awaitque são úteis para criar funções assíncronas.

Em seguida, definimos uma função assíncrona get_random_name()prefixando-a com a asyncpalavra-chave do asynciomódulo. Dentro da função, invocamos o pyfetch()método que aceita dois argumentos:

  • URL: o ponto de extremidade da API
  • method: especifica o método HTTP que você deseja usar, que é o GETmétodo aqui.

Quando pyfetch()executado, ele retorna um objeto, que é então armazenado na responsevariável. Na linha a seguir, chamamos json()on o responseobjeto para analisar o JSON e retornar um dicionário Python, que é armazenado na datavariável.

Nas próximas linhas, você extrai o nome, o nome do meio e o sobrenome do datadict e os armazena em suas respectivas variáveis. Por fim, concatenamos os nomes usando as strings f do Python e invocamos o pyscript.write()método para escrever os dados no <div>elemento com um ID de output.

Verifique se o seu servidor está funcionando e visite a http://0.0.0.0:8000/fetch_data.htmlpágina. Quando a página carregar, clique no Generate Random Namebotão. Você verá que um novo nome é gerado cada vez que o botão é clicado:

O nome aleatório da API Random Name

Dados persistentes usandolocalStorage

Nesta seção, usaremos o armazenamento local para salvar e recuperar dados. O armazenamento local é um objeto no navegador da Web que pode armazenar dados sem data de expiração. O Python pode usar o armazenamento local importando-o do jsmódulo.

Para usar o armazenamento local, criaremos uma área de texto que permite aos usuários digitar comentários. Se eles quiserem salvar o comentário, eles clicarão em um savebotão que executará uma função que salva os dados no armazenamento local. Toda vez que a página for visitada, os dados serão recuperados do armazenamento local e a área de texto será definida para os dados.

Crie um storage.htmlarquivo e adicione o seguinte conteúdo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Store data in local storage</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <textarea id="comment" class="block border"></textarea>
  <button id="save" class="bg-green-600 text-white"
   pys-onClick="save_comment">Save</button>
  <py-script src="./local-storage.py"></py-script>
  </body>
</html>

Na <body>tag, criamos uma <textarea>tag com um ID comment. Usaremos esse ID para obter uma referência do elemento text area em Python. Em seguida, temos um botão que tem savecomo ID e um evento click que invocará a função save_comment, que ainda não definimos. Por fim, referenciamos o local-storage.py, que conterá nosso código Python. Vamos criar o arquivo agora.

Crie local-storage.pye adicione o seguinte:

from js import localStorage

def save_comment(e):
    text =  Element("comment").value
    localStorage.setItem("comment", text)

if localStorage.getItem("comment"):
    text_area =  Element("comment")
    text_area.write(localStorage.getItem("comment"))

Primeiro, importamos o localStorageobjeto do jsmódulo. Em seguida, definimos a save_comment()função, que recebe ecomo parâmetro. Dentro da função, invocamos a Elementclasse com o ID commentpara obter uma referência de área de texto. Uma vez que o método encontra a área de texto, usamos a valuepropriedade para obter o conteúdo da área de texto e armazenar o valor na textvariável. Na próxima linha, invocamos o setItem()método do localStorageobjeto para salvar o texto do comentário no localStorageobjeto sob a commentchave.

Agora, a save_comment()função só será executada quando o savebotão for clicado. No entanto, procedendo fora da save_comment()função, as linhas que seguem a função serão executadas apenas durante o carregamento da página.

Quando a página é carregada pela primeira vez, usamos a ifinstrução para verificar se o localStorageobjeto possui dados sob a commentchave. Se true, referenciamos a área de texto usando a Elementclasse e armazenamos sua instância na text_areavariável. Em seguida, invocamos o write()método da text_areainstância para atualizar o conteúdo da área de texto com os dados do armazenamento local.

Verifique se o seu servidor está funcionando e visite http://0.0.0.0:8000/storage.html. Digite o texto que desejar e clique no botão Salvar .

Uma área de texto contendo texto

Em seguida, atualize a URL e você verá que a área de texto contém o texto que você salvou na visita inicial.

Nossa área de texto, desta vez preenchida por texto de localStorage

Com isso, agora você sabe como aproveitar o localStorageuso do PyScript. Em seguida, leremos um arquivo no sistema de arquivos usando o PyScript.

Interagindo com o sistema de arquivos

Nesta seção, usaremos o PyScript para ler dados de um arquivo de texto simples no sistema de arquivos local e anexar seu conteúdo ao DOM.

Primeiro, vamos criar um arquivo contendo os dados que queremos ler. No diretório principal do projeto, execute o seguinte comando para criar e mover para um novo diretório:

mkdir data &amp;&amp; cd data

Em seguida, crie um names.txtarquivo e adicione o seguinte conteúdo, que são nomes de frameworks da web Python:

Django
Flask
FastAPI
web2p

Salve o arquivo e volte para a raiz do diretório do seu projeto:

cd ..

Com o arquivo criado, crie um file-system.htmlarquivo em seu editor de texto com o seguinte:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Read data from file system</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
   <py-env>
    - paths:
        - /data/names.txt
  </py-env>
  <ul id="frameworks">
  </ul>
  <py-script src="./read-file.py"></py-script>
  </body>
</html>

Na <py-env>tag, especificamos o caminho para o names.txt, que é relativo ao file-system.htmlcaminho. Em seguida, criamos uma <ul>tag vazia com um frameworksID. Por fim, referenciamos o read-file.py, que definiremos em breve.

Crie um read-file.pycom o seguinte conteúdo:

ul_element = document.querySelector("#frameworks")
with open("names.txt") as f:
    for line in f:
        li_element = document.createElement("li")
        li_element.innerText = line
        ul_element.appendChild(li_element)

Na primeira linha, invocamos o querySelector()método com um seletor de ID #frameworks, que obtém uma referência do <ul>elemento. Na segunda linha, chamamos o open()método com o nome do arquivo names.txte armazenamos o objeto arquivo como f.

Dentro da withinstrução, iteramos sobre cada linha armazenada no objeto de arquivo f. Durante cada iteração, criamos um <li>elemento usando o método documentdo objeto createElement(). Em seguida, definimos o <li>conteúdo do texto para o valor na linevariável usando a innerTextpropriedade da li_elementinstância. Finalmente, acrescentamos o <li>elemento ao <ul>elemento chamando the appendChild()com li_elemento argumento.

Inicie o servidor novamente (se você o parou antes):

python -m http.server

Visite o http://0.0.0.0:8000/file-system.htmlURL e você verá que o conteúdo do arquivo de texto simples é exibido na página:

Uma lista de nomes lidos do arquivo de texto simples

Se você inspecionar os elementos, verá que há quatro <li>elementos que foram anexados ao <ul>elemento.

Uma lista de nomes inspecionados no console

Com isso, agora você pode ler arquivos no sistema de arquivos. Você pode usar a mesma abordagem para ler arquivos CSV e muitos outros formatos de arquivo.

Conclusão

Neste tutorial, aprendemos como usar o PyScript REPL, criar módulos personalizados, usar módulos da biblioteca padrão do Python e importar módulos de terceiros. Também aprendemos como acessar e manipular elementos usando PyScript, fazer solicitações de API, usar localStoragee ler um arquivo de texto simples do sistema de arquivos.

Para explorar mais o PyScript, visite a página inicial do PyScript . Além disso, consulte a página de documentação do Pyodide para saber mais sobre as possibilidades que ele permite no navegador.

Fonte: https://blog.logrocket.com/pyscript-run-python-browser/

#python 

What is GEEK

Buddha Community

PyScript: Execute O Python No Navegador
Grace  Lesch

Grace Lesch

1639778400

PySQL Tutorial: A Database Framework for Python

PySQL 

PySQL is database framework for Python (v3.x) Language, Which is based on Python module mysql.connector, this module can help you to make your code more short and more easier. Before using this framework you must have knowledge about list, tuple, set, dictionary because all codes are designed using it. It's totally free and open source.

Tutorial Video in English (Watch Now)

IMAGE ALT TEXT HERE

Installation

Before we said that this framework is based on mysql.connector so you have to install mysql.connector first on your system. Then you can import pysql and enjoy coding!

python -m pip install mysql-connector-python

After Install mysql.connector successfully create Python file download/install pysql on the same dir where you want to create program. You can clone is using git or npm command, and you can also downlaod manually from repository site.

PyPi Command

Go to https://pypi.org/project/pysql-framework/ or use command

pip install pysql-framework

Git Command

git clone https://github.com/rohit-chouhan/pysql

Npm Command

Go to https://www.npmjs.com/package/pysql or use command

$ npm i pysql

Snippet Extention for VS Code

Install From Here https://marketplace.visualstudio.com/items?itemName=rohit-chouhan.pysql

IMAGE ALT TEXT HERE

Table of contents

Connecting a Server


To connect a database with localhost server or phpmyadmin, use connect method to establish your python with database server.

import pysql

db = pysql.connect(
    "host",
    "username",
    "password"
 )

Create a Database in Server


Creating database in server, to use this method

import pysql

db = pysql.connect(
    "host",
    "username",
    "password"
 )
 pysql.createDb(db,"demo")
 #execute: CREATE DATABASE demo

Drop Database


To drop database use this method .

Syntex Code -

pysql.dropDb([connect_obj,"table_name"])

Example Code -

pysql.dropDb([db,"demo"])
#execute:DROP DATABASE demo

Connecting a Database


To connect a database with localhost server or phpmyadmin, use connect method to establish your python with database server.

import pysql

db = pysql.connect(
    "host",
    "username",
    "password",
    "database"
 )

Creating Table in Database


To create table in database use this method to pass column name as key and data type as value.

Syntex Code -


pysql.createTable([db,"table_name_to_create"],{
    "column_name":"data_type", 
    "column_name":"data_type"
})

Example Code -


pysql.createTable([db,"details"],{
    "id":"int(11) primary", 
     "name":"text", 
    "email":"varchar(50)",
    "address":"varchar(500)"
})

2nd Example Code -

Use can use any Constraint with Data Value


pysql.createTable([db,"details"],{
    "id":"int NOT NULL PRIMARY KEY", 
     "name":"varchar(20) NOT NULL", 
    "email":"varchar(50)",
    "address":"varchar(500)"
})

Drop Table in Database


To drop table in database use this method .

Syntex Code -

pysql.dropTable([connect_obj,"table_name"])

Example Code -

pysql.dropTable([db,"users"])
#execute:DROP TABLE users

Selecting data from Table


For Select data from table, you have to mention the connector object with table name. pass column names in set.

Syntex For All Data (*)-

records = pysql.selectAll([db,"table_name"])
for x in records:
  print(x)

Example - -

records = pysql.selectAll([db,"details"])
for x in records:
  print(x)
#execute: SELECT * FROM details

Syntex For Specific Column-

records = pysql.select([db,"table_name"],{"column","column"})
for x in records:
  print(x)

Example - -

records = pysql.select([db,"details"],{"name","email"})
for x in records:
  print(x)
#execute: SELECT name, email FROM details

Syntex Where and Where Not-

#For Where Column=Data
records = pysql.selectWhere([db,"table_name"],{"column","column"},("column","data"))

#For Where Not Column=Data (use ! with column)
records = pysql.selectWhere([db,"table_name"],{"column","column"},("column!","data"))
for x in records:
  print(x)

Example - -

records = pysql.selectWhere([db,"details"],{"name","email"},("county","india"))
for x in records:
  print(x)
#execute: SELECT name, email FROM details WHERE country='india'

Add New Column to Table


To add column in table, use this method to pass column name as key and data type as value. Note: you can only add one column only one call

Syntex Code -


pysql.addColumn([db,"table_name"],{
    "column_name":"data_type"
})

Example Code -


pysql.addColumn([db,"details"],{
    "email":"varchar(50)"
})
#execute: ALTER TABLE details ADD email varchar(50);

Modify Column to Table


To modify data type of column table, use this method to pass column name as key and data type as value.

Syntex Code -

pysql.modifyColumn([db,"table_name"],{
    "column_name":"new_data_type"
})

Example Code -

pysql.modifyColumn([db,"details"],{
    "email":"text"
})
#execute: ALTER TABLE details MODIFY COLUMN email text;

Drop Column from Table


Note: you can only add one column only one call

Syntex Code -

pysql.dropColumn([db,"table_name"],"column_name")

Example Code -

pysql.dropColumn([db,"details"],"name")
#execute: ALTER TABLE details DROP COLUMN name

Manual Execute Query


To execute manual SQL Query to use this method.

Syntex Code -

pysql.query(connector_object,your_query)

Example Code -

pysql.query(db,"INSERT INTO users (name) VALUES ('Rohit')")

Inserting data


For Inserting data in database, you have to mention the connector object with table name, and data as sets.

Syntex -

data =     {
    "db_column":"Data for Insert",
    "db_column":"Data for Insert"
}
pysql.insert([db,"table_name"],data)

Example Code -

data =     {
    "name":"Komal Sharma",
    "contry":"India"
}
pysql.insert([db,"users"],data)

Updating data


For Update data in database, you have to mention the connector object with table name, and data as tuple.

Syntex For Updating All Data-

data = ("column","data to update")
pysql.updateAll([db,"users"],data)

Example - -

data = ("name","Rohit")
pysql.updateAll([db,"users"],data)
#execute: UPDATE users SET name='Rohit'

Syntex For Updating Data (Where and Where Not)-

data = ("column","data to update")
#For Where Column=Data
where = ("column","data")

#For Where Not Column=Data (use ! with column)
where = ("column!","data")
pysql.update([db,"users"],data,where)

Example -

data = ("name","Rohit")
where = ("id",1)
pysql.update([db,"users"],data,where)
#execute: UPDATE users SET name='Rohit' WHERE id=1

Deleting data


For Delete data in database, you have to mention the connector object with table name.

Syntex For Delete All Data-

pysql.deleteAll([db,"table_name"])

Example - -

pysql.deleteAll([db,"users"])
#execute: DELETE FROM users

Syntex For Deleting Data (Where and Where Not)-

where = ("column","data")

pysql.delete([db,"table_name"],where)

Example -

#For Where Column=Data
where = ("id",1)

#For Where Not Column=Data (use ! with column)
where = ("id!",1)
pysql.delete([db,"users"],where)
#execute: DELETE FROM users WHERE id=1

--- Finish ---

Change Logs

[19/06/2021]
 - ConnectSever() removed and merged to Connect()
 - deleteAll() [Fixed]
 - dropTable() [Added]
 - dropDb() [Added]
 
[20/06/2021]
 - Where Not Docs [Added]

The module is designed by Rohit Chouhan, contact us for any bug report, feature or business inquiry.

Author: rohit-chouhan
Source Code: https://github.com/rohit-chouhan/pysql
License: Apache-2.0 License

#python 

Ray  Patel

Ray Patel

1619510796

Lambda, Map, Filter functions in python

Welcome to my Blog, In this article, we will learn python lambda function, Map function, and filter function.

Lambda function in python: Lambda is a one line anonymous function and lambda takes any number of arguments but can only have one expression and python lambda syntax is

Syntax: x = lambda arguments : expression

Now i will show you some python lambda function examples:

#python #anonymous function python #filter function in python #lambda #lambda python 3 #map python #python filter #python filter lambda #python lambda #python lambda examples #python map

Shardul Bhatt

Shardul Bhatt

1626775355

Why use Python for Software Development

No programming language is pretty much as diverse as Python. It enables building cutting edge applications effortlessly. Developers are as yet investigating the full capability of end-to-end Python development services in various areas. 

By areas, we mean FinTech, HealthTech, InsureTech, Cybersecurity, and that's just the beginning. These are New Economy areas, and Python has the ability to serve every one of them. The vast majority of them require massive computational abilities. Python's code is dynamic and powerful - equipped for taking care of the heavy traffic and substantial algorithmic capacities. 

Programming advancement is multidimensional today. Endeavor programming requires an intelligent application with AI and ML capacities. Shopper based applications require information examination to convey a superior client experience. Netflix, Trello, and Amazon are genuine instances of such applications. Python assists with building them effortlessly. 

5 Reasons to Utilize Python for Programming Web Apps 

Python can do such numerous things that developers can't discover enough reasons to admire it. Python application development isn't restricted to web and enterprise applications. It is exceptionally adaptable and superb for a wide range of uses.

Robust frameworks 

Python is known for its tools and frameworks. There's a structure for everything. Django is helpful for building web applications, venture applications, logical applications, and mathematical processing. Flask is another web improvement framework with no conditions. 

Web2Py, CherryPy, and Falcon offer incredible capabilities to customize Python development services. A large portion of them are open-source frameworks that allow quick turn of events. 

Simple to read and compose 

Python has an improved sentence structure - one that is like the English language. New engineers for Python can undoubtedly understand where they stand in the development process. The simplicity of composing allows quick application building. 

The motivation behind building Python, as said by its maker Guido Van Rossum, was to empower even beginner engineers to comprehend the programming language. The simple coding likewise permits developers to roll out speedy improvements without getting confused by pointless subtleties. 

Utilized by the best 

Alright - Python isn't simply one more programming language. It should have something, which is the reason the business giants use it. Furthermore, that too for different purposes. Developers at Google use Python to assemble framework organization systems, parallel information pusher, code audit, testing and QA, and substantially more. Netflix utilizes Python web development services for its recommendation algorithm and media player. 

Massive community support 

Python has a steadily developing community that offers enormous help. From amateurs to specialists, there's everybody. There are a lot of instructional exercises, documentation, and guides accessible for Python web development solutions. 

Today, numerous universities start with Python, adding to the quantity of individuals in the community. Frequently, Python designers team up on various tasks and help each other with algorithmic, utilitarian, and application critical thinking. 

Progressive applications 

Python is the greatest supporter of data science, Machine Learning, and Artificial Intelligence at any enterprise software development company. Its utilization cases in cutting edge applications are the most compelling motivation for its prosperity. Python is the second most well known tool after R for data analytics.

The simplicity of getting sorted out, overseeing, and visualizing information through unique libraries makes it ideal for data based applications. TensorFlow for neural networks and OpenCV for computer vision are two of Python's most well known use cases for Machine learning applications.

Summary

Thinking about the advances in programming and innovation, Python is a YES for an assorted scope of utilizations. Game development, web application development services, GUI advancement, ML and AI improvement, Enterprise and customer applications - every one of them uses Python to its full potential. 

The disadvantages of Python web improvement arrangements are regularly disregarded by developers and organizations because of the advantages it gives. They focus on quality over speed and performance over blunders. That is the reason it's a good idea to utilize Python for building the applications of the future.

#python development services #python development company #python app development #python development #python in web development #python software development

Art  Lind

Art Lind

1602968400

Python Tricks Every Developer Should Know

Python is awesome, it’s one of the easiest languages with simple and intuitive syntax but wait, have you ever thought that there might ways to write your python code simpler?

In this tutorial, you’re going to learn a variety of Python tricks that you can use to write your Python code in a more readable and efficient way like a pro.

Let’s get started

Swapping value in Python

Instead of creating a temporary variable to hold the value of the one while swapping, you can do this instead

>>> FirstName = "kalebu"
>>> LastName = "Jordan"
>>> FirstName, LastName = LastName, FirstName 
>>> print(FirstName, LastName)
('Jordan', 'kalebu')

#python #python-programming #python3 #python-tutorials #learn-python #python-tips #python-skills #python-development

Art  Lind

Art Lind

1602666000

How to Remove all Duplicate Files on your Drive via Python

Today you’re going to learn how to use Python programming in a way that can ultimately save a lot of space on your drive by removing all the duplicates.

Intro

In many situations you may find yourself having duplicates files on your disk and but when it comes to tracking and checking them manually it can tedious.

Heres a solution

Instead of tracking throughout your disk to see if there is a duplicate, you can automate the process using coding, by writing a program to recursively track through the disk and remove all the found duplicates and that’s what this article is about.

But How do we do it?

If we were to read the whole file and then compare it to the rest of the files recursively through the given directory it will take a very long time, then how do we do it?

The answer is hashing, with hashing can generate a given string of letters and numbers which act as the identity of a given file and if we find any other file with the same identity we gonna delete it.

There’s a variety of hashing algorithms out there such as

  • md5
  • sha1
  • sha224, sha256, sha384 and sha512

#python-programming #python-tutorials #learn-python #python-project #python3 #python #python-skills #python-tips