Blockly

Blockly is a library from Google for building beginner-friendly block-based programming languages.
Tiré de la référence.
En français : Blockly est une bibliothèque de Google permettant de créer des langages de programmation par blocs conviviaux pour les débutants.

Selon Google Blockly, recopié de ce site Web :
"Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies."
Tout ce qui suit est principalement destiné à l'enseignement et l'éducation et est aussi sous licence Apache 2.0   c.f. LICENSE
Donc vous pouvez tout copier, modifier et utiliser dans un but non commercial.

° Google Blockly, LA page de référence pour apprendre à programmer avec blockly.
° Custom Blocks: Best Practices, les bonnes pratiques selon l'expérience des développeurs de Blockly
° Blockly-games.
Une suite d'exemples pour apprendre la programmation avec Blockly.
° Blockly > Demos.
Les exemples des développeurs de Blockly.
° Blockly > Demos > Blockly Developer Tools.
"Blockly factory", outils d'aide de création de blocs de programme.
Blockly Developer Tools. Explications et une vidéo.
Define Blocks. Tous les paramètres des blocs. Exemple le paramètre "data".
° Le forum de google sur Blockly. En anglais.
° Blockly Developer Registration.


Quelques informations sur Blockly et les exemples qui suivent

° Blockly est : plus d'info
° Configuration des navigateurs pour l'exécution en Local ("Same origin policy) : plus d'info
° Commentaires sur les exemples qui suivent : plus d'info

Suite d'exemples progressifs

Voici une suite d'exemples pour Informaticiens, d'utilisation de Blockly pour créer des applications pour des élèves ou apprentis programmeurs.
Les exemples les plus intéressants seront précédés d'un ! et/ou seront marqués en gras.
Au début, le code javascript se trouvera dans le même fichier que le code html, pour ne pas devoir le chercher.
Plus tard, des librairies seront développées pour inclure ce code javascript.
Les exemples sont numérotés de 10 en 10, comme on le faisait autrefois dans le langage Basic, pour pouvoir compléter certains exemples si je le désire.
° ex0010, exemple minimaliste de génération de code javascript.
- La taille de la région réservé à Blockly est fixe.
- Les blocs sont visibles et en nombre limité.
- On peut voir le code javascript généré.
- On peut exécuter le code javascript généré.
° ex0020, évolution du code précédent.
- Les blocs se trouvent dans des menus.
° ex0030, évolution du code de ex0010.
Il n'est pas agréable d'avoir les résultats dans des "alert(...)".
- Le code et les résultats de l'exécution sont affichés dans la fenêtre.
  Pour cela un nouveau bloc a été créé en javascript.
° ex0040, évolution du code de ex0030.
- Des blocs sont présents dès le départ dans la fenêtre de Blockly.
  Pour cela un nouveau bloc a été créé en javascript.
° ex0050, très similaire au code de ex0040.
- Des blocs sont présents dès le départ dans la fenêtre de Blockly.
  C'est juste un autre exemple.
° ex0060, similaire au code de ex0040.
- Des blocs sont présents dès le départ dans la fenêtre de Blockly.
  On a placé le programme lié au problème de Syracuse.   C'est un autre exemple.
- On a défini un nouveau bloc d'affichage, sans retour à la ligne.
- On change le texte de ce bloc.
° ex0100, augmentation de l'espace pour introduire les blocs.
- Les blocs peuvent êtres mis dans toute la fenêtre.
  On repart de l'ex0010, avec l'espace pour placer les blocs prenant toute la fenêtre.
- On régresse un peut, mais pour aller plus loin ensuite.
° ex0110, très similaire à ex0100, avec des bordures.
- Des cadres ont été ajouté à l'exemple ex0100. Peu intéressant.
  C'est utile pour des développements.
° ex0120, extension de l'ex0100.
- Les blocs ne sont pas visible au départs.
- Il y a beaucoup plus de blocs disponibles, dont des variables et des fonctions.
° ex0130, belle extension de l'ex0120.
En plus des fonctionnalité de l'ex0120 :
- L'affichage se fait dans des fenêtres.
- Un code est présent dès le départ.
Le code devient trop long, une partie sera mise dans une librairie par la suite.
° ex0140, comme l'ex0130, rangé dans des fichiers.
Le code de l'ex0130 permet déjà d'écrire un vrai programme. Il fait plus de 700 lignes, il faut donc séparer diverses parties dans divers fichiers. C'est ce qui est fait dans cet exemple.
Il y a maintenant 4 fichiers :
1) le code HTML (130 lignes)
2) le code javascript (220 lignes)
3) la définition des blocks désirés dans la toolbox (310 lignes)
4) la définition des blocks initialement présents (startBlocks) (130 lignes)
° ex0150, fonctionnalités intéressantes.
Le code est une extension de celui de "ex0140" et est de nouveau subdivisé en 4 fichiers.
Adjonction de :
- la possiblité de voir le code XML généré par le programme Blockly.
  C'est utile pour le copier et le coller dans la startBlocks d'un nouveau projet.
- La possibilité de sauver la réalisation Blockly
- La possibilité de charger une réalisation Blockly
!! ex0160, = ex0150 + code javascript automatique.
Le code est une extension de celui de "ex0150" et est de nouveau subdivisé en 4 fichiers.
Le code javascript est mis à jour automatiquement à chaque modification de blocs.
Adjonction de l'instruction : "demoWorkspace.addChangeListener(myUpdateFunction);" dans 'exe0160.js'
c.f. : Code Generators.

!! ex0170, exemple de génération de blocs.
Donne plusieurs exemples de génération de blocs Blockly.
Montre le lien entre la Blockly Factory (Blockly > Demos > Blockly Developer Tools) et la génération de code pour définir des blocs, ainsi que pour générer du code javascript.

° ex0200, Exécution ralentie du code.
Il peut être intéressant d'avoir un code qui s'exécute au ralenti.
Javascript n'a pas d'instruction "wait(temps)". Javascript n'est pas multitâche mais il existe deux manières pour simuler une instruction "wait(temps)" en rendant la main au système.
Une boucle d'attendte ne sert à rien, car cela bloque javascript et aucune mise à jour n'est visible durant cette boucle.
Ici une première manière est illustrée. Elle utilise le minuteur (timer) et l'instruction yield.
Le code de départ est celui de l'ex0150 et est de nouveau subdivisé en 4 fichiers.
Adjonction de l'exécution de code au ralent.
° ex0210, déplacement d'un objet au ralenti.
- Adjonction de la possibilité de lire les coordonnées de la position de l'objet.
- Adjonction d'un choix multiple de la lecture d'une coordonnée de la position de l'objet.
L'id de l'image déplacée est définie dans la balise <data> du bloc <block type="logo_gotoxy"> de la toolbox.
Le nom de l'id est suivit d'une virgule, puis du temps en [ms] entre deux déplacement d'un pixel de l'image.
Dans le fichier html de base, une image ayant cette "id" doit être définie.
Dans cet exemple, l'id est : "idBouleBleue" et la vitesse est 2.
Dans le code javascript (ex0210.js), dans : "Blockly.Blocks['logo_gotoxy'] = {"
la ligne : "data": "idBouleBleue, 5", // Valeurs par défaut. a été ajouté.
° ex0220, comme ex0210, disposition différente.
Au lieu d'avoir l'image de la boule bleu à droite du menu de Blockly, elle est positionnée à gauche. Très peu de changements relativement à ex0210.
° ex0222, comme ex0222, avec illumination du block actif.
Seulement deux lignes ont été ajoutées et les blocs sont illuminés en cours d'exécution, pour indiquer l'instruction exécutée.
° ex0224, Exécution ralentie du code, avec mise en évidence des blocs.
C'est presque le même code que les ex0220 et ex0222, avec une méthode particulière à Blockly pour illuminer les blocs actifs durant l'exécution du programme.
° ex0230, comme ex0220, la boule doit suivre le chemin.
Départ de l'ex0220, avec une image d'un chemin, dans un canevas.
La boule bleue doit suivre le chemin jaune.
En cours de développement.

! ex0300, Exécution ralentie du code, avec mise en évidence des blocs.
Voici la méthode particulière de Blockly, ...
avec mise en évidence du bloc actif durant l'exécution du programme.
Il y a plus de finesse dans la mise en évidence des blocks.
Regardez dans le fichier "ex0300.js", les deux fonction : "function runCode_slow(timeMS) {" et "function initApi(interpreter, scope) {", ainsi que les deux premières fonctions.
Pour des détails, c.f. l'interpréteur javascript.
° ex0350, Exemple de programmation objet en javascript.
N'a pas grand chose à voir avec Blockly, mais donne un exemple de programmation objet.
Cette exemple n'est pas bon, utilise une ancienne méthode compliquée.
ex0352 donne une légère modification, toujours pas bien.
!!! Regardez l'exemple ex0355, qui est bien meilleur.

° ex0400, Puzzles, allez voir l'ex0412.
Un premier test de de puzzles avec Blockly.
° ex0410, Chenille, durant le développement de l'ex0412.
° ex0411, Un pas vers l'ex0411, avec moins de code et moins de fonctionnalités.
!! ex0412, Puzzles, composantes d'un ordinateur.
Un gros développement, qui utilise beaucoup de fonctionnalités de Blockly, avec sa structure objet. Branchez la souris à la prise pour voir l'effet.
Branchez le desktop à la prise, avant et après l'avoir complété correctement.
Pour des explications sur le code, cliquez sur : plus d'info

° ex0420, introduction de type de données.
Un typage est donné à divers éléments, pour interdire certaines connexions.
° ex0422, suite de l'ex0420.
Un typage est donné à divers éléments, pour interdire certaines connexions.
Lors d'un refus de connexion par Blockly d'un bloc à l'autre, il serait intéressant d'avoir un événement dans le code qui permetterait de traiter ce refus.
Le but de cet exemple est de traiter ce refus, par bidouillage, à défaut de mieux.
Tous les rejets sont détectés, mais il est possible d'obtenir de fausses détections de rejets, en déplaçant deux fois de suite le même bloc rapidement sur une courte distance.
Il est possible de modifier la variable 'Blockly.BUMP_DELAY' à 150 [ms], pour ne plus avoir de fausses détections de rejets.

° ex0500, déplacement de cartes.
La première étape vers des algorithmes de tri. Il y a des cartes à disposition on peut les déplacer par programme, à l'aide de blocs.
On peut également obtenir la valeur de la carte se trouvant dans une case donnée.
° ex0502, développements de l'ex0500.
Création d'une vraie boîte de dialogue MODALE. Donc rien de la page Web n'est accessible, tant que l'on a pas cliqué sur le bouton de confirmation de la boîte de dialogue modale.
Ici, il y a un vrai petit challenge, qui est d'échanger deux cartes de leur place.
Avec un message et un bruitage, en fonction de la réussite ou de l'échec du challenge.
° ex0504, développements de l'ex0502.
Demande d'échanger deux paires de cartes.
En route pour demander d'écrire une fonction qui échange deux cartes de place.
Dès qu'il y a des fonctions, la méthode utilisant l'interpréteur javascript est nécessaire pour aller lentement.
Le code fonctionne bien.
° ex0505, mini variation de l'ex0504.
Exactement le même code que l'ex0504, avec l'adjonction de dans ex0505.js, de la fonction : 'onchange(event)' et des petites adjonctions dans : 'RunBlockly()'.
L'adjonction : 'maxBlocks: 18,' limite l'utilisation à 18 blocs.
Cette limitation est indiquée dans l'aide, qui se situe dans le code HTML.
Dans le code HTML, il y a aussi une adjonction, pour afficher le nombre de blocs disponibles.
° ex0506, 3 paires à de cartes à permutter.
Adjonction de cartes
Il faut permutter deux paires de cartes, avec 20 blocs au maximum.
Est-ce faisable sans l'utilisation d'une fonction ?
Dans le code HTML :
° affichage du nombre de blocs disponibles.
° Placement automatique des cases et des cartes.
° ex0508, 10 cartes.
Juste pour découvrir et s'amuser.
On peut écrire le programme que l'on veut et tester.
Un bouton 'STOP Run' d'arrêt d'exécution de programme a été ajouté.
Un bloc de mélange des cartes a été ajouté.
Permet d'aller plus vite.
ex0600 est une amélioration notable de cet exemple.
° ex0510, 90 nombres.
Juste pour découvrir et s'amuser.
Illuminer tous les blocs peut devenir trop lent.
Ici, un bloc est illuminé et le programme ralenti, uniquement pour les animations, sinon, le programme va rapidement.
On peut s'amuser avec une liste de 90 nombres à déplacer.
Adjonction de :
° une boîte Blockly pour changer la couleur de fond d'une image, en sélectionnant l'image
° une boîte Blockly pour échanger deux images, en sélectionnant leur cases
ex0610 est une amélioration notable de cet exemple.

!!! ex0600, Menu + icons + Améliorations.
Adjonction de :
° une barre de titre
° affichage dans la barre de titre le nombre de blocs utilisés
° un menu. Le menu s'ouvre automatiquement si le curseur reste dessus durant 0,4 secondes.
° icones
° 3 vitesses d'exécutions (plus une 4ème avec "eval(code)")
° la possibilité de varier la vitesse des animations
° un bouton "stop exécution"
° un bouton "pause exécution"
° un bouton d'exécution d'un pas à la fois
° la possibilité d'ilumination de code ou non, donc éliminer les 'highlightBlock' dans le code javascript.
° une boîte Blockly pour échanger deux images, en sélectionnant leur cases
° une boîte Blockly pour changer la couleur de fond d'une image, en sélectionnant sa case
° une boîte Blockly pour changer la couleur de fond d'une image, en sélectionnant l'image
Les changements de fonds ne sont visibles que pour l'As, le 2 et le 3, car il faut qu'une partie de l'image soit transparente.
° une boîte de dialogues modales "À propos"

° ex0605, Menu + icons, comme ex0600.
Une petite modification de ex0600.
Au lieu d'avoir un menu qui s'auvre automatiquement lorsque le curseur est dessus, il faut cliquer pour qu'il s'ouvre.

° ex0610, avec 90 nombres.
Comme ex0600, avec 90 nombres au lieu de 10 cartes.

° ex0830, ex0600, multilangues, indépendance de la langue.
Reprise de l'ex0600, en le rendant multilangue.
Pour avoir une application utilisable par beaucoup d'autres personnes et pour suivre les traces de Blockly, il est bon d'avoir une applications indépendante de la langue.
Voir l'ex0900
Sans trop compliquer le code, il est bon d'avoir la possiblité de traduire facilement tous les textes qui dépendent de la langue dans une autre langue.
Il y a quatre fichiers contenant des textes dépendant de la langue :
° ex0830.html
° ex0830.js
° ex0830_startBlocks.xml
° ex0830_toolbox.xml
Il y a deux manières de changer les textes des catégories de la toolbox.
1) la manière de Blockly, avec un : name="%{BKY_CATEGORY_NAME_LOGIC}"
  Dans ce cas, c'est dans un fichier : msg/js/fr.js   qu'il faut définir le texte.
2) La même manière que pour changer le texte de la page html.
  Dans ce cas, c'est dans un fichier : msg/fr.xml   qu'il faut définir le texte.
  Cette deuxième manière à l'avantage de voir dans le code la langue par défaut.
Se référer aux fichiers dans : msg   pour des exemples. Les deux méhtodes ont été volontairement implémentées pour donner des exemples.
Mauvaise surprise.
Le chargement des langues en local pose des problèmes. Apparemment, un serveur est nécessaire ici. Pourquoi ???
On peut utiliser XAMP, et si on reste dans une langue, tout fonctionne bien.
En quittant firefox, puis en le relançant, le chargement de langues fonctionne de nouveau, mais parfois, arrête de fonctionné. Cela ajoute une complication au développement en local.
Voici une explication et une solution : Same origin policy for file:URIs.
Dans Firefox, on peut taper : about:config dans la barre d'adresse, chercher security.fileuri.strict_origin_policy qui est à TRUE par défaut. En le mettant à FALSE, on peut travailler en local sans enuits.

° ex0900, création d'une bibliothèque.
Mise des routines des ex0500 à ex0800 dans une librairie, en restant multilangue.
C.f.   ../../bglibrary.js   ;   ../../bgcss/menu.css   et   ../../bgmsg/js/
Dans ce qui précède, certaines parties de code se retrouvent à une trentaine d'exemplaire. Cela peut être pratique pour l'indépendance des codes, mais ce n'est pas efficacee et une amélioration d'une routine est longue à reporter dans les développement antérieurs. Par exemple, il y a une erreur dans les ex0500, ex0502, ex0504, qui a été corrigée par la suite.
Il est donc temps de mettre des routines dans une bibliothèque de troutines. (library en angalis).
Le but est de constituer une bibliothèque généraliste, avec de nouveau blocs, qui reste multilangue, comme c'est le cas avec Blockly.
La bibliothèque peut être consituée de code HTML, XML, javascript et CSS.
Comme le code javascript peut générer de l'HTML et l'inclusion de code HTLM n'est pas standard dans des pages Web, l'insertions de code HTML se fera par le biais du javascript.

Lorsque l'on change de langue :
° la toolbox est recharchée et traduite dans la nouvelle langue.
° la langue est chargée de "../../msg/js/", celle par défaut de Blockly.
° la langue est chargée de "../../bgmsg/js/", celle de la bibliothèque de Bernard Gisin.
° la langue est chargée de "msg/js/", celle de l'application finale.
° les blocs présents sont conservés et traduit, sauf les textes qui sont personnels.
Par défaut, on peut ignorer la langue de l'application finale, car elle est codée dans la page Web finale. En ajoutant des : id="HTML_..." aux balises ayant du texte dépendant de la langue, ont permet de les traduire facilement dans les fichiers placés dans "msg/js/"
En ajoutant des : id="HTML_IMG_..." aux balises ayant un title dépendant de la langue, ont permet de les traduire facilement dans les fichiers placés dans "msg/js/".
C.f. les exemples.
° ex0905, exemple d'utilisation de la bibliothèque.
On joue avec 10 cartes. Permet de retourner des cartes.
° ex0910, exemple d'utilisation de la bibliothèque.
On permet de trier une liste de 90 nombres.
° ex0920, programmation générale, reprise du code ex0160.
Permet d'écrire un programme général.
° ex0930, puzzles, reprise du code ex0412.
Test de puzzles. Multilangue et certaines parties de définition de puzzles sont laborieuses.
C.f. l'ex0932 pour des simplifications du code.
° ex0932, puzzles, reprise du code ex0412.
Test de puzzles. Multilangue avec simplification de création de puzzles.
Création d'une boîte de dialogue généraliste qui permet d'afficher des messages personnalisés, multilangue, avec de la musique si désiré. c.f. "idDialogBoxGeneral0" de ex0932.html et DialogGeneral(fUpdate, oText, NumDialog) de bglibrary.js
° ex0940, labyrinthe, reprise du code ex0230.
Test de labyrinthe. Multilangue.
Avec une boîte de dialogue généraliste qui permet d'afficher des messages personnalisés, multilangue, avec de la musique si désiré. c.f. "idDialogBoxGeneral0" de ex0940.html et DialogGeneral(fUpdate, oText, NumDialog) de bglibrary.js
° ex0950, puzzles, similaire au puzzle des blockly games.
° ex0952, puzzles, similaire au précédent, avec des drop down lists.
° ex0954, puzzles, similaire au précédent, avec des drop down lists.
Montre la souplesse, on ajoute facilement de nouveau puzzles, de nouvelles images et de nouveau traits.
On ajoute également facilement des nouvelles conditions sur les traits que les animaux doivent avoir.
Ils n'ont pas tous forcément le même nombre de traits.

° ex1600, une suite d'étapes pour l'apprentissage d'algorithmes de tri.
Diverses étapes pour apprendre des algorithmes de tri.
° ex1605, apprentissage d'algorithmes de tri, améliorations.
Diverses étapes pour apprendre des algorithmes de tri.
Une version améliorée, avec placement des cartes plus joliement effectué.

Tests et anciens exemples de tests.

° Exemple de code, "abgex/code".
° ex0170_puzzle, exemple de puzzle.


Pour les développeurs

° Blockly Developer Tools, information pour développer des applications "blockly apps".
° ,
° Learning to use Blockly on the Web.
° .

Deux manières de développer de nouveaux blocs :
Premièrement :
Depuis : "Blockly_Google/blockly/blocks/" copier la partie qui est similaire à ce que l'on désire créer.
Depuis : "Blockly_Google/blockly/generators/javascript/" copier la partie qui est similaire à ce que l'on désire créer.
Voici un exemple, qui a été mis en pratique dans "ex0030" :
Dans mon code, sous les importations de "<script>", j'ai ajouter les balises : "<script>" et en-dessous : "</script>"
° J'ai copié le code de : "Blockly_Google/blockly/blocks/text.js", allant de : "Blockly.Blocks['text_print'] = {" au "};" correspondant.
Je l'ai collé entre les deux balises : "<script>" et "</script>" de mon code.
° J'ai copié le code de : "Blockly_Google/generators/javascript/text.js", allant de : "Blockly.JavaScript['text_print'] = function(block) {" au "};" correspondant.
Je l'ai collé entre les deux balises : "<script>" et "</script>" de mon code.
° J'ai modifié la ligne : "return 'window.alert(' + msg + ');\n';" en : "return 'Display(' + msg + ');\n';"
° J'ai renommé les textes "text_print" en minuscules en : "text_affiche" partout dans le code, à 4 endroits.
° J'ai aisni obtenu une nouvelle fonctionnalité.

Deuxièmement :
° Blockly factory, Pour développer des nouveaux blocs.

En local, aller dans : "Blockly_Google/blockly/demos/index.html", puis cliquer sur "Blockly Developer Tools" à la fin.
Plus directement : "Blockly_Google/blockly/blocklyfactory/index.html"


Utilitaires :
° Pour générer le code XML d'une suite de blocs .
° Blockly Generator Tests.
° .
° .

Divers :
° Programmation visuelle avec Blockly.
Des parties intéressantes.
° Blockly pour générer du Python.
Ensuite, on peut modifier et exécuter le code Python dans la page Web.
° Blockly pour générer du Javascript.
Ensuite, on peut modifier et exécuter le code Javascript dans la page Web.
On peut également sauver le programme sous forme de blocs en XML.
° .

Vidéos pour apprendre à développer des applications pour utiliser Blockly apps.

° , Blockly: Using Block Based Coding in your App
° Blockly Tutorial Part 1 .
° Blockly Tutorial Part 2 Edited.
° Why top universities teach drag and drop programming, 1 minute 24 seconds.
° .
° .
° Blockly Factory, pour développer de nouveaux blocs.
° .
° .
° .
° Liste de vidéos sur Blockly.
° Premier programme Blockly@rduino v2.


Plan du Site : Home   arrow   program   arrow   blockly.html ( = http://www.juggling.ch/gisin/program/blockly/blockly.html )


Page mise à jour le 22 avril 2019 par Bernard Gisin     ( Envoyer un e-mail )
Hébergement par : www.infomaniak.ch