Blockly utilise des blocs visuels liés entre eux pour faciliter l’écriture de code et peut générer du code en JavaScript , Lua , Dart , Python ou PHP . Il peut également être personnalisé pour générer du code dans n’importe quel langage de programmation textuel . [3]
Historique
Le développement de Blockly a commencé à l’été 2011. La première version publique a eu lieu en mai 2012 à Maker Faire . Blockly a été initialement conçu pour remplacer OpenBlocks dans App Inventor . [4] Neil Fraser a commencé le projet avec Quynh Neutron, Ellen Spertus et Mark Friedman comme contributeurs.
Interface utilisateur
L’ interface utilisateur graphique (GUI) par défaut de l’éditeur Blockly se compose d’une boîte à outils, qui contient les blocs disponibles, et où un utilisateur peut sélectionner des blocs, et un espace de travail, où un utilisateur peut faire glisser et déposer et réorganiser les blocs. L’espace de travail comprend également, par défaut, des icônes de zoom et une corbeille pour supprimer des blocs. [5] L’éditeur peut être modifié facilement pour personnaliser et limiter les fonctionnalités et les blocs d’édition disponibles.
Personnalisation
Blockly comprend un ensemble de blocs visuels pour les opérations courantes et peut être personnalisé en ajoutant plus de blocs. Les nouveaux blocs nécessitent une définition de bloc et un générateur. La définition décrit l’apparence du bloc (interface utilisateur) et le générateur décrit la traduction du bloc en code exécutable. Les définitions et les générateurs peuvent être écrits en JavaScript ou à l’aide d’un ensemble visuel de blocs, la Block Factory , qui permet de décrire de nouveaux blocs à l’aide de blocs visuels existants ; l’intention est de faciliter la création de nouveaux blocs.
Candidatures
Blockly est utilisé dans plusieurs projets notables, notamment :
Scratch du MIT , environnement de programmation visuel pour l’éducation [6]
Code.org , pour enseigner la programmation d’introduction à des millions d’étudiants dans le cadre de leur programme Hour of Code [8]
MakeCode de Microsoft , « une plate-forme d’apprentissage en ligne gratuite où tout le monde peut créer des jeux, coder des appareils et modifier Minecraft » [9] [10]
RoboBlockly , un environnement de simulation de robot basé sur le Web pour apprendre le codage et les mathématiques
PICAXE , pour contrôler leurs micropuces éducatives [11]
La création d’un site Web qui répond aux entrées des utilisateurs nécessite une compréhension des langages de programmation. Et toute personne qui développe une application doit généralement travailler avec un langage de programmation de niveau supérieur . Bien qu’il existe de bonnes ressources d’apprentissage pour Python, JavaScript et des langages similaires, il faut encore beaucoup d’efforts pour internaliser les commandes et les routines complexes. Ceux qui veulent juste s’essayer à la programmation ou n’ont besoin que d’un court script trouveront généralement les outils conventionnels trop difficiles à saisir rapidement.
C’est là qu’intervient Blockly : Blockly est un projet développé par Google qui présente de longues chaînes de code textuelles dans des blocs visuels. Ces blocs peuvent être assemblés par glisser-déposer. Cela vous permet de créer une syntaxe complexe en quelques minutes. Blockly est une bibliothèque qui fournit un éditeur de code visuel . La syntaxe des programmes ainsi créés reste en arrière-plan. Toute personne travaillant avec Blockly peut facilement créer des processus complexes sans se soucier des commandes exactes des langages de programmation individuels.
Il existe de nombreuses raisons d’utiliser Blockly. Par exemple, créer un site Web réactif sans connaissances approfondies en programmation est un jeu d’enfant avec cette bibliothèque. Mais l’éditeur de code visuel peut également être utilisé par les développeurs de logiciels professionnels pour créer rapidement de petits programmes.
De plus, l’approche ludique permet d’appréhender rapidement les relations lors de la programmation. Il est plus facile de comprendre l’instruction « répéter 5 fois » que « pour int i = 0, i < 5, i++ ; » – même s’ils signifient tous les deux la même chose. C’est pourquoi Blockly est souvent utilisé dans les environnements d’apprentissage . Blockly peut être un excellent moyen pour les enfants de faire leurs premiers pas dans le développement de logiciels s’ils sont intéressés par l’apprentissage de la programmation. L’obtention de résultats impressionnants est rapide et facile grâce à la présentation visuelle des jeux de codes.
L’interface visuelle rend le code clair et facile à comprendre. Les blocs sont assemblés comme des pièces de puzzle et peuvent ensuite être transformés en code. Bien que Blockly soit lui-même une bibliothèque JavaScript, le texte source peut être sorti directement dans différentes langues. Le code est disponible en standard en JavaScript, Python, PHP, Lua, Dart et XML. L’éditeur est facilement accessible dans un navigateur .
La programmation visuelle n’est plus une nouveauté. De nombreux utilisateurs l’utilisent déjà pour créer des sites Web. Comme Blockly, les kits de sites Web intuitifs excellent avec leur interface simple et intuitive. Le code écrit s’exécute complètement en arrière-plan, permettant aux débutants et aux non-techniciens de réussir rapidement.
Note
Blockly est très similaire à Scratch . Alors que Blockly s’adresse davantage aux développeurs professionnels dans un contexte commercial, Scratch se veut avant tout une ressource pédagogique.
Quelles fonctions propose Blockly ?
L’application Blockly – l’éditeur de code visuel – propose huit catégories avec différentes fonctions :
La logique décrit les actions.
Les boucles sont des structures de contrôle et se répètent jusqu’à ce qu’une certaine action se produise.
Math gère différents types de calculs et peut également émettre des nombres aléatoires.
Le texte peut accéder aux entrées et générer des sorties individuelles.
Les listes créent des listes en combinaison avec des éléments textuels ou mathématiques.
La couleur peut être appliquée à la couleur du texte ou de l’arrière-plan.
Les variables peuvent être utilisées dans des calculs ou des fonctions.
Les fonctions décrivent le comportement de la page lorsqu’une certaine entrée est détectée.
Il existe différentes options de combinaison entre les blocs. Les boucles et les fonctions peuvent être combinées avec la logique et les variables, tandis que la logique et les variables peuvent intégrer des mathématiques, du texte, des listes et des couleurs. Cette gamme de combinaisons couvre de nombreuses bases essentielles de divers langages de programmation.
Exemple de bloc
L’utilisation des blocs est vraiment intuitive. Ouvrez simplement une catégorie et faites glisser le bloc de code souhaité dans la zone de travail à l’aide de la souris. Les blocs individuels peuvent également être ajustés et combinés avec d’autres. Si une combinaison n’est pas possible, le bloc ne s’enclenchera pas et ne sera pas non plus inclus dans le texte source. Des pièces de puzzle individuelles ou des groupes de blocs associés peuvent facilement être à nouveau supprimés de la zone de travail. Dans ce cas, les lignes de code correspondantes sont supprimées du texte source.
Pour combiner une pop-up avec un compteur par exemple, vous pouvez procéder comme suit :
Le code généré peut maintenant être traduit dans différents langages de programmation. En JavaScript, le texte source ressemblerait à ceci :
var count;
count = 1;
while (count <= 3) {
window.alert(‘Hello, World!');
count = count + 1;
}
Bien sûr, ce n’est qu’un exemple de code très simple. Mais la sortie « Hello, World! » est toujours la première leçon lors de l’apprentissage d’un langage de programmation.
Où Blockly est-il utilisé ?
Alors que l’application s’adresse aux étudiants et aux nouveaux arrivants, la bibliothèque proprement dite s’adresse aux développeurs . Avec peu d’effort, les développeurs peuvent créer leurs propres blocs avec des fonctions pour créer leurs propres applications à l’aide de la bibliothèque.
Il existe deux façons de développer vos propres blocs dans Blockly. Tout d’abord, l’ API JavaScript est disponible et est principalement utilisée pour les applications Web. Deuxièmement, une interface JSON est fournie qui fonctionne sur Android et iOS. Seuls les blocs les plus populaires sont disponibles au format JSON. De plus, une documentation complète peut être consultée sur GitHub. Et Google propose un guide complet pour développer et utiliser Blockly .
D’innombrables tutoriels et documents sont désormais disponibles sur YouTube, Stack Overflow et GitHub, expliquant comment utiliser efficacement la bibliothèque. La programmation de divers interrupteurs et récepteurs pour la gestion de la maison intelligente n’est qu’une des nombreuses possibilités. Étant donné que le programme peut être connecté à un large éventail de langues, il n’y a pratiquement aucune limite à votre créativité.
Conclusion : une bonne alternative aux langages de programmation complexes
Ceux qui veulent apprendre les langages de programmation apprécieront le fait que le programme Blockly écrit toujours la bonne syntaxe et n’oublie jamais d’ajouter un point-virgule ou un guillemet. L’approche ludique facilite le démarrage des projets – même pour les débutants – leur permettant d’acquérir une expérience pratique de la programmation. Vous apprenez rapidement les possibilités du langage et pouvez instinctivement concevoir des prototypes et des maquettes .
Blockly est peut-être un outil simple, mais il peut considérablement rationaliser le flux de travail de développement. Il est facile d’intégrer la bibliothèque dans des projets existants et encore plus facile de réaliser de grands projets. Cependant, il est important de se familiariser avec les différentes fonctions. Le texte source créé par Blockly peut être intégré dans de nombreux projets, grâce au large éventail de langues. Par conséquent, la solution open source n’est pas seulement pertinente pour les débutants.
Dans cet article, nous allons parler deen bloc, une bibliothèque pour créer des langages de programmation visuels. L’utilisateur écrit du code à l’aide de blocs et le logiciel le transpile dans le langage de programmation traditionnel de son choix. Il donne le pouvoir de programmer à des personnes sans aucune expérience en codage.
Nous allons voir en quoi il diffère de Scratch et vous pouvez l’utiliser pour simplifier la programmation pour vos utilisateurs. En fait, dans ce tutoriel, nous allons créer un langage simple que n’importe qui peut utiliser.
Scratch par rapport à Blockly
Si vous jetez un coup d’œil à Blockly, vous serez peut-être pardonné de l’avoir confondu avec un clone deGratter, le langage de programmation pédagogique basé sur les blocs. En effet, ils se ressemblent. Cependant, il existe une grande différence entre les deux : Blockly est une bibliothèque JavaScript, un outil ; ce n’est pas une langue.
Il existe également d’autres différences. Scratch est avant tout un langage de programmation et une plate-forme visant à enseigner la programmation aux enfants âgés de 8 à 16 ans. Blockly est une bibliothèque qui apporte une fonctionnalité, la programmation visuelle, à n’importe quel contexte.
S’il est vrai que Blockly a également été principalement utilisé à des fins éducatives, ce n’est pas la seule raison pour laquelle il peut être utilisé.
Enfin, comme nous l’évoquions dans notre article surHédy, Scratch est fondamentalement un système fermé. Les concepts de codage que vous apprenez dans Scratch sont transférables, mais le code lui-même ne l’est pas. Ce n’est pas vrai pour Hedy ou Blockly. Dans Hedy, vous finissez par apprendre Python, avec Blockly, vous pouvez transpiler votre code dans quelques langages de programmation traditionnels différents.
Qu’est-ce que Blockly ?
La bibliothèque Blockly ajoute un éditeur à votre application qui représente les concepts de codage sous forme de blocs imbriqués
Blockly est une bibliothèque de Google, avec tout le support technique que vous pouvez attendre d’une telle entreprise. Ainsi, vous pouvez personnaliser l’apparence des blocs ou l’intégrer dans une application React ou Vue. En ce sens, c’est comme n’importe quelle autre bibliothèque.
Cette fonctionnalité et cette flexibilité sont idéales pour apporter la programmation graphique à un public qui n’y est pas habitué. Cela ne signifie tout simplement pas la programmation au sens traditionnel, par exemple il y aun tutoriel qui vous apprend à l’utiliser pour créer des fichiers JSON. Vous pouvez également l’utiliser pour permettre à l’utilisateur de créermodèles de sons.
Pourquoi utiliser Blockly ?
Dans ce tutoriel, nous allons l’utiliser pour créer un langage de programmation simple.
Pourquoi voudriez-vous faire ça ? La raison est la même pour la création de DSL : les programmeurs sont doués pour la programmation, mais pas pour tout le reste. Vous souhaitez donc donner aux experts les outils dont ils ont besoin pour définir eux-mêmes les automatisations et les programmes.
De ce point de vue, Blockly peut être une excellente option à considérer. Sa nature graphique est immédiatement plus accessible que vos DSL textuels typiques. C’est aussi une question de perception. L’utilisateur écrit efficacement du code, mais il le fait dans un environnement familier et en utilisant des outils qui lui semblent naturels.
Son existence en tant que bibliothèque JavaScript vous permet de créer beaucoup plus facilement des langages ou de l’intégrer dans d’autres codes.
JetBrains MPS est un excellent outil, mais vous devez tout mettre en œuvre : tout est intégré dans une seule plate-forme, vous devez donc vous y engager. D’autre part, vous pouvez commencer progressivement avec Blockly, par exemple pour permettre aux utilisateurs de programmer certains aspects simples d’un programme plus vaste encore écrit dans un langage de programmation traditionnel.
À l’inverse, l’expérience Blockly par défaut peut être trop accessible pour être utilisée dans un environnement d’entreprise. Ce que nous voulons dire, c’est que Blockly n’est pas un jouet, mais il ressemble à un jouet, il peut donc être difficile de persuader un CTO de l’utiliser à des fins commerciales sérieuses.
En bref, Blockly excelle lorsque la syntaxe est le principal obstacle à la programmation . En utilisant une approche visuelle, Blockly supprime la nécessité d’une utilisation précise des parenthèses, des points-virgules, de l’indentation ou d’obstacles similaires. L’utilisateur ne peut littéralement pas faire d’erreurs syntaxiques. Il est facile d’apprendre par essai et de voir ce qui fonctionne, de sorte que l’utilisateur sera moins susceptible de se sentir frustré.
Notre objectif
Imaginez que vous ayez un spécialiste du marketing qui doit optimiser les retours d’une newsletter. Dans son travail quotidien, ils doivent créer, tester et optimiser les règles d’envoi d’e-mails aux abonnés. Le problème est qu’à chaque fois qu’ils veulent essayer quelque chose, ils doivent soit choisir entre des outils basiques et inefficaces, soit demander l’aide d’un programmeur.
Les outils sont bons pour l’utilisateur moyen, mais ils peuvent obtenir de meilleurs résultats. La programmation est puissante, mais il ne peut pas le faire tout seul. Et expliquer les choses au programmeur prend du temps et de la frustration. Ils comprennent la logique du marketing, mais il leur manque les outils pour tirer le meilleur parti de leur expertise. Est-ce qu’il y a un moyen de résoudre ceci? Découvrons-le.
Nous voulons offrir à notre marketeur un moyen simple de créer des algorithmes pour évaluer les gens selon leurs caractéristiques. Par exemple, cela peut être utile pour décider d’envoyer ou non un e-mail marketing spécifique à un utilisateur. Notre public cible est constitué de personnes effrayées par des termes tels que algorithme , donc Blocky est un outil parfait à utiliser.
L’idée de base est que le spécialiste du marketing créera une méthode pour attribuer un score à un utilisateur. Il fixera également une note de passage minimale. Ensuite, l’utilisateur sera évalué selon les critères définis et réussira ou échouera. Dans une application réelle, cette méthode de notation serait probablement liée à un programme plus vaste. Par exemple, si l’utilisateur obtient une note de passage, il recevra un e-mail avec une offre. Cependant, dans notre exemple, nous allons simplement concevoir le langage de notation et générer le code.
Une application Blockly en moins de 30 lignes de code
Avant de plonger dans notre exemple, essayons de comprendre comment s’organise un projet Blockly. Un projet Blockly est basé sur des blocs. Vous pouvez considérer ces blocs comme des unités de code indépendantes. Pour chaque bloc, vous définissez sa structure, son apparence et le code qu’il génère. Par conséquent, un programme Blockly n’est rien de plus qu’une combinaison de blocs instanciés. Crucialement pour cet exemple, Blockly est livré avec quelques blocs prédéfinis pour gérer les éléments de base, tels que les nombres.
Pour avoir une meilleure idée de Blockly, commençons par l’exemple le plus simple possible.
< div >
< div id = « blocklyDiv » style = « hauteur : 480 px ; largeur : 480 px ; » > </ div >
< button id = « test » > Multiplier par 5 </ button >
Nous avons juste besoin d’un conteneur, dans ce cas blockly-div. Nous ajoutons également un bouton pour générer du code à partir de notre application et un divemplacement pour placer le résultat.
Nous chargeons la bibliothèque Blockly dans le premier scriptet notre code principal dans le second. Le code principal est d’une simplicité troublante.
boîte à outils const = {
‘type’ : ‘flyoutToolbox’ ,
‘contenu’ : [
{
‘genre’ : ‘bloquer’ ,
‘type’ : ‘num_math’
}
]
}
var espace de travail = Blockly. injecter ( ‘blocklyDiv’ , {
Nous définissons une boîte à outils, qui contient la liste des blocs disponibles pour l’utilisateur. Dans cet exemple, nous ne définissons aucun bloc personnalisé, nous utilisons simplement le bloc standard pour saisir un nombre de type math_number.
Nous injectons ensuite notre boîte à outils dans le divque nous avons défini précédemment. Cela accomplit deux choses : il charge la boîte à outils et renvoie également l’espace de travail. L’espace de travail est essentiellement l’équivalent d’un fichier de code, il contient les blocs utilisés dans le programme en cours. Nous devons le sauvegarder, car nous allons l’exécuter dans le contenu.
Enfin, nous raccrochons le bouton de test à la fonction qui exécutera le code.
fonction exécuter ( événement, espace de travail ) {
var code = « 5 * » + Blockly. Javascript . workspaceToCode ( espace de travail ) ;
Pour exécuter le code, nous avons littéralement besoin de trois lignes de code. La méthode workspaceToCode(workspace)transpile les blocs définis dans l’espace de travail fourni. Maintenant, nous avons du code JavaScript : nous l’exécutons et affichons le résultat dans notre div. Dans cet exemple le plus simple possible, le code généré par Blockly ne sera qu’un nombre, nous pouvons donc le multiplier par 5 pour obtenir notre résultat.
Bien sûr, c’est un programme très basique. Il ne prend en charge que la multiplication d’un nombre/bloc. Cela ne vise pas à montrer le potentiel de Blockly, mais à quel point il est facile de l’utiliser. Et nous avons créé un programme en moins de 30 lignes de code. Nous pouvons faire beaucoup plus avec un exemple plus intéressant.
Mise en place d’un projet Blockly
Blockly est assez flexible et peut être configuré de la meilleure façon pour votre projet. Étant une bibliothèque JavaScript, vous pouvez évidemment simplement l’installer avec npm. Cependant, vous pouvez également l’utiliser en chargeant directement à partir du code HTML, en utilisant le CDN unpkg.
Vous pouvez utiliser n’importe quel CDN que vous aimez, mais unpkg est directement lié au registre npm, vous savez donc qu’il est toujours synchronisé avec la version officielle. Nous allons utiliser cette deuxième approche, car nous n’avons pas besoin d’utiliser de nœud, c’est donc plus facile.
L’utilité de cette flexibilité de configuration est aggravée par le fait que vous pouvez utiliser Blockly pour générer du JavaScript, mais aussi d’autres langages comme PHP, Python, Dart ou Lua.
Imaginons que nous voulions utiliser notre langage de notation sur une application frontale PHP pour leur permettre de générer des algorithmes de notation. Ensuite, nous pourrions prendre les mêmes applications créées par nos experts en marketing et les utiliser sur un backend de nœud intégré à notre logiciel de newsletter.
Notre page principale
Nous avons opté pour unpkg, donc tout ce dont nous avons besoin maintenant est une page HTML pour contenir notre application.
Aux lignes 8-9, nous chargeons notre framework CSS (Bulma) et quelques styles personnalisés. Vers la fin du corps, nous chargeons la bibliothèque Blockly, quelques blocs personnalisés Blockly et notre code principal.
Les blocs personnalisés Blockly sont essentiellement votre langage. Ils définissent l’aspect et le comportement des composants personnalisés que vos utilisateurs utiliseront pour écrire des programmes dans votre langage. En plus de vos blocs personnalisés, vos utilisateurs peuvent toujours avoir accès à des blocs standard, tels que des blocs if-else ou des blocs numériques. Vous définissez les blocs que vos utilisateurs peuvent utiliser, vous pouvez donc les inclure ou les exclure comme bon vous semble.
À l’intérieur de la page, vous voyez également des commentaires intéressants tels que <-- blockly main toolbox -->ou <-- blockly sample data workspace -->. Au lieu de ces commentaires, nous aurions en fait des sections de configuration écrites en XML, qui contiendraient des instructions de configuration pour la boîte à outils et l’espace de travail.
Deux questions évidentes :
Que sont les boîtes à outils et les espaces de travail ?
Et pourquoi y en a-t-il deux?
Nous allons répondre à la première question dans la section suivante. La réponse à la seconde est simple : nous voulons que nos clients définissent un algorithme de notation pour leurs utilisateurs, nous devons donc également leur permettre de définir des exemples d’utilisateurs pour tester l’algorithme. Donc, nous aurions en fait différents environnements Blockly.
Imaginez ce scénario : John travaille dans le marketing et il souhaite définir une logique pour choisir qui reçoit quels e-mails. Il ne veut pas apprendre à coder, mais s’il avait un outil pour décrire cette logique il pourrait très bien l’utiliser. C’est parce qu’il comprend les concepts et les besoins derrière la tâche. Nous allons leur donner ces outils avec Blocky. Pour ce faire, il a besoin d’un environnement qui lui permette de créer un algorithme et de vérifier les résultats sur un utilisateur hypothétique. C’est pourquoi nous avons deux environnements Blockly : l’un pour créer l’algorithme et l’autre pour définir certains paramètres pour un exemple d’utilisateur.
Les choses intéressantes sur lesquelles se concentrer en ce moment sont en fait les divs dans lesquelles ces commentaires sont insérés. Si vous souhaitez que l’espace de travail Blockly apparaisse, vous devez définir une taille d’une manière ou d’une autre. Vous pouvez créer un espace de travail Blockly redimensionnable avec du code JavaScript ou vous pouvez en créer un de taille fixe avec CSS, comme nous l’avons fait. L’important est que vous définissiez une taille pour votre espace de travail.
Boîtes à outils et espaces de travail
On parle sans cesse de l’espace de travail, mais qu’est-ce que c’est ? Il s’agit essentiellement du fichier de code de votre application. Il contient les blocs utilisés pour définir votre programme. La différence entre un espace de travail et un fichier de code traditionnel est que vous n’avez généralement qu’un seul espace de travail pour chaque programme. Cela signifie que les programmes Blockly sont pour la plupart des programmes à fichier unique, même si, comme nous allons le voir, vous pouvez facilement combiner les programmes générés par différents espaces de travail.
Une boîte à outils contient à la place tous les blocs disponibles pour l’utilisateur. Il n’y a pas de parallèle simple entre une boîte à outils et tout ce qui est disponible dans un langage de programmation traditionnel. Compte tenu de la nature graphique de la programmation Blockly, vous avez besoin de quelque chose pour stocker et présenter les blocs de construction du code Blockly à l’utilisateur. C’est à cela que sert la boîte à outils.
Les espaces de travail et les boîtes à outils sont configurés de la même manière : avec du code XML. Vouspourrait également utiliser JSONcode, mais pour une fois XML semble être mieux adapté à la tâche. Cela crée une structure plus propre et plus lisible.
L’espace de travail principal et la boîte à outils
Voyons l’espace de travail et les boîtes à outils de votre programme, en commençant par l’espace de travail principal.
< xml xmlns = « https://developers.google.com/blockly/xml » id = « workspaceBlocks » style = « display: none » >
< type de bloc = « scoring_block » id = « 6t)r:LY:Sm~!NcLp70@p » x = « 38 » y = « 12 » >
< nom du champ = « minimum_score » > 0 </ champ >
</ bloc >
</ xml >
L’espace de travail principal a un identifiant, nécessaire pour trouver et charger son contenu dans notre code JavaScript. Ensuite, il y a les blocs. Dans ce cas, nous n’avons qu’un seul bloc, qui est essentiellement la fonction principale d’une application de notation. Ainsi, chaque fois que l’utilisateur charge la page, l’espace de travail démarre avec ce bloc inclus.
Chaque bloc a un type, dans ce cas scoring_block. Le type définit l’aspect et le comportement du bloc. C’est l’attribut le plus important. Vous pouvez également définir une position, avec les attributs x et y. Les blocs contiennent également un identifiant, dans ce cas il est aléatoire car nous l’avons généré à l’aide des outils de développement fournis par l’équipe Block. Nous verrons ces outils plus tard.
À l’intérieur du bloc, vous pouvez avoir différents champs et valeurs, selon le bloc. Nos applications de notation doivent avoir un score minimum pour comprendre si l’utilisateur réussit ou échoue à la notation, nous fournissons donc ici une valeur par défaut.
La boîte à outils est fondamentalement similaire, mais avec plus de blocs.
< xml xmlns = « https://developers.google.com/blockly/xml » id = « toolbox » style = « display: none » >
< type de bloc = « condition_block » > </ bloc >
< type de bloc = « liste_fonctionnalités » >
< field name = « feature » > AGE </ field >
</ bloc >
< type de bloc = « has_tag » >
< nom du champ = « tag_value » > 0 </ champ >
</ bloc >
< type de bloc = « num_math » >
< nom du champ = « NUM » > 0 </ champ >
</ bloc >
</ xml >
C’est la principale différence pratique entre les deux. Fonctionnellement, ils sont identiques : ils contiennent des blocs. En pratique, la boîte à outils peut sembler beaucoup plus compliquée car elle doit contenir tout ce que l’utilisateur pourrait utiliser.
Les boîtes à outils peuvent également devenir très compliquées car elles peuvent être utilisées pour configurerstyle et organisation. Par exemple, vous pouvez séparer les blocs en catégories, définir des valeurs par défaut, etc. Imaginez que vous ayez besoin d’organiser et d’afficher chaque instruction dans une langue. Cela peut facilement devenir compliqué.
Pas dans notre cas cependant, où tout est agréable et compréhensible.
Notez qu’il n’est pas immédiatement évident à quoi les blocs ressembleront et fonctionneront simplement en regardant la configuration de la boîte à outils. Vous devez mentionner tous les champs et options lors de la configuration, uniquement celui pour lequel vous avez besoin de valeurs par défaut.
Nous utilisons tous les blocs personnalisés, à l’exception de math_number, qui est un bloc standard conçu pour contenir, vous l’aurez deviné, des nombres.
Les exemples de données utilisateur
Notre application est simple, tout comme notre espace de travail principal et notre boîte à outils. Encore plus simple est la section des exemples de données utilisateur. Tout ce que cette deuxième application doit faire est de permettre à l’utilisateur de définir un utilisateur avec les données dont il a besoin pour tester l’application de notation.
< xml xmlns = « https://developers.google.com/blockly/xml » id = « userToolbox » style = « affichage : aucun » >
< type de bloc = « block_text » >
< nom du champ = « INPUT_TAG » > par défaut </ champ >
</ bloc >
</ xml >
< xml xmlns = « https://developers.google.com/blockly/xml » id = « userWorkspace » style = « display: none » >
< type de bloc = « user_block » id = « ?OCI|E)9#uT!-9#sYHBo » x = « 38 » y = « 13 » >
< nom du champ = « VENTES » > 0 </ champ >
< nom du champ = « CLICKRATE » > 0 </ champ >
< nom du champ = « ÂGE » > 0 </ champ >
</ bloc >
</ xml >
Comme vous pouvez le voir, cela peut être réalisé assez facilement. L’espace de travail contient le bloc principal, le user_block, qui contient une série de champs fixes (par exemple Sales, Clickrate, etc.) qui peuvent être définis par l’utilisateur.
La boîte à outils est également clairsemée : elle ne comporte qu’un seul bloc pour permettre à l’utilisateur d’ajouter des balises dans la section appropriée.
L’espace de travail de l’utilisateur a une grande largeur pour une raison simple et pratique : nous voulons éviter de redimensionner ou de forcer l’utilisateur à se déplacer, nous le rendons donc très large. De cette façon, l’utilisateur peut avoir une quantité raisonnablement importante de balises sans problème.
Création de blocs personnalisés
Les blocs que nous avons vus ont été conçus avec leOutils de développement Blockly. Il s’agit d’un ensemble d’outils basés sur Blockly conçus pour créer des blocs, des espaces de travail et des boîtes à outils. Il s’agit essentiellement d’un langage créé avec Blockly pour concevoir et configurer des blocs Blockly.
C’est plus facile que de les créer manuellement et c’est aussi un bon moyen de se faire une idée de l’expérience Blockly. C’est la méthode recommandée par Google pour créer des blocs personnalisés et nous sommes d’accord.
Même si vous devez modifier le résultat final d’une manière ou d’une autre, c’est la meilleure façon de démarrer le processus. Un autre avantage est que vous pouvez vous faire une idée du fonctionnement des blocs, même si vous n’avez pas le temps de lire la documentation complète.
Vous pouvez immédiatement voir que les blocs sont constitués d’une définition et d’un générateur. La définition contient la description de l’apparence du bloc et son comportement de base. Le générateur définit comment le code de bloc sera traduit, par exemple, en JavaScript ou en PHP.
La définition peut être au format JSON ou JavaScript. Vous préférez généralement JSON, car c’est plus rapide et plus facile. Cependant, vous pouvez également utiliser une interface fluide JavaScript pour définir un bloc. Vous pouvez également mélanger les deux et définir les bases en JSON et des choses comme le comportement dynamique en JavaScript.
Le bloc principal
Voyons comment le principal scoring_blockest défini.
{
« type » : « scoring_block » ,
« message0 » : « Score minimal %1 %2 » ,
« args0 » : [
{
« type » : « numéro_champ » ,
« nom » : « minimum_score » ,
« valeur » : 0
},
{
« type » : « input_statement » ,
« nom » : « algorithme »
}
],
« couleur » : 120 ,
« info-bulle » : « » ,
« helpUrl » : « »
}
Il a un attribut type qui définit le nom du bloc. L’ message0attribut a un rôle à la fois syntaxique et informatif. Il contient l’étiquette qui apparaîtra dans le bloc, mais il définit également le nombre d’entrées et de champs disponibles. Si vous essayez de supprimer l’un des %1ou %2, le bloc sera invalide et disparaîtra.
Cela peut sembler étrange au début, mais cela a du sens si vous y réfléchissez. Vous avez besoin d’un moyen de définir la structure du bloc, la façon dont ses composants apparaissent, et l’ message0attribut remplit ce rôle. L’attribut args0contient les éléments mentionnés comme espaces réservés dans l’ message0attribut. Donc, dans ce cas, il y a deux espaces réservés et nous avons deux éléments.
Vous pouvez ajouter autant d’ messageXattributs argsXque vous le souhaitez. Vous créeriez des messages supplémentaires pour séparer les parties facultatives des blocs ou pour faciliter la localisation du bloc. En effet, différentes langues naturelles peuvent avoir un ordre des mots différent, vous pouvez donc créer différents messages pour gérer cela.
Les éléments à l’intérieur args0ont tous un typeet un name. Ils sont tous les deux importants. Le type identifie le type du champ, qui dans notre cas sont tous des champs standard. Le nom est nécessaire pour faire référence aux valeurs de ces éléments, par exemple lors de la phase de génération de code.
Le préfixe de champ dans field_numberindique que l’élément est entièrement contenu à l’intérieur du bloc, l’entrée dans input_statementindique que l’élément contiendra un bloc externe qui fournira une entrée à celui-ci.
Si tu le dis…
Le condition_block permet aux utilisateurs d’attribuer un score spécifique lorsqu’une certaine condition est respectée. Par exemple, l’utilisateur peut souhaiter attribuer un score positif s’il est actif depuis longtemps et un score négatif s’il s’agit d’un nouvel utilisateur.
{
« type » : « condition_block » ,
« message0 » : « si élément %1 ajouter la valeur %2 sinon ajouter la valeur %3 » ,
« args0 » : [
{
« type » : « valeur_entrée » ,
« nom » : « état » ,
« check » : « Booléen »
},
{
« type » : « valeur_entrée » ,
« nom » : « do_this » ,
« vérifier » : « Nombre »
},
{
« type » : « valeur_entrée » ,
« nom » : « else_do » ,
« vérifier » : « Nombre »
}
],
« previousStatement » : null ,
« instructionsuivante » : null ,
« couleur » : 160 ,
« info-bulle » : « » ,
« helpUrl » : « »
}
Ce bloc a quelques fonctionnalités intéressantes. Il a un previousStatementet un nextStatement. Leur présence indique que le bloc est un bloc d’instructions et peut avoir à la fois un bloc d’instructions précédent et suivant. Vous pouvez affecter une valeur à l’attribut pour limiter le type d’instruction pouvant suivre ou précéder le bloc. Bien qu’il soit rare que vous vouliez le faire.
Ce qui n’est pas rare, c’est d’avoir un checkattribut dans un champ. En fait, dans ce bloc chaque champ en a un. A checklimite le type de blocs pouvant être connectés à ce champ. Seuls les blocs avec un type de sortie compatible peuvent être connectés à l’entrée.
Quelques fonctionnalités intéressantes
Comment pouvons-nous indiquer le type de sortie d’un bloc, demandez-vous ? Eh bien, je suis content que vous posiez la question, car notre prochain bloc contient la réponse. Ce bloc effectue une vérification sur certaines fonctionnalités de l’utilisateur. Par exemple, cela permet de vérifier si l’utilisateur a contribué au moins 3 ventes (dans l’unité implicite que vous voulez).
{
« type » : « liste_fonctionnalités » ,
« message0 » : « %1 %2 %3 » ,
« args0 » : [
{
« type » : « field_dropdown » ,
« nom » : « fonctionnalité » ,
« choix » : [
[
« Âge » ,
« ÂGE »
],
[
« Ventes » ,
« VENTES »
],
[
« Taux de clics » ,
« CLIQUER »
]
]
},
{
« type » : « field_dropdown » ,
« nom » : « comparaison » ,
« choix » : [
[
« < » ,
« MOINS »
],
[
« > » ,
« PLUS GRAND »
],
[
« = » ,
« ÉQUIVAUT À »
],
[
« ≠ » ,
« DIFFÉRENT »
]
]
},
{
« type » : « numéro_champ » ,
« nom » : « feature_value » ,
« valeur » : 0
}
],
« inputsInline » : vrai ,
« sortie » : « Booléen » ,
« couleur » : 230 ,
« info-bulle » : « » ,
« helpUrl » : « »
}
La réponse à notre question est proche de la fin. L’attribut output indique que ce bloc produit une sortie booléenne. Le fait que ce bloc ait une sortie signifie effectivement qu’il s’agit d’une expression. Il ne peut donc pas s’agir d’une déclaration. Dans Blockly, un bloc ne peut être qu’une des deux choses, pas les deux.
Une autre nouveauté de ce bloc est un nouveau champ : a dropdown. Une liste déroulante définit une liste d’options potentielles parmi lesquelles l’utilisateur peut choisir. Chaque option est définie par deux valeurs : une étiquette et la valeur réelle. Le premier peut être changé pour chaque langue naturelle de vos utilisateurs, le second reste le même et sera utilisé lors de la génération du code. Par convention la deuxième valeur est en MAJUSCULES.
Vous pouvez facilement définir une liste d’options statiques, mais ce n’est sûrement pas toujours idéal. Et si les options pouvaient changer ?
Si seulement tu l’avais
Eh bien, vous pouvez réellement avoir des options dynamiques, voyez simplement notre nouveau bloc. Ce bloc représente une vérification de la liste des balises de l’utilisateur. Si l’utilisateur l’a, il gagne quelques points, sinon rien ne se passe.
{
« type » : « has_tag » ,
« message0 » : « a le tag %1 ajouter la valeur %2 » ,
Si vous regardez la configuration du bloc, vous risquez de manquer la liste déroulante. Vous pourriez le manquer parce qu’il n’est pas là. Ce que nous avons est une entrée factice, que nous utiliserons pour accrocher la liste déroulante et un attribut extensions. Le dynamic_menu_extensionest une extension standard dans Blockly qui peut être utilisée pour changer un bloc.
Les options disponibles sont définies dans le code JavaScript.
Par souci de simplicité, les options sont en fait définies de manière statique, mais comme il s’agit de code JavaScript, vous pouvez facilement l’obtenir à partir d’une source distante. Vous pouvez par exemple les télécharger à partir d’une liste de balises définies dans votre logiciel de newsletter.
Dans la suite du code, nous pouvons voir comment définir ou modifier dynamiquement un bloc. Vous obtenez d’abord une référence à une entrée existante, puis vous ajoutez un champ.
Le bloc utilisateur
Il existe deux autres blocs personnalisés dans notre code. Voyons le user_block premier.
{
« type » : « bloc_utilisateur » ,
« message0 » : « Ventes %1 $ %2 Taux de clics %3 %% %4 Dernière activité il y a %5 jours %6 Balises %7 » ,
« args0 » : [
{
« type » : « numéro_champ » ,
« nom » : « VENTES » ,
« valeur » : 0
},
{
« type » : « input_dummy »
},
[..]
Il s’agit du début de user_block, qui est utilisé pour définir les exemples de données utilisateur. Il a quelques paires d’un champ valide et d’une entrée factice. Cela rend la structure du bloc un peu compliquée. Cependant, il est nécessaire simplement pour des raisons esthétiques.
C’est le user_blocktel qu’il apparaît avec eux.
Si nous les supprimons, nous obtenons une structure plus propre et plus simple.
« message0 » : « Ventes %1 $ Taux de clics %2 %% Dernière activité il y a %3 jours Balises %4 » ,
Cependant, nous obtenons également quelque chose qui ressemble à ceci.
Ce n’est pas un changement tragique, mais nous préférons la première option. Nous ajoutons donc des entrées factices pour forcer le bloc à empiler les éléments verticalement.
Comment entrer un tableau
Enfin, nous jetons un coup d’œil à notre dernier bloc, le block_tag. Ce bloc est utilisé pour ajouter une balise pour l’exemple d’utilisateur.
{
« type » : « block_tag » ,
« message0 » : « %1 %2 » ,
« args0 » : [
{
« type » : « entrée_champ » ,
« nom » : « tag » ,
« texte » : « par défaut »
},
{
« type » : « valeur_entrée » ,
« nom » : « tags_entrée »
}
],
« sortie » : nulle ,
« couleur » : 230 ,
« info-bulle » : « » ,
« helpUrl » : « »
}
Les composants eux-mêmes sont faciles à comprendre, nous les avons déjà vus. Ce qui est intéressant, c’est comment ils sont combinés. Nous savons que le bloc représente une balise, c’est à cela que sert la balise de champ, il est même livré avec un texte par défaut.
À quoi sert l’ input_tagsentrée, cependant? Il est nécessaire de permettre à l’utilisateur d’ajouter un autre bloc/balise avant le bloc lui-même. De cette façon, nous pouvons construire une chaîne de balises.
Si nous supprimions l’entrée de balise, c’est à quoi ressemblerait le bloc.
Il n’y aura pas d’encoche d’entrée, nous ne pourrions donc pas attacher d’autre balise. Notez que l’entrée est à droite. tandis que la sortie est à gauche. À première vue, cela peut sembler contre-intuitif, car dans les langues occidentales, nous écrivons de gauche à droite, donc le flux idéal est de gauche à droite. Cependant, cela a du sens si vous pensez que l’inverse laisserait le premier bloc, où ce bloc place ses données, sur la gauche.
C’est une belle observation, mais beaucoup d’entre vous pourraient penser : nous avons une liste de balises, pourquoi ne pas simplement utiliser une entrée de liste pour insérer les balises ?
Pourquoi nous ne pouvons pas simplement utiliser une simple liste
Votre premier réflexe pourrait être de penser qu’il n’y a pas de moyen facile de créer une liste dans Blockly. Ce n’est pas vrai, en fait, il y a quelques blocs par défaut pour faire des listes.
Cependant, nous pensons que cette approche pourrait être un peu compliquée pour notre public cible. Ils seraient faciles à utiliser pour un programmeur, mais pas idéaux pour les personnes qui ne sont pas familiarisées avec les concepts de programmation. Le second est parfaitement logique pour moi et pour vous, mais il semble absurde pour la personne moyenne.
Le premier est plus prometteur. Nous avons un bloc pour une liste à laquelle nous pouvons attacher une série de balises individuelles. La liste des balises a une représentation graphique qui a du sens. Vous n’avez pas besoin de comprendre les tableaux ou les listes au sens informatique pour les utiliser. Le problème est ce qui se passe lorsque vous devez ajouter plus de 3 balises.
L’utilisateur peut s’attendre à ce que la liste s’agrandisse automatiquement lorsqu’il atteint trois balises ou lorsqu’il essaie d’ajouter une quatrième balise vers la fin de la liste. Mais cela ne fonctionne pas. Ce que vous devez faire est d’ouvrir une boîte à outils supplémentaire par bloc qui vous permet de modifier le nombre d’éléments. Ensuite, vous ajoutez une balise.
Je ne dis pas que c’est une mauvaise approche. Cela ajoute beaucoup de flexibilité et d’options dans la gestion de la complexité des blocs. Il est aisé de voir comment cette approche permet une plus grande complexité en blocs en la présentant par étapes. Par exemple, c’est la meilleure façon de gérer le bloc if-else par défaut. Cette approche facilite l’ajout d’un sous-bloc else ou d’une série infinie de sous-blocs else if.
Cependant, ce n’est pas la bonne solution pour notre cas d’utilisation. Ce serait trop demander à nos utilisateurs de gérer ce niveau de complexité juste pour la petite récompense d’un tag de plus. Ainsi, nous laissons l’utilisateur ajouter les balises de manière plus naturelle.
C’est notre travail de gérer la complexité
Cela facilite la vie de nos utilisateurs, mais complique la nôtre. Pour comprendre pourquoi, repensons à la définition du bloc. Chaque block_tag a une entrée et une sortie. La sortie est simplement la balise elle-même, rien de bizarre là-bas. Cependant, l’entrée est la série de balises précédentes.
C’est le résultat de la structure que nous avons définie. Le résultat net est que les input_tags contiendront une série imbriquée de balises.
Il s’agit d’une représentation textuelle de la dernière balise (balise une) de l’image précédente. Il a une valeur de balise de un, mais une valeur input_tags contenant toutes les balises précédentes.
La structure du résultat dépend de la façon dont nous avons défini la relation des blocs. Cependant, la représentation textuelle réelle dépend de la façon dont nous choisissons de générer le code. Alors, regardons la génération de code pour le bloc.
Dans ce code, nous collectons les valeurs des deux éléments, puis nous créons une chaîne les représentant. Nous collectons la valeur de la balise field avec la méthode standard simple getFieldValue.
Pour obtenir la valeur de l’élément d’entrée, nous utilisons autre chose. La méthode valueToCodeest utilisée pour obtenir la valeur des autres blocs. Le résultat final est le même : vous obtenez une chaîne représentant le bloc généré selon vos règles. Cependant, son comportement est différent. La raison en est son dernier argument, leargument de priorité. Nous n’utilisons pas réellement cette fonctionnalité pour notre exemple, mais il est important de la comprendre pour vos efforts.
Nous avons déjà vu que les blocs qui produisent une valeur peuvent être considérés comme des expressions, tandis que ceux qui ne le font pas peuvent être considérés comme des déclarations. Les connexions entre les blocs d’expression peuvent être considérées comme des opérateurs.
Par conséquent, l’argument de priorité définit un ordre de priorité utilisé pour combiner correctement deux blocs d’expression. La liste de priorité des opérateurs dépend du langage généré. En effet, il est conçu pour représenter correctement le code de l’expression dans la langue cible choisie.
Pour comprendre comment cela fonctionne, nous citerons simplement la documentation.
Si la valeur d’ordre renvoyée par le sous-bloc est inférieure ou égale à la valeur d’ordre de l’argument d’ordre du bloc parent, alors la fonction valueToCode enveloppera automatiquement le contenu du code du sous-bloc entre parenthèses pour l’empêcher d’être déchiré par le code du bloc parent.
Fondamentalement, cela traite automatiquement les parenthèses, en s’assurant qu’elles ne dérangent pas nos expressions.
Nous devons également utiliser l’indication de priorité de l’opérateur pour renvoyer notre code pour ce bloc. C’est parce qu’il s’agit d’un bloc d’expression, donc le bloc transmettra son code généré à un bloc qui utilise la valueToCodeméthode.
Le code réel que nous générons, dans la variable de code, peut sembler étrange et déroutant. En fait, c’est le cas : cela permet de montrer plus facilement comment une série de balises est organisée, mais c’est plus difficile à utiliser. Il ne serait pas compliqué d’utiliser la récursivité pour démêler le désordre généré, mais il existe un meilleur moyen. Donc, nous allons changer le code généré en ceci.
Cela générera un tableau de balises imbriquées, ce qui peut sembler compliqué, mais cela génère en fait quelque chose comme ça.
‘un deux trois’, »
Il s’agit d’une chaîne, pas d’un tableau, car la sortie de la génération de code pour un bloc d’expression est toujours une chaîne, mais elle peut être trivialement transformée en tableau.
Notre utilisateur
Nous faisons cela et d’autres choses dans la génération du bloc utilisateur.
La génération est assez simple. Nous obtenons le code des blocs de balises et nous les manipulons pour obtenir notre liste de balises. Le reste du code est utilisé pour générer le reste de l’objet utilisateur.
Notre objet utilisateur a également une fonction qui sera utilisée par le has_tagbloc que nous avons déjà vu.
Il s’agit de la génération de code correspondante. Nous l’implémentons comme vérification de base si et ajoutons le score si la vérification réussit.
Notez que ce bloc et le précédent renvoient une chaîne simple. C’est parce qu’il s’agit d’instructions, nous n’avons donc pas besoin de soins particuliers pour gérer les expressions.
Vous pouvez consulter le reste de la génération de code directement dans le référentiel à l’intérieur du fichier scoring_blocks.js. C’est assez simple.
La seule chose à mentionner est que toutes les définitions de bloc sont ajoutées avec la fonction Blockly.defineBlocksWithJsonArray.
Câblage complet
Nous pouvons maintenant voir le fichier JavaScript principal qui rassemble tout cela.
// Charger le bloc principal
var boîte à outils = document . getElementById ( « boîte à outils » ) ;
var espace de travail = Blockly. injecter ( ‘blocklyDiv’ , {
executeScoring ( événement, userWorkspace, espace de travail )
});
Pour mettre en place un programme Blocks, nous devons faire quelques choses simples. Nous devons charger les définitions de l’espace de travail et de la boîte à outils. Nous commençons par obtenir des références aux éléments HTML contenant ces définitions aux lignes 2 et 8. À la ligne 4, nous configurons l’espace de travail et l’injectons dans le bon élément HTML. Nous prenons ensuite la référence à la configuration de l’espace de travail et nous la chargeons dans l’objet d’espace de travail que nous avons précédemment créé.
Nous répétons le même processus pour l’espace de travail contenant l’exemple d’utilisateur.
Enfin, nous connectons un bouton avec id test à la fonction qui va transpiler le code de nos blocs de scoring en JavaScript.
Code en cours d’exécution
Pour exécuter réellement le code, nous devons utiliser la fonction executeScoring.
function executeScoring ( événement, userWorkspace, workspace ) {
Nous pouvons le faire très facilement. En fait, il suffit d’appeler la méthode workspaceToCodepour déclencher la génération. Le reste du code est assez évident. Nous exécutons le code avec la evalfonction standard. Ce n’est pas très sûr mais cela fonctionne pour notre exemple. Dans un environnement de production, l’équipe Blockly suggère d’utiliser leProjet JS-Interpreter.
Au cas où vous vous poseriez la question, il serait également trivial de stocker le code dans l’espace de travail pour une utilisation ultérieure, au lieu de le générer. Vous pouvez le faire avec la méthode Blockly.serialization.workspaces.save(workspace)).
La dernière chose à mentionner est la première ligne. La méthode addReservedWordsest utilisée pour indiquer à Blockly tout nom de variable ou autre nom réservé utilisé dans votre code. Il peut donc le renommer, s’il le trouve dans le code généré.
Nous n’avons pas vu cette fonctionnalité, mais Blockly permet à l’utilisateur de définir des variables. Cette méthode garantit que toute variable définie dans notre propre code qui utilise Blockly n’entre pas en conflit avec celles définies par l’utilisateur dans le code Blockly.
Ce n’est pas un court article mais nous venons d’effleurer le potentiel de Blockly.
D’un point de vue pratique, Blockly occupe une niche intéressante entre Excel etplates-formes low/no-code. Les plates-formes low-code se présentent sous toutes les formes et tailles, allant des services Excel essentiellement intelligents aux systèmes puissants pour créer des applications de données.
Vous avez besoin d’un développeur pour créer un langage Blockly et le connecter au reste de votre infrastructure. Mais il est beaucoup plus facile d’intégrer Blockly dans votre infrastructure que n’importe quelle plate-forme d’entreprise sans code. Il est plus flexible et ouvert, vous pouvez trouver le meilleur moyen de le faire fonctionner pour vous.
En échange de cet effort, un utilisateur de Blockly peut obtenir quelque chose de plus puissant et adapté à son utilisation qu’un tas de fichiers Excel ou une plate-forme low-code. Il est plus facile à personnaliser que votre plate-forme low-code typique, qui est généralement conçue pour un type d’application spécifique. Plus votre code devient complexe, plus il est facile d’utiliser Blockly par rapport à Excel. En effet, une application basée sur Excel devient souvent désordonnée. Il finit par fonctionner de manière obscure et confuse pour surmonter les limites d’Excel. Avec Blockly, vous pouvez créer une application sur mesure pour un besoin spécifique.
Vous savez maintenant à quel point Blockly facilite la création de votre langage visuel, mais il peut faire bien plus. Nous venons de mentionner qu’il supporte les variables, mais il a beaucoup d’autres façons de l’étendre et de l’améliorer. Par exemple, vous pouvez facilement ajouter un nouveau générateur, c’est-à-dire un nouveau langage dans lequel transpiler les blocs. Il n’a même pas besoin d’être un langage de programmation, en faitGoogle a créé un tutoriel pour montrer comment générer du JSON à partir de blocs
