Online-IDE

Programmiersprache, die eine große Teilmenge von Java umfasst zusammen mit einer Entwicklungsumgebung (mit Compiler, Interpreter und Debugger), die komplett im Browser ausgeführt wird.

Die IDE gibt es in zwei Varianten: als Online-IDE für Schulen zur Verwendung im Unterricht und bei den Schüler/innen zu Hause sowie als kleine Embedded-IDE (Open Source, GNU GPL v3), die in beliebige Webseiten eingebunden werden kann und mit der beispielsweise Informatiklehrkräfte begleitend zum Unterricht eine interaktive Dokumentation für die Schüler/innen erstellen können. Die Dokumentation der Programmiersprache zusammen mit einem umfangreichen interaktiven Java-Kurs finden Sie hier.

1. Online-IDE für Schulen

Mit der Online-IDE können Schüler/innen im Browser in einer Java-ähnlichen Programmiersprache programmieren. Die Programme werden auf dem Server gespeichert, sodass zu Hause dieselbe Programmierumgebung bereitsteht wie in der Schule - ganz ohne Installation.

Die Lehrkraft hat Zugriff auf die Workspaces der Schüler/innen, sodass sie Hausaufgaben bequem korrigieren und bei Programmfehlern schnell helfen kann.

Weitere Features:

• Integriertes Repository für Gruppenarbeiten
• Code-Vervollständigung, Parameterhilfe, Refactor->Rename, Anzeige von Referenzen usw. wie in jeder modernen Entwicklungsumgebung
• Automatisches Kompilieren und Fehleranzeige während der Eingabe
• Schneller Programmstart ("Play-Button")
• Ausführungsgeschwindigkeit regelbar
• Debugger mit Breakpoints, Anzeige der lokalen Variablen, Watch-Expressions
• Ausführung wahlweise im Einzelschritt
• Console-Fenster zur Eingabe und sofortigen Ausführung einzelner Anweisungen
• Schneller, bequemer Hausaufgaben-Workflow
• Möglichkeit, elektronische Prüfungen abzuhalten

2. Embedded-IDE

Die Java-ähnliche Programmiersprache ist im LearnJ-Wiki ausführlich beschrieben und dort ist die IDE in Embedded-Form auch vielfach zu sehen. Hier ein schönes Beispiel des vollen Funktionsumfangs!

Integration als <iframe> in Moodle

Mehr dazu auf dieser Seite.

Build

Nach dem Checkout des Repository können Sie den dist-Ordner mit den fertigen Programmdateien erstellen mittels:

    npm install
    npm run build

Integration in eigene Webseiten

Die Integration der Embedded-Version in eigene Webseiten ist hier beschrieben.

Neben Java-Dateien können Bilder aus einer URL als Workspace-Dateien eingebunden werden:

<script type="text/plain" data-type="image" title="sky.jpg" src="/images/sky.jpg"></script>

Im Programm ist das Bild anschließend über seinen Dateinamen verfügbar, zum Beispiel mit new Bitmap("sky.jpg"). Ohne title wird der Dateiname aus der URL übernommen. Bei URLs von einer anderen Domain muss der Server den Browserzugriff mittels CORS erlauben.

Benötigt werden

• dist/assets/fonts
• dist/assets/graphics
• dist/assets/mp3
• dist/lib
• dist/online-ide-embedded.css
• dist/online-ide-embedded.js

Tests

npm ci
npm run test:ci  # compiler fixtures, runtime unit tests, test-harness regressions
npm test        # watch mode

The same noninteractive suite runs on pull requests and before embedded/playground publishing. Java and assembly fixtures use explicit diagnostics/assertion failures and a bounded synchronous interpreter. Programs that load files asynchronously or need WebGL belong in browser tests; the synchronous harness reports them as incomplete instead of hanging or passing silently.

Scratch for Java compatibility

public/scratch-compatibility.json identifies the desktop library and browser revision, standard/NRW flavors, documented APIs and limitations. Builds publish it beside the embedded/playground assets. Window.getLibraryVersion() reports the browser revision (5.8.0-browser.1).

ScratchCompatibilityTest.test.ts checks both flavors' declarations against public/scratch-api.json and compiles every generated reference example. The 13 currently unsupported examples have explicit expected diagnostics; new errors fail the suite. Compiling clone examples are also marked unavailable until their lifecycle works. Fixtures are generated by the library repository's scripts/browser-compatibility.py, using an explicit --online-ide path. See its compatibility/README.md for the coordinated update procedure.

Game save data

The Scratch library includes org.openpatch.scratch.extensions.fs.SaveData<T>. Its Java API matches the desktop library: construct it with a stable game ID, a slot name and the data class, then call loadOrDefault and save. Browser saves use a dedicated IndexedDB database, independent of the IDE's source-file cache. save resumes the Java program only after its transaction commits; unavailable storage, failed writes and corrupt data raise java.io.IOException.

Use public fields for plain game data. Primitives, strings, enums, arrays and nested data classes with no-argument constructors are supported. The browser does not persist library objects or circular graphs. Saved data belongs to the site's origin and browser profile; clearing browser data also clears game saves.

Coin Quest is a complete example using built-in assets and three independent save slots. Paste the source into a Scratch workspace. Move with the arrow keys, select a slot with 1–3, save with S, load with L, and start a fresh round with R. Reload the browser and load a slot to restore the score and positions. This file is synchronized from Scratch for Java's demo sources by scripts/release-catalogs.py.

Run node scripts/test-savedata-browser.mjs for actual IndexedDB persistence, reload, failure and game-control tests in both standard and NRW modes.