Blockly : qu’est-ce que c’est ?

Si vous souhaitez programmer un site internet réagissant aux saisies de l’utilisateur, vous serez à un moment ou à un autre confronté aux langages de programmation. Si votre objectif est de développer une application, vous devrez généralement travailler avec un langage de programmation plus complexe. Bien qu’il existe aujourd’hui de nombreuses méthodes pour apprendre Python, JavaScript et d’autres langages programmation, assimiler leurs commandes et leurs routines complexes représente toujours un travail considérable. Si vous souhaitez vous mettre à la programmation pour la première fois, ou si vous avez uniquement besoin d’un petit script, les méthodes habituelles vous paraîtront souvent trop laborieuses.

C’est ici qu’intervient Blockly : il s’agit d’un projet de Google représentant des extraits de code longs basés sur du texte, sous la forme de blocs graphiques. Ces blocs peuvent être assemblés à l’aide d’un glisser-déposer et permettent de créer une syntaxe complexe, en seulement quelques minutes. Blockly est une bibliothèque qui met à disposition un éditeur de code graphique. Dans ce cadre, la syntaxe des programmes ainsi créés demeure en arrière-plan. En utilisant Blockly, vous pourrez facilement créer des processus complexes sans avoir à penser aux commandes précises des différents langages de programmation.

L’utilisation de Blockly peut servir différents motifs et objectifs. Si vous souhaitez par exemple créer un site internet responsive sans disposer de connaissances approfondies en programmation, vous pouvez rapidement atteindre cet objectif grâce à cette bibliothèque. Cependant, les développeurs de logiciels professionnels peuvent aussi utiliser l’éditeur de code graphique pour créer des programmes légers en un temps limité.

D’autre part, l’approche ludique permet une compréhension rapide du fonctionnement de la programmation. Il est plus simple de comprendre un énoncé comme « repeat 5 times » que « for int i = 0, i < 5, i++; », même si ces deux formules renvoient au même contenu. C’est pourquoi Blockly est souvent utilisé dans les environnements d’apprentissage. Blockly peut être un bon moyen pour les enfants de faire leurs premiers pas en programmation logicielle. La présentation visuelle des fragments de code permet d’atteindre des résultats impressionnants, de façon simple et rapide.

L’interface visuelle rend le code clair et facile à comprendre. Les blocs sont imbriqués les uns dans les autres comme les pièces d’un puzzle, et peuvent ensuite être convertis en code. Même si Blockly est une bibliothèque JavaScript, le code source peut être directement restitué dans différents langages. Par défaut, le code est disponible en JavaScript, Python, PHP, Lua, Dart et XML. Cet éditeur peut être utilisé en toute simplicité dans un navigateur.

La programmation graphique n’est pas une nouveauté. De nombreux prestataires l’utilisent pour créer des sites internet. À l’instar de Blockly, les modules intuitifs des sites internet impressionnent par leur interface simple et intuitive. Le code écrit est entièrement en arrière-plan de sorte que même les débutants et les profanes peuvent rapidement atteindre des résultats.

Dans l’application Blockly, l’éditeur de code graphique comporte huit catégories présentant différentes fonctionnalités :

• La logique décrit les actions.
• Les boucles sont des structures de contrôle et se répètent jusqu’à une action spécifique se produise.
• La catégorie mathématiques maîtrise différentes opérations arithmétiques et peut également donner des nombres aléatoires.
• La catégorie texte peut accéder aux saisies et générer des sorties individuelles.
• Les listes génèrent des listes associées à des éléments de texte ou mathématiques.
• La catégorie couleur permet de définir la couleur du texte ou de l’arrière-plan.
• Les variables peuvent être utilisées dans les calculs ou les fonctions.
• Les fonctions décrivent le comportement de la page lorsqu’une saisie précise a été identifiée.

Les blocs peuvent être combinés de diverses façons. Les boucles et les fonctions peuvent être associées à une logique et à des variables. La logique et les variables intègrent quant à elles les mathématiques, le texte, les listes et la couleur. Ces quelques combinaisons permettent de couvrir la base de différents langages de programmation.

L’utilisation des blocs est très intuitive : il suffit d’ouvrir une catégorie et de faire glisser le bloc de code souhaité dans l’espace de travail à l’aide de la souris. Les différents blocs peuvent alors être ajustés puis reliés aux autres blocs. Si une combinaison est impossible, le bloc ne s’imbrique pas et n’est donc pas repris dans le code source. Les différentes pièces de puzzle ou les groupes de blocs correspondants peuvent être supprimés de l’espace de travail en toute simplicité. Les lignes de code correspondantes sont alors retirées dans le code source.

Pour combiner un pop-up avec un compteur, par exemple, vous pouvez procéder comme suit :

Ce code généré simplement peut à présent être traduit dans les différents langages de programmation. En JavaScript, le code source ressemblerait à ce qui suit :

Bien sûr, l’exemple de code présenté ici est très simple. Mais apprendre à exprimer « Bonjour tout le monde ! » est toujours la première leçon lorsqu’on apprend un langage de programmation.

Alors que l’application est plutôt pensée pour les étudiants et les personnes en reconversion professionnelle, la bibliothèque s’adresse davantage aux développeurs. Avec très peu d’efforts, les développeurs peuvent créer leurs propres blocs avec des fonctions et une logique afin de développer leur propre application à l’aide de la bibliothèque.

Si vous souhaitez développer vos propres blocs dans Blockly, vous disposez de deux possibilités : il existe d’une part une API JavaScript qui est principalement utilisée pour les applications web. D’autre part, vous pouvez avoir recours à une interface JSON qui fonctionne également sous Android et iOS. Néanmoins, seuls les blocs les plus utilisés sont disponibles au format JSON. Une documentation complète peut de plus être consultée sur GitHub. En outre, Google propose un guide détaillé sur le développement et l’utilisation de Blockly.

Sur YouTube, Stack Overflow et GitHub, on trouve aujourd’hui toute une palette de tutoriels et de documentations indiquant comment utiliser cette bibliothèque de façon efficace. La programmation de différents interrupteurs et récepteurs pour gérer votre domotique n’est que l’une des nombreuses possibilités. Grâce à la conversion dans une multitude de langages, vous pouvez donner libre cours à votre créativité.

Si votre but est d’apprendre les langages de programmation, vous apprécierez à coup sûr la syntaxe parfaite écrite par ce programme qui n’oublie jamais un point-virgule ou des guillemets. Son approche ludique permet également aux débutants de travailler directement sur des projets et de commencer à accumuler de l’expérience. Les possibilités du langage peuvent être apprises rapidement permettant ainsi la conception de prototypes et de maquettes de façon intuitive.

Malgré sa simplicité, Blockly peut considérablement accélérer le workflow. La bibliothèque peut être facilement intégrée à des projets existants et peut être utilisée encore plus facilement pour réaliser de vastes projets en toute simplicité. Il est toutefois essentiel de se familiariser avec les fonctionnalités du programme. Le code source généré par Blockly peut être intégré dans de nombreux projets grâce à la multitude de langages disponibles. Par conséquent, cette solution open source n’est pas uniquement intéressante pour les débutants.