Lorsque vous piratez le noyau de Blockly ou développez un plug-in, l'espace de jeu est un outil extrêmement utile. Il dispose d'une instance préconfigurée de Blockly que vous pouvez utiliser pour les tests, le débogage ou le prototypage. Chez Google, la quasi-totalité du développement de Blockly a lieu à l'aide de Playground. En guise d'aperçu, voici le simple espace de jeu sur le serveur de démonstration.
Il existe trois types d'environnements de jeu pour la version de base de Blockly: simple, avancé et multi. Dans les échantillons de blocs, seul le simulateur avancé est généralement utilisé.
Prérequis
Blockly utilise désormais le système de module Closure. En raison de la manière dont ils sont chargés, les modules Closure non compilés doivent être extraits à partir d'une URL http: ou https: et ne peuvent pas être extraits directement à partir d'URL file:. Par conséquent, pour charger le bac à sable en mode non compilé, vous devez le charger à partir d'un serveur Web local.
Nous avons créé un script qui lance un serveur local et charge tout le code requis pour charger les modules Blockly. Vous devez installer npm sur votre ordinateur et exécuter npm install à partir de la racine de Blockly pour installer toutes les dépendances.
Utiliser Internet Explorer
Blockly utilise désormais des fonctionnalités avancées dans son code qui peuvent ne pas être compatibles avec Internet Explorer. Dans le code compressé (compilé), ces fonctionnalités sont transpilées pour fonctionner avec IE, mais le chargement du code non compressé peut ne pas fonctionner. Si vous chargez Playground dans IE, même via un serveur HTTP local, Playground charge automatiquement le code Blockly compressé afin d'en garantir la compatibilité. Pour en savoir plus sur le test des modifications dans l'environnement de test en mode compressé, consultez la section "Accéder directement aux environnements de test".
Simple Playground
Les deux autres aires de jeux sont basées sur l'aire de jeux simple. Il affiche une boîte à outils et un espace de travail, et vous permet d'ajuster un nombre limité de paramètres.
Pour ouvrir le bac à sable, exécutez
npm run start
depuis la racine de Blockly. Assurez-vous que rien d'autre n'écoute sur le port 8080. Cette commande démarre un serveur hébergeant les modules Blockly et ouvre automatiquement votre navigateur sur la page de l'espace de jeu. Lorsque vous êtes prêt à arrêter le bac à sable, arrêtez le processus (Ctrl+C dans les environnements Mac et Linux).
Caractéristiques de l'environnement de jeu:
- L'ensemble du code est décompressé pour un développement rapide.
- Tous les blocs par défaut (sauf ceux qui sont obsolètes)
- Tous les générateurs de langage (JavaScript, Python, PHP, Lua et Dart).
- Sérialiser et désérialiser l'état de l'espace de travail (JSON ou XML)
- Basculer entre la mise en page de gauche à droite et de droite à gauche.
- Basculer entre les mises en page de la boîte à outils
- Tests de stress pour le moteur de rendu.
- Consignez tous les événements dans la console.
Terrain de jeu avancé
L'espace de jeu avancé contient des fonctionnalités supplémentaires pour faciliter encore plus le débogage de Blockly. Il s'agit également de l'espace de jeu par défaut utilisé dans les exemples blockly pour tous les plug-ins.
Ce bac à sable comprend toutes les fonctionnalités de base, ainsi que les suivantes:
- Vous pouvez configurer d'autres paramètres, tels que la taille de la grille, les commandes de zoom/déplacement, le moteur de rendu, le thème, etc.
- Les paramètres et les blocs utilisés sont mis en cache et utilisés automatiquement la prochaine fois que le bac à sable est chargé.
- Affichez la sortie de chaque générateur dans la même fenêtre.
Pour démarrer l'espace de jeu avancé pour un plug-in dans blockly-samples, exécutez npm run
start à partir du répertoire racine du plug-in. Actuellement, un seul plug-in peut s'exécuter à la fois et utilise le port 3000. Si vous ne parvenez pas à démarrer le plug-in, vérifiez d'abord qu'aucun autre processus n'écoute sur ce port.
Pour démarrer l'espace de jeu avancé dans le noyau, exécutez npm run start à partir de la racine de Blockly, puis cliquez sur le lien "Avancé" sous le titre.
Vous pouvez également créer votre propre page de test incluant l'espace de jeu avancé à l'aide du package dev-tools de Blockly.
Aire de jeux multiple
L'espace de jeu multi contient plusieurs espaces de jeu dans différentes configurations pour le mode LTR et l'emplacement de la boîte à outils. Cette commande est principalement utilisée pour vérifier rapidement que Blockly n'a pas endommagé quoi que ce soit lié à la LTR avant une version. Pour ouvrir ce bac à sable, suivez la procédure pour le bac à sable simple, puis remplacez l'URL par /tests/multi_playground.html.
Test des modifications…
Lorsque vous exécutez l'un des ateliers à partir d'un serveur local, il vous suffit généralement d'actualiser la page pour voir vos modifications dans Blockly. Si vous avez ajouté un fichier ou une dépendance à un fichier, vous devrez peut-être d'abord exécuter npm run
build, qui mettra à jour le fichier test/deps.js pour vous assurer que les dépendances sont chargées correctement, puis actualiser la page.
Si vous exécutez l'espace de jeu avancé d'un plug-in, vous n'avez même pas besoin d'actualiser la page. Les modifications sont chargées en mode à chaud automatiquement.
Accéder directement aux playgrounds
Auparavant, l'accès au simple bac à sable était local en accédant directement au fichier test/playground.html dans votre navigateur. Cela est toujours possible avec les aires de jeux simples et plusieurs, mais ce n'est plus recommandé. Dans ce cas, l'atelier détecte que vous n'exécutez pas de serveur local et utilise automatiquement des fichiers Blockly compressés (pour en savoir plus, consultez la page Building Blockly (Créer Blockly)). Chaque fois que vous modifiez quelque chose dans le noyau Blockly, vous devez recompiler le noyau et mettre en scène les modifications. Vous pouvez toujours accéder à ces pages si elles sont hébergées sur un serveur distant, comme notre exemple hébergé sur notre site de démonstration. L'arrière-plan est bleu vif lorsque vous êtes en mode compressé.
L'espace de jeu avancé n'est pas disponible avec l'accès file:.