Online Code Editor
Ich habe mitbekommen, dass Studenten VS Code jedes Semester löschen und dann im nächsten Semester in IM wieder alles installieren müssen. Deshalb habe ich dieses Tool programmiert.
Naja Spass beiseite.
In meiner Bachelorarbeit werde ich Learningplattformen für Programmiersprachen untersuchen und wie man diese so gestalten kann, dass eine nachhaltige Wissensretention erzielt werden kann. Als Praxisprojekt werde ich eine eigene Learningplattform erstellen. Ein Dozent machte mich auf die Herausforderung aufmerksam, Code im Browser interpretieren zu lassen.
Mit einer kleinen Recherche habe ich Pyodide.js gefunden, einen Python Interpreter, der im Browser Python ausführen kann. Mithilfe von codemirror.net konnte ich Syntax-Highlighting implementieren.
Der Code-Editor war schon ein grosses Erfolgserlebnis aber das gewisse etwas hat noch gefehlt. So habe ich mich noch um das Dateihandling gekümmert, genauer um das Herunterladen von Dateien mithilfe der in JavaScript enthaltenen Blob API, somit konnte ich das Herunterladen des Codes sicherstellen.
Das Öffnen von Dateien und das damit verbundene Laden des Dateiinhalts war dagegen eher einfacher, genau so wie das Leeren des Editors.
Nach dem Erfolg des Python Code Editors versuchte ich voller Euphorie noch weitere Programmiersprachen im Browser zu interpretieren oder gar zu kompilieren (Java, C++, Go, R, Rust, etc.). Leider nur mit mässigem Erfolg — aber so einfach gebe ich mich noch nicht geschlagen.
JavaScript und PHP konnte ich dafür gut integrieren, da JavaScript sowieso nativ im Browser läuft und PHP mit einem Skript auf dem Server auch ausführbar wurde.
Bis heute nehme ich noch kleine Bugfixes vor und will auch in Zukunft die Palette erweitern.
Mein nächstes Ziel ist es, beim Python Editor die Möglichkeit zu integrieren, Packages mit Micropip installieren zu können.
Und jetzt? Gibt es einen Online Code-Editor für Python, PHP und JavaScript, der sogar mobile tauglich ist.
(eli)
Im Grossen und Ganzen bin ich mit meinem Projekt zufrieden. Ich habe jedoch 2 Punkte, die ich für mein nächstes Projekt mitnehmen werde und die ich eventuell bei diesem Projekt in der Zukunft anpassen werde.
– Der Editor ist funktional, jedoch könnte die Benutzeroberfläche ästhetischer und moderner gestaltet werden.
– Das Theme des Editors kann noch nicht vom Benutzer angepasst werden, was für das ultimative Benutzererlebnis besser wäre.