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.
- Descarga y, luego, instala el SDK de Python.
- Accede a Google App Engine y crea una aplicación.
- Edita
appengine/app.yaml
y cambia el ID de aplicación deblockly-demo
por el nombre de la aplicación que creaste en el paso anterior. - Copia (o vincula los siguientes elementos) los siguientes archivos y directorios en
appengine/static/
:demos/
msg/
media/
*_compressed.js
- Opcional: Si deseas usar
blockly_uncompressed.js
en el servidor, también copia ese archivo enappengine/static/
y copiacore
enappengine/static/
. - Opcional: Si deseas ejecutar la herramienta Blockly Playground, deberás copiar los directorios
blocks
,generators
ytests
, además de los archivos del paso 5. - 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, ejecutaappcfg.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.