IHM, événements et démarche de projet

Composants graphiques et événements

Une IHM (interface homme-machine) est ce qui permet à l'utilisateur de dialoguer avec un programme : fenêtre, page web, écran tactile.

Une interface est construite avec des composants graphiques (on dit aussi widgets) :

Le programme n'attend pas dans un ordre fixé : c'est l'utilisateur qui décide. On parle de programmation événementielle. Un événement est une action de l'utilisateur ou du système : clic, appui sur une touche, survol, fin d'un délai.

À chaque événement qu'on veut traiter, on associe une fonction : la fonction de rappel (callback). Le programme la lance tout seul quand l'événement se produit. Le programme principal se termine par une boucle d'événements qui attend et distribue les événements.

En Python, la bibliothèque tkinter permet de créer une IHM. Voici un exemple minimal :

import tkinter as tk

def clic():

    etiquette.config(text="Bonjour " + saisie.get())

fenetre = tk.Tk()

saisie = tk.Entry(fenetre)

bouton = tk.Button(fenetre, text="Saluer", command=clic)

etiquette = tk.Label(fenetre, text="")

saisie.pack()

bouton.pack()

etiquette.pack()

fenetre.mainloop()

Ici command=clic associe la fonction clic à l'événement « clic sur le bouton ». Remarque : on écrit clic et non clic() : on donne la fonction, on ne l'exécute pas tout de suite.

Interaction sur le Web : HTML, JavaScript et requêtes HTTP

Sur le Web, l'interface est une page. On sépare deux choses :

• HTML décrit la page et ses composants (<form>, <input>, <button>, <select>) ;

• JavaScript programme le comportement : il réagit aux événements (onclick, etc.).

<button id="reserver">Réserver</button>

Un script JavaScript associe à l'événement click de ce bouton une fonction de rappel. Cette fonction s'exécute en réaction au clic. Le script s'exécute dans le navigateur (le client). Mais certaines actions nécessitent le serveur : enregistrer une réservation, vérifier un mot de passe. Le navigateur envoie alors une requête HTTP et le serveur renvoie une réponse.

Un formulaire envoie les données saisies :

<form action="/inscription" method="post">

  <input type="text" name="nom">

  <input type="email" name="mail">

  <input type="submit" value="Valider">

</form>

L'attribut action donne la ressource visée, method la méthode, et chaque name désigne un paramètre.

Pourquoi deux méthodes ? GET sert à demander une page (une recherche, un lien partageable). POST sert à envoyer des données qui modifient quelque chose ou qui sont confidentielles (connexion, inscription).

La réponse du serveur contient un code de statut et, en général, une page. 200 signifie « OK, la requête a réussi » ; 404 « ressource introuvable » ; 500 « erreur du serveur ».

Le S de HTTPS signifie secure : les échanges entre le navigateur et le serveur sont chiffrés. Un attaquant qui écoute le réseau d'un café (Wi-Fi public) voit qu'on contacte le site, mais ne peut pas lire les données échangées. HTTPS ne protège pas contre un site malhonnête, ni contre un ordinateur infecté, ni contre un serveur mal programmé : le chiffrement ne garantit que le transport.

<form action="/inscription" method="post">

  <input type="text" name="nom">

  <input type="email" name="mail">

  <input type="submit" value="Valider">

</form>

Une IHM pas à pas : le jeu du morpion

Une IHM a besoin d'un état mémorisé entre deux événements. Pour un morpion (grille 3 × 3) :

• grille : tableau de tableaux contenant "", "X" ou "O" ;

• joueur : le joueur dont c'est le tour ;

• fini : un booléen indiquant si la partie est terminée.

Événements : un clic sur chacune des 9 cases. La fonction de rappel clic(i, j) reçoit la position de la case.

Pour détecter un gagnant, on parcourt les lignes, les colonnes et les deux diagonales :

def gagnant(grille):

    lignes = []

    for i in range(3):

        lignes.append(grille[i])

        lignes.append([grille[0][i], grille[1][i], grille[2][i]])

    lignes.append([grille[k][k] for k in range(3)])

    lignes.append([grille[k][2 - k] for k in range(3)])

    for l in lignes:

        if l[0] != "" and l[0] == l[1] == l[2]:

            return l[0]

    return None

Et la fonction de rappel, qui traite tous les cas :

def clic(i, j):

    global joueur, fini

    if fini or grille[i][j] != "":

        return                      # coup refusé

    grille[i][j] = joueur

    boutons[i][j].config(text=joueur)

    if gagnant(grille) is not None:

        fini = True

    else:

        joueur = "O" if joueur == "X" else "X"

Démarche de projet

Au moins un quart de l'horaire de NSI est consacré à des projets menés en équipe de 2 à 4 élèves. Un projet se prépare.

Ce qui n'en fait pas partie : une décision de détail prise après les tests (la couleur d'un bouton) ou le nom de la personne qui code la page d'accueil (c'est de l'organisation).

Ensuite on :

1. découpe le projet en tâches (interface, logique, données, tests) et on les répartit ;

2. fixe des jalons (points d'étape) avec un critère de validation chacun ;

3. teste : chaque exigence du cahier des charges doit avoir au moins un test ;

4. travaille en équipe : gestion de versions du code (par exemple Git), revues de code croisées, réunions courtes ;

5. évalue l'écart entre le résultat final et le cahier des charges : pour chaque exigence, atteinte, partielle ou non atteinte.

Retour au début : le clic sur « Réserver » déclenche un événement, une requête POST chiffrée en HTTPS part vers le serveur, qui répond avec un code de statut ; et l'application a été construite à partir d'un cahier des charges.

L'essentiel