URL: https://linuxfr.org/news/les-jeunes-et-la-programmation-atlas-toolkit-v0-7 Title: Les jeunes et la programmation (Atlas toolkit v0.7) Authors: Claude SIMON ZeroHeure, Davy Defaud et palm123 Date: 2019年03月16日T06:54:47+01:00 License: CC By-SA Tags: atlas_toolkit Score: 17 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. ---- [Le site du toolkit Atlas](https://atlastk.org) ---- # (Long) préambule Certains se souviennent peut‐être de [cette dépêche](https://linuxfr.org/news/publication-de-l-atlas-toolkit-0-4-avec-demonstrations-en-ligne) 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](https://linuxfr.org/users/epeios/journaux/application-web-de-controle-des-gpios-d-un-raspberry-pi-odroid-c2). À cette occasion, j’ai découvert [cet article](http://binaire.blog.lemonde.fr/2015/12/28/raspberry-pi-la-petite-histoire-dune-grande-idee/), 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*](https://www.poppy-project.org/fr/robots/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](https://runkit.com/), 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 : ; - [« *Hello, World!* »](https://fr.wikipedia.org/wiki/Hello_world) : ; - une application de prise de notes : ; - [*TodoMVC*](http://todomvc.com) : ; - un salon de discussion : . # 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*](https://www.raspberrypi.org/products/raspberry-pi-zero-w/) pour en contrôler les ports [GPIO](https://fr.wikipedia.org/wiki/General_Purpose_Input/Output "General Purpose Input/Output — entrées-sorties à usage général"). [![Vidéo RVB](https://img.youtube.com/vi/C4p2iX6gc-Q/0.jpg)](https://www.youtube.com/watch?v=C4p2iX6gc-Q) La même vidéo sur *PeerTube* : . # Le code À titre d’exemple, on va se pencher sur une sorte de [« *Hello, World!* »](https://fr.wikipedia.org/wiki/Hello_world), qui ressemble à ça : ![Petite démonstration](http://q37.info/download/assets/Hello.gif "Hello, World!") Démonstration en ligne : . 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](https://fr.wikipedia.org/wiki/Interface_de_programmation "Interface de programmation applicative") 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 : ```html
``` Et, pour en faciliter la compréhension, l’équivalent expurgé de tout ce qui n’est pas indispensable : ```html ``` 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](https://fr.wikipedia.org/wiki/Espace_de_noms_(programmation)), 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 `|`. `` peut être n’importe quel évènement JavasScript, sans son prefix `on` (`click` pour `onclick`, `mousedown` pour `onmousedown`...), et ``, 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](https://fr.wikipedia.org/wiki/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 ```java import info.q37.atlas.*; class Hello extends Atlas { private static String body = "" + "" + ""; @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 . ## Version JavaScript pour Node.js ```javascript const atlas = require('atlastk'); const body = ` `; 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 . ## Version PHP ```php 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*](http://php.net/manual/book.pthreads.php) doit être installée. Voir également . ## Version Python ```python import Atlas body = """ """ 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 . ## Version Ruby ```ruby require 'Atlas' $body = <<~heredoc 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 . # 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](https://fr.wikipedia.org/wiki/Document_Object_Model "Document Object Model")), qui font partie de la culture générale de tous développeurs. Néanmoins : - il faut quelques notions de HTML, de [CSS](https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade "Cascading Style Sheets — Feuilles de style en cascade") et de [DOM](https://fr.wikipedia.org/wiki/Document_Object_Model "Document Object Model"), 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](https://fr.wikipedia.org/wiki/GNU_Affero_General_Public_License "GNU Affero General Public License")).

AltStyle によって変換されたページ (->オリジナル) /