Pilotez votre agent PytactX avec une manette en html 🎼

Vous souhaitez acquérir des compétences en développement web ou comprendre comment un site web fonctionne ? Dans ce tutoriel, nous allons voir ensemble comment créer une manette de jeu pour piloter les actions de votre agent gladiateur dans une arÚne de jeu PytactX, le tout en utilisant les langages html, javascript et css !

⚙ PrĂ©requis

  • Un ordinateur sous Windows 10
  • Un navigateur web :
  • Un Ă©diteur de texte :
    • Bloc-notes : l’Ă©diteur installĂ© par dĂ©faut pour ceux qui ne souhaitent ou ne peuvent rien installer
    • ou Notepad ++ : un Ă©diteur lĂ©ger mais puissant, tĂ©lĂ©chargeable en cliquant ici
  • Quelques connaissances thĂ©oriques sur le web
  • De la patience et une volontĂ© de fer pour vaincre vos ennemis !

Voici quelques courtes vidéos de 5 minutes que je vous recommande pour comprendre :
Ce qu’est le web et comment il permet d’accĂ©der Ă  des sites web
Le modĂšle client-serveur
Ce qu’il se passe quand vous tapez un url dans votre navigateur
Comment une page web est structurée en html
Comment une page web est mise en forme en css

N’hĂ©sitez pas Ă  me contacter ici pour toutes questions sur les notions de Web. A votre disposition si vous souhaitez aussi des formations ou cours particuliers adaptĂ©s Ă  vos besoins 😉

đŸȘȘ RĂ©cupĂ©ration de vos identifiants de connexion Ă  une arĂšne de jeu

Si vous n’avez pas encore d’identifiants, pour jouer gratuitement rien de plus simple, rendez vous sur jusdeliens.com/pytactx-free/ et renseignez votre PrĂ©nom, Nom et Email. Vous recevrez vos identifiants gratuitement sous 48h. Une fois reçus par mail, Ă  vos claviers et neurones, on commence en crĂ©ant votre manette !

L’accĂšs aux arĂšnes publiques est entiĂšrement gratuit mais limitĂ©. Elles sont ouvertes Ă  l’occasion d’affrontements ou de formations jusdeliens dont les dates vous seront communiquĂ©es via la newsletter (pour vous abonner, cliquez ici).
Si vous souhaitez vous connecter à une arÚne privée, uniquement accessible à ceux à qui vous communiquerez son nom, vous pouvez créer votre propre arÚne ouverte 24h/24, 7 jours sur 7 et accessible dans le monde entier avec Pytactx ARENA. Les tarifs sont indiqués ici.

🎼 CrĂ©ation de votre manette de jeu

Notre objectif est de crĂ©er une page web, sur laquelle nous pourrons visualiser l’arĂšne de jeu PytactX et notre agent, ainsi qu’une manette de jeu pour le contrĂŽler.

Une page web est avant tout composĂ©e d’Ă©lĂ©ments graphiques permettant Ă  un utilisateur d’interagir avec. Il peut s’agir par exemple de boutons, de texte, d’images ou de liens cliquables.

Dans un premier temps, nous allons placer ces éléments graphiques sur notre page web, en décrivant leur placement dans un fichier que nous allons éditer.

Récupération des fichiers sources de votre page

Commençons par créer notre dossier de travail, constitué de tous les fichiers nécessaires pour créer notre page web. Pour cela, récupérer le dossier compressé du projet en remplissant le formulaire ci-dessous, puis cliquer sur le bouton « Télécharger » :

Une fois tĂ©lĂ©chargĂ©, dans votre dossier « tĂ©lĂ©chargements », faites un clic droit pour extraire les fichiers du dossier compressĂ©, puis double clic dans le dossier jusqu’Ă  apercevoir les fichiers du projet :

  • index.html : dĂ©finit les Ă©lĂ©ments graphiques de votre page web et leurs emplacements. Par exemple, si on veut ajouter un bouton, c’est ici qu’on le fera.
  • style.css : contient la description de la mise en forme des Ă©lĂ©ments de la page. Par exemple, si un texte doit apparaĂźtre en rouge sur la page, c’est ici qu’on le dĂ©finira.
  • script.js : contient les variables et fonctions Ă  exĂ©cuter pour effectuer des actions dynamiques sur la page. Par exemple, si on veut afficher un message quand on clique sur un bouton, c’est ici qu’on Ă©crira le programme correspondant.
  • pytactx.js : ce fichier contient les variables et les fonctions pour vous permettre de crĂ©er et d’interagir avec votre agent dans le jeu PytactX. Nous en aurons besoin pour relier votre manette au jeu.

Maintenant que nous avons les fichiers, ouvrons le fichier index.html avec notre navigateur web en double cliquant dessus. La page suivante devrait s’afficher :

L’ouverture du fichier index.html dans un navigateur (ici Google Chrome) affiche la page suivante Ă  l’Ă©cran. Les rectangles en couleur sont rajoutĂ©s ici pour bien distinguer les diffĂ©rentes divisions de la page.

Nous voyons apparaitre 3 éléments principaux :

  • En haut de l’Ă©cran (encadrĂ© en bleu) : Il s’agit du titre de la page
  • En rouge et vert : Il s’agit du corps de la page. Ce corps est divisĂ© en 2 parties.
    • A gauche (encadrĂ© en rouge) : c’est l’interface pour accĂ©der et voir l’arĂšne du jeu.
    • A droite (encadrĂ© en vert) : cette partie est vide, c’est ici que nous rajouterons le code pour afficher notre manette de jeu.

Ajout des boutons pour interagir

Éditons maintenant le fichier index.html pour comprendre comment la page est structurĂ©e en html, et comment pouvons-nous la modifier. Pour cela 2 possibilitĂ©s :

  • Pour ouvrir avec Bloc-Notes : faites clic droit sur le fichier index.html puis sĂ©lectionner « Ouvrir avec », puis « Choisir une autre application », « Autres applications », et enfin sĂ©lectionner Bloc-Notes dans la liste
  • Si vous avez installĂ© notepad++ (voir prĂ©requis), faites clic droit sur le fichier index.html puis sĂ©lectionner « Editer avec Notepad++ »

Structure du fichier index.html

Comme expliquĂ© dans les vidĂ©os en prĂ©requis, l’html est un langage descriptif qui permet par du texte dĂ©limitĂ© par des balises, de dĂ©crire la structure graphique d’une page.

Contenu du fichier index.html ouvert avec notepad++

Comme tout fichier html, le code du fichier index.html est compris entre une balise ouvrante <html> et son homologue fermante </html>. Entre celles-ci, nous retrouvons l’entĂȘte de la page (« head » en anglais) entre les balises <head> et </head>, puis le corps de la page (« body » en anglais) entre les balises <body> et </body>.

L’entĂȘte comprends classiquement plusieurs balises, gĂ©nĂ©ralement non visibles par l’internaute:

  • title : dĂ©finit le titre de la page visible dans la barre en haut dans le navigateur
  • meta : permet d’ajouter diffĂ©rentes informations, comme l’encodage des caractĂšres de la page pour permettre les accents et caractĂšres spĂ©ciaux, les mots clĂ©s pour permettre aux moteurs de recherche de classer votre page, etc …
  • link : permet d’inclure d’autres dĂ©pendances, comme des fichiers .css contenant la mise en page des Ă©lĂ©ments du fichier
  • script : permet d’inclure des fichiers javascripts utilisĂ©s dans la page

Le body contient lui tous les Ă©lĂ©ments qui seront visibles par l’internaute dans son navigateur.

A quoi servent les Ă©lĂ©ments en vert commençant par <!– ?

Ce sont des blocs de commentaires. Ils commencent par <!– et se termine par –>. Ces blocs ne sont pas affichĂ©s par le navigateur mais permettent au dĂ©veloppeur de placer des indications dans un fichier html.

L’html n’est pas Ă  proprement parlĂ© un langage de programmation car il ne permet pas d’implĂ©menter des instructions, ni de variables, ni conditions, ni boucles qui sont les ingrĂ©dients de base d’un programme.

Ah bon ? Ce n’est pas possible de faire un programme sur une page web ?

Ce n’est effectivement pas possible en html seul.

Alors comment faire pour crĂ©er mon agent et le dĂ©placer si j’appuie sur un bouton ?

Pour cela nous avons besoin d’un autre langage, le javascript !

Enregistrer du son via le Microphone en JavaScript | SoftFluent

Euh ok, mais comment on relie tous ces langages entres-eux ?

Dans notre fichier index.html. Voyons cela sans plus attendre.

Placement du bouton sur la page en html

Dans le fichier index.html, ne devons dĂ©crire en html oĂč se placera un bouton « CrĂ©er agent » Ă  l’Ă©cran. Pour faire cela, ajoutons une balise « button » pour dĂ©crire le bouton.

Comme nous voulons rajoutez les Ă©lĂ©ments de notre manette Ă  droite de l’Ă©cran, insĂ©rons la ligne suivante dans la division « manette » (le rectangle en vert) de notre page, entre <div id= »manette »> et </div> :

<button onclick="">Créer agent</button>

Enregistrons le fichier (avec le raccourci CTRL+S), puis rechargeons notre page dans le navigateur (raccourci CTRL+R).

Le bouton « Créer agent » apparaßt dans la partie de droite de la page, centré en hauteur et en largeur.

Rien ne se passe quand je clique sur « CrĂ©er agent », c’est normal ?

Absolument ! La ligne que nous avons rajouter dans le html ne fait qu’afficher le bouton. Pour dĂ©clencher une action au clic souris, il nous faut associer l’Ă©vĂšnement clic (attribut onclick du bouton) Ă  un programme. Voyons comment faire.

Programmer l’action du bouton en javascript

Si l’utilisateur appuie sur le bouton, alors nous devons exĂ©cuter des instructions Ă©crites dans un autre langage, le javascript.

En html, une balise peut contenir de nombreux attributs selon son type. Pour le bouton, l’attribut « onclick » permet d’exĂ©cuter des instructions javascript quand le bouton est cliquĂ©.

Nous pouvons alors appeler des fonctions du fichier pytactx.js pour nous permettre de crĂ©er notre agent et le connecter Ă  l’arĂšne. Pour cela, modifions la balise button de la maniĂšre suivante :

<button onclick="pytactx_connecter()">Créer agent</button>

Enregistrez les modifications (CTRL+S) puis rechargez la page dans le navigateur (CTRL+R).

Connectez-vous Ă  l’arĂšne dans l’interface de gauche, puis cliquez sur le bouton « CrĂ©er agent ». Une fenĂȘtre apparaĂźt. Rentrez-y le nom souhaitĂ© de votre agent, puis le nom de l’arĂšne, l’identifiant et le mot de passe pour y accĂ©der. Vous devriez voir votre agent apparaĂźtre dans l’interface de gauche !

Ouvre la page index.html avec votre navigateur. Connectez vous Ă  l’arĂšne dans l’interface de gauche, puis cliquez sur le bouton « CrĂ©er agent » et renseignez vos identifiants. il devrait apparaĂźtre dans l’arĂšne ! Les autres boutons sont Ă  rajouter !

Pour donner plus de fonctionnalités à votre manette, voici toutes les autres fonctions disponibles (accessibles dans le fichier pytactx.js)

Les fonctions en javascript permettant de faire agir l’agent dans l’arĂšne
  • pytactx_deplacer(dx, dy) : pour dĂ©placer l’agent. dx et dy reprĂ©sente le nombre de case de dĂ©placement Ă  remplacer par un nombre. Si dx < 0, l’agent ira Ă  gauche, si dx > 0 il ira Ă  droite. Si dy < 0, l’agent ira en haut, si dy > 0 il ira en bas.
    Exemple : pytactx_deplacer(-1, 0) dĂ©placera l’agent d’une case vers la gauche et de 0 case en vertical.
  • pytactx_orienter(direction) : pour orienter l’agent dans la direction spĂ©cifiĂ©e. Remplacer direction par 0 pour regarder Ă  droite, 1 pour regarder en haut, 2 pour regarder Ă  gauche, 3 pour regarder en bas.
    Exemple : aprĂšs pytactx_orienter(3), l’agent regarder vers le bas de l’arĂšne.
  • pytactx_tirer (activer) : pour activer ou dĂ©sactiver le tir en rafale en remplaçant activer par un boolĂ©en (soit true, soit false). Si activer Ă©gale false, l’agent arrĂȘtera de tirer, sinon, l’agent tirera en rafale.
    Exemple : aprĂšs un pytactx_tirer(true), l’agent tira en rafale plusieurs fois par seconde jusqu’Ă  ne plus avoir de munition ou jusqu’Ă  un pytactx_tirer(false)

Comme en Python, les fonctions en javascript sont des sous-programmes pouvant prendre des paramÚtres en entrée et pouvant renvoyer des paramÚtres en sortie. Dans tous les cas, pour appeler une fonction, il faut toujours rajouter les parenthÚses ouvrantes et fermantes aprÚs le nom de la fonction.
Exemple : pytactx_connecter() ne prends ici aucun paramĂštre, il n’y a aucune variable entre les parenthĂšses

Il ne vous reste plus qu’Ă  rajouter d’autres boutons dans votre fichier html en appelant les fonctions d’actions correspondantes !

  • des boutons « Gauche », « Droite », « Haut », « Bas » : pour dĂ©placer votre agent. Chacun de ces boutons doit appeler la fonction pytactx_deplacer(dx,dy) avec les dx,dy correspondant au dĂ©placements correspondants.
  • Un bouton « Tirer » : pour activer le tir en rafale. L’Ă©vĂšnement « onclick » doit appeler la fonction « pytactx_tirer(true) »
  • Un bouton « Stop » : pour arrĂȘter de tirer, en appelant la fonction « pytactx_tirer(false) »

Voici à quoi devrait ressembler votre page une fois enregistrée et rechargée dans le navigateur :

Les boutons ajouter dans la div s’affichent de haut en bas automatiquement

Euh, comment je fais pour ajouter d’autres boutons ?

La ligne que nous avons ajoutĂ©e dans index.html, nous a permis de crĂ©er notre bouton « CrĂ©er agent ». Pour crĂ©er d’autres boutons, il suffit d’ajouter d’autres lignes <button … </button> en changeant le texte du bouton et son comportement onclick.

Maintenant que nous avons vu comment déplacer notre agent avec notre manette web, voyons comment modifier notre page web quand notre agent change.

Mettre Ă  jour des Ă©lĂ©ments html quand l’Ă©tat de l’agent change

Ajoutons un nouvel Ă©lĂ©ment dans le fichier index.html pour afficher l’orientation de l’agent. Comme l’orientation est une variable numĂ©rique pouvant aller de 0 Ă  3, ajoutons un label dans notre manette avec la balise « label ».

<label id="orientation">Orientation = 0</label>

Le texte contenu entre la balise ouvrante <label> et fermante </label> sera le texte affiché sur la page web par notre navigateur.

A quoi sert id= »orientation » ?

L’attribut id va nous permettre d’identifier notre label pour pouvoir le modifier avec un code javascript. « orientation » c’est un peu la carte d’identitĂ© de notre label, il faut donc s’assurer qu’il est unique dans la page sinon on risque de modifier malencontreusement plusieurs Ă©lĂ©ments.

Modifier le label orientation ? Pour faire quoi ?

Quand l’utilisateur jouera avec la manette, l’agent se dĂ©placera dans l’arĂšne, son orientation changera donc. L’idĂ©e est d’actualiser le texte du label, dĂšs qu’il aura une nouvelle orientation, et ça, seul un langage de programmation peut le faire !

Ok, et comment on fait ça ? En javascript ?

Bingo ! Pour cela, rendez vous dans le fichier script.js. Un script est un programme que le navigateur exécutera ligne par ligne, instruction aprÚs instruction.

PremiĂšre chose Ă  faire, crĂ©er un sous-programme qui sera appelĂ© quand l’Ă©tat de votre agent change. Comme en Python et d’autres langages de programmation, dĂ©finissons une fonction pour rĂ©cupĂ©rer l’Ă©tat de l’agent quand il changera :

function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)
{
    // On rajoutera entre ces accolades le code à exécuter
}

En javascript, pour définir une fonction on utilise le mot clé function, (équivalent au mot clé def en Python). Pour cela, la fonction doit est constituée de 2 blocs indissociables :
son entĂȘte (on dit aussi signature ou encore prototype), constituĂ© du nom de la fonction, suivi obligatoirement par des parenthĂšses ouvrantes et fermantes. Entre ses parenthĂšses, la fonction peut aussi dĂ©finir des variables d’entrĂ©es (sĂ©parĂ©es par des virgules), qu’il faudra renseigner pour exĂ©cuter la fonction. Ici l’entĂȘte de la fonction est :
quandEtatAgentChange(x,y,orientation,vie,distance,munitions)
Quand elle sera appelĂ©e par le serveur du jeu, les variables x,y,orientation,vie,distance,munitions contiendront les nouvelles valeurs de l’Ă©tat de l’agent.
son corps, dĂ©limitĂ© par des accolades ouvrantes et fermantes. C’est entre ces accolades que nous pouvons rajouter les instructions de notre sous-programme, ligne par ligne. En javascript (comme en langage C et C++), il est coutume de mettre un caractĂšre point-virgule Ă  la fin de chaque ligne d’instruction ‘;’

Tu as dis le navigateur exécute ligne aprÚs ligne le fichier script.js. Mais comment il fait ça ? Je dois ouvrir le fichier script.js avec le navigateur ?

Que nenni ! Ouvrez uniquement le fichier index.html avec votre navigateur. Grùce à la ligne 15 <script src= »script.js »></script> de ce fichier, le navigateur exécutera tout seul les instructions de votre script ligne aprÚs ligne.

Ok, et quand est-ce que les lignes de ma fonction quandEtatAgentChange seront exĂ©cutĂ©es ? Une seule fois quand j’ouvrerai la page ?

Heureusement non ! Pour que les lignes entre les accolades de quandEtatAgentChange soient exĂ©cutĂ©es, il faut appeler cette fonction. Pour le moment, nous avons uniquement dĂ©fini la fonction, ce qui n’exĂ©cute rien.

Pour indiquer au serveur de jeu d’appeler cette fonction quand l’agent changera au cours du jeu, rajoutons la ligne suivante Ă  la fin du fichier script.js :

pytactx_executerQuandEtatAgentChange(quandEtatAgentChange)

Quand l’agent se dĂ©placera, le serveur de jeu appellera la fonction quandEtatAgentChange en passant en paramĂštre les nouvelles valeurs des variables d’Ă©tat de l’agent.

Je colle cette ligne entre les accolades ?

Surtout pas ! On la rajoutera sur une nouvelle ligne Ă  la fin du script aprĂšs l’accolade fermante. De cette maniĂšre, quand le navigateur lira le fichier script.js de la premiĂšre ligne Ă  la derniĂšre ligne Ă  l’ouverture du fichier index.html, il fera dans l’ordre :
1. DĂ©finition de la fonction quandEtatAgentChange en mĂ©moire sans l’exĂ©cuter
2. Exécution de la fonction pytactx_executerQuandEtatAgentChange (définie dans le fichier pytactx.js) en passant en paramÚtre un lien vers la fonction quandEtatAgentChange.
Par la suite,
3. Quand vous cliquerez sur le bouton « Créer agent », la fonction pytactx_connecter() dans pytactx.js sera exécutée et se connectera au serveur de jeu.
4. Quand votre agent changera dans le jeu (ex: s’il se fait tirer dessus, ou si vous le dĂ©placez), alors le serveur du jeu notifiera le script pytactx.js qui appelera votre fonction quandEtatAgentChange

Pour informations, voici Ă  quoi correspond les variables de l’agent :

Les variables de votre agent permettant de connaĂźtre son Ă©tat en javascript

C’est donc dans cette fonction que nous devons rajouter le code javascript pour actualiser notre label « orientation » ! Pour cela, nous aurons besoin de la fonction document.getElementById(id) qui permet de rĂ©cupĂ©rer notre label pour modifier ses propriĂ©tĂ©s.

La fonction document.getElementById(id) permet de rĂ©cupĂ©rer n’importe quel Ă©lĂ©ment HTML via son attribut id.
Par exemple, on peut modifier la couleur d’un bouton et rendre son fond bleu en faisant :
document.getElementById(« idDuBouton »).style.background = « blue »;
De maniĂšre gĂ©nĂ©ral, pour modifier une propriĂ©tĂ© de la page dynamiquement, il faut simplement connaĂźtre le l’id de l’Ă©lĂ©ment, puis le nom de sa propriĂ©tĂ© Ă  modifier. Pour ce dernier point, Google est votre ami !

Quand il s’agit d’un label, pour accĂ©der/modifier son contenu (le texte qui s’affichera dans le navigateur), on peut rajouter .innerHTML, ce qui donnera en javascript :

document.getElementById("IdDuLabelDansLeFichierHtml").innerHTML

Dans notre fonction, on souhaite modifier le contenu du label et y mettre la nouvelle valeur d’orientation de l’agent. Nous utiliserons donc l’opĂ©rateur d’affectation (le signe ‘=’), pour mettre l’expression Ă  droite du ‘=’ dans le contenu du label.

function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)
{
    document.getElementById("orientation").innerHTML = "Orientation: " + orientation;
}

A quoi sert l’instruction « Orientation:  » + orientation; ?

Elle sert Ă  concatĂ©ner, c’est Ă  dire mettre dans le label HTML le texte « orientation:  » suivi du nombre contenu dans la variable orientation de l’agent. Le point virgule « ; » Ă  la fin indique la fin de l’instruction (pour ne pas concatĂ©ner aussi la ligne suivante dans le programme).

Pour plus de clartĂ© pour l’utilisateur, vous pouvez Ă  la place d’un nombre orientation afficher un texte. Par exemple, si orientation Ă©gale Ă  0 alors afficher « Orientation droite », etc …

function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)
{
    if ( orientation == 0 )
        document.getElementById("orientation").innerHTML = "Orientation: droite";
    else if ( orientation == 1 )
        document.getElementById("orientation").innerHTML = "Orientation: haut";
    else if ( orientation == 2 )
        document.getElementById("orientation").innerHTML = "Orientation: gauche";
    else if ( orientation == 3 )
        document.getElementById("orientation").innerHTML = "Orientation: bas";
}
Une fois votre script.js enregistré et le navigateur actualisé, créez votre agent et utilisez les boutons de déplacement. Vous devriez voir le label « orientation » se mettre à jour ! Les autres labels sont à rajouter !

Tout ça pour afficher l’orientation ? Le joueur n’a qu’Ă  regarder son agent dans l’arĂšne ?

C’est vrai ce n’est pas la variable d’Ă©tat la plus intĂ©ressante de l’agent. Mais la dĂ©marche est la mĂȘme si vous souhaitez afficher les vies restantes, les munitions, ou plus gĂ©nĂ©ralement modifier votre manette si une variable de l’agent change ! On pourrait imaginer faire vibrer virtuellement votre manette quand votre agent se fait tirer dessus et que sa vie diminue par exemple !

Pour vous amusez, vous pouvez rajouter d’autres labels pour afficher toutes les variables de l’agent. Et si vous voulez allez plus loin, Google est encore votre ami ! Tapez par exemple : « changer couleur bouton javascript » et voyez les rĂ©sultats sur les forums !

Il existe aussi de nombreux autres éléments pour interagir avec une page web :

  • l’Ă©lĂ©ment meter : pour afficher une jauge graphique. IdĂ©al pour indiquer une ressource Ă©puisable dans un jeu (comme la vie ou les munitions…)
  • l’Ă©lĂ©ment canvas : pour dessiner et animer n’importe quelles figures gĂ©omĂ©triques dans une zone rectangulaire. C’est l’Ă©lĂ©ment phare pour rĂ©aliser un jeu vidĂ©o en 2D.

Et bien d’autres encore

Avez tous ces éléments, voici théoriquement à quoi pourrait ressembler votre manette ! A vos neurones et claviers pour la réaliser !

🎉 Conclusion

Nous avons vu comment le langage html permet de structurer l’affichage d’une page web.

Pour effectuer des actions dynamiques, comme communiquer avec le serveur de jeu PytactX pour faire agir un agent, nous avons utilisé des fonctions en javascript reliées aux évÚnements des boutons en html.

Nous avons aussi appris Ă  changer dynamiquement des Ă©lĂ©ments de la page web quand les variables d’Ă©tat de notre agent changent, que ce soit changer le texte d’un label ou bien la couleur d’un bouton.

Dans le prochain tutoriel, nous verrons comment personnaliser l’affichage des boutons pour donner un autre look Ă  notre manette en utilisant la magie du CSS !

🚀 Pour aller plus loin

En attendant la seconde partie de ce tutoriel, si vous souhaitez approfondir vos connaissances pour amĂ©liorer votre page web, je vous conseille l’excellent tuto de Mathieu Nebra sur openclassroom en cliquant ici.