Cloud Storage

Si votre application est hébergée sur App Engine, un service de stockage dans le cloud est disponible pour permettre aux utilisateurs d'enregistrer, de charger, de partager et de publier leurs programmes.

Configurer App Engine

Le premier objectif est d'obtenir votre propre copie de Blockly en cours d'exécution sur App Engine.

  1. Téléchargez et installez le SDK Python.
  2. Connectez-vous à Google App Engine et créez une application.
  3. Modifiez appengine/app.yaml et remplacez l'ID application blockly-demo par le nom de l'application que vous avez créé à l'étape précédente.
  4. Copiez (ou redirigez de manière réversible) les fichiers et répertoires suivants dans appengine/static/ :
    • demos/
    • msg/
    • media/
    • *_compressed.js
  5. Facultatif: Si vous souhaitez utiliser blockly_uncompressed.js sur le serveur, copiez également ce fichier dans appengine/static/ et copiez core dans appengine/static/.
  6. Facultatif: Si vous souhaitez exécuter Blockly Playground, vous devez copier les répertoires blocks, generators et tests, ainsi que les fichiers de l'étape 5.
  7. Exécutez le lanceur Google App Engine à partir de l'IUG, ajoutez votre répertoire appengine en tant qu'application existante, puis appuyez sur le bouton "Déployer". Si vous préférez utiliser la ligne de commande, exécutez: appcfg.py --oauth2 update appengine/.

Une fois Blockly importé, vous pouvez pointer un navigateur vers l'URL que vous avez créée à l'étape 2. Vous devriez voir une liste de démonstrations, y compris la démonstration de Cloud Storage.

Parler dans le cloud

Examinez la source de la démonstration du stockage sur demos/storage/index.html et notez les fonctionnalités suivantes. Tout d'abord, un script inclut le chargement de l'API Cloud Storage:

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

Notez que ce script suppose qu'il n'y a qu'un seul espace de travail Blockly sur la page. Vous pouvez également modifier les définitions de message suivantes:

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

Vous trouverez la traduction de ces messages dans d'autres langues dans Blockly Games, dans le répertoire JSON.

L'enregistrement des blocs actuels consiste en un seul appel à BlocklyStorage.link():

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

Pour restaurer les blocages enregistrés lors du chargement de la page, il vous suffit d'appeler BlocklyStorage.retrieveXml avec le hachage de l'URL après l'injection de Blockly:

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

Stockage local

L'API storage.js offre également la possibilité d'enregistrer un seul ensemble de blocs dans l'espace de stockage local du navigateur. Cette méthode peut être mise en œuvre à la place du stockage dans le cloud ou en plus du stockage dans le cloud (dans ce dernier cas, il convient de se méfier des deux types de stockage qui tentent de restaurer simultanément).

Pour restaurer les blocs depuis le stockage local, appelez BlocklyStorage.restoreBlocks dans un délai juste après l'injection de Blockly.

setTimeout(BlocklyStorage.restoreBlocks, 0);

Pour sauvegarder automatiquement les blocs dans le stockage local lorsque l'utilisateur quitte la page, appelez BlocklyStorage.backupOnUnload et il enregistrera un écouteur d'événements lors du déchargement de la page.

BlocklyStorage.backupOnUnload();

Exemple

Voici une démonstration en direct de Cloud Storage.