Atelier apprendre JavaScript en MobProgramming

De l’anglais « mob » qui signifie foule, le Mob Programming se traduit littéralement par la programmation en groupe.

Pour le décrire en quelques mots, l’idée de base du Mob Programming est de faire travailler toute une équipe sur une seule tâche. Les développeurs vont, à tour de rôle, coder sur une seule machine avec un écran visible par tous.

Pour vous réperer un peu plus dans cette configuration sociale particulière une framastory est à votre disposition.

Buts de la manipulation

1. Manipuler du code en JavaScript
2. Comprendre l'intérêt de fonctionner avec des User Stories
3. Tester l'usage d'une Pull Request vide et/ou dans une user story
4. Préparer un terraint de comparaison avec le langage Elm

Sur un seul ordinateur avec un⋅e ou plusieurs apprenant⋅e⋅s, il s'agit de développer une appli web de faceblind,afin de s'acculturer à la pratique du langage informatique JavaScript puis de comparer ce qui aura été appris avec un atelier en langage Elm.

Voir le repository de base sur github ou le repository sur framagit pour voir les 5 étapes à suivre sur ce challenge collectif dans l'arrière boutique nommée backlog sur github ou framagit

Déroulé

Nous allons fonctionnner en micro-tâches à coder qui correspondent pour chaque tâche une histoire vécue par l'utilisatrice ou utlisateur final⋅e de l'objet, ce que nous nommerons par une #US (User Story).

1. afficher 70 images en boucles
2. en boucle aléatoirement
3. ajouter un bouton suivant
4. ajouter un bouton déjà vu

C'est pour tester si tu es prosopagnosique, c'est à dire si tu est capable de reconnaître des visages.

Commencez par ouvrir un repository dénommé, par exemple FaceblindJS, puis ajoutez au moins 70 images de portraits d'humains dans un dossier nommé, par exemple, faceblind.

Première étape

Une personne s'attaque à la première User Story (US#1) du backlog du reprository que vous venez de créer, par exemple celui du dépot github ou framagit. Cela commence par une visite des fichiers pré-ouverts du repository, notamment celui contenant les images des visages. Puis ouverture d'un fichier index.html, cette manipulation pouvant être guidé par conseils par les autres participant⋅e⋅s si il y en a.

Dans ce fichier index.html, bous allons écrire un titre de page, un titre d'atelier de niveau 1 et affciher la première image du dossier faceblind

<title>Kerbors prospagnosie</title>
<meta charset="utf-8">
<h1>Prosopagnosie</h1>
<img src=faceblind/1.jpg>

Astuce pour un Javascript style moderne : pour le src qui permet d'afficher l'image JS les “” ne sont plus obligatoire dans JavaScript

Dans le navigateur avec l'inspecteur de code (accessible avec F12 sous ubuntu par exemple) :

document.querySelector("img") puis touche entrée puis document.querySelector("img").src"faceblinding/2.jpg pour vérifier si cette manipulation focntionne et comprendre comment faire une boucle en JavaScript dans un document au format .html

dans l'éditeur de code :

<title>Kerbors prospagnosie</title>
<meta charset="utf-8">
<h1>Prosopagnosie</h1>
<img src=faceblind/1.jpg>
<script >
    let id = 1
    const changeImage = (id) => document.querySelector("img").src`faceblinding/${id}`
    setinterval(()=>changeImage(id++), 1000)
</script>

Autre possible que vous pouvez proposer :

<title>Kerbors prospagnosie</title>
<meta charset="utf-8">
<h1>Prosopagnosie</h1>
<img src=faceblind/1.jpg>
<script >
    let id = 1
    const changeImage = () => {
      document.querySelector("img").src`faceblinding/${id}`
    }
    setinterval(changeImage(id++), 1000)
</script>

Maintenant, vous pouvez envoyer votre commit sur votre repository github ou framagit pour valider votre #US1 sur la branche master.

Deuxième étape

Création d'un nouvelle branche de dévoloppement de code afin de travailler la seconde #US2,

Notre objectif ici : Faire une boucle aléatoire avec le fichier index.html

la suite très prochainement