Cloud Storage

Se la tua applicazione è ospitata su App Engine, è disponibile un servizio di archiviazione sul cloud che consente agli utenti di salvare, caricare, condividere e pubblicare i propri programmi.

Configurazione di App Engine

Il primo obiettivo è creare la tua copia di Blockly su App Engine.

  1. Scarica e installa l'SDK Python.
  2. Accedi a Google App Engine e crea un'applicazione.
  3. Modifica appengine/app.yaml e modifica l'ID applicazione da blockly-demo con il nome dell'applicazione che hai creato nel passaggio precedente.
  4. Copia (o esegui il soft link) dei seguenti file e directory in appengine/static/:
    • demos/
    • msg/
    • media/
    • *_compressed.js
  5. (Facoltativo) Se vuoi utilizzare blockly_uncompressed.js sul server, copia anche il file in appengine/static/ e copia core in appengine/static/.
  6. Facoltativo: se vuoi eseguire Playly Blockly, devi copiare le directory blocks, generators e tests, nonché i file nel passaggio 5.
  7. Esegui Avvio applicazioni di Google App Engine dalla GUI, aggiungi la directory appengine come applicazione esistente e premi il pulsante "Deploy". Se preferisci utilizzare la riga di comando, esegui: appcfg.py --oauth2 update appengine/.

Una volta caricato Blockly, puoi puntare un browser all'URL che hai creato nel passaggio 2. Dovresti visualizzare un elenco di demo, inclusa la demo sul cloud storage.

Conversazione con il cloud

Esamina l'origine della demo demo all'indirizzo demos/storage/index.html e prendi nota delle funzionalità che seguono. Il primo è uno script che include il caricamento dell'API Cloud Storage:

<script src="/storage.js"></script>

Tieni presente che questo script presume che sulla pagina sia presente una sola area di lavoro Blockly. Esistono anche queste definizioni di messaggio, che devi modificare come preferisci:

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?';

Le traduzioni di questi messaggi in altre lingue sono disponibili in Blockly Games nella directory JSON.

Il salvataggio dei blocchi attuali è una singola chiamata a BlocklyStorage.link():

<button onclick="BlocklyStorage.link()">Save Blocks</button>

Per ripristinare i blocchi salvati al caricamento pagina, chiama BlocklyStorage.retrieveXml con l'hash dell'URL dopo l'inserimento di Blockly:

if ('BlocklyStorage' in window && window.location.hash.length > 1) {
  BlocklyStorage.retrieveXml(window.location.hash.substring(1));
}

Archiviazione locale

L'API storage.js offre inoltre la possibilità di salvare un singolo insieme di blocchi nello spazio di archiviazione locale del browser. Questo può essere implementato al posto dello spazio di archiviazione sul cloud o in aggiunta allo spazio di archiviazione sul cloud. In quest'ultimo caso, bisogna fare attenzione a entrambi i tipi di archiviazione che tentano di ripristinare contemporaneamente.

Per ripristinare i blocchi dallo spazio di archiviazione locale, chiama BlocklyStorage.restoreBlocks in un timeout dopo l'inserimento di Blockly.

setTimeout(BlocklyStorage.restoreBlocks, 0);

Per eseguire automaticamente il backup dei blocchi nello spazio di archiviazione locale quando l'utente esce dalla pagina, chiama BlocklyStorage.backupOnUnload; registrerà un elenco di eventi nell'evento di unload della pagina.

BlocklyStorage.backupOnUnload();

Esempio

Ecco una demo dal vivo dell'archiviazione sul cloud.