Skip to content

Commit dc0946b

Browse files
europaniteeuropanite
authored
Merge pull request #45 from europanite/feature/sitemap
fix/multilingualization
2 parents dbf665e + 26810c7 commit dc0946b

8 files changed

Lines changed: 860 additions & 0 deletions

File tree

‎README.de.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# [Client Side Python](https://github.com/europanite/client_side_python "Client Side Python")
2+
3+
[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
4+
![OS](https://img.shields.io/badge/OS-Linux%20%7C%20macOS%20%7C%20Windows-blue)
5+
[![CI](https://github.com/europanite/client_side_python/actions/workflows/ci.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/ci.yml)
6+
[![Frontend Tests via Docker](https://github.com/europanite/client_side_python/actions/workflows/docker.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/docker.yml)
7+
[![Deploy Expo Web to GitHub Pages](https://github.com/europanite/client_side_python/actions/workflows/deploy-pages.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/deploy-pages.yml)
8+
9+
![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
10+
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
11+
![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)
12+
![Expo](https://img.shields.io/badge/expo-1C1E24?style=for-the-badge&logo=expo&logoColor=#D04A37)
13+
14+
<p align="right">
15+
<a href="./README.md">🇺🇸 English</a> |
16+
<a href="./README.ja.md">🇯🇵 日本語</a> |
17+
<a href="./README.zh-CN.md">🇨🇳 简体中文</a> |
18+
<a href="./README.es.md">🇪🇸 Español</a> |
19+
<a href="./README.pt-BR.md">🇧🇷 Português (Brasil)</a> |
20+
<a href="./README.ko.md">🇰🇷 한국어</a> |
21+
<a href="./README.de.md">🇩🇪 Deutsch</a> |
22+
<a href="./README.fr.md">🇫🇷 Français</a>
23+
</p>
24+
25+
26+
> **Note**
27+
> This is a translated version of this README. The English version (`README.md`) is the source of truth.
28+
29+
!["web_ui"](./assets/images/web_ui.png)
30+
31+
[PlayGround](https://europanite.github.io/client_side_python/)
32+
33+
Ein browserbasiertes Python-Playground, das vollständig clientseitig läuft.
34+
35+
---
36+
37+
## Überblick
38+
39+
Client Side Python ist ein **browserbasiertes Python-Playground auf Basis von Pyodide**.
40+
Der gesamte Python-Code wird **vollständig innerhalb deines Browser-Tabs ausgeführt** (WebAssembly, kein Backend), sodass dein Code deine Maschine nie verlässt.
41+
42+
Dadurch eignet es sich gut für:
43+
44+
- Das schnelle Ausprobieren kleiner Python-Snippets
45+
- Das Vorführen von Python-Grundlagen im Unterricht oder in Workshops
46+
- Das Experimentieren mit einfachen numerischen oder Skript-Aufgaben in einer sicheren Sandbox
47+
- Das Zeigen, wie WebAssembly + Pyodide „echtes“ Python in den Browser bringen können
48+
49+
---
50+
51+
## Funktionen
52+
53+
- **Vollständig clientseitige Ausführung**
54+
- Verwendet [Pyodide](https://pyodide.org), um CPython in WebAssembly auszuführen.
55+
- Standardmäßig sind weder Server, Datenbank noch Authentifizierung erforderlich.
56+
57+
- **Einfacher Code-Editor + Konsole**
58+
- Textbereich für Python-Code.
59+
- Konsolenbereich, der `stdout` und `stderr` anzeigt.
60+
- Schaltflächen: **Run**, **Stop**, **Clear**, **Load Sample**, **Copy Output**.
61+
62+
- **Sanfter „Stop“-Mechanismus**
63+
- Die Ausführung ist mit einem Soft-Cancel-Token umhüllt.
64+
- Wenn du **Stop** drückst, wird der aktuelle Lauf logisch abgebrochen, sodass verspätete Ergebnisse ignoriert werden, anstatt die UI zu beschädigen.
65+
66+
- **Responsives Web-UI**
67+
- Erstellt mit **Expo / React Native Web** und **Material UI**-Komponenten.
68+
- Das Layout passt sich an unterschiedliche Viewport-Größen an (Desktop / Tablet).
69+
70+
- **Deterministische CI über Docker**
71+
- Jest-Tests laufen in einem Docker-Container mit `docker-compose.test.yml`.
72+
- GitHub-Actions-Workflows für CI und Docker-basierte Tests sind enthalten.
73+
74+
- **Automatische Bereitstellung auf GitHub Pages**
75+
- Ein GitHub-Actions-Workflow baut das Expo-Web-Bundle und veröffentlicht es für den Branch `main` auf GitHub Pages.
76+
77+
---
78+
79+
## Funktionsweise
80+
81+
Beim ersten Laden der App passiert Folgendes:
82+
83+
1. Pyodide wird von einem CDN geladen.
84+
2. Die Pyodide-Laufzeit wird initialisiert und `runPythonAsync` wird verfügbar gemacht.
85+
3. Benutzerdefinierte Handler für `stdout` und `stderr` werden angebunden, damit Python-Ausgaben in die Konsole auf der Seite gestreamt werden.
86+
4. Ein einfaches Ausführungs-Token wird verwendet, um einen **soft Stop** zu implementieren:
87+
- Jeder Lauf erhöht eine interne `execId`.
88+
- Wenn ein Lauf mit einer veralteten `execId` endet, wird seine Ausgabe verworfen.
89+
- Dadurch wird verhindert, dass veraltete Ergebnisse älterer Läufe die Konsole verschmutzen.
90+
91+
All das geschieht **im Browser**, ganz ohne Backend-API-Aufrufe.
92+
93+
---
94+
95+
## 🚀 Erste Schritte
96+
97+
### 1. Voraussetzungen
98+
- [Docker](https://www.docker.com/) und [Docker Compose](https://docs.docker.com/compose/)
99+
100+
### 2. Alle Services bauen und starten:
101+
102+
```bash
103+
# set environment variables:
104+
export REACT_NATIVE_PACKAGER_HOSTNAME=${YOUR_HOST}
105+
106+
# Build the image
107+
docker compose build
108+
109+
# Run the container
110+
docker compose up
111+
```
112+
113+
### 3. Testen:
114+
```bash
115+
docker compose -f docker-compose.test.yml up --build --exit-code-from frontend_test
116+
```
117+
118+
---
119+
120+
# License
121+
- Apache License 2.0

‎README.es.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# [Client Side Python](https://github.com/europanite/client_side_python "Client Side Python")
2+
3+
[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
4+
![OS](https://img.shields.io/badge/OS-Linux%20%7C%20macOS%20%7C%20Windows-blue)
5+
[![CI](https://github.com/europanite/client_side_python/actions/workflows/ci.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/ci.yml)
6+
[![Frontend Tests via Docker](https://github.com/europanite/client_side_python/actions/workflows/docker.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/docker.yml)
7+
[![Deploy Expo Web to GitHub Pages](https://github.com/europanite/client_side_python/actions/workflows/deploy-pages.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/deploy-pages.yml)
8+
9+
![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
10+
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
11+
![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)
12+
![Expo](https://img.shields.io/badge/expo-1C1E24?style=for-the-badge&logo=expo&logoColor=#D04A37)
13+
14+
<p align="right">
15+
<a href="./README.md">🇺🇸 English</a> |
16+
<a href="./README.ja.md">🇯🇵 日本語</a> |
17+
<a href="./README.zh-CN.md">🇨🇳 简体中文</a> |
18+
<a href="./README.es.md">🇪🇸 Español</a> |
19+
<a href="./README.pt-BR.md">🇧🇷 Português (Brasil)</a> |
20+
<a href="./README.ko.md">🇰🇷 한국어</a> |
21+
<a href="./README.de.md">🇩🇪 Deutsch</a> |
22+
<a href="./README.fr.md">🇫🇷 Français</a>
23+
</p>
24+
25+
26+
> **Note**
27+
> This is a translated version of this README. The English version (`README.md`) is the source of truth.
28+
29+
!["web_ui"](./assets/images/web_ui.png)
30+
31+
[PlayGround](https://europanite.github.io/client_side_python/)
32+
33+
Un playground de Python del lado del cliente y basado en el navegador.
34+
35+
---
36+
37+
## Descripción general
38+
39+
Client Side Python es un **playground de Python basado en el navegador e impulsado por Pyodide**.
40+
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.
41+
42+
Esto lo hace útil para:
43+
44+
- Probar rápidamente pequeños fragmentos de código Python
45+
- Demostrar conceptos básicos de Python en una clase o taller
46+
- Experimentar con tareas numéricas o de scripting sencillas en un entorno aislado y seguro
47+
- Mostrar cómo WebAssembly + Pyodide pueden llevar Python “real” al navegador
48+
49+
---
50+
51+
## Características
52+
53+
- **Ejecución totalmente del lado del cliente**
54+
- Usa [Pyodide](https://pyodide.org) para ejecutar CPython en WebAssembly.
55+
- No requiere servidor, base de datos ni autenticación por defecto.
56+
57+
- **Editor de código simple + consola**
58+
- Área de texto para código Python.
59+
- Área de consola que muestra `stdout` y `stderr`.
60+
- Botones: **Run**, **Stop**, **Clear**, **Load Sample**, **Copy Output**.
61+
62+
- **Mecanismo de “Stop” suave**
63+
- La ejecución está envuelta en un token de cancelación suave.
64+
- 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.
65+
66+
- **Interfaz web responsive**
67+
- Construida con **Expo / React Native Web** y componentes de **Material UI**.
68+
- El diseño se adapta a distintos tamaños de viewport (escritorio / tablet).
69+
70+
- **CI determinista con Docker**
71+
- Las pruebas de Jest se ejecutan dentro de un contenedor Docker usando `docker-compose.test.yml`.
72+
- Se incluyen workflows de GitHub Actions para CI y pruebas basadas en Docker.
73+
74+
- **Despliegue automático en GitHub Pages**
75+
- Un workflow de GitHub Actions compila el bundle web de Expo y lo publica en GitHub Pages para la rama `main`.
76+
77+
---
78+
79+
## Cómo funciona
80+
81+
En la primera carga, la aplicación:
82+
83+
1. Obtiene Pyodide desde una CDN.
84+
2. Inicializa el runtime de Pyodide y expone `runPythonAsync`.
85+
3. Adjunta handlers personalizados para `stdout` y `stderr` para que la salida de Python se envíe en streaming a la consola integrada.
86+
4. Usa un token de ejecución simple para implementar un **soft Stop**:
87+
- Cada ejecución incrementa un `execId` interno.
88+
- Si una ejecución finaliza con un `execId` desactualizado, su salida se descarta.
89+
- Esto evita que resultados obsoletos de ejecuciones anteriores contaminen la consola.
90+
91+
Todo esto sucede **en el navegador**, sin llamadas a ninguna API backend.
92+
93+
---
94+
95+
## 🚀 Primeros pasos
96+
97+
### 1. Requisitos previos
98+
- [Docker](https://www.docker.com/) y [Docker Compose](https://docs.docker.com/compose/)
99+
100+
### 2. Compila e inicia todos los servicios:
101+
102+
```bash
103+
# set environment variables:
104+
export REACT_NATIVE_PACKAGER_HOSTNAME=${YOUR_HOST}
105+
106+
# Build the image
107+
docker compose build
108+
109+
# Run the container
110+
docker compose up
111+
```
112+
113+
### 3. Pruebas:
114+
```bash
115+
docker compose -f docker-compose.test.yml up --build --exit-code-from frontend_test
116+
```
117+
118+
---
119+
120+
# License
121+
- Apache License 2.0

‎README.fr.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# [Client Side Python](https://github.com/europanite/client_side_python "Client Side Python")
2+
3+
[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
4+
![OS](https://img.shields.io/badge/OS-Linux%20%7C%20macOS%20%7C%20Windows-blue)
5+
[![CI](https://github.com/europanite/client_side_python/actions/workflows/ci.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/ci.yml)
6+
[![Frontend Tests via Docker](https://github.com/europanite/client_side_python/actions/workflows/docker.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/docker.yml)
7+
[![Deploy Expo Web to GitHub Pages](https://github.com/europanite/client_side_python/actions/workflows/deploy-pages.yml/badge.svg)](https://github.com/europanite/client_side_python/actions/workflows/deploy-pages.yml)
8+
9+
![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
10+
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
11+
![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)
12+
![Expo](https://img.shields.io/badge/expo-1C1E24?style=for-the-badge&logo=expo&logoColor=#D04A37)
13+
14+
<p align="right">
15+
<a href="./README.md">🇺🇸 English</a> |
16+
<a href="./README.ja.md">🇯🇵 日本語</a> |
17+
<a href="./README.zh-CN.md">🇨🇳 简体中文</a> |
18+
<a href="./README.es.md">🇪🇸 Español</a> |
19+
<a href="./README.pt-BR.md">🇧🇷 Português (Brasil)</a> |
20+
<a href="./README.ko.md">🇰🇷 한국어</a> |
21+
<a href="./README.de.md">🇩🇪 Deutsch</a> |
22+
<a href="./README.fr.md">🇫🇷 Français</a>
23+
</p>
24+
25+
26+
> **Note**
27+
> This is a translated version of this README. The English version (`README.md`) is the source of truth.
28+
29+
!["web_ui"](./assets/images/web_ui.png)
30+
31+
[PlayGround](https://europanite.github.io/client_side_python/)
32+
33+
Un playground Python côté client, accessible directement dans le navigateur.
34+
35+
---
36+
37+
## Vue d’ensemble
38+
39+
Client Side Python est un **playground Python basé sur le navigateur et propulsé par Pyodide**.
40+
Tout le code Python s’exécute **entièrement dans votre onglet de navigateur** (WebAssembly, sans backend), donc votre code ne quitte jamais votre machine.
41+
42+
Cela le rend utile pour :
43+
44+
- Tester rapidement de petits extraits de code Python
45+
- Présenter les bases de Python en classe ou en atelier
46+
- Expérimenter des tâches numériques simples ou du scripting dans un sandbox sécurisé
47+
- Montrer comment WebAssembly + Pyodide peuvent apporter du Python “réel” dans le navigateur
48+
49+
---
50+
51+
## Fonctionnalités
52+
53+
- **Exécution entièrement côté client**
54+
- Utilise [Pyodide](https://pyodide.org) pour exécuter CPython dans WebAssembly.
55+
- Aucun serveur, aucune base de données et aucune authentification ne sont requis par défaut.
56+
57+
- **Éditeur de code simple + console**
58+
- Zone de texte pour le code Python.
59+
- Zone de console affichant `stdout` et `stderr`.
60+
- Boutons : **Run**, **Stop**, **Clear**, **Load Sample**, **Copy Output**.
61+
62+
- **Mécanisme de “Stop” souple**
63+
- L’exécution est encapsulée dans un token d’annulation souple.
64+
- Lorsque vous appuyez sur **Stop**, l’exécution en cours est annulée de façon logique, de sorte que les résultats tardifs soient ignorés au lieu de casser l’interface.
65+
66+
- **Interface web responsive**
67+
- Construite avec **Expo / React Native Web** et des composants **Material UI**.
68+
- La mise en page s’adapte à différentes tailles de viewport (desktop / tablette).
69+
70+
- **CI déterministe via Docker**
71+
- Les tests Jest s’exécutent dans un conteneur Docker à l’aide de `docker-compose.test.yml`.
72+
- Des workflows GitHub Actions sont fournis pour la CI et les tests basés sur Docker.
73+
74+
- **Déploiement automatique vers GitHub Pages**
75+
- Un workflow GitHub Actions construit le bundle web Expo et le publie sur GitHub Pages pour la branche `main`.
76+
77+
---
78+
79+
## Fonctionnement
80+
81+
Lors du premier chargement, l’application :
82+
83+
1. Récupère Pyodide depuis un CDN.
84+
2. Initialise le runtime Pyodide et expose `runPythonAsync`.
85+
3. Attache des gestionnaires personnalisés pour `stdout` et `stderr` afin que la sortie Python soit diffusée dans la console intégrée à la page.
86+
4. Utilise un jeton d’exécution simple pour implémenter un **soft Stop** :
87+
- Chaque exécution incrémente un `execId` interne.
88+
- Si une exécution se termine avec un `execId` obsolète, sa sortie est ignorée.
89+
- Cela empêche les résultats périmés d’anciennes exécutions de polluer la console.
90+
91+
Tout cela se passe **dans le navigateur**, sans aucun appel à une API backend.
92+
93+
---
94+
95+
## 🚀 Bien démarrer
96+
97+
### 1. Prérequis
98+
- [Docker](https://www.docker.com/) et [Docker Compose](https://docs.docker.com/compose/)
99+
100+
### 2. Construire et démarrer tous les services :
101+
102+
```bash
103+
# set environment variables:
104+
export REACT_NATIVE_PACKAGER_HOSTNAME=${YOUR_HOST}
105+
106+
# Build the image
107+
docker compose build
108+
109+
# Run the container
110+
docker compose up
111+
```
112+
113+
### 3. Tester :
114+
```bash
115+
docker compose -f docker-compose.test.yml up --build --exit-code-from frontend_test
116+
```
117+
118+
---
119+
120+
# License
121+
- Apache License 2.0

0 commit comments

Comments
 (0)