Publié le par admin

Installer Blockly sur son ordinateur

Mise à jour du 30 mai 2023.

Suite à la parution de la deuxième édition de l’ouvrage, la procédure d’installation de Blockly a été revue et simplifiée. Pour installer Blockly, nous vous conseillons donc de lire l’article disponible ici.

Le texte de l’article ci-dessous n’a plus vraiment de raison d’être, mais dans la mesure où il a été commenté plusieurs fois, nous en conservons une trace…

Certains lecteurs (je les en remercie) ont attiré mon attention sur le fait que des modifications dans Blockly empêchent son installation selon la procédure décrite ci-dessous. Dans ces conditions, le plus simple est de télécharger la version de Blockly qui est disponible sur la page https://www.progbloc.fr/traduction-des-blocs/. Avec cette version, la procédure décrite ci-dessous est parfaitement fonctionnelle et vous bénéficierez en outre des libellés des commandes identiques à ceux du livre.

Même si Blockly est une application en ligne qui s’exécute depuis un navigateur Internet, vous avez tout intérêt à l’installer sur votre ordinateur. Cela vous permettra ainsi de l’exécuter, même si vous n’êtes pas connecté à Internet.

Si l’on dispose du code source d’une application Internet, on peut l’installer sur son ordinateur et l’exécuter, en local (par opposition à en ligne), depuis le disque dur de son ordinateur dans un navigateur. L’URL de l’application ne commencera alors pas par http://, mais par file:/// et indiquera le chemin d’accès au fichier de démarrage de l’application sur votre disque dur.

Pour installer Blockly sur votre ordinateur, il faut au préalable télécharger les fichiers de l’application. Pour ce faire, pointez votre navigateur à : https://github.com/google/blockly/zipball/master

Vous allez ainsi télécharger un fichier ZIP (une archive de fichiers compressés) qui, au moment de la rédaction de cet ouvrage, fait une vingtaine de Mégaoctets et se nomme google-blockly-7679d22.zip. Bien entendu, la taille de ce fichier et son nom vont évoluer au gré des mises à jour de l’application et le fichier que vous allez télécharger aura sans doute un nom différent.

Créez un dossier à partir de la racine de votre disque dur, par exemple C:\Blockly et décompressez l’intégralité des fichiers de l’archive que vous venez de télécharger à l’intérieur de ce dossier. Si vous avez bien suivi, vous devez aboutir à une structure arborescente proche de celle-ci :

L’ensemble de l’archive décompressée représente près de 700 fichiers pour une soixantaine de dossiers.

Dans l’Explorateur de fichiers, ouvrez le dossier demos, puis le dossier code, et ouvrez le fichier index.html. En faisant un double-clic sur ce fichier, le fichier se charge dans votre navigateur par défaut. Si vous voulez l’ouvrir dans un autre navigateur, choisissez la commande Ouvrir avec dans le menu contextuel en faisant un clic droit sur le nom du fichier.

Si vous avez suivi correctement nos indications, votre navigateur doit contenir l’URL suivante :

file:///C:/Blockly/demos/code/index.html

et l’écran suivant doit s’afficher :

L’interface de l’application est en anglais et nous allons tout de suite la passer en français. En haut à droite de l’écran, cliquez dans la liste déroulante qui a la valeur English et choisissez Français. L’URL de votre navigateur affiche à présent :

file:///C:/Blockly/demos/code/index.html?lang=fr

C’est donc l’adresse à laquelle vous devrez vous rendre désormais pour travailler avec Blockly et le plus pratique est sans doute de créer un favori de cette URL dans votre navigateur afin de pouvoir y accéder plus rapidement.

Et si je travaille avec un Mac ou un ordinateur sous Linux ?

Les manipulations décrites ci-dessus s’appliquent aux ordinateurs tournant sous Windows, mais si vous possédez un Mac ou bien un ordinateur tournant sous une distribution Linux quelconque, les instructions sont quasiment identiques : vous devez télécharger l’archive de l’application et la décompresser dans un dossier que vous aurez créé au préalable. Ensuite à l’aide de votre navigateur Internet (nous vous recommandons d’utiliser Firefox), vous devez ouvrir le fichier index.html du sous-dossier code du dossier demos.

Peut-on aussi utiliser Blockly localement sur un terminal mobile (smartphone ou tablette ?)

Avec un smartphone ou une tablette Android, il suffit d’employer la méthode énoncée pour Windows (téléchargement et décompression de l’archive). Une application native pour Android est également en cours de développement. Sur un smartphone Android, l’utilisation de Blockly est plus agréable si vous disposez d’un grand écran et d’un stylet.

Si vous avez un terminal Apple (iPhone ou iPad) et qu’il a au moins la version 11 d’iOS, vous pouvez installer Blockly en local avec l’application Fichiers (incluse dans iOS) et en téléchargeant l’appli gratuite Documents par Readdle qui vous permettra de décompresser l’archive que vous aurez téléchargée et de lancer l’application en local en faisant afficher le fichier index.html du sous-dossier code du répertoire demos.

13 réponses sur “Installer Blockly sur son ordinateur”

  1. Je m’initie à la programmation d’un Arduino pour satisfaire ma curiosité.
    Le tutoriel d’installation de Blockly est parfait.

  2. Bonjour,
    Je vous remercie pour votre message et je vous prie d’excuser la lenteur de ma réaction, mais j’ai eu de gros soucis de gestion des commentaires…
    Bonne programmation !
    Dominique Maniez

  4. Bonjour Pascal,
    Je vous remercie pour votre commentaire et je suis heureux que cet article vous ait rendu service. Blockly est vraiment un produit extraordinaire et l’installer sur un smartphone ayant un grand écran permet vraiment de programmer n’importe où.
    Bonne programmation !
    Dominique

  5. Bonjour, j ai fait ce que vous dites, sauf que je n ai pas eu la list qui est sous le menu blocks
    ni les icon en bas retour, …acceuile… onglet

    j ai juste le menu haut block, java script, phyton…

    c est quoi l erreur que j ai fait, dois installer des plugin?

  6. Bonjour,
    Si vous arrivez à afficher Blocks (ou Blocs si vous avez basculé en affichage français) JavaScript, Python, etc. c’est que vous avez réussi a priori à installer correctement Blockly. Il n’y a pas besoin d’installer de plug-in et la décompression de l’archive de Blockly suffit pour le faire fonctionner.
    Que se passe-t-il si vous cliquez sur la rubrique Text (ou Texte) ? Voyez-vous apparaître des blocs d’instructions qui sont relatives au traitement du texte ?
    Si vous n’arrivez pas à résoudre votre problème, il faudrait me fournir les informations suivantes :
    – le lien qui vous a permis de télécharger Blockly
    – la version de votre système d’exploitation
    – la version de votre navigateur Internet
    – l’URL qui vous sert à appeler Blockly dans votre navigateur
    – éventuellement une copie d’écran.
    Bon courage !
    Dominique Maniez

  8. Bonsoir Frédéric,
    Merci d’avoir attiré mon attention sur un problème que je n’avais pas détecté. Il va donc falloir que je modifie mon tutoriel…
    En attendant, comme vous le suggérez, il faut choisir une ancienne version de Blockly. Le plus simple est d’ailleurs de choisir celle que j’ai mise en ligne sur le site, à l’adresse https://www.progbloc.fr/traduction-des-blocs/, car cette version de Blockly a le mérite de correspondre aux libellés de certaines commandes qui sont employées dans le livre.
    Dominique Maniez

  9. Bonjour,

    J’ai tenté d’installer Blockly sur mon android mais impossible…
    Le dossier complet est dans le téléphone mais quand je tente d’ouvrir index.html, l’appli ne s’ouvre pas correctement et je ne peux rien faire.

    Avez-vous essayé ? Merci

  10. Bonjour,
    J’ai essayé puisqu’il y a une copie d’écran dans le livre😉.
    Je pense que le problème vient du fait que vous avez dû charger la dernière version de Blockly qui ne s’installe pas de la même manière que celle que je décris dans le livre (ou dans cet article). En attendant la mise à jour de la procédure d’installation, le plus simple est d’utiliser une ancienne version de Blockly. Je vous conseille d’installer celle qui est disponible ici : https://www.progbloc.fr/wp-content/uploads/2020/12/blockly.zip
    Vous bénéficierez de la version qui m’a servi à écrire le livre et vous n’aurez pas les problèmes que j’ai mentionnés dans l’article
    https://www.progbloc.fr/traduction-des-blocs/
    N’hésitez pas à revenir vers moi si cette solution n’a pas fonctionné (vous pouvez aussi me dire si elle a marché😉).
    Bonne programmation.
    Dominique Maniez

  11. Bonjour merci pour votre réponse rapide. Et surtout un GRAND MERCI pour votre ouvrage qui m’a réconcilié avec la programmation. Je me souviens avoir acheté il y a plus de 10 ans un bouquin sur Dreamweaver, que j’ai survolé quelques minutes avant de ne plus jamais l’utiliser ! Étant un littéraire, j’ai très peu de logique ce qui est assez compliqué pour moi. Je suis tombé sur votre livre à la bibliothèque et avec beaucoup de patience, j’ai réussi à comprendre petit à petit. Je l’ai même acheté sur le net car je pense qu’il m’est indispensable pour revenir régulièrement sur les bases. J’ai beaucoup apprécié les exercices, il y en a certains pour lesquels j’ai passé de longs moments sans parvenir à les achever… mais heureusement pour la majorité il y a les solutions. Je regrette cependant que pour les plus pointus, vers les dernières semaines ce ne soit pas le cas… je n’ai pu réaliser le Mastermot ni l’application de la semaine 10. Dommage !
    J’ai créé mon programme qui s’inspire du chiffre de César, mais pas avec le décalage des lettres, plutôt en remplaçant un caractère/chiffre par un autre de mon choix. Ce qui est pratique pour des mots de passe efficaces. Par contre impossible de le mettre en place dans App Inventor, je cale… !

    Je parcours donc d’autres tutos sur Youtube, pour enrichir mes connaissances et qui sait peut-être que tôt ou tard j’aurais moins de limites. En tout cas sachez que si vous avez prévu une suite à votre excellent travail, je suis preneur ! Notamment la prise en main de App Inventor 😉

    Merci encore et bonne continuation. Thomas

  12. Bonsoir Thomas,
    Si vous avez loué ma réponse rapide, celle-ci aura mis beaucoup plus de temps à vous parvenir, mais la faute en incombe à un satané virus hivernal qui m’a longtemps tenu éloigne de mon clavier…
    Je vous remercie à mon tour pour votre message, car il m’incite effectivement à poursuivre la tâche que j’ai entreprise il y a plus d’une vingtaine, à savoir apprendre à programmer à ceux qui n’y connaissent rien et qui ne sont pas matheux. Vos mots m’encouragent car il semblerait qu’avec vous j’ai atteint le but que je m’étais assigné et c’est toujours plaisant pour un auteur de savoir que ce que l’on a écrit a servi à quelqu’un.
    S’il n’y a pas besoin d’être fort en maths pour programmer, le codage nécessite cependant des qualités comme la rigueur et la persévérance que l’on rencontre aussi, fort heureusement, chez les personnes qui ont une formation littéraire. Je vous incite donc à continuer vos efforts dans cette voie-là.
    Vous confessez ne pas avoir réussi à coder certains exercices dont je ne fournis pas la solution, mais il s’agit là d’une volonté pédagogique de ma part, car je souhaite que mes lecteurs tentent de se surpasser et trouvent par eux-mêmes leur propre solution. Ma volonté n’est cependant pas inflexible et comme vous semblez avoir déployé beaucoup d’efforts, vous aurez une bonne surprise en consultant votre messagerie personnelle…
    Bien à vous.
    Dominique

  13. Bonjour,
    j’ai acheté le livre mais aucun lien ne fonctionne pour télécharger l’application, c’est dommage ..

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *