Chargement de l'article en cours ... L’application en ligne BlocAlgo est un support pour l’apprentissage de langages en informatique au collège ou au lycée. Elle propose la transcription en temps réel d’instructions sous forme de blocs en un script classique composé de lignes de code pouvant être exécutées. L’objectif est de permettre une transition moins abrupte lors d’un premier contact avec un nouveau langage (Python par exemple) pour des élèves ayant des rudiments d’algorithmie et de programmation. Ces derniers ont pour la plupart déjà utilisé des pseudo-langages sous forme de blocs (proposés par Scratch, Microbit…) et le passage à une mise en forme plus classique (simple texte sur fond blanc ou noir) peut se révéler démotivant. En effet, l’attention à prêter à la syntaxe (deux points et indentations), les instructions en anglais et la gestion de les erreurs lors de l’interprétation sont autant de freins lors de la transition vers Python. BlocAlgo se veut ainsi être un outil de transition facilitant la prise en main de nouveaux langages par les élèves et ouvrant à des possibilités de différenciation accrues pour l’enseignant. Accéder à BlocAlgo Présentation de l’interface Les éléments d’interface présentés dans les sections suivantes se base sur la version alpha de BlocAlgo pour Python. Les langages implémentés dans le futurs s’appuieront sur une interface assez similaire. L’interface est composée de trois zones principales sous forme de cartes. Elle s’adapte aux formats mobiles ainsi qu’à toutes les dimensions d’écran (dans la limite du raisonnable !). Zone 1 : construction de l’algorithme à l’aide de blocs. Cette zone est divisée verticalement en deux parties : à gauche la boîte à outils avec les blocs répartis en catégories, à droite l’espace de travail. Zone 2 : affichage du script correspondant aux blocs. Zone 3 : sortie (console, zone d’affichage…). Chacune de ces zones dispose d’un ensemble de boutons d’action qui seront détaillés dans la partie suivante. Prise en main et utilisation La barre de menu contient les outils nécessaires pour la gestion des activités : De gauche à droite : changer le thème (clair/sombre), téléverser un fichier (format xml), télécharger (au format xml), enregistrer dans le stockage local de l’ordinateur. Exécuter le script. La construction de l’algorithme se fait depuis la zone 1 à l’aide des blocs. Un bloc fixe est disposé au centre de l’espace de travail : Seuls les blocs liés directement ou indirectement à ce dernier seront traduits dans la zone 2 (script). Le cas échéant, les blocs orphelins apparaîtront grisés. Pour ajouter un bloc, sélectionner une catégorie dans la boîte à outils puis glisser déposer un bloc dans l’espace de travail. À chaque fois qu’un bloc est déposé dans l’espace de travail (et lié au bloc “# Début du programme”), la zone 2 de script est mise à jour avec l’instruction traduite correspondante. En cas de modification de la position d’un bloc intermédiaire (parent), tous les blocs fils sont déplacés avec lui. Pour la suppression d’un bloc, il faut sélectionner ce dernier et le glisser-déposer dans la corbeille en bas à droite de l’espace de travail (prendre garde aux blocs fils liés à ce bloc). Pour récupérer un bloc supprimé, faire un clic gauche sur le corbeille pour afficher l’historique des blocs supprimés. Les blocs sont répartis en catégories (détaillées ici pour Python) : Catégories Descriptions Bibliothèques Importation des bibliothèques Variables Création et modification de variables Listes Création et modification de listes Instructions Instructions de base (input, print, len…) Logique Instructions conditionnelles (if, else, elif…) Boucles Structures itératives (for et while) Fonctions Création et appel de fonctions Maths Opérations mathématiques s’appuyant sur la bibliothèque math Tortue Instructions liées à la bibliothèque turtle pour une programmation séquentielle d’un robot Graphique Instructions pour créer des représentations graphiques à l’aide de la bibliothèque matplotlib Aléatoire Instructions pour réaliser des tirages pseudo-aléatoires à l’aide de la bibliothèque random Enfin, plusieurs boutons sont disponibles dans l’entête de la zone 1 pour gérer l’espace de travail : Afficher/masquer la boîte à outils contenant les blocs. Défaire une action (CTRL+Z au clavier). Refaire une action (CTRL+Y au clavier). Réinitialiser l’espace de travail (supprime tous les blocs ainsi que les variables créées). Le zone 2 contient le script Python, mis automatiquement à jour dès lors qu’une modification est apportée à la construction par blocs (zone 1). En l’état, le fonctionnement de BlocAlgo n’est pas bidirectionnel. Il permet uniquement la transformation blocs vers script (et non script vers blocs). Ainsi, toute modification apportée au script (zone 2) sera perdue dès que la construction par blocs (zone 1) est modifiée. Il est possible d’enregistrer le script (au format py) en cliquant sur le bouton . Le zone 3 constitue l’affichage des sorties avec une console mais aussi un affichage graphique (pour turtle, matplotlib…). Un bouton dédié permet de passage d’un type de sortie à l’autre. Afficher le graphique. Afficher la console. Effacer la console. Pour aller plus loin : principe de fonctionnement et code source BlocAlgo est développé à l’aide de TailwindCSS (HTML/CSS) et JavaScript/TypeScript. Il se base sur deux projets principaux : Basthon Console est une application en ligne permettant l’apprentissage de la programmation (en Python 3 notamment), l’écriture d’un code ou son débogage. Le code source disponible ici sous licence GNU GPL v3. Blockly est une libraire JavaScript permettant la création d’éditeurs de code visuels sous forme de bloc. Le code source disponible ici sous licence Apcache-2.0. BlocAlgo est un fork de Basthon Console avec de nombreuses modifications apportées à l’interface mais aussi aux fonctionnalités disponibles pour l’utilisateur. Quelques modifications ont aussi été apportées au code source de Blockly afin de s’adapter aux besoins de BlocAlgo, en plus de la personnalisation de la mise en forme. Si tout cela vous intéresse ou que vous souhaitez contribuer au projet (implémentation de fonctionnalités, correction de bug, amélioration du code source…), le projet est disponible sur Framagit sous licence GNU GPL v3 juste ici : Code source Conclusion et feuille de route BlocAlgo est toujours en développement et la version proposée est loin d’être finalisée. L’implémentation des fonctionnalités suivantes constitue la feuille de route à court/moyen terme : Surlignage des différents blocs/instructions lors d’une exécution en mode pas à pas ; Affichage de détails plus explicites et en français lorsqu’une erreur intervient dans l’interprétation/la compilation ; Possibilité d’alterner entre des blocs “Python” et des blocs en pseudo-langage algorithmique ; Mise en place d’un système d’exerciseur configurable par les utilisateurs pour créer des parcours ; Prise en charge de nouveaux langages de programmation (Javascript ou même C++ pour Arduino) ou de langages informatiques (HTML, CSS…) ; Développement d’une version adaptée aux notebook Jupyter (en cours de production) : Important, à lire ! À la date de publication de cet article (mars 2023), BlocAlgo est toujours en développement (version alpha). Il reste de nombreuses fonctionnalités à implémenter et bugs à corriger. Par la mise à disposition gratuite de cet outil, j’espère obtenir des retours d’utilisateurs. N’hésitez donc pas à me contacter ici pour tout bug rencontré ou idée d’amélioration/proposition d’ajout d’application.
