Les jeunes et la programmation (Atlas toolkit v0.7)

Le toolkit Atlas permet de manipuler des interfaces Web en Java, Node.js, PHP, Python et, avec cette nouvelle version, Ruby. Cette dépêche met l’accent sur les particularités du toolkit Atlas qui contribuerait à rendre l’apprentissage de la programmation plus attrayant.

Sommaire

• (Long) préambule
• Installation
• Le code
  • Le code HTML
  • Le cœur de l’application
  • Le code applicatif
  • Version Java
  • Version JavaScript pour Node.js
  • Version PHP
  • Version Python
  • Version Ruby
• Interaction avec l’application
• Le serveur dans le cloud
• Synthèse

(Long) préambule

Certains se souviennent peut‐être de cette dépêche dans laquelle je décrivais la version 0.4 du toolkit Atlas. Je me suis ensuite intéressé au Raspberry Pi, pour lequel j’ai développé quelques applications que j’ai décrites dans ce journal. À cette occasion, j’ai découvert cet article, dans lequel on relate que le Raspberry Pi, dont les différentes versions se sont vendues à plus de 12 millions d’exemplaires en cinq ans, a été conçu pour tenter d’enrayer la désintérêt des jeunes pour la programmation.

Par ailleurs, j’ai eu l’occasion d’assister, en tant qu’observateur, à des ateliers d’initiation à la programmation. Il y avait ceux destinés aux plus jeunes, qui s’appuient sur des environnements de développement comme Snap! ou Scratch, dans lesquels les instructions sont représentées par des blocs ou des briques que l’on assemble pour créer un programme. Et, plus rares, il y avait quelques ateliers dont l’objet était l’initiation à des langages comme Java, Python, JavaScript, etc.

Concernant ces derniers, j’ai observé que la plupart des participants, si ce n‘est la totalité, étaient équipés de smartphones. Or, bien que les mobiles soient des ordinateurs avec une puissance plus que respectable, ils n’étaient jamais utilisés dans le cadre de ces ateliers. Le développement d’applications mobiles nécessitant de solides connaissances en programmation, il est clair qu’il ne peut être abordé lors de ces ateliers. Et cela vaut aussi pour le développement d’applications Web, qui sont l’autre type d’applications accessibles depuis un mobile.

L’enthousiasme suscité par une démonstration du toolkit Atlas, avec notamment le pilotage d’un Poppy Ergo Jr à l’aide d’un smartphone, me laisse supposer qu’un atelier de programmation qui impliquerait leur mobile aurait du succès auprès des jeunes. Aussi, ai‐je développé une nouvelle version du toolkit Atlas en mettant l’accent sur son utilisation dans ce but.

Pour rappel, le toolkit Atlas implémente en Java, Node.js, PHP, Python, ainsi que Ruby, une interface de programmation (API) permettant de manipuler des interfaces Web. Même si, techniquement, utiliser le toolkit Atlas revient à développer une application Web, le résultat sera plus proche d’une application de bureau, avec la particularité d’avoir une interface Web lui permettant d’être accédée à distance.

Cette dépêche est un état des lieux du toolkit Atlas dans la perspective de son utilisation à des fins éducatives. Le toolkit Atlas est constitué de deux parties, l’une étant installée sur la machine du développeur, l’autre étant située sur un serveur distant. Sauf mention contraire, le terme de toolkit fera dorénavant référence uniquement à la partie installée sur la machine du développeur, à l’exclusion de celle située sur le serveur.

Pour ceux qui voudraient avoir un premier aperçu de ce à quoi ressemble une application faite avec le toolkit Atlas, c’est possible sans avoir à installer quoi que ce soit, grâce aux démonstrations en ligne dont les liens sont donnés ci‐dessous. Ces démonstrations s’appuyant sur RunKit, elles mettent en œuvre la version pour Node.js du toolkit. À cause d’un délai d’expiration de RunKit, ces démonstrations se coupent au bout de quelques dizaines de secondes. Notez que vous pouvez modifier le code source de ces démonstrations in situ et les relancer dans la foulée pour en voir le résultat.

Les liens vers ces démonstrations :

• un exemple très basique : http://q37.info/runkit/Blank ;
• « Hello, World! » : http://q37.info/runkit/Hello ;
• une application de prise de notes : http://q37.info/runkit/Notes ;
• TodoMVC : http://q37.info/runkit/TodoMVC ;
• un salon de discussion : http://q37.info/runkit/Chatroom.

Installation

La procédure d’installation pour tous les langages pris en charge par le toolkit Atlas consiste à cloner un dépôt Git qui, en plus d’exemples d’applications, contient le toolkit Atlas proprement dit. Pour la version Node.js, le dépôt Git ne contient que les exemples, et l’installation du toolkit se fait via le gestionnaire de paquets (NPM). C’est nécessité par l’utilisation de RunKit pour les démonstrations en ligne ci‐dessus.

Le toolkit Atlas en lui‐même ne pèse que quelques dizaines de kilooctets, et peut facilement être mis en œuvre sur des machines de faible puissance, comme dans la vidéo de démonstration ci‐dessous, qui montre la mise en œuvre du toolkit Atlas sur un Raspberry Pi Zero W pour en contrôler les ports GPIO.

La même vidéo sur PeerTube : https://peertube.video/videos/watch/e7e02356-c9c3-4590-8ec0-8f8da06ff312.

Le code

À titre d’exemple, on va se pencher sur une sorte de « Hello, World! », qui ressemble à ça :

Démonstration en ligne : http://q37.info/runkit/Hello.

De manière générale, comme vous le verrez avec cet exemple, une application s’appuyant sur le toolkit Atlas est constituée d’une partie écrite en HTML qui décrit l’interface, et dans laquelle on définit des actions à exécuter suite à certains évènements.

L’autre partie de l’application est écrite dans le langage de son choix parmi ceux disponibles pour le toolkit Atlas, ce dernier mettant à disposition une API permettant d’être informé des actions à traiter, d’injecter du code HTML dans l’interface, de récupérer différentes données saisies par l’utilisateur via l’interface, et de modifier l’interface en y ajoutant, retirant ou modifiant certains éléments.

Le code HTML

Voici le code HTML de l’exemple ci‐dessus :

<div style="display: table; margin: 50px auto auto auto;">
  <fieldset>
    <input id="input" maxlength="20" placeholder="Enter a name here" type="text"
           data-xdh-onevent="Submit" value="World"/>
    <div style="display: flex; justify-content: space-around; margin: 5px auto auto auto;">
      <button data-xdh-onevent="Submit">Submit</button>
      <button data-xdh-onevent="Clear">Clear</button>
    </div>
  </fieldset>
</div>

Et, pour en faciliter la compréhension, l’équivalent expurgé de tout ce qui n’est pas indispensable :

<input id="input" data-xdh-onevent="Submit"/>
<button data-xdh-onevent="Submit">Submit</button>
<button data-xdh-onevent="Clear">Clear</button>

Il est suffisamment bref pour être directement inclus dans le code source de l’application, sachant que le bon usage, surtout pour du code plus long, consisterait à le mettre dans un fichier dédié.

On voit que c’est du HTML tout à fait classique, mis à part l’attribut data-xdh-onevent. Le data- est requis par HTML pour définir des attributs maisons, et le xdh- fait office d’espace de noms, pour éviter un conflit avec d’éventuels autres attributs hors HTML.

data-xdh-onevent permet de définir des actions associées à des évènements JavaScript. Son format général est <event>|<action>. <event> peut être n’importe quel évènement JavasScript, sans son prefix on (click pour onclick, mousedown pour onmousedown…), et <action>, un libellé d’action que l’on va retrouver dans le code de l’application.

Dans l’exemple ci‐dessus, on remarquera qu’il n’y a qu’un libellé d’action comme valeur pour chacun des attributs data-xdh-onevent. Cela signifie que l’évènement associé à cette action sera celui défini par défaut pour l’élément HTML considéré. Pour un champ texte, il s’agit de l’appui sur la touche Entrée ; pour un bouton, son actionnement. On remarquera, en outre, que l’action définie pour le champ texte et le bouton Submit (« Envoyer ») est la même.

Il existe de nombreux tutoriels concernant HTML, pour tous les niveaux, et son initiation pourra se faire en introduction et indépendamment de l’apprentissage de la programmation proprement dite.

Le cœur de l’application

Le cœur de l’application aura pour rôle de réagir aux actions définies dans le code HTML, à savoir, dans notre exemple, Submit, qui provoquera l’ouverture d’une boîte de dialogue affichant la donnée saisie par l’utilisateur dans le champ texte, et Clear, qui provoquera l’ouverture d’une boîte de dialogue demandant confirmation de l’action et, le cas échéant, effacera le contenu du champ texte.

Il y a, en outre, une troisième action à laquelle l’application doit réagir, et dont le libellé est une chaîne de caractères vide. Cette action est lancée lorsqu’une nouvelle session est créée, et, généralement, procède à l’affichage de la page initiale de l’application.

Pour Java et PHP, on définit une fonction de rappel (callback) globale (intitulée handle) qui est appelée lorsque survient un évènement pour lequel une action est définie. On y reçoit en paramètre le libellé de l’action ainsi que l’identifiant de l’élément concerné. Pour les autres langages, on définit une fonction de rappel pour chacune des actions définies dans l’interface, cette fonction étant appelée dès qu’un des évènements auxquels cette action est associée survient, avec, entre autres paramètres, l’identifiant de l’élément concerné par cette action.

Le développeur a le moyen de définir un objet dont chaque session aura une instance qui lui sera propre. Quel que soit le langage, lors du traitement d’une action, le développeur aura accès à l’instance, et uniquement à celle‐ci, correspondant à la session qui est à l’origine de l’action. Le toolkit Atlas prend en charge le traitement de plusieurs sessions simultanées de manière totalement transparente pour le développeur, sauf, bien sûr, si certaines ressources sont communes à toutes les applications, comme le montre l’exemple du salon de conversation (nommé Chatroom).

En fait, l’API du toolkit Atlas contient une fonction launch() à laquelle on fournit une fonction de rappel qui est lancée à chaque nouvelle session. C’est cette fonction de rappel qui a la responsabilité de créer une nouvelle instance d’un objet, défini par le développeur, instance qui contiendra les données propres à chaque session.

Le code applicatif

Comme on le verra avec les codes source ci‐dessous, les exemples de programmes donnés dans les tutoriels consacrés à l’apprentissage de certains langages peuvent facilement être modifiés pour utiliser le toolkit Atlas, permettant de les doter d’une véritable interface graphique, au lieu de l’habituelle interface texte, rendant ces exemples beaucoup plus attrayants.

Vous trouverez dans la suite de cet article les différents codes source de l’application pour chacun des langages. Tous suivent le même schéma et utilisent ces fonctions issues de l’API du toolkit Atlas :

• setLayout() : met en place du code HTML au niveau de l’interface ; le premier paramètre est l’identifiant de la balise HTML dans laquelle le code HTML sera injecté, et si ce paramètre est une chaîne vide, comme c’est la cas dans notre exemple, c’est l’ensemble de la page qui voit son contenu écrasé par le code HTML fourni ;
• focus() : donne le focus à l’élément dont l’identifiant est passé en paramètre ;
• alert() : affiche une boîte de dialogue contenant la chaîne de caractères passée en paramètre, avec un seul et unique bouton pour l’acquitter ;
• confirm() : comme ci‐dessus, mais avec deux boutons, l’un pour l’acceptation, l’autre pour le refus ; un booléen est retourné indiquant le bouton actionné ;
• getContent() : retourne le contenu d’un élément dont l’identifiant est passé en paramètre ; dans le cadre de notre exemple, permet de récupérer ce que l’utilisateur a saisi dans le champ texte ;
• setContent() : met à jour le contenu d’un élément dont l’identifiant est passé en paramètre avec la chaîne de caractères également passée en paramètre ; dans le cadre de notre exemple, vide le champ texte en le « remplissant » avec une chaîne vide.

Version Java

import info.q37.atlas.*;

class Hello extends Atlas {
    private static String body =
        "<input id=\"input\" data-xdh-onevent=\"Submit\"/>" +
        "<button data-xdh-onevent=\"Submit\">Submit</button>" +
        "<button data-xdh-onevent=\"Clear\">Clear</button>";

    @Override
    public void handle(String action, String id) {
        switch (action) {
            case "":
                dom.setLayout("", body);
                break;
            case "Submit":
                dom.alert("Hello, " + dom.getContent("input") + "!");
                break;
            case "Clear":
                if (dom.confirm("Are you sure?")) {
                    dom.setContent("input", "");
                }
                break;
            }
            dom.focus("input");
        }

    public static void main(String[] args) throws Exception {
        launch(() -> new Hello());
    }
}

Pour l’exécuter :

• git clone http://github.com/epeios-q37/atlas-java ;
• cd atlas-java ;
• y stocker le code source ci‐dessus dans un fichier nommé Hello.java ;
• javac -cp Atlas.jar Hello.java ;
• sous Windows : java -cp .;Atlas.jar Hello ;
• avec les autres système d’exploitation : java -cp .:Atlas.jar Hello.

Voir également https://github.com/epeios-q37/atlas-java.

Version JavaScript pour Node.js

const atlas = require('atlastk');

const body = `
<input id="input" data-xdh-onevent="Submit"/>
<button data-xdh-onevent="Submit">Submit</button>
<button data-xdh-onevent="Clear">Clear</button>
`;

const callbacks = {
    "": (dom, id) => dom.setLayout("", body, () => dom.focus("input")),
    "Submit": (dom, id) => dom.getContent("input",
        (name) => dom.alert("Hello, " + name + "!", () => dom.focus("input"))),
    "Clear": (dom, id) => dom.confirm("Are you sure ?",
        (answer) => { if (answer) dom.setContent("input", ""); dom.focus("input"); })
};

atlas.launch(() => new atlas.DOM(), callbacks);

Pour l’exécuter :

• git clone http://github.com/epeios-q37/atlas-node ;
• cd atlas-node ;
• y stocker le code source ci‐dessus dans un fichier nommé Hello.js ;
• npm install ;
• node Hello.js.

Voir également https://github.com/epeios-q37/atlas-node.

Version PHP

<?php
require "phar://Atlas.phar/Atlas.php";

class Hello extends Threaded {
    static $body = <<<EOT
<input id="input" data-xdh-onevent="Submit"/>
<button data-xdh-onevent="Submit">Submit</button>
<button data-xdh-onevent="Clear">Clear</button>
EOT;

    public function handle($dom, $action, $id) {
        switch ($action) {
            case "":
                $dom->setLayout("", self::$body);
                $dom->focus("input");
                break;
            case "Submit":
                $dom->alert("Hello, " . $dom->getContent("input") . "!");
                $dom->focus("input");
                break;
            case "Clear":
                if ($dom->confirm("Are you sure?"))
                    $dom->setContent("input", "");
                $dom->focus("input");
                break;
        }
    }
}

function hello() {
    return new Hello();
}

Atlas::launch('hello');
?>

Pour l’exécuter :

• git clone http://github.com/epeios-q37/atlas-php ;
• cd atlas-php ;
• y stocker le code source ci‐dessus dans un fichier nommé Hello.php ;
• php Hello.php.

À noter que l’extension pthreads doit être installée.

Voir également https://github.com/epeios-q37/atlas-php.

Version Python

import Atlas

body = """
<input id="input" data-xdh-onevent="Submit"/>
<button data-xdh-onevent="Submit">Submit</button>
<button data-xdh-onevent="Clear">Clear</button>
"""

def acConnect(this, dom, id):
    dom.setLayout("", body)
    dom.focus("input")

def acSubmit(this, dom, id):
    dom.alert("Hello, " + dom.getContent("input") + "!")
    dom.focus("input")

def acClear(this, dom, id):
    if ( dom.confirm("Are you sure?") ):
        dom.setContent("input", "")
    dom.focus("input")

callbacks = {
    "": acConnect,
    "Submit": acSubmit,
    "Clear": acClear,
}

Atlas.launch(callbacks)

Pour l’exécuter :

• git clone http://github.com/epeios-q37/atlas-python ;
• cd atlas-python ;
• y stocker le code source ci‐dessus dans un fichier nommé Hello.py ;
• python Hello.py.

Voir également https://github.com/epeios-q37/atlas-python.

Version Ruby

require 'Atlas'

$body =
<<~HEREDOC
<input id="input" data-xdh-onevent="Submit"/>
<button data-xdh-onevent="Submit">Submit</button>
<button data-xdh-onevent="Clear">Clear</button>
HEREDOC

def acConnect(userObject, dom, id)
    dom.setLayout("", $body)
    dom.focus("input")
end

def acSubmit(userObject, dom, id)
    dom.alert("Hello, " + dom.getContent("input") + "!")
    dom.focus("input")
end

def acClear(userObject, dom, id)
    if dom.confirm?("Are you sure?")
        dom.setContent("input", "")
    end
    dom.focus("input")
end

callbacks = {
    "" => method(:acConnect),
    "Submit" => method(:acSubmit),
    "Clear" => method(:acClear),
}

Atlas.launch(callbacks)

Pour l’exécuter :

• git clone http://github.com/epeios-q37/atlas-ruby ;
• cd atlas-ruby ;
• y stocker le code source ci‐dessus dans un fichier nommé Hello.rb ;
• ruby Hello.rb.

Voir également https://github.com/epeios-q37/atlas-ruby.

Interaction avec l’application

Lorsque l’application est lancée, l’URL permettant d’y accéder est automatiquement ouverte dans le navigateur Web. Cette URL est, par ailleurs, affichée dans la console à partir de laquelle l’application est lancée, au cas où son ouverture automatique échouerait. En outre, au‐dessous de l’application, le code QR correspondant à cette URL est affiché, destiné à être lu par un smartphone, ou tout autre dispositif connecté à Internet et disposant d’un navigateur Web moderne, pour pouvoir y utiliser l’application. Accessoirement, cliquer sur ce code QR ouvre une nouvelle session de l’application.

Cette URL, grâce à une particularité du toolkit Atlas, est valable où que ce soit sur Internet aussi longtemps que l’application s’exécute. Nul besoin de configurer le mobile, ou le dispositif utilisé pour accéder à l’application, pour le connecter au même réseau local que celui auquel est connecté l’ordinateur faisant tourner l’application. Et il n’est pas non plus nécessaire de configurer une « box », ou un quelconque routeur, pour ouvrir un port vers cet ordinateur, ni de déployer l’application sur une machine distante.

Grâce à cela, le développeur en herbe peut facilement donner accès à son application à un ami, un parent, un professeur, etc., juste en lui envoyant un message avec l’adresse URL. Où qu’il soit, il lui suffit de brancher au réseau local l’ordinateur sur lequel tourne son application pour qu’il puisse y donner accès à qui il veut en lui fournissant l’URL.

Le toolkit Atlas pourra ainsi accompagner l’apprenti dès le début de sa formation, lui permettant de doter ses programmes d’une interface Web, à laquelle il aura facilement accès à partir de son mobile, et à laquelle il pourra donner accès à qui il voudra : amis, parents, professeurs, etc., fussent‐ils à l’autre bout du monde.

Le serveur dans le cloud

La partie du toolkit installée sur la machine du développeur se connecte par défaut à un serveur situé dans le cloud et gracieusement mis à disposition. Le code s’exécutant sur ce serveur est sous license libre, comme le reste du toolkit, donc il sera possible à qui le veut de l’installer sur le serveur de son choix. On perd l’accessibilité « out of the box », mais cela peut avoir un intérêt pour quelqu’un qui souhaiterait ne pas être à la merci d’une éventuelle défaillance du serveur par défaut, dans le cadre d’un atelier dans lequel le toolkit Atlas serait utilisé, par exemple.

Synthèse

Grâce au toolkit Atlas, un débutant en programmation pourra facilement :

• doter ses logiciels d’une interface graphique, plus attrayante que l’interface textuelle dont il aurait dû se contenter sinon ;
• interagir avec ses logiciels via son propre smartphone, à l’instar de la plupart des applications qu’il utilise ;
• montrer ses logiciels en transmettant une simple URL que tout un chacun pourra ouvrir dans le navigateur Web de son smartphone.

En outre, le toolkit Atlas :

• n’est pas lié à un langage en particulier ; il est actuellement disponible en cinq langages et leur nombre devrait croître à l’avenir ;
• rend les logiciels immédiatement accessibles depuis Internet, sans qu’il soit nécessaire de configurer quoi que ce soit ou de disposer d’une infrastructure particulière ;
• s’appuie sur des standards éprouvés et répandus (HTML et DOM), qui font partie de la culture générale de tous développeurs.

Néanmoins :

• il faut quelques notions de HTML, de CSS et de DOM, mais ce sont des notions faciles à acquérir, pour lesquelles on peut aisément trouver des tutoriels pour tous les niveaux ;
• pour des raisons techniques, le toolkit nécessite une connexion à un serveur externe, mais :
  • un tel serveur est gracieusement mis à disposition (c’est le serveur auquel le toolkit se connecte par défaut),
  • le code tournant sur ce serveur étant librement disponible, il est possible de le faire tourner un autre serveur et de configurer le toolkit Atlas pour qu’il s’y connecte.

Et, bien sûr, l’ensemble du toolkit est diffusé sous licence libre (AGPL).

Aller plus loin

• Le site du toolkit Atlas (210 clics)