README.es.md

Client Side Python

🇺🇸 English | 🇯🇵 日本語 | 🇨🇳 简体中文 | 🇪🇸 Español | 🇧🇷 Português (Brasil) | 🇰🇷 한국어 | 🇩🇪 Deutsch | 🇫🇷 Français

PlayGround

Un playground de Python del lado del cliente y basado en el navegador.

---

Descripción general

Client Side Python es un playground de Python basado en el navegador e impulsado por Pyodide.
Todo el código Python se ejecuta por completo dentro de tu pestaña del navegador (WebAssembly, sin backend), por lo que tu código nunca sale de tu máquina.

Esto lo hace útil para:

• Probar rápidamente pequeños fragmentos de código Python
• Demostrar conceptos básicos de Python en una clase o taller
• Experimentar con tareas numéricas o de scripting sencillas en un entorno aislado y seguro
• Mostrar cómo WebAssembly + Pyodide pueden llevar Python “real” al navegador

---

Características

• Ejecución totalmente del lado del cliente

  • Usa Pyodide para ejecutar CPython en WebAssembly.
  • No requiere servidor, base de datos ni autenticación por defecto.

• Editor de código simple + consola

  • Área de texto para código Python.
  • Área de consola que muestra stdout y stderr.
  • Botones: Run, Stop, Clear, Load Sample, Copy Output.

• Mecanismo de “Stop” suave

  • La ejecución está envuelta en un token de cancelación suave.
  • Cuando pulsas Stop, la ejecución actual se cancela lógicamente para que los resultados tardíos se ignoren en lugar de romper la interfaz.

• Interfaz web responsive

  • Construida con Expo / React Native Web y componentes de Material UI.
  • El diseño se adapta a distintos tamaños de viewport (escritorio / tablet).

• CI determinista con Docker

  • Las pruebas de Jest se ejecutan dentro de un contenedor Docker usando docker-compose.test.yml.
  • Se incluyen workflows de GitHub Actions para CI y pruebas basadas en Docker.

• Despliegue automático en GitHub Pages

  • Un workflow de GitHub Actions compila el bundle web de Expo y lo publica en GitHub Pages para la rama main.

---

Cómo funciona

En la primera carga, la aplicación:

1. Obtiene Pyodide desde una CDN.
2. Inicializa el runtime de Pyodide y expone runPythonAsync.
3. Adjunta handlers personalizados para stdout y stderr para que la salida de Python se envíe en streaming a la consola integrada.
4. Usa un token de ejecución simple para implementar un soft Stop:
   • Cada ejecución incrementa un execId interno.
   • Si una ejecución finaliza con un execId desactualizado, su salida se descarta.
   • Esto evita que resultados obsoletos de ejecuciones anteriores contaminen la consola.

Todo esto sucede en el navegador, sin llamadas a ninguna API backend.

---

🚀 Primeros pasos

1. Requisitos previos

• Docker y Docker Compose

2. Compila e inicia todos los servicios:

# set environment variables:
export REACT_NATIVE_PACKAGER_HOSTNAME=${YOUR_HOST}

# Build the image
docker compose build

# Run the container
docker compose up

3. Pruebas:

docker compose -f docker-compose.test.yml up --build --exit-code-from frontend_test 

---

License

• Apache License 2.0