Cloud Storage

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.

  1. Laden Sie das Python SDK herunter und installieren Sie es.
  2. Melden Sie sich in Google App Engine an und erstellen Sie eine Anwendung.
  3. Bearbeiten Sie appengine/app.yaml und ändern Sie die Anwendungs-ID von blockly-demo in den Namen der Anwendung, den Sie im vorherigen Schritt erstellt haben.
  4. Kopieren Sie die folgenden Dateien und Verzeichnisse (oder Softlinks) in appengine/static/:
    • demos/
    • msg/
    • media/
    • *_compressed.js
  5. Optional: Wenn Sie blockly_uncompressed.js auf dem Server verwenden möchten, kopieren Sie diese Datei auch in appengine/static/ und kopieren Sie core in appengine/static/.
  6. Optional: Wenn Sie den Blockly Playground ausführen möchten, müssen Sie die Verzeichnisse blocks, generators und tests sowie die Dateien in Schritt 5 kopieren.
  7. 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 Sie appcfg.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.