Skip to content

README.de.md

Latest commit

 

History

History
117 lines (83 loc) · 4.98 KB

README.de.md

File metadata and controls

117 lines (83 loc) · 4.98 KB

Client Side Python

License OS CI Frontend Tests via Docker Deploy Expo Web to GitHub Pages

React Native TypeScript Jest Expo

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

"web_ui"

PlayGround

Ein browserbasiertes Python-Playground, das vollständig clientseitig läuft.

Überblick

Client Side Python ist ein browserbasiertes Python-Playground auf Basis von Pyodide.
Der gesamte Python-Code wird vollständig innerhalb deines Browser-Tabs ausgeführt (WebAssembly, kein Backend), sodass dein Code deine Maschine nie verlässt.

Dadurch eignet es sich gut für:

  • Das schnelle Ausprobieren kleiner Python-Snippets
  • Das Vorführen von Python-Grundlagen im Unterricht oder in Workshops
  • Das Experimentieren mit einfachen numerischen oder Skript-Aufgaben in einer sicheren Sandbox
  • Das Zeigen, wie WebAssembly + Pyodide „echtes“ Python in den Browser bringen können

Funktionen

  • Vollständig clientseitige Ausführung

    • Verwendet Pyodide, um CPython in WebAssembly auszuführen.
    • Standardmäßig sind weder Server, Datenbank noch Authentifizierung erforderlich.

  • Einfacher Code-Editor + Konsole

    • Textbereich für Python-Code.
    • Konsolenbereich, der stdout und stderr anzeigt.
    • Schaltflächen: Run, Stop, Clear, Load Sample, Copy Output.

  • Sanfter „Stop“-Mechanismus

    • Die Ausführung ist mit einem Soft-Cancel-Token umhüllt.
    • Wenn du Stop drückst, wird der aktuelle Lauf logisch abgebrochen, sodass verspätete Ergebnisse ignoriert werden, anstatt die UI zu beschädigen.

  • Responsives Web-UI

    • Erstellt mit Expo / React Native Web und Material UI-Komponenten.
    • Das Layout passt sich an unterschiedliche Viewport-Größen an (Desktop / Tablet).

  • Deterministische CI über Docker

    • Jest-Tests laufen in einem Docker-Container mit docker-compose.test.yml.
    • GitHub-Actions-Workflows für CI und Docker-basierte Tests sind enthalten.

  • Automatische Bereitstellung auf GitHub Pages

    • Ein GitHub-Actions-Workflow baut das Expo-Web-Bundle und veröffentlicht es für den Branch main auf GitHub Pages.

Funktionsweise

Beim ersten Laden der App passiert Folgendes:

  1. Pyodide wird von einem CDN geladen.
  2. Die Pyodide-Laufzeit wird initialisiert und runPythonAsync wird verfügbar gemacht.
  3. Benutzerdefinierte Handler für stdout und stderr werden angebunden, damit Python-Ausgaben in die Konsole auf der Seite gestreamt werden.
  4. Ein einfaches Ausführungs-Token wird verwendet, um einen soft Stop zu implementieren:
    • Jeder Lauf erhöht eine interne execId.
    • Wenn ein Lauf mit einer veralteten execId endet, wird seine Ausgabe verworfen.
    • Dadurch wird verhindert, dass veraltete Ergebnisse älterer Läufe die Konsole verschmutzen.

All das geschieht im Browser, ganz ohne Backend-API-Aufrufe.

🚀 Erste Schritte

1. Voraussetzungen

2. Alle Services bauen und starten:

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

# Build the image
docker compose build

# Run the container
docker compose up

3. Testen:

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

License

  • Apache License 2.0