Une application Blockly est une application Web qui contient un éditeur Blockly (espace de travail). Ce document présente des exemples d'utilisation des applications Blockly et examine les fonctionnalités d'UI typiques.
Si vous ne l'avez pas encore fait, veillez à lire le glossaire visuel et les étapes de base pour les applications avant de continuer avec ce document.
Que font les applications Blockly ?
Les applications Blockly aident les utilisateurs à écrire des programmes dans divers domaines, des jeux vidéo à la robotique en passant par l'analyse de données. Les utilisateurs écrivent leurs programmes à l'aide de blocs, que l'application utilise pour générer du code textuel, tel que JavaScript ou Python. L'application exécute ensuite directement le code généré ou l'utilisateur le télécharge et l'exécute sur une autre plate-forme, comme un robot ou une manette de jeu vidéo portable.
Voici quelques exemples de types de programmes que les utilisateurs écrivent avec les applications Blockly :
Solutions de casse-tête, animation ou musique : le code généré résout un casse-tête (comme un labyrinthe), affiche une animation ou lit de la musique. Pour obtenir un exemple, consultez Music Lab de Code.org.
Jeux vidéo : le code généré exécute un jeu vidéo. Par exemple, créez les deux premiers niveaux de "Whack the Mole" dans MakeCode Arcade, puis téléchargez le jeu sur un contrôleur ou jouez-y dans le simulateur.
Robotique : le code généré dirige un robot. Par exemple, programmez un robot avec Ozoblockly, puis téléchargez le programme sur un robot réel ou exécutez-le dans le simulateur.
Dessin : le code généré dessine un dessin en 2D ou en 3D. Pour obtenir un exemple, consultez BlocksCAD.
Analyse des données : le code généré analyse les données et crée un graphique. Pour obtenir un exemple, consultez cette démonstration de la plate-forme Dialogic.
Code spécifique à une application : le code généré effectue une tâche spécifique à une application particulière. Par exemple, Blockly Developer Tools est un outil permettant de concevoir de nouveaux blocs Blockly. Il génère du code de définition de bloc que les utilisateurs copient et collent dans leur propre application Blockly.
Interfaces utilisateur
Pour bien comprendre les composants typiques des applications Blockly, il est utile d'examiner leurs interfaces utilisateur.
Composants d'UI de base
Presque toutes les applications Blockly partagent quelques composants de base : un éditeur Blockly (espace de travail), un panneau de sortie et un bouton "Exécuter". Par exemple, voici l'UI du labyrinthe dans Blockly Games.
Certaines applications Blockly omettent le bouton "Exécuter" et mettent à jour le panneau de sortie chaque fois que l'utilisateur effectue une modification. Par exemple, l'application Graph dans les exemples de Blockly comporte deux panneaux de sortie (un pour le graphique et un pour l'équation) qu'elle met à jour à chaque modification.
Certaines applications ne comportent pas de panneau de sortie. C'est le cas le plus courant dans les applications matérielles, comme celles pour la programmation de robots. Si certaines de ces applications incluent un simulateur matériel, la plupart d'entre elles permettent simplement aux utilisateurs de télécharger et d'exécuter le code généré directement sur l'appareil cible.
Composants d'UI supplémentaires
La plupart des applications comportent des composants d'UI supplémentaires. Certaines répondent à des besoins généraux, comme l'enregistrement du travail de l'utilisateur, tandis que d'autres répondent à des besoins spécifiques à l'application, comme la conception d'une IUG. Voici quelques exemples :
Scratch, une application permettant de créer des animations et des jeux vidéo, dispose d'éditeurs de graphismes et de sons, de panneaux pour créer de nouveaux sprites et arrière-plans, ainsi que de menus "Fichier", "Édition" et "Paramètres" :
MakeCode Arcade, une application de création de jeux vidéo, comporte des commandes de sortie, des éditeurs de code et de graphiques, un menu de paramètres, ainsi que des boutons de téléchargement et d'enregistrement. Son panneau de sortie simule une manette de jeu portable.
MIT App Inventor, une application permettant de créer des applications pour téléphone, comporte des écrans distincts pour son concepteur d'interface utilisateur graphique et son éditeur Blockly, ainsi que des menus "Fichier", "Connexion", "Compilation" et "Paramètres". Au lieu d'un panneau de sortie, les utilisateurs testent le code généré sur leur téléphone.
Les composants supplémentaires à inclure dépendent des objectifs de votre application et des capacités de vos utilisateurs. Voici quelques composants courants :
Administration :
- Gestion des fichiers (nouveau, ouvrir, enregistrer, enregistrer sous, supprimer)
- Gestion des comptes (création, connexion, déconnexion)
- Paramètres (langue, configuration de l'UI)
Programmation :
- Commandes de modification (annuler, rétablir, copier, couper, coller, dupliquer)
- Concepteur d'IUG
- Éditeurs de graphismes et de sons
- Éditeur de code ou affichage du code en lecture seule
Tests
- Configuration de la sortie (démarrage/arrêt, vitesse de lecture, volume, capture d'écran, etc.)
- Débogueur (points d'arrêt, exécution, pas à pas, mise en surbrillance des blocs)
- Définir les paramètres de test
Matériel
- Connexion (USB, Bluetooth, code QR)
- Configuration (choix du modèle, des accessoires et des noms de composants)
- Contrôle (contrôler manuellement le robot, enregistrer la position du robot)
- Télécharger le code
Aide
- Documentation
- Tutoriels interactifs
- Aide contextuelle
Où dois-je aller à partir de là ?
Si vous réfléchissez encore à votre application, continuez à lire les considérations de conception.
Si vous souhaitez découvrir comment créer une application simple, essayez l'atelier de programmation Premiers pas avec Blockly.
Si vous êtes prêt à écrire votre application :