Une application Blockly est une application Web qui contient un éditeur Blockly (espace de travail). Ce document donne des exemples d'utilisation des applications Blockly et examine les fonctionnalités d'interface utilisateur typiques.
Si vous ne l'avez pas déjà fait, veillez à lire le glossaire visuel et les étapes de base de l'application avant de poursuivre la lecture de 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 basé sur du texte, comme 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 puzzle, animation ou musique:le code généré résout un puzzle (comme un labyrinthe), affiche une animation ou diffuse de la musique. Pour obtenir un exemple, consultez le 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 "Tape la taupe" 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 et téléchargez-le sur un robot réel ou exécutez-le dans le simulateur.
Dessin:le code généré dessine un dessin 2D ou 3D. Pour obtenir un exemple, consultez BlocksCAD.
Analyse de 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:code généré qui effectue une tâche spécifique à une application particulière. Par exemple, les outils pour les développeurs Blockly permettent 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
Un bon moyen de comprendre les composants typiques des applications Blockly est 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 Run. Par exemple, voici l'UI du labyrinthe dans Blockly Games.
Quelques applications Blockly omettent le bouton Run et mettent à jour le panneau de sortie chaque fois que l'utilisateur apporte une modification. Par exemple, l'application Graph dans les exemples de Blockly comporte deux panneaux de sortie (l'un pour le graphique et l'autre pour l'équation) qu'elle met à jour à chaque modification.
Certaines applications ne comportent pas de panneau de sortie. Cela est particulièrement courant dans les applications matérielles, telles que celles pour la programmation de robots. Bien que certaines de ces applications incluent un simulateur matériel, beaucoup 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'interface utilisateur 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 graphiques et audio, de panneaux pour créer des sprites et des arrière-plans, ainsi que de menus de fichiers, de modifications et de paramètres:
MakeCode Arcade, une application de création de jeux vidéo, comprend 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, dispose d'écrans distincts pour son concepteur d'IUG et son éditeur Blockly, ainsi que de menus de fichiers, de connexion, de compilation et de 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'interface utilisateur)
Programmation:
- Commandes de modification (annuler, rétablir, copier, couper, coller, dupliquer)
- Concepteur d'IUG
- Éditeurs de graphiques et de son
- É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, étape, mise en surbrillance des blocs)
- Définir des paramètres de test
Matériel
- Connexion (USB, Bluetooth, QR code)
- Configuration (choisir le modèle, choisir les accessoires, attribuer des noms aux composants)
- Contrôle (contrôler manuellement le robot, enregistrer la position du robot)
- Télécharger le code
Aide
- Documentation
- Tutoriels interactifs
- Aide contextuelle
Que dois-je faire ensuite ?
Si vous réfléchissez toujours à votre application, poursuivez votre lecture sur 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: