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

Si vous souhaitez pro­gram­mer un site internet réa­gis­sant aux saisies de l’uti­li­sa­teur, vous serez à un moment ou à un autre confronté aux langages de pro­gram­ma­tion. Si votre objectif est de dé­ve­lop­per une ap­pli­ca­tion, vous devrez gé­né­ra­le­ment tra­vail­ler avec un langage de pro­gram­ma­tion plus complexe. Bien qu’il existe aujourd’hui de nom­breuses méthodes pour apprendre Python, Ja­vaS­cript et d’autres langages pro­gram­ma­tion, assimiler leurs commandes et leurs routines complexes re­pré­sente toujours un travail con­si­dé­rable. Si vous souhaitez vous mettre à la pro­gram­ma­tion pour la première fois, ou si vous avez uni­que­ment besoin d’un petit script, les méthodes ha­bi­tuelles vous pa­raî­tront souvent trop la­bo­rieuses.

C’est ici qu’in­ter­vient Blockly : il s’agit d’un projet de Google re­pré­sen­tant des extraits de code longs basés sur du texte, sous la forme de blocs gra­phiques. Ces blocs peuvent être assemblés à l’aide d’un glisser-déposer et per­met­tent de créer une syntaxe complexe, en seulement quelques minutes. Blockly est une bi­blio­thèque qui met à dis­po­si­tion un éditeur de code graphique. Dans ce cadre, la syntaxe des pro­grammes ainsi créés demeure en arrière-plan. En utilisant Blockly, vous pourrez fa­ci­le­ment créer des processus complexes sans avoir à penser aux commandes précises des dif­fé­rents langages de pro­gram­ma­tion.

L’uti­li­sa­tion de Blockly peut servir dif­fé­rents motifs et objectifs. Si vous souhaitez par exemple créer un site internet res­pon­sive sans disposer de con­nais­sances ap­pro­fon­dies en pro­gram­ma­tion, vous pouvez ra­pi­de­ment atteindre cet objectif grâce à cette bi­blio­thèque. Cependant, les dé­ve­lop­peurs de logiciels pro­fes­sion­nels peuvent aussi utiliser l’éditeur de code graphique pour créer des pro­grammes légers en un temps limité.

D’autre part, l’approche ludique permet une com­pré­hen­sion rapide du fonc­tion­ne­ment de la pro­gram­ma­tion. Il est plus simple de com­prendre 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 en­vi­ron­ne­ments d’ap­pren­tis­sage. Blockly peut être un bon moyen pour les enfants de faire leurs premiers pas en pro­gram­ma­tion lo­gi­cielle. La pré­sen­ta­tion visuelle des fragments de code permet d’atteindre des résultats im­pres­sion­nants, de façon simple et rapide.

L’interface visuelle rend le code clair et facile à com­prendre. 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 bi­blio­thèque Ja­vaS­cript, le code source peut être di­rec­te­ment restitué dans dif­fé­rents langages. Par défaut, le code est dis­po­nible en Ja­vaS­cript, Python, PHP, Lua, Dart et XML. Cet éditeur peut être utilisé en toute sim­pli­cité dans un na­vi­ga­teur.

La pro­gram­ma­tion graphique n’est pas une nouveauté. De nombreux pres­ta­taires l’utilisent pour créer des sites internet. À l’instar de Blockly, les modules intuitifs des sites internet im­pres­sion­nent par leur interface simple et intuitive. Le code écrit est en­tiè­re­ment en arrière-plan de sorte que même les débutants et les profanes peuvent ra­pi­de­ment atteindre des résultats.

Dans l’ap­pli­ca­tion Blockly, l’éditeur de code graphique comporte huit ca­té­go­ries pré­sen­tant dif­fé­rentes fonc­tion­na­li­tés :

• La logique décrit les actions.
• Les boucles sont des struc­tures de contrôle et se répètent jusqu’à une action spé­ci­fique se produise.
• La catégorie ma­thé­ma­tiques maîtrise dif­fé­rentes opé­ra­tions arith­mé­tiques et peut également donner des nombres aléa­toires.
• La catégorie texte peut accéder aux saisies et générer des sorties in­di­vi­duelles.
• Les listes génèrent des listes associées à des éléments de texte ou ma­thé­ma­tiques.
• 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 com­por­te­ment de la page lorsqu’une saisie précise a été iden­ti­fié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 ma­thé­ma­tiques, le texte, les listes et la couleur. Ces quelques com­bi­nai­sons per­met­tent de couvrir la base de dif­fé­rents langages de pro­gram­ma­tion.

L’uti­li­sa­tion 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 dif­fé­rents blocs peuvent alors être ajustés puis reliés aux autres blocs. Si une com­bi­nai­son est im­pos­sible, le bloc ne s’imbrique pas et n’est donc pas repris dans le code source. Les dif­fé­rentes pièces de puzzle ou les groupes de blocs cor­res­pon­dants peuvent être supprimés de l’espace de travail en toute sim­pli­cité. Les lignes de code cor­res­pon­dantes 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é sim­ple­ment peut à présent être traduit dans les dif­fé­rents langages de pro­gram­ma­tion. En Ja­vaS­cript, le code source res­sem­ble­rait à 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 pro­gram­ma­tion.

Alors que l’ap­pli­ca­tion est plutôt pensée pour les étudiants et les personnes en re­con­ver­sion pro­fes­sion­nelle, la bi­blio­thèque s’adresse davantage aux dé­ve­lop­peurs. Avec très peu d’efforts, les dé­ve­lop­peurs peuvent créer leurs propres blocs avec des fonctions et une logique afin de dé­ve­lop­per leur propre ap­pli­ca­tion à l’aide de la bi­blio­thèque.

Si vous souhaitez dé­ve­lop­per vos propres blocs dans Blockly, vous disposez de deux pos­si­bi­li­tés : il existe d’une part une API Ja­vaS­cript qui est prin­ci­pa­le­ment utilisée pour les ap­pli­ca­tions web. D’autre part, vous pouvez avoir recours à une interface JSON qui fonc­tionne également sous Android et iOS. Néanmoins, seuls les blocs les plus utilisés sont dis­po­nibles au format JSON. Une do­cu­men­ta­tion complète peut de plus être consultée sur GitHub. En outre, Google propose un guide détaillé sur le dé­ve­lop­pe­ment et l’uti­li­sa­tion de Blockly.

Sur YouTube, Stack Overflow et GitHub, on trouve aujourd’hui toute une palette de tutoriels et de do­cu­men­ta­tions indiquant comment utiliser cette bi­blio­thèque de façon efficace. La pro­gram­ma­tion de dif­fé­rents in­ter­rup­teurs et ré­cep­teurs pour gérer votre domotique n’est que l’une des nom­breuses pos­si­bi­li­tés. Grâce à la con­ver­sion dans une multitude de langages, vous pouvez donner libre cours à votre créa­ti­vité.

Si votre but est d’apprendre les langages de pro­gram­ma­tion, vous ap­pré­cie­rez à coup sûr la syntaxe parfaite écrite par ce programme qui n’oublie jamais un point-virgule ou des guil­le­mets. Son approche ludique permet également aux débutants de tra­vail­ler di­rec­te­ment sur des projets et de commencer à accumuler de l’ex­pé­rience. Les pos­si­bi­li­tés du langage peuvent être apprises ra­pi­de­ment per­met­tant ainsi la con­cep­tion de pro­to­types et de maquettes de façon intuitive.

Malgré sa sim­pli­cité, Blockly peut con­si­dé­ra­ble­ment accélérer le workflow. La bi­blio­thèque peut être fa­ci­le­ment intégrée à des projets existants et peut être utilisée encore plus fa­ci­le­ment pour réaliser de vastes projets en toute sim­pli­cité. Il est toutefois essentiel de se fa­mi­lia­ri­ser avec les fonc­tion­na­li­té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 dis­po­nibles. Par con­sé­quent, cette solution open source n’est pas uni­que­ment in­té­res­sante pour les débutants.