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.
- Pobierz i zainstaluj pakiet SDK Python.
- Zaloguj się do Google App Engine i utwórz aplikację.
- Edytuj
appengine/app.yaml
i zmień identyfikator aplikacji zblockly-demo
na nazwę aplikacji utworzoną w poprzednim kroku. - Skopiuj (lub precyzyjny link) następujące pliki i katalogi do usługi
appengine/static/
:demos/
msg/
media/
*_compressed.js
- Opcjonalnie: jeśli chcesz korzystać z
blockly_uncompressed.js
na serwerze, skopiuj ten plik doappengine/static/
, a następnie skopiujcore
doappengine/static/
. - Opcjonalnie: jeśli chcesz uruchomić aplikację Blockly Playground, musisz skopiować katalogi
blocks
,generators
itests
, a także pliki z kroku 5. - 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.