Cloud Storage

如果您的應用程式託管於 App Engine,則可使用雲端儲存空間,讓使用者儲存、載入、共用及發布程式。

設定 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 Playground,就必須複製 blocksgeneratorstests 目錄,以及步驟 5 中的檔案。
  7. 從 GUI 執行 Google App Engine 啟動器,將 appengine 目錄新增為現有應用程式,然後按下 [Deploy] 按鈕。如果您想使用指令列,請執行:appcfg.py --oauth2 update appengine/

「Blockly」上傳完畢後,您可以將瀏覽器指向您在步驟 2 中建立的網址。您應該會看到示範清單,包括雲端儲存空間示範影片。

對雲端下達語音指令

請前往 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();

範例

請參考這個即時示範的雲端儲存空間。