Wenn Ihre Anwendung in App Engine gehostet wird, ist ein Cloud-Speicherdienst verfügbar, mit dem Nutzer ihre Programme speichern, laden, freigeben und veröffentlichen können.
App Engine einrichten
Das erste Ziel besteht darin, Ihre eigene Kopie von Blockly in App Engine auszuführen.
- Laden Sie das Python SDK herunter und installieren Sie es.
- Melden Sie sich in Google App Engine an und erstellen Sie eine Anwendung.
- Bearbeiten Sie
appengine/app.yaml
und ändern Sie die Anwendungs-ID vonblockly-demo
in den Namen der Anwendung, den Sie im vorherigen Schritt erstellt haben. - Kopieren Sie die folgenden Dateien und Verzeichnisse (oder Softlinks) in
appengine/static/
:demos/
msg/
media/
*_compressed.js
- Optional: Wenn Sie
blockly_uncompressed.js
auf dem Server verwenden möchten, kopieren Sie diese Datei auch inappengine/static/
und kopieren Siecore
inappengine/static/
. - Optional: Wenn Sie den Blockly Playground ausführen möchten, müssen Sie die Verzeichnisse
blocks
,generators
undtests
sowie die Dateien in Schritt 5 kopieren. - Führen Sie den Google App Engine Launcher über die GUI aus, fügen Sie Ihr
appengine
-Verzeichnis als vorhandene Anwendung hinzu und klicken Sie auf die Schaltfläche „Bereitstellen“. Wenn Sie die Befehlszeile bevorzugen, führen Sieappcfg.py --oauth2 update appengine/
aus.
Nachdem Blockly hochgeladen ist, können Sie einen Browser auf die URL verweisen lassen, die Sie in Schritt 2 erstellt haben. Sie sollten eine Liste mit Demos einschließlich der Cloud Storage-Demo sehen.
Mit der Cloud kommunizieren
Sehen Sie sich die Quelle der Speicherdemo unter demos/storage/index.html an und beachten Sie die folgenden Features. Zuerst gibt es ein Skript, das die Cloud Storage API lädt:
<script src="/storage.js"></script>
In diesem Skript wird davon ausgegangen, dass es auf der Seite nur einen Blockly-Arbeitsbereich gibt. Es gibt auch diese Nachrichtendefinitionen, die Sie nach Bedarf ändern können:
BlocklyStorage.HTTPREQUEST_ERROR = 'There was a problem with the request.\n'; BlocklyStorage.LINK_ALERT = 'Share your blocks with this link:\n\n%1'; BlocklyStorage.HASH_ERROR = 'Sorry, "%1" doesn\'t correspond with any saved Blockly file.'; BlocklyStorage.XML_ERROR = 'Could not load your saved file.\n' + 'Perhaps it was created with a different version of Blockly?';
Übersetzungen dieser Nachrichten in andere Sprachen finden Sie im JSON-Verzeichnis in Blockly Games.
Das Speichern der aktuellen Blöcke ist ein einzelner Aufruf von BlocklyStorage.link()
:
<button onclick="BlocklyStorage.link()">Save Blocks</button>
Um gespeicherte Blöcke beim Seitenaufbau wiederherzustellen, rufen Sie einfach BlocklyStorage.retrieveXml
mit dem Hash der URL auf, nachdem Blockly eingefügt wurde:
if ('BlocklyStorage' in window && window.location.hash.length > 1) { BlocklyStorage.retrieveXml(window.location.hash.substring(1)); }
Lokaler Speicher
Die storage.js
API bietet auch die Möglichkeit, einen einzelnen Satz von Blöcken im lokalen Speicher des Browsers zu speichern. Dies kann anstelle des Cloud-Speichers oder zusätzlich zum Cloud-Speicher implementiert werden. Im letzteren Fall muss man sich bewusst sein, dass beide Speichertypen gleichzeitig wiederhergestellt werden sollen.
Wenn Sie Blöcke aus dem lokalen Speicher wiederherstellen möchten, rufen Sie BlocklyStorage.restoreBlocks
unmittelbar nach dem Einfügen von Blockly auf.
setTimeout(BlocklyStorage.restoreBlocks, 0);
Wenn die Blöcke automatisch im lokalen Speicher gesichert werden sollen, sobald der Nutzer die Seite verlässt, wird BlocklyStorage.backupOnUnload
aufgerufen. Dadurch wird ein Ereignis-Listener für das Entladensereignis der Seite registriert.
BlocklyStorage.backupOnUnload();
Beispiel
Hier finden Sie eine Live-Demo von Cloud Storage.