Beim Hacken in Blockly-Kern oder der Entwicklung eines Plug-ins ist Playground ein äußerst nützliches Tool. Es verfügt über eine vorkonfigurierte Instanz von Blockly, die Sie zum Testen, Debuggen oder Prototyping verwenden können. Bei Google findet praktisch die gesamte Entwicklung von Blockly auf dem Playground statt. Hier sehen Sie den einfachen Playground auf dem Demoserver als Vorabversion.
Für die Hauptspielplätze von Blockly gibt es 3 Arten von Spielplätzen: einfach, komplex und multifunktional. Bei blockförmigen Stichproben wird in der Regel nur der erweiterte Playground verwendet.
Voraussetzungen
Blockly verwendet jetzt das Closure-Modulsystem. Aufgrund ihrer Art müssen nicht kompilierte Closure-Module von einer http:- oder https:-URL abgerufen werden. Sie können nicht direkt von file:-URLs abgerufen werden. Daher müssen Sie den Playground von einem lokalen Webserver laden, um den Playground im nicht kompilierten Modus zu laden.
Wir haben ein Skript 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 vom Stammverzeichnis von Blockly aus ausführen, um alle Abhängigkeiten zu installieren.
Internet Explorer verwenden
Blockly verwendet jetzt in seiner Codebasis erweiterte Features, die möglicherweise nicht mit Internet Explorer kompatibel sind. Im komprimierten (kompilierten) Code werden diese Funktionen für IE transpiliert. Das Laden des unkomprimierten Codes funktioniert jedoch möglicherweise nicht. Wenn Sie den Playground in IE laden, lädt der Playground auch über einen lokalen HTTP-Server automatisch den komprimierten Blockly-Code, um die Kompatibilität sicherzustellen. Weitere Informationen zum Testen von Änderungen im Playground im komprimierten Modus finden Sie im Abschnitt „Playgrounds direkt aufrufen“.
Einfacher Spielplatz
Auf dem einfachen Spielplatz basieren die anderen beiden Spielplätze. Es werden eine Toolbox und ein Arbeitsbereich angezeigt, über die Sie eine begrenzte Anzahl von Einstellungen anpassen können.
Um den Playground zu öffnen, führe
npm run start
aus dem Stammverzeichnis von Blockly. Achten Sie darauf, dass Port 8080 durch nichts anderes überwacht wird. Dieser Befehl startet einen Server, auf dem die Blockly-Module gehostet werden, und öffnet Ihren Browser automatisch für die Playground-Seite. Wenn Sie den Playground nun schließen möchten, beenden Sie den Vorgang (Strg + C in Mac- und Linux-Umgebungen).
Der Playground bietet:
- Der gesamte Code ist für eine schnelle Entwicklung unkomprimiert.
- Alle Standardblockierungen (bis auf einige eingestellte Blockierungen)
- Alle Sprachgeneratoren (JavaScript, Python, PHP, Lua und Dart)
- Serialisieren und deserialisieren Sie den Status des Arbeitsbereichs (JSON oder XML).
- Zwischen LTR- und RTL-Layout wechseln.
- Zwischen Toolbox-Layouts wechseln
- Stresstests für den Renderer
- Protokollieren Sie alle Ereignisse in der Konsole.
Fortgeschrittener Playground
Der erweiterte Playground enthält zusätzliche Funktionen, die das Debugging von Blockly noch einfacher machen. Dies ist auch der Standard-Playground, der in blockly-Samples für alle Plug-ins verwendet wird.
Dieser Spielplatz bietet alle einfachen Funktionen und zusätzlich:
- Es können zusätzliche Einstellungen konfiguriert werden, z. B. die Rastergröße, Steuerelemente für das Zoomen und Verschieben, den Renderer, das Design und mehr.
- Die verwendeten Einstellungen und Blöcke werden im Cache gespeichert und automatisch verwendet, wenn der Playground das nächste Mal geladen wird.
- Sehen Sie sich die Ausgabe jedes Generators im selben Fenster an.
Wenn Sie den erweiterten Playground für ein beliebiges Plug-in in „blockly-Samples“ starten möchten, führen Sie npm run
start über das Stammverzeichnis des Plug-ins aus. Derzeit kann jeweils nur ein Plug-in ausgeführt werden, das Port 3000 verwendet. Wenn Sie Probleme beim Starten des Plug-ins haben, vergewissern Sie sich zuerst, dass nichts anderes diesen Port überwacht.
Wenn Sie den Advanced Playground im Kern starten möchten, führen Sie npm run start im Stammverzeichnis von Blockly aus und klicken Sie dann unter dem Titel auf den Link „Advanced“ (Erweitert).
Mit dem Entwicklerpaket von Blockly können Sie auch eine eigene Testseite erstellen, die den erweiterten Playground enthält.
Mehrere Spielplätze
Der Multi-Playground enthält mehrere Playgrounds in verschiedenen Konfigurationen für den LTR-Modus und den Standort der Toolbox. Dies wird hauptsächlich verwendet, um schnell zu prüfen, ob Blockly vor einer Veröffentlichung etwas im Zusammenhang mit der LTR-Datei beschädigt hat. Folgen Sie der Anleitung für den einfachen Playground, um diesen Playground zu öffnen, und ändern Sie dann die URL in /tests/multi_playground.html.
Änderungen testen
Wenn Sie einen der Playgrounds über einen lokalen Server ausführen, müssen Sie in den meisten Fällen lediglich die Seite aktualisieren, um Ihre Änderungen in Blockly zu sehen. Wenn Sie eine neue Datei oder eine neue Abhängigkeit zu einer Datei hinzugefügt haben, müssen Sie möglicherweise zuerst npm run
build ausführen. Dadurch wird die Datei test/deps.js aktualisiert, um sicherzustellen, dass die Abhängigkeiten korrekt geladen werden. Aktualisieren Sie dann die Seite.
Wenn Sie den erweiterten Playground eines Plug-ins ausführen, müssen Sie die Seite nicht einmal aktualisieren. Änderungen werden automatisch per Hotload geladen.
Direkter Zugang zu Spielplätzen
Bisher wurde der einfache Playground lokal über die Datei test/playground.html in Ihrem Browser aufgerufen. Dies ist bei den einfachen und mehreren Spielplätzen weiterhin möglich, wird jedoch nicht mehr empfohlen. Wenn Sie dies tun, 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 Kern von Blockly ändern, müssen Sie den Kern neu erstellen und die Änderungen bereitstellen. Du kannst weiterhin auf diese Seiten zugreifen, wenn sie auf einem Remote-Server wie unserem Beispiel auf unserer Demowebsite gehostet werden. Der Hintergrund ist im komprimierten Modus hellblau.
Der Advanced Playground ist nicht über file:-Zugriff verfügbar.