Cloud Storage

Si tu aplicación está alojada en App Engine, hay un servicio de almacenamiento en la nube disponible que permite a los usuarios guardar, cargar, compartir y publicar sus programas.

Configura App Engine

El primer objetivo es obtener su propia copia de Blockly en ejecución en App Engine.

  1. Descarga y, luego, instala el SDK de Python.
  2. Accede a Google App Engine y crea una aplicación.
  3. Edita appengine/app.yaml y cambia el ID de aplicación de blockly-demo por el nombre de la aplicación que creaste en el paso anterior.
  4. Copia (o vincula los siguientes elementos) los siguientes archivos y directorios en appengine/static/:
    • demos/
    • msg/
    • media/
    • *_compressed.js
  5. Opcional: Si deseas usar blockly_uncompressed.js en el servidor, también copia ese archivo en appengine/static/ y copia core en appengine/static/.
  6. Opcional: Si deseas ejecutar la herramienta Blockly Playground, deberás copiar los directorios blocks, generators y tests, además de los archivos del paso 5.
  7. Ejecuta el selector de Google App Engine desde la GUI, agrega el directorio appengine como una aplicación existente y presiona el botón "Deploy". Si prefieres usar la línea de comandos, ejecuta appcfg.py --oauth2 update appengine/.

Una vez que haya subido Blockly, podrá dirigir un navegador a la URL que creó en el paso 2. Debería ver una lista de demostraciones, incluida la demostración de Cloud Storage.

Hablar con la nube

Examine la fuente de la demostración de almacenamiento en demos/storage/index.html y observe las siguientes características. Primero, hay una inclusión de secuencia de comandos que carga la API de Cloud Storage:

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

Ten en cuenta que esta secuencia de comandos supone que solo hay un lugar de trabajo de Blockly en la página. También existen estas definiciones de mensajes, que debe modificar según lo desee:

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

Las traducciones de estos mensajes a otros idiomas se pueden encontrar en Blockly Games, en el directorio JSON.

Guardar los bloques actuales es una sola llamada a BlocklyStorage.link():

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

Para restablecer los bloques guardados en la carga de la página, simplemente llama a BlocklyStorage.retrieveXml con el hash de la URL una vez que se haya insertado Blockly:

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

Almacenamiento local

La API de storage.js también ofrece la capacidad de guardar un solo conjunto de bloques en el almacenamiento local del navegador. Esto se puede implementar en lugar de almacenamiento en la nube o además de este (en el último caso, uno tiene que tener cuidado con ambos tipos de almacenamiento cuando se intenta restablecer a la vez).

Para restablecer bloques del almacenamiento local, llama a BlocklyStorage.restoreBlocks en un tiempo de espera inmediatamente después de que se haya insertado Blockly.

setTimeout(BlocklyStorage.restoreBlocks, 0);

Para hacer una copia de seguridad automática de los bloques en el almacenamiento local cuando el usuario salga de la página, llama a BlocklyStorage.backupOnUnload, que registrará un objeto de escucha de eventos en el evento de descarga de la página.

BlocklyStorage.backupOnUnload();

Ejemplo

Esta es una demostración en vivo del almacenamiento en la nube.