Cloud Storage

如果您的应用托管在 App Engine 上,则可以使用 Cloud Storage 服务来保存、加载、共享和发布程序。

设置 App Engine

第一个目标是在 App Engine 上运行您自己的 Blockly 副本。

  1. 下载并安装 Python SDK
  2. 登录 Google App Engine 并创建一个应用。
  3. 修改 appengine/app.yaml 并将应用 ID 从 blockly-demo 更改为您在上一步中创建的应用名称。
  4. 将以下文件和目录复制(或软链接)到 appengine/static/
    • demos/
    • msg/
    • media/
    • *_compressed.js
  5. 可选:如果您想要在服务器上使用 blockly_uncompressed.js,那么也请将该文件复制到 appengine/static/,并将 core 复制到 appengine/static/
  6. 可选:如果您想要运行 Blockly 园地,则必须复制 blocksgeneratorstests 目录,以及第 5 步中的文件。
  7. 从 GUI 运行 Google App Engine 启动器,将 appengine 目录添加为现有应用,然后按“部署”按钮。如果您更喜欢使用命令行,请运行:appcfg.py --oauth2 update appengine/

上传 Blockly 后,您可以将浏览器指向您在第 2 步中创建的网址。您应该会看到一份演示列表,包括 Cloud Storage 演示。

与云交谈

检查 demos/storage/index.html 中的存储演示源代码,并注意以下功能。首先,有一个用于加载 Cloud Storage API 的脚本:

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

请注意,此脚本假定页面上只有一个 Blockly 工作区。还有下面这些消息定义,您应该根据需要进行修改:

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

您可以在 json 目录中的 Blockly Games 中找到这些消息的其他语言翻译。

保存当前代码块是对 BlocklyStorage.link() 的单个调用:

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

若要在网页加载时恢复已保存的代码块,只需在 Blockly 注入后使用网址的哈希值调用 BlocklyStorage.retrieveXml 即可:

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

本地存储空间

storage.js API 还能够在浏览器的本地存储空间中保存一组代码块。您可以采用这种方法来替代使用云存储,也可以结合使用云存储(但在后一种情况下,必须注意这两种尝试同时恢复的存储类型)。

如需从本地存储空间恢复块,请在注入 Blockly 后,在超时后立即调用 BlocklyStorage.restoreBlocks

setTimeout(BlocklyStorage.restoreBlocks, 0);

如需在用户离开页面时将数据块备份到本地存储空间,请调用 BlocklyStorage.backupOnUnload,它会在页面的卸载事件中注册事件监听器。

BlocklyStorage.backupOnUnload();

示例

这里是 Cloud Storage 的实时演示