Cloud Storage

Jeśli Twoja aplikacja jest hostowana w App Engine, możesz skorzystać z usługi przechowywania w chmurze, która umożliwia użytkownikom zapisywanie, wczytywanie, udostępnianie i publikowanie ich programów.

Konfigurowanie App Engine

Pierwszym celem jest utworzenie własnej kopii Blockly w App Engine.

  1. Pobierz i zainstaluj pakiet SDK Python.
  2. Zaloguj się do Google App Engine i utwórz aplikację.
  3. Edytuj appengine/app.yaml i zmień identyfikator aplikacji z blockly-demo na nazwę aplikacji utworzoną w poprzednim kroku.
  4. Skopiuj (lub precyzyjny link) następujące pliki i katalogi do usługi appengine/static/:
    • demos/
    • msg/
    • media/
    • *_compressed.js
  5. Opcjonalnie: jeśli chcesz korzystać z blockly_uncompressed.js na serwerze, skopiuj ten plik do appengine/static/, a następnie skopiuj core do appengine/static/.
  6. Opcjonalnie: jeśli chcesz uruchomić aplikację Blockly Playground, musisz skopiować katalogi blocks, generators i tests, a także pliki z kroku 5.
  7. Uruchom program Google App Engine Launcher z GUI, dodaj katalog appengine jako istniejącą aplikację i kliknij przycisk „Wdróż”. Jeśli wolisz używać wiersza poleceń, uruchom: appcfg.py --oauth2 update appengine/.

Po przesłaniu aplikacji Blockly możesz ustawić w przeglądarce adres URL utworzony w kroku 2. Powinna się wyświetlić lista wersji demonstracyjnych, w tym wersja demonstracyjna miejsca w chmurze.

Rozmowa z chmurą

Sprawdź źródło wersji demonstracyjnej miejsca na demos/storage/index.html i zwróć uwagę na te funkcje. Pierwszy z nich zawiera skrypt, który wczytuje interfejs Cloud Storage API:

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

Ten skrypt zakłada, że na stronie jest tylko jeden obszar roboczy Blockly. Dostępne są też te definicje wiadomości, które musisz zmienić:

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

Tłumaczenia tych wiadomości na inne języki znajdziesz w Blockly Games w katalogu json.

Zapisanie bieżących bloków to pojedyncze połączenie z BlocklyStorage.link():

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

Aby przywrócić zapisane bloki podczas wczytywania strony, wywołaj funkcję BlocklyStorage.retrieveXml za pomocą skrótu adresu URL po wstrzyknięciu Blockly:

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

Pamięć lokalna

Interfejs storage.js API umożliwia też zapisanie pojedynczego zestawu bloków w pamięci lokalnej przeglądarki. Może to być wdrażane zamiast miejsca w chmurze lub oprócz miejsca w chmurze (w tym drugim przypadku trzeba jednak pamiętać o obu typach pamięci, które chcesz przywrócić jednocześnie).

Aby przywrócić bloki z pamięci lokalnej, wywołaj funkcję BlocklyStorage.restoreBlocks w czasie zaraz po wstrzyknięciu Blockly.

setTimeout(BlocklyStorage.restoreBlocks, 0);

Aby automatycznie tworzyć kopie zapasowe bloków w pamięci lokalnej, gdy użytkownik opuści stronę, wywołaj funkcję BlocklyStorage.backupOnUnload, aby zarejestrować element odbierający zdarzenie w momencie wyładowywania strony.

BlocklyStorage.backupOnUnload();

Przykład

Oto prezentacja na żywo miejsca w chmurze.