Dieses Dokument richtet sich an Entwickler, die ihre eigenen Anwendungen erstellen möchten, die Blockly als Codeeditor verwenden. Es wird davon ausgegangen, dass einer mit dem Einsatz von Blockly vertraut ist und ein grundlegendes Verständnis von HTML und JavaScript hat.
Nachdem Sie dieses Dokument gelesen haben, sollten Sie das Codelab zu den ersten Schritten ausprobieren.
Übersicht
Blockly wurde für die einfache Installation in Ihrer Webanwendung entwickelt. Nutzer ziehen Blöcke herum, Blockly generiert Code, Ihre Anwendung tut etwas mit diesem Code. Aus Sicht der Anwendung ist Blockly nur ein Textbereich, in dem der Nutzer syntaktisch perfekt JavaScript, Python, PHP, Lua, Dart oder eine andere Sprache eingibt.
Blockly ist zu 100% clientseitig und erfordert keine Unterstützung vom Server. Es gibt keine Abhängigkeiten von Drittanbietern. Alles ist Open Source.
Code abrufen
Empfohlen: npm
Blockly wird in der npm-Registry und der yarn Registry veröffentlicht. Wir empfehlen den Zugriff auf Blockly über einen Paketmanager, weil
- Mit den Änderungen in Blockly ist es einfacher, auf dem Laufenden zu bleiben
- Es empfiehlt sich, Plug-ins anstelle von Monkeypatching Blockly zu verwenden.
Wenn du mehr davon überzeugen möchtest, kannst du dir unseren Vortrag von 2021 Blockly on npm ansehen. Wenn Sie bereits einen Paketmanager verwenden, können Sie Blockly mit
npm install --save blockly
Sie können in Ihrem Anwendungscode auf Blockly verweisen mit:
import Blockly from 'blockly';
Dadurch werden die Standardpakete importiert. Weitere Informationen finden Sie in der Paket-Readme-Datei und in den Beispielen für die Verwendung von Blockly mit Node und webpack.
Unpkg
Wenn Sie keinen Paketmanager für Ihr Projekt verwenden, aber trotzdem auf dem neuesten Stand bleiben möchten, können Sie „unpkg“ verwenden.
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
Unpkg holt die neueste Version des veröffentlichten Codes ab, sodass es bei dieser Methode keine Versionskontrolle gibt. Es eignet sich hervorragend für Demos und kurze Tests und wird in vielen Codelabs verwendet.
GitHub
Sie können den komprimierten Code auch aus unseren GitHub-Releases herunterladen. Dazu müssen Sie den Code jedoch in regelmäßigen Abständen manuell herunterladen, um die neuesten Updates und Fehlerkorrekturen für Blockly zu erhalten.
Nachdem Sie Blockly heruntergeladen haben, können Sie dem Anwendungscode Folgendes hinzufügen, um es zu laden:
<script src="blockly_compressed.js"></script>
Sie sollten wahrscheinlich auch die integrierten Blöcke von Blockly, mindestens einen Sprachgenerator und mindestens eine Sprachdatei laden.
<script src="blocks_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="msg/js/en.js"></script>
Injizieren
Nachdem Sie Blockly übernommen haben, müssen Sie es in ein Div-Element auf Ihrer Anwendungsseite einfügen.
Bei komplexeren Webseiten kann es erforderlich sein, die Größe von Blockly an die Seite anzupassen.
Konfiguration
Blockly ist hoch konfigurierbar. Sie können beispielsweise das Design oder den Renderer eines Arbeitsbereichs festlegen, einen Arbeitsbereich auf RTL-Modus setzen oder aus verschiedenen Zoom- und Scrollmodi auswählen.
Die Konfiguration erfolgt pro Arbeitsbereich. Dazu wird beim Einfügen eines Blockly-Arbeitsbereichs eine Konfigurationsstruktur übergeben.
→ Weitere Informationen zum Konfigurieren eines Arbeitsbereichs
Definieren von Blöcken
Zusätzlich zu den Standardblöcken, die in Blockly enthalten sind, müssen benutzerdefinierte Blöcke erstellt werden, um die API Ihrer Webanwendung aufzurufen. Ein Beispiel ist das Labyrinth mit benutzerdefinierten Bewegungsblöcken.
→ Weitere Informationen zum Erstellen benutzerdefinierter Blockierungen
Code-Generatoren
Blockly ist keine Programmiersprache und kann nicht in einem Blockly-Programm ausgeführt werden. Stattdessen kann Blockly das Programm des Nutzers in JavaScript, Python, PHP, Dart oder eine andere Sprache übersetzen.
→ Weitere Informationen zu Codegeneratoren
Blöcke importieren und exportieren
Wenn Ihre Anwendung die Blöcke des Nutzers speichern und speichern muss, um sie bei einem späteren Besuch wiederherzustellen, können Sie mit diesem Aufruf eine Serialisierung in JSON vornehmen:
var json = Blockly.serialization.workspaces.save(workspace);
Die Deserialisierung von JSON in Blöcke ist genauso einfach:
Blockly.serialization.workspaces.load(json);