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.
- Téléchargez et installez le SDK Python.
- Connectez-vous à Google App Engine et créez une application.
- Modifiez
appengine/app.yaml
et remplacez l'ID applicationblockly-demo
par le nom de l'application que vous avez créé à l'étape précédente. - Copiez (ou redirigez de manière réversible) les fichiers et répertoires suivants dans
appengine/static/
:demos/
msg/
media/
*_compressed.js
- Facultatif: Si vous souhaitez utiliser
blockly_uncompressed.js
sur le serveur, copiez également ce fichier dansappengine/static/
et copiezcore
dansappengine/static/
. - Facultatif: Si vous souhaitez exécuter Blockly Playground, vous devez copier les répertoires
blocks
,generators
ettests
, ainsi que les fichiers de l'étape 5. - 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.