PyScript: Ejecute Python En El Navegador

Durante mucho tiempo, JavaScript ha sido el lenguaje dominante en el desarrollo de interfaz de usuario debido a su capacidad para ejecutarse de forma nativa en el navegador e interactuar con HTML y CSS a través de la API DOM. Con la llegada de WebAssembly, las cosas comenzaron a cambiar lentamente. Lenguajes como Go, Rust, C, C++ y muchos otros ahora pueden ejecutarse en el navegador a velocidades casi nativas, y Python no se ha quedado atrás.

Con la introducción de PyScript, los desarrolladores de interfaz ahora pueden crear interfaces enriquecidas con Python. Además, también pueden aprovechar el ecosistema de Python, que tiene módulos científicos útiles como NumPy , Matplotlib y muchos más.

requisitos previos

Para aprovechar al máximo este tutorial, necesitará:

Una comprensión básica de HTML, CSS y JavaScript
Familiaridad con la sintaxis de Python
Un servidor web. Crearemos un servidor simple usando Python, así que asegúrese de tener Python instalado en su sistema
Un navegador web; La documentación de PyScript actualmente recomienda Chrome

¿Qué es PyScript?

PyScript es un marco web de código abierto que le permite crear aplicaciones web frontend utilizando Python. Con PyScript, puede incrustar el código de Python en HTML o vincularlo a un archivo de Python y el código se ejecutará en el navegador, sin ejecutar Python en el backend.

PyScript fue creado por Anaconda y se anunció públicamente el 30 de abril en PyCon US 2022. En el momento de escribir este artículo, PyScript se encuentra en un estado alfa y se está desarrollando activamente, por lo que se esperan cambios importantes y características más nuevas ya que no ha sido lanzado establemente todavía.

¿Cómo funciona PyScript?

PyScript se basa en Pyodide , que traslada CPython a WebAssembly. WebAssembly es un formato binario de bajo nivel que le permite escribir programas en otros idiomas, que luego se ejecutan en el navegador. Con CPython en WebAssembly, podemos instalar y ejecutar paquetes de Python en el navegador, mientras que PyScript abstrae la mayoría de las operaciones de Pyodide, lo que le permite concentrarse en crear aplicaciones frontend con Python en el navegador.

Configuración de la carpeta de su proyecto para PyScript

Antes de comenzar a usar PyScript, creemos el directorio donde residirá nuestro código.

Para hacer eso, abra su terminal y cree el directorio del proyecto usando el mkdircomando en la ubicación que elija:

mkdir pyscript_demo

A continuación, acceda al directorio que acaba de crear con el cdcomando:

cd pyscript_demo

Deshabilitar herramientas de formato automático como Prettier

A menudo, los desarrolladores frontend usan herramientas de formato automático como Prettier en sus editores de texto para formatear el código al guardarlo. Si bien esto funciona bien para HTML, CSS y JavaScript, esto puede causar problemas en el código de Python porque Python es estricto con la sangría.

Actualmente, las herramientas de formato automático como Prettier no reconocen la sintaxis de PyScript, que tiene solo dos meses de antigüedad al momento de escribir este artículo. Estas herramientas dan formato automáticamente al código Python como JavaScript, lo que rompe la sangría del código. Para remediar esto, deshabilitaremos el formato automático para este directorio por ahora.

Suponiendo que está utilizando VSCode, podemos deshabilitar el formato automático de la siguiente manera.

En el directorio de su proyecto, cree un .vscodedirectorio y navegue hasta el directorio con el siguiente comando.

mkdir .vscode &amp;&amp; cd .vscode

A continuación, cree un settings.jsonarchivo y agregue los siguientes contenidos:

{
  "editor.formatOnSave": false
}

Con eso, la función de formato automático al guardar para este directorio se ha deshabilitado en VSCode y ahora estamos listos para comenzar a usar PyScript.

Empezando

Ahora que nuestro directorio está configurado para PyScript, primero agregaremos enlaces a los activos de PyScript que comprenden un archivo CSS y un archivo JavaScript en la <head>sección de una página HTML.

Una vez que se han agregado los activos, puede usar PyScript en un archivo HTML de dos maneras:

PyScript interno : puede escribir y colocar su código Python dentro de la <py-script>etiqueta en un archivo HTML. La <py-script>etiqueta se puede agregar en la etiqueta <head>o <body>dependiendo de su tarea en cuestión
PyScript externo : aquí es donde escribe su código de Python en un archivo que termina con .pyla extensión, al que luego puede hacer referencia en la <py-script>etiqueta usando el srcatributo

PyScript interno

La forma más fácil y rápida de comenzar a usar PyScript es incrustar el código de Python en el archivo HTML. ¡Vamos a hacer eso!

Abra su editor de texto preferido, cree el hello-world.htmlarchivo y agregue los siguientes contenidos:

<!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>

En la <head>sección, vinculamos al pyscript.cssarchivo, que contiene estilos para los componentes visuales de PyScript, REPL, el cargador de PyScript, etc. Después de eso, vinculamos al pyscript.jsarchivo, que configura las funciones necesarias para usar PyScript, como crear etiquetas como <py-script>donde puedes escribir tu código Python.

En la <body>etiqueta, inserta el código de Python en la <py-script>etiqueta. Mantenemos las cosas simples por ahora, así que solo imprimimos Hello Worldpara el usuario.

Asegúrese de guardar su archivo en la raíz del directorio de su proyecto y abra el hello-world.htmlarchivo en Chrome. Tardará un par de segundos en cargarse y, una vez que se haya cargado la página, se verá similar a esto:

El navegador imprime "¡Hola, mundo!"

PyScript externo

Si bien funciona poner el código de Python en la <py-script>etiqueta, un enfoque mucho mejor y más escalable es agregar el código en un archivo externo y hacer referencia a él en el archivo HTML a medida que crea más páginas HTML o sus scripts se hacen más grandes.

Las siguientes son algunas de las razones por las que debería considerar usar código PyScript en un archivo externo:

El navegador puede almacenar en caché el archivo, lo que conduce a un rendimiento más rápido
Puede hacer referencia al archivo en varias páginas, lo que reduce la duplicación
Su código de Python se puede formatear con herramientas como negro o linters de Python. Estas herramientas no funcionan actualmente en el código de Python incrustado en un archivo HTML.

Para usar PyScript externamente, crearemos un index.htmlarchivo, un archivo de Python que termine con .pyla extensión que contiene nuestro código de Python, y finalmente haremos referencia al archivo de Python en el index.htmlarchivo.

Creando el `index.html`archivo

Cree un index.htmlarchivo y enlace a los activos de 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>

El archivo no está haciendo mucho; solo estamos vinculando a los recursos de PyScript. Para hacerlo más útil, crearemos un main.pyarchivo donde residirá nuestro código Python.

Creando el `main.py`archivo

Vamos a crear una función de Python que imprima un mensaje de saludo.

En su editor de texto, cree el main.pyarchivo y agregue el código a continuación:

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

greetings('John Doe')

La greetings()función toma un nameparámetro e imprime un mensaje de saludo con el nombre almacenado en el nameparámetro. Cuando llamamos a la greetings()función con John Doecomo argumento, imprime hi, John Doe.

Vincular el `main.py`archivo en el archivo HTML

Ahora que ha creado el código de Python, hará referencia al main.pyarchivo en el index.htmlarchivo.

Abra index.htmly agregue la línea dentro de la <body>etiqueta:

<!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>

La <py-script>etiqueta tiene una srcetiqueta que acepta la ruta del archivo del archivo de Python.

Abriendo el `index.html`archivo en el navegador

Ahora que todo está en su lugar, abriremos el index.htmlen el navegador.

Sin embargo, los navegadores se negarán a cargar y ejecutar el archivo Python externo debido al error de la política de uso compartido de recursos de origen cruzado (CORS) . Para solucionar esto, necesitaremos utilizar un servidor. ¡Qué bueno que Python viene con un servidor web que podemos usar! El servidor no necesita ser creado por Python, puede usar un servidor en vivo o cualquier servidor de su elección.

Para crear un servidor, abra la terminal en el directorio raíz de su proyecto y ejecute el siguiente comando:

python -m http.server

A continuación, abra Chrome y visite http://0.0.0.0:8000/. El servidor cargará automáticamente el index.htmlarchivo y verá lo siguiente:

El navegador imprime nuestro saludo

Para el resto de este tutorial, haremos referencia a un archivo de Python externo, lo que requerirá que usemos un servidor para evitar errores de CORS y, a veces, incrustaremos el código de Python en HTML por razones de brevedad.

Uso de PyScript REPL

PyScript viene con un Read-Eval-Print Loop (REPL), que puede usar para experimentar y probar el código de Python.

Para usar el REPL, agregue la <py-repl>etiqueta en la <body>etiqueta en su index.htmlarchivo:

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

Con el servidor aún en ejecución, visite http://0.0.0.0:8000/. Verá una nueva sección donde puede ingresar el código de Python.

Puede importar módulos, evaluar expresiones, crear funciones y hacer muchas cosas más. Para ver a qué se evalúa una expresión, debe hacer clic en el ícono verde Reproducir .

La siguiente imagen muestra algunas de las operaciones que puede realizar:

PyScript REPL en el navegador

Ahora que sabemos cómo usar un REPL, a continuación aprenderemos cómo crear y usar módulos en PyScript.

Uso de módulos de Python en PyScript

En esta sección, crearemos un módulo Python personalizado y lo usaremos en nuestro código. También usaremos módulos de la biblioteca estándar de Python, así como módulos de terceros.

Para usar módulos, introduciremos una nueva etiqueta, <py-env>que nos permite hacer referencia a módulos o rutas de archivos de módulos.

Creación de módulos personalizados

Vamos a crear un módulo local que contenga dos funciones.

Cree un mathslib.pyarchivo en el directorio de su proyecto y agregue el siguiente código:

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

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

Aquí creamos dos funciones que realizan operaciones de suma y resta.

A continuación, cree un modules.htmlarchivo y agregue los siguientes contenidos:

<!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>

En la <body>etiqueta, usamos la <py-env>etiqueta, que acepta una lista YAML que tiene pathscomo clave. es la mathslib.pyruta del archivo del módulo personalizado en relación con el modules.htmlarchivo. Una vez que se especifica la ruta al módulo personalizado, PyScript importará el módulo en el archivo.

Con el módulo cargado, en la <py-script>etiqueta, importamos la subtract()función desde mathslib.pye invocamos la función con los argumentos 8y 4.

Con el servidor funcionando, visita http://0.0.0.0:8000/modules.htmly verás una página similar a esta:

El resultado de nuestra función de resta

Importación de módulos desde la biblioteca estándar de Python

PyScript, con la ayuda de Pyodide, brinda acceso a una gran cantidad de módulos disponibles en la biblioteca estándar de Python que están listos para que los use, con la excepción de los siguientes:

tkinter
venv
dbm

Visite la documentación de Pyodide para ver una lista completa. Además, tome nota de los módulos que están incluidos pero que no funcionan, como los módulos de multiprocesamiento, subprocesamiento y sockets.

Los módulos de la biblioteca estándar están disponibles en el espacio de nombres de PyScript de forma predeterminada; solo necesita importarlos para usarlos en el archivo.

Todavía en el modules.htmlarchivo, modifique el código de Python en la <py-script>etiqueta para generar un número aleatorio usando el randommódulo:

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

Ahora visite la http://0.0.0.0:8000/modules.htmlpágina y verá un número aleatorio generado cada vez que actualice la página:

El resultado de nuestra función de resta y nuestro número generado aleatoriamente

Uso de paquetes de terceros

Además de usar módulos de Python incorporados, también puede usar bibliotecas de terceros incluidas en Pyodide, como:

NumPy
pandas
pytest
Jinja2
hermosa sopa4
matplotlib
PIL
scikit-aprender

Para obtener una lista completa de los paquetes de terceros admitidos, visite la documentación de Pyodide o esté atento al repositorio de Pyodide GitHub .

Para agregar un paquete de terceros, cree un nuevo archivo HTML third-party.htmly agregue el siguiente 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>

En la <py-env>etiqueta, agregamos una lista de paquetes de terceros que queremos usar en nuestro proyecto, que son los paquetes NumPy y Matplotlib. Luego, en la <py-script>etiqueta, importamos NumPy como npy Matplotlib como plt. Después de esto, llamamos al arraymétodo de NumPy, que crea una matriz que luego se almacena en la arrvariable. Después de eso, llamamos al plotmétodo de Matplotlib con la matriz arrcomo argumento para trazar un gráfico.

Asegúrese de que su archivo esté guardado y visite la http://0.0.0.0:8000/third-party.htmlpágina. Debería ver un gráfico similar al siguiente:

Nuestro gráfico de líneas de ejemplo

Ahora que comprende cómo usar módulos integrados personalizados y paquetes de terceros, aprenderemos cómo acceder y manipular elementos HTML en la siguiente sección.

Acceder y manipular elementos HTML usando PyScript

En esta sección, aprenderemos cómo seleccionar un elemento HTML usando una ID o una clase CSS, modificar un elemento, adjuntar eventos a un elemento y crear nuevos elementos usando PyScript.

usando la `Element`clase

PyScript se envía con la Elementclase, lo que le permite seleccionar un elemento HTML usando su ID.

Para ver cómo funciona, cree un elements.htmlarchivo e inserte los siguientes contenidos:

<!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>

En la <body>etiqueta, tenemos un <ul>elemento con una ID de navigation. Usaremos el ID para seleccionar este elemento usando la Elementclase. La instancia seleccionada nos dará métodos que podemos usar para seleccionar los descendientes y manipularlos.

Otra etiqueta que usaremos es <div>con una ID de output. Modificaremos su innerHTMLpara escribir un nuevo valor. Finalmente, después de la <div>etiqueta, vinculamos al access-elements.pyarchivo que contendrá nuestro código Python. Todavía no existe, así que sigamos adelante y creémoslo.

Una vez que haya creado el access-elements.pyarchivo, agréguele el siguiente código:

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")

En el código anterior, usamos la Elementclase para acceder al <ul>elemento usando la navigationID.

Cuando se selecciona un elemento usando la Elementclase, puede aprovechar algunos de los siguientes métodos:

write(): establece el innerHTMLvalor
select(): utiliza un selector CSS para encontrar elementos descendientes
add_class(): Agrega una o más clases a un elemento
remove_class(): Elimina una o más clases de un elemento

En la segunda línea, usamos el select()método para seleccionar el primer elemento secundario del <ul>elemento usando su nombre de clase, home. Después de seleccionar el elemento secundario, llamamos al add_class()método para agregar una nueva clase firstal <li>elemento.

En la tercera línea, accedemos al segundo elemento secundario por su nombre de clase about, y luego eliminamos su clase aboutusando el remove_class()método.

A continuación, llamamos a la Elementclase con el ID output, que proporciona una referencia al <div>elemento que reside después del ulelemento en el elements.htmlarchivo. Finalmente, llamamos al write()método con la cadena Value set from PyScript. El método establecerá el valor del <div>elemento innerHTMLen el argumento de cadena.

Con el servidor aún activo, visite http://0.0.0.0:8000/elements.htmle inspeccione el <ul>elemento. Verá que el primer <li>elemento ahora tiene una clase adicional ( first), el segundo elemento no tiene clase y el divelemento ahora tiene el texto que configuramos en Python.

Nuestro elemento <ul> cuando se inspecciona

Adjuntar eventos a elementos

Ahora podemos seleccionar elementos HTML y hacer algunas manipulaciones básicas. En esta sección, adjuntaremos un evento de clic a un elemento y haremos que el código de Python se ejecute cuando se haya hecho clic en el elemento.

Cree un events.htmlarchivo y escriba el código a continuación:

<!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>

En la <body>etiqueta, tenemos un <button>con un classatributo que contiene algunas clases que forman parte del pyscript.cssarchivo. La <button>etiqueta también tiene un pys-onclickatributo, que adjunta un clickevento al botón. El pys-onclickatributo acepta el nombre de la función handle_click, que será la función que se ejecutará cuando se haga clic en el botón.

A continuación, tenemos el divelemento con un ID de output. Modificaremos el elemento innerHTMLcon la handle_clickfunción que definamos.

Finalmente, vinculamos al event-handlers.pyarchivo, que contendrá la función del controlador de eventos.

Definamos el event-handlers.pyy agreguemos lo siguiente:

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

La handle_clickfunción tiene un parámetro, eque es un objeto de evento que se pasa automáticamente a la función cuando hace clic en el botón. Dentro de la función, invocamos el write()método de PyScript, que toma dos argumentos: el ID del elemento outputy el valor que queremos escribir, en nuestro caso, you clicked the button.

Asegúrese de que su servidor esté funcionando:

python -m http.server

Luego visite la URL http://0.0.0.0:8000/events.htmlen Chrome. Cuando se cargue la página, haga clic en el botón y aparecerá un mensaje que dice "ha hecho clic en el botón":

Uso de JavaScript para acceder y manipular el DOM

PyScript viene con un jsmódulo que le da acceso a métodos de JavaScript, como querySelector(), createElement(), appendChild(), etc., para acceder y manipular elementos HTML. Con estos, podrá mezclar JavaScript y Python para hacer una manipulación genial del DOM. Aquí hay un ejemplo:

import js

print(js.window.innerHeight)

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

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

Como puede ver, estamos mezclando métodos de código de Python print()junto con JavaScript windowo documentpropiedades.

En esta sección, nos centraremos principalmente en los documentmétodos y, convenientemente, PyScript lo pone a disposición en el alcance de Python automáticamente. Ni siquiera necesitaremos importar el jsmódulo para usar los documentmétodos.

Cree un dom.htmlarchivo y agregue el siguiente 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>

En la <body>etiqueta, solo tenemos un <ul>elemento vacío con una ID de navigation. A continuación, hacemos referencia al js-dom.pyque contendrá nuestro código Python.

Cree el js-dom.pyarchivo y agregue los siguientes contenidos:

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)

En la primera línea, llamamos al querySelector()método del documentmódulo con #navigationcomo argumento. El método encontrará y devolverá un elemento con una ID de navigation, que es el <ul>elemento en el dom.htmlarchivo.

En la segunda línea, creamos una lista de texto de navegación y la almacenamos en la nav_textsvariable. Después de eso, iteramos sobre la nav_textslista. En cada iteración, invocamos el createElement()método con una cadena lipara crear un <li>elemento.

Después de esto, agregamos texto al <li>elemento usando la textContentpropiedad y agregamos un nombre nav_elementde clase al <li>elemento usando la classNamepropiedad. Finalmente, agregamos el <li>elemento al <ul>elemento llamando al appendChild()con el nav_itemelemento como argumento.

Asegúrese de que su archivo esté guardado y que el servidor aún se esté ejecutando. Visite http://0.0.0.0:8000/dom.htmly verá una página similar a la siguiente:

Una lista de textos de navegación.

Si profundiza más e inspecciona los elementos, verá que los <li>elementos se han creado con el nombre de clase nav_element, que configuramos en Python:

Ahora podemos acceder y manipular el DOM usando la Elementclase, adjuntar eventos a elementos y usar JavaScript para consultar y modificar el DOM. A continuación, buscaremos datos de una API usando PyScript.

Obtener y renderizar datos desde una API

En esta sección, usaremos PyScript para enviar una GETsolicitud a una API para recuperar datos. La API que usaremos es la API de datos aleatorios . Crearemos un botón con un evento de clic que ejecuta una función que llama a la API cada vez que se hace clic en el botón.

Cree un fetch_data.htmlarchivo en su directorio y agregue los siguientes contenidos:

<!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>

El código debe ser familiar en este punto. La parte más importante es la <button>etiqueta, que tiene el pys-onClickatributo que acepta la get_random_name()función. La función residirá en el fetch.pyarchivo vinculado en la parte inferior. Sigamos adelante y creemos el archivo.

En su editor de texto, cree un nuevo archivo llamado fetch.pycon los siguientes contenidos:

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)

En la primera línea, importamos el pyfetch()método del pyodide.httpmódulo, lo que nos permite realizar solicitudes de red asíncronas. En la segunda línea, importamos el asynciomódulo, que es parte de la biblioteca estándar de Python y proporciona las palabras clave asyncy awaitque son útiles para crear funciones asíncronas.

A continuación, definimos una función asíncrona get_random_name()prefijándola con la asyncpalabra clave del asynciomódulo. Dentro de la función, invocamos el pyfetch()método que acepta dos argumentos:

URL: El punto final de la API
method: Especifique el método HTTP que desea utilizar, que es el GETmétodo aquí.

Cuando pyfetch()se ejecuta, devuelve un objeto, que luego se almacena en la responsevariable. En la línea que sigue, llamamos json()al responseobjeto para analizar el JSON y devolver un diccionario de Python, que luego se almacena en la datavariable.

En las próximas líneas, extrae el primer nombre, el segundo nombre y el apellido del datadict y los almacena en sus respectivas variables. Finalmente, concatenamos los nombres usando las cadenas f de Python e invocamos el pyscript.write()método para escribir los datos en el <div>elemento con una ID de output.

Asegúrese de que su servidor esté funcionando y visite la http://0.0.0.0:8000/fetch_data.htmlpágina. Una vez que se carga la página, haga clic en el Generate Random Namebotón. Verá que se genera un nuevo nombre cada vez que se hace clic en el botón:

El nombre aleatorio de la API de nombres aleatorios

Persistencia de datos usando`localStorage`

En esta sección, utilizaremos el almacenamiento local para guardar y recuperar datos. El almacenamiento local es un objeto en el navegador web que puede almacenar datos sin fecha de vencimiento. Python puede usar el almacenamiento local importándolo desde el jsmódulo.

Para usar el almacenamiento local, crearemos un área de texto que permita a los usuarios escribir comentarios. Si quieren guardar el comentario, harán clic en un savebotón que ejecutará una función que guarda los datos en el almacenamiento local. Cada vez que se visita la página, los datos se recuperarán del almacenamiento local y el área de texto se configurará para los datos.

Cree un storage.htmlarchivo y agregue los siguientes contenidos:

<!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>

En la <body>etiqueta, creamos una <textarea>etiqueta con un ID comment. Usaremos esta ID para obtener una referencia del elemento del área de texto en Python. A continuación, tenemos un botón que tiene savecomo ID y un evento de clic que invocará la función save_comment, que aún no hemos definido. Finalmente, hacemos referencia al local-storage.py, que contendrá nuestro código de Python. Vamos a crear el archivo ahora.

Crea local-storage.pyy agrega lo siguiente:

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"))

Primero, importamos el localStorageobjeto del jsmódulo. A continuación, definimos la save_comment()función, que toma ecomo parámetro. Dentro de la función, invocamos la Elementclase con el ID commentpara obtener una referencia del área de texto. Una vez que el método encuentra el área de texto, usamos la valuepropiedad para obtener el contenido del área de texto y almacenar el valor en la textvariable. En la siguiente línea, invocamos el setItem()método del localStorageobjeto para guardar el texto del comentario en el localStorageobjeto debajo de la commentclave.

Ahora, la save_comment()función solo se ejecutará cuando se haga clic en el savebotón. Sin embargo, procediendo fuera de la save_comment()función, las líneas que siguen a la función se ejecutarán solo durante la carga de la página.

Cuando la página se carga por primera vez, usamos la ifdeclaración para verificar si el localStorageobjeto tiene datos debajo de la commentclave. Si es verdadero, hacemos referencia al área de texto usando la Elementclase y almacenamos su instancia en la text_areavariable. A continuación, invocamos el write()método de la text_areainstancia para actualizar el contenido del área de texto con los datos del almacenamiento local.

Asegúrese de que su servidor esté funcionando y visite http://0.0.0.0:8000/storage.html. Ingrese cualquier texto que desee y haga clic en el botón Guardar .

Un área de texto que contiene texto

A continuación, actualice la URL y verá que el área de texto contiene el texto que guardó en la visita inicial.

Nuestra área de texto, esta vez poblada por texto de localStorage

Con eso, ahora sabe cómo aprovechar localStorageel uso de PyScript. A continuación, leeremos un archivo en el sistema de archivos usando PyScript.

Interactuando con el sistema de archivos

En esta sección, usaremos PyScript para leer datos de un archivo de texto sin formato en el sistema de archivos local y agregar su contenido al DOM.

Primero, creemos un archivo que contenga los datos que queremos leer. En el directorio de su proyecto principal, ejecute el siguiente comando para crear y moverse a un nuevo directorio:

mkdir data &amp;&amp; cd data

A continuación, cree un names.txtarchivo y agregue los siguientes contenidos, que son nombres de marcos web de Python:

Django
Flask
FastAPI
web2p

Guarde el archivo y vuelva a la raíz del directorio de su proyecto:

cd ..

Con el archivo creado, crea un file-system.htmlarchivo en tu editor de texto con lo siguiente:

<!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>

En la <py-env>etiqueta, especificamos la ruta al names.txt, que es relativa a la file-system.htmlruta. A continuación, creamos una <ul>etiqueta vacía con una frameworksidentificación. Finalmente, hacemos referencia al read-file.py, que definiremos pronto.

Crear un read-file.pycon los siguientes contenidos:

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)

En la primera línea, invocamos el querySelector()método con un selector de ID #frameworks, que obtiene una referencia del <ul>elemento. En la segunda línea, llamamos al open()método con el nombre del archivo names.txty almacenamos el objeto del archivo como f.

Dentro de la withdeclaración, iteramos sobre cada línea almacenada en el objeto de archivo f. Durante cada iteración, creamos un <li>elemento utilizando el método documentdel objeto createElement(). A continuación, establecemos el <li>contenido del texto en el valor de la linevariable usando la innerTextpropiedad de la li_elementinstancia. Finalmente, agregamos el <li>elemento al <ul>elemento llamando a the appendChild()con the li_elementcomo argumento.

Vuelva a iniciar el servidor (si lo detuvo antes):

python -m http.server

Visite la http://0.0.0.0:8000/file-system.htmlURL y verá que el contenido del archivo de texto sin formato se muestra en la página:

Una lista de nombres leídos del archivo de texto sin formato

Si inspecciona los elementos, verá que hay cuatro <li>elementos que se agregaron al <ul>elemento.

Una lista de nombres inspeccionados en la consola

Con eso, ahora puede leer archivos en el sistema de archivos. Puede usar el mismo enfoque para leer archivos CSV y muchos otros formatos de archivo.

Conclusión

En este tutorial, aprendimos a usar PyScript REPL, crear módulos personalizados, usar módulos de la biblioteca estándar de Python e importar módulos de terceros. También aprendimos cómo acceder y manipular elementos usando PyScript, realizar solicitudes de API, usar localStoragey leer un archivo de texto sin formato del sistema de archivos.

Para explorar más PyScript, visite la página de inicio de PyScript . Además, consulte la página de documentación de Pyodide para obtener más información sobre las posibilidades que habilita en el navegador.

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

#python

What is GEEK

Buddha Community

PyScript: Ejecute Python En El Navegador

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

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

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

Darius Greenholt

1597751700

How To Compare Tesla and Ford Company By Using Magic Methods in Python

Magic Methods are the special methods which gives us the ability to access built in syntactical features such as ‘<’, ‘>’, ‘==’, ‘+’ etc…

You must have worked with such methods without knowing them to be as magic methods. Magic methods can be identified with their names which start with __ and ends with __ like init, call, str etc. These methods are also called Dunder Methods, because of their name starting and ending with Double Underscore (Dunder).

Now there are a number of such special methods, which you might have come across too, in Python. We will just be taking an example of a few of them to understand how they work and how we can use them.

1. init

class AnyClass:
    def __init__():
        print("Init called on its own")
obj = AnyClass()

The first example is _init, _and as the name suggests, it is used for initializing objects. Init method is called on its own, ie. whenever an object is created for the class, the init method is called on its own.

The output of the above code will be given below. Note how we did not call the init method and it got invoked as we created an object for class AnyClass.

Init called on its own

2. add

Let’s move to some other example, add gives us the ability to access the built in syntax feature of the character +. Let’s see how,

class AnyClass:
    def __init__(self, var):
        self.some_var = var
    def __add__(self, other_obj):
        print("Calling the add method")
        return self.some_var + other_obj.some_var
obj1 = AnyClass(5)
obj2 = AnyClass(6)
obj1 + obj2

#python3 #python #python-programming #python-web-development #python-tutorials #python-top-story #python-tips #learn-python

Arvel Parker

1593156510

Basic Data Types in Python | Python Web Development For Beginners

At the end of 2019, Python is one of the fastest-growing programming languages. More than 10% of developers have opted for Python development.

In the programming world, Data types play an important role. Each Variable is stored in different data types and responsible for various functions. Python had two different objects, and They are mutable and immutable objects.

Table of Contents hide

I Mutable objects

II Immutable objects

III Built-in data types in Python

Mutable objects

The Size and declared value and its sequence of the object can able to be modified called mutable objects.

Mutable Data Types are list, dict, set, byte array

Immutable objects

The Size and declared value and its sequence of the object can able to be modified.

Immutable data types are int, float, complex, String, tuples, bytes, and frozen sets.

id() and type() is used to know the Identity and data type of the object

a**=25+**85j

type**(a)**

output**:<class’complex’>**

b**={1:10,2:“Pinky”****}**

id**(b)**

output**:**238989244168

Built-in data types in Python

a**=str(“Hello python world”)****#str**

b**=int(18)****#int**

c**=float(20482.5)****#float**

d**=complex(5+85j)****#complex**

e**=list((“python”,“fast”,“growing”,“in”,2018))****#list**

f**=tuple((“python”,“easy”,“learning”))****#tuple**

g**=range(10)****#range**

h**=dict(name=“Vidu”,age=36)****#dict**

i**=set((“python”,“fast”,“growing”,“in”,2018))****#set**

j**=frozenset((“python”,“fast”,“growing”,“in”,2018))****#frozenset**

k**=bool(18)****#bool**

l**=bytes(8)****#bytes**

m**=bytearray(8)****#bytearray**

n**=memoryview(bytes(18))****#memoryview**

Numbers (int,Float,Complex)

Numbers are stored in numeric Types. when a number is assigned to a variable, Python creates Number objects.

#signed interger

age**=**18

print**(age)**

Output**:**18

Python supports 3 types of numeric data.

int (signed integers like 20, 2, 225, etc.)

float (float is used to store floating-point numbers like 9.8, 3.1444, 89.52, etc.)

complex (complex numbers like 8.94j, 4.0 + 7.3j, etc.)

A complex number contains an ordered pair, i.e., a + ib where a and b denote the real and imaginary parts respectively).

String

The string can be represented as the sequence of characters in the quotation marks. In python, to define strings we can use single, double, or triple quotes.

# String Handling

‘Hello Python’

#single (') Quoted String

“Hello Python”

# Double (") Quoted String

“”“Hello Python”“”

‘’‘Hello Python’‘’

# triple (‘’') (“”") Quoted String

In python, string handling is a straightforward task, and python provides various built-in functions and operators for representing strings.

The operator “+” is used to concatenate strings and “*” is used to repeat the string.

“Hello”+“python”

output**:****‘Hello python’**

"python "*****2

'Output : Python python ’

#python web development #data types in python #list of all python data types #python data types #python datatypes #python types #python variable type