Installer Blockly sur son ordinateur

Mise à jour du 17 janvier 2023.

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.

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

    1. 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

    1. 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

  1. 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?

    1. 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

    1. 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

  2. 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

    1. 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

Laisser un commentaire

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