Spielplatz

Wenn Sie im Blockly-Kern hacken oder ein Plug-in entwickeln, ist der Playground ein äußerst nützliches Tool. Es enthält eine vorkonfigurierte Blockly-Instanz, die Sie zum Testen, Debuggen oder Prototyping verwenden können. Bei Google erfolgt die Entwicklung von Blockly fast ausschließlich über den Playground. Hier ist eine Vorschau des einfachen Playgrounds auf dem Demoserver.

Für Blockly gibt es drei Arten von Spielplätzen: einfach, für Fortgeschrittene und mehrere. In Blockly-Beispielen wird in der Regel nur die erweiterte Playground-Version verwendet.

Vorbereitung

Blockly verwendet jetzt das Closure-Modulsystem. Aufgrund der Art und Weise, wie sie geladen werden, müssen nicht kompilierte Closure-Module von einer http:- oder https:-URL abgerufen werden und können nicht direkt von file:-URLs abgerufen werden. Wenn Sie den Playground also im nicht kompilierten Modus laden möchten, müssen Sie ihn von einem lokalen Webserver laden.

Wir haben ein Script erstellt, das einen lokalen Server startet und den gesamten Code lädt, der zum Laden der Blockly-Module erforderlich ist. Sie müssen npm auf Ihrem Computer installiert haben und npm install im Blockly-Stammverzeichnis ausführen, um alle Abhängigkeiten zu installieren.

Internet Explorer verwenden

Blockly verwendet jetzt erweiterte Funktionen in seiner Codebasis, die möglicherweise nicht mit Internet Explorer kompatibel sind. Im komprimierten (kompilierten) Code werden diese Funktionen für die Verwendung mit dem IE transpiliert. Das Laden des nicht komprimierten Codes funktioniert jedoch möglicherweise nicht. Wenn Sie die Playground im IE laden, auch über einen lokalen HTTP-Server, wird der komprimierte Blockly-Code automatisch geladen, um für Kompatibilität zu sorgen. Weitere Informationen zum Testen von Änderungen im Playgrounds-Modus im komprimierten Modus finden Sie im Abschnitt „Direkter Zugriff auf Spielplätze“.

Einfacher Playground

Der einfache Spielplatz ist die Grundlage für die anderen beiden Spielplätze. Es werden eine Toolbox und ein Arbeitsbereich angezeigt und Sie können eine begrenzte Anzahl von Einstellungen anpassen.

Führen Sie zum Öffnen des Playgrounds Folgendes aus:

npm run start

von der Blockly-Stammdatei aus. Stellen Sie sicher, dass nichts anderes Port 8080 überwacht. Mit diesem Befehl wird ein Server gestartet, auf dem die Blockly-Module gehostet werden, und der Browser wird automatisch auf die Playground-Seite geöffnet. Wenn Sie den Playground schließen möchten, beenden Sie den Prozess (Strg-C unter Mac und Linux).

Der Spielplatz bietet:

  • Der gesamte Code ist für eine schnelle Entwicklung unkomprimiert.
  • Alle Standardblöcke (außer einigen eingestellten)
  • Alle Sprachgeneratoren (JavaScript, Python, PHP, Lua und Dart)
  • Workspace-Status (JSON oder XML) serialisieren und deserialisieren
  • Zwischen linksläufigem und rechtsläufigem Layout wechseln.
  • Zwischen den Layouts der Toolbox wechseln
  • Stresstests für den Renderer.
  • Alle Ereignisse in der Konsole protokollieren

Für Fortgeschrittene

Der erweiterte Blockly-Spielplatz enthält zusätzliche Funktionen, die die Fehlerbehebung noch einfacher machen. Dies ist auch der Standard-Playground, der in Blockly-Beispielen für alle Plug-ins verwendet wird.

Dieser Spielplatz bietet alle Funktionen des einfachen Spielplatzes plus:

  • Es können auch weitere Einstellungen konfiguriert werden, z. B. Rastergröße, Zoom-/Verschiebungssteuerung, Renderer und Design.
  • Verwendete Einstellungen und Blöcke werden im Cache gespeichert und beim nächsten Laden des Playgrounds automatisch verwendet.
  • Die Ausgabe jedes Generators wird im selben Fenster angezeigt.

Wenn Sie den erweiterten Playground für ein beliebiges Plug-in in blockly-samples starten möchten, führen Sie npm run start aus dem Stammverzeichnis des Plug-ins aus. Derzeit kann nur ein Plugin gleichzeitig ausgeführt werden und es verwendet den Port 3000. Wenn Sie Probleme beim Starten des Plug-ins haben, prüfen Sie zuerst, ob an diesem Port nichts anderes lauschen kann.

Wenn Sie den erweiterten Playground im Kern starten möchten, führen Sie npm run start im Blockly-Stamm aus und klicken Sie dann unter dem Titel auf den Link „Erweitert“.

Sie können auch eine eigene Testseite mit dem erweiterten Playground erstellen. Verwenden Sie dazu das Entwicklertools-Paket von Blockly.

Mehrere Spielplätze

Der Multi-Playground enthält mehrere Playgrounds in verschiedenen Konfigurationen für den LTR-Modus und die Position der Toolbox. Damit lässt sich vor einem Release schnell prüfen, ob in Blockly etwas im Zusammenhang mit LTR nicht funktioniert. Wenn Sie dieses Playground öffnen möchten, folgen Sie der Anleitung für das einfache Playground und ändern Sie dann die URL in /tests/multi_playground.html.

Änderungen testen

Wenn Sie eines der Playgrounds von einem lokalen Server aus ausführen, müssen Sie in den meisten Fällen nur die Seite aktualisieren, damit Ihre Änderungen in Blockly angezeigt werden. Wenn Sie eine neue Datei hinzugefügt oder einer Datei eine neue Abhängigkeit hinzugefügt haben, müssen Sie möglicherweise zuerst npm run build ausführen, um die Datei test/deps.js zu aktualisieren. Dadurch wird sichergestellt, dass die Abhängigkeiten richtig geladen werden. Aktualisieren Sie dann die Seite.

Wenn Sie den erweiterten Playground eines Plug-ins verwenden, müssen Sie die Seite nicht einmal aktualisieren. Änderungen werden automatisch per Hotload übernommen.

Direkter Zugriff auf Playgrounds

Bisher wurde auf die einfache Playground-Umgebung lokal zugegriffen, indem Sie direkt in Ihrem Browser die Datei test/playground.html aufgerufen haben. Das ist mit den einfachen und Mehrfach-Playgrounds zwar weiterhin möglich, wird aber nicht mehr empfohlen. In diesem Fall erkennt der Playground, dass Sie keinen lokalen Server ausführen, und verwendet automatisch komprimierte Blockly-Dateien. Weitere Informationen finden Sie auf der Seite Blockly erstellen. Wenn Sie etwas im Blockly-Kern ändern, müssen Sie den Kern neu erstellen und die Änderungen stufenweise einführen. Sie können auch dann auf diese Seiten zugreifen, wenn sie auf einem Remoteserver gehostet werden, z. B. in unserem Beispiel auf unserer Demoseite. Der Hintergrund ist leuchtend blau, wenn Sie sich im komprimierten Modus befinden.

Der erweiterte Playground ist nicht über den file:-Zugriff verfügbar.