Skip to main content

Creación de una Aplicación Web de Calculadora Simple con PyScript

python

Autor: Reynaldo Navedo

Publicado:

Introducción a PyScript

PyScript es un marco de trabajo innovador que permite ejecutar Python en el navegador web, junto o incluso entremezclado con JavaScript. Abre posibilidades emocionantes para el desarrollo web, especialmente para aquellos familiarizados con Python.


El Proyecto: Una Calculadora Simple

En este proyecto, crearemos una calculadora web simple que puede realizar operaciones aritméticas básicas. Esta aplicación muestra cómo Python puede integrarse sin problemas en páginas web usando PyScript.


Configuración del Entorno

Para comenzar, necesitas incluir PyScript en tu archivo HTML. Esto se hace enlazando los archivos CSS y JavaScript de PyScript en la sección <head>:

<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script type="module" src="https://pyscript.net/releases/2023.12.1/core.js"></script>


Construyendo la Interfaz de la Calculadora

El cuerpo del HTML contiene dos entradas de números, un desplegable para seleccionar la operación, un botón para realizar el cálculo y una división para mostrar el resultado:

<!-- Campos de entrada para los números --> 
<input id="num1" type="number" placeholder="Introduce el primer número"> 
<input id="num2" type="number" placeholder="Introduce el segundo número"> 

<!-- Desplegable para seleccionar el operador --> 
<select id="operator"> 
  <option value="+">+</option> 
  <option value="-">-</option> 
  <option value="*">*</option> 
  <option value="/">/</option> 
</select>

<!-- Botón para activar el cálculo --> 
<button py-click="calculate">Calcular</button> 

<!-- Mostrar resultado --> 
<div id="result"></div>


Añadiendo la Lógica de PyScript

El código de Python se escribe dentro de las etiquetas <py-script>. La función calculate se activa con el clic del botón (py-click="calculate"):

<py-script> 
from pyscript import document 
def calculate(self): 
  num1 = float(document.getElementById('num1').value) 
  num2 = float(document.getElementById('num2').value) 
  operator = document.getElementById('operator').value 

# Realizar el cálculo 
result = "Operación inválida" 
if operator == '+': 
  result = num1 + num2 
elif operator == '-': 
  result = num1 - num2 
elif operator == '*': 
  result = num1 * num2 
elif operator == '/': 
  result = num1 / num2 
if num2 != 0 
  else "Error: División por cero" 

# Mostrar el resultado 
document.getElementById('result').innerHTML = result 
</py-script>


Conceptos Clave en PyScript

  • Etiquetas PyScript: El código Python está encapsulado dentro de las etiquetas <py-script> en el archivo HTML.
  • Interacción con el DOM: from pyscript import document permite que el código Python interactúe con elementos de la página web.
  • Manejo de Eventos: py-click se utiliza en lugar del usual onclick de JavaScript, vinculando elementos HTML con funciones Python.
  • Actualización de Contenido Dinámico: Python puede actualizar dinámicamente el contenido de la página web, demostrado al actualizar el innerHTML de un <div>.


Reto

  • Convierte el proyecto en uno basado en módulos
  • Tip: debes usar el script tag para importar el documento de python donde vas a escribir la función calculate(self).


Aprende más en la documentación oficial de PyScript.


Conclusión

PyScript cierra la brecha entre Python y el desarrollo web, ofreciendo una forma única y poderosa de crear aplicaciones web utilizando la sintaxis y las bibliotecas de Python. Esta calculadora simple es un ejemplo básico de lo que es posible, y el potencial para aplicaciones web más complejas e interactivas es vasto.


Ya seas un desarrollador de Python experimentado o nuevo en la programación, PyScript abre un nuevo reino de posibilidades para crear aplicaciones web enriquecidas.

Comparte este contenido