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를 실행하려면 blocks, generators, tests 디렉터리 및 5단계의 파일을 복사해야 합니다.
  7. GUI에서 Google App Engine 런처를 실행하고 appengine 디렉터리를 기존 애플리케이션으로 추가한 다음 '배포' 버튼을 누릅니다. 명령줄을 사용하려면 appcfg.py --oauth2 update appengine/를 실행합니다.

Blockly가 업로드되면 브라우저에 2단계에서 만든 URL을 연결할 수 있습니다. 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가 삽입된 후 URL의 해시를 사용하여 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();

예

클라우드 스토리지의 라이브 데모를 확인해 보세요.