Lorsque vous piratez le noyau de Blockly ou que vous développez un plug-in, Playground est un outil extrêmement utile. Elle 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 se fait dans Google Play. À titre d'exemple, voici le simple terrain de jeu sur le serveur de démonstration.
Trois types de jeux sont disponibles pour Core Blockly: simple, avancé et multi. Dans les échantillons de blocs, seul le mode avancé est généralement utilisé.
Conditions préalables
Blockly utilise désormais le système de module Closure. En raison de la façon dont ils sont chargés, les modules Closure non compilés doivent être récupérés à partir d'une URL http: ou https:, et ne peuvent pas être extraits directement à partir des URL file:. Par conséquent, pour charger le terrain de jeu en mode non compilé, vous devez le charger à partir d'un serveur Web local.
Nous avons créé un script qui démarre un serveur local et charge tout le code requis pour charger les modules Blockly. npm doit être installé sur votre ordinateur et vous devez exécuter npm install à partir de la racine de Blockly pour installer toutes les dépendances.
Utilisation d'Internet Explorer
Blockly utilise désormais des fonctionnalités avancées dans son codebase 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é pour garantir la compatibilité. Pour savoir comment tester des modifications dans Playground en mode compressé, consultez la section "Accéder directement aux aires de jeu".
Simple Playground
Les deux autres aires de jeu sont basées sur le terrain de jeu 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 l'aire de jeu, courez
npm run start
à partir de 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 Playground. Lorsque vous êtes prêt à fermer le simulateur, terminez le processus (Ctrl-c dans les environnements Mac et Linux).
Playground comprend:
- L'ensemble du code n'est pas compressé pour permettre un développement rapide.
- Tous les blocs par défaut (sauf certains blocs obsolètes).
- Tous les générateurs de langages (JavaScript, Python, PHP, Lua et Dart)
- Sérialiser et désérialiser l'état de l'espace de travail (JSON ou XML)
- Basculez 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 contrainte pour le moteur de rendu.
- Consignez tous les événements dans la console.
Simulation avancée
Advanced Playground contient des fonctionnalités supplémentaires pour faciliter le débogage de Blockly. Il s'agit également du simulateur par défaut utilisé dans les exemples blockly pour tous les plug-ins.
Cet outil inclut toutes les fonctionnalités simples de Playground, ainsi que:
- D'autres paramètres peuvent être configurés, 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 lors du prochain chargement du terrain de jeu.
- Affichez la sortie de chaque générateur dans la même fenêtre.
Pour lancer le mode avancé de simulation de n'importe quel 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 il utilise le port 3000. Si vous ne parvenez pas à démarrer le plug-in, assurez-vous d'abord que rien d'autre n'écoute sur ce port.
Pour lancer le mode avancé de simulation, exécutez npm run start à partir de la racine de Blockly, puis cliquez sur le lien "Advanced" (Avancé) sous le titre.
Vous pouvez également créer votre propre page de test incluant Advanced Playground à l'aide du package d'outils de développement de Blockly.
Aires de jeux multiples
Le "Multi Playground" contient plusieurs aires de jeu dans différentes configurations pour le mode LTR et l'emplacement de la boîte à outils. Elle permet principalement de vérifier rapidement que Blockly n'a rien cassé de LTR avant une version. Pour ouvrir ce Playground, suivez les étapes de Playground, puis remplacez l'URL par /tests/multi_playground.html.
Test des modifications…
Lorsque vous exécutez l'un des aires de jeu à partir d'un serveur local, il vous suffit d'actualiser la page pour afficher vos modifications dans Blockly. Si vous avez ajouté un nouveau fichier ou ajouté une dépendance à un fichier, vous devrez peut-être d'abord exécuter npm run
build, ce qui mettra à jour le fichier test/deps.js pour vous assurer que les dépendances sont chargées correctement, puis actualisez la page.
Si vous exécutez la simulation avancée d'un plug-in, vous n'avez même pas besoin d'actualiser la page. Les modifications sont automatiquement chargées à chaud.
Accéder directement aux aires de jeux
Auparavant, vous pouviez accéder localement à Playground en accédant directement au fichier test/playground.html dans votre navigateur. Cela est toujours possible avec les aires de jeu simples et multiples, mais ce n'est plus recommandé. Si vous effectuez cette opération, Playground détecte que vous n'exécutez pas de serveur local et que vous utilisez automatiquement des fichiers Blockly compressés (consultez la page Construire un bloc pour en savoir plus). Chaque fois que vous modifiez un élément de base de Blockly, vous devez recompiler le noyau et préparer les modifications. Vous pouvez toujours accéder à ces pages si elles sont hébergées sur un serveur distant, comme le fait notre exemple hébergé sur notre site de démonstration. L'arrière-plan devient bleu vif lorsque vous êtes en mode compressé.
Le simulateur avancé n'est pas disponible via un accès file:.