Notion d'informatique embarquée

Historique succinct

Regardez la vidéo suivante en essayant de mémoriser les grandes dates :

A l'issue du visionnage, répondez au QCM sur Socrative pour tester si vous avez retenus les dates essentielles.

Vous pouvez retrouver le diaporama ayant servi de support à la vidéo en le téléchargeant ici.

Système informatique embarqué

Fonctionnement simplifié d'un ordinateur

schéma éclairant ce qui suit

Lorsque vous utilisez votre ordinateur portable, vous saisissez des informations sur le clavier ou déplacez votre doigt sur le pavé tactile.

Un système informatique (embarqué) peut être vu de la même manière :

  1. Le système capte une information physique

  2. elle est convertie en binaire

  3. l'information est traitée par un (micro)processeur en permanence

  4. l'information traitée est reconvertie en signal électrique

  5. Ce signal électrique conduit à l'action d'un élément du sytème qui agit sur l'extérieur.

Voici une liste de différentes définitions. Chacune correspond à un des mots suivants : actionneur, capteur, logiciel, mémoire, processeur.

Dans un document modifiable comme LibreOffice, associer à chaque définition suivante, le mot lui correspondant :

  1. objet qui recueille des données provenant de ce que qui l'environne.

  2. objet qui stocke une information binaire composée de 0 et de 1.

  3. programme permettant de savoir comment traiter une information pour un objectif précis.

  4. objet qui traite des données numériques de manière automatique.

  5. objet qui en modifiant son état peut agir sur le monde physique qui l'environne.

Code de déblocage de la correction :

Un système informatique embarqué est une machine dédiée à une tâche définie. Il peut être vu comme une chaîne d'opérations en boucle traitées en permanence, chaîne entre le monde physique/réel et l'objet contenant ce système informatique embarqué.
Il est composé de :

Copier l'image du schéma suivant dans un document modifiable puis compléter ce schéma représentant visuellement un système informatique embarqué en précisant où se trouvent dans la boucle les capteurs et les actionneurs.

schéma

Convertisseur A/N signifie convertisseur analogique/numérique : objet qui transforme un signal électrique (tension, intensité, ...) en un numérique (en bits : 0 ou 1) ou inversement.

Code de déblocage de la correction :

Voici une liste d'objets, certains sont des capteurs, d'autres des actionneurs :

gyrophare ; Sonde d’humidité ; détecteur de présence ; lumière ; télécommande ; bouton poussoir ; sirène ; moteur électrique ; détecteur de lumière.

Dans cette liste, quels sont les capteurs ?

Code de déblocage de la correction :

Interface Homme Machine

un Interface Homme/Machine, d'acronyme IHM, est un dispositif permettant à un humain de communiquer avec une machine.

Voici un thermostat régulant la température d'une maison :

thermostat
  1. Citer des capteurs en lien avec ce thermostat ?

  2. Citer au moins un actionneur en lien avec ce thermostat ?

  3. Pourquoi ce thermostat peut être vu comme une Interface Homme Machine (IHM) ?

Code de déblocage de la correction :

Le thermostat régulant la température d'une maison fonctionne suivant des programmes précis.

thermostat

Voici un algorithme, intégré au logiciel de gestion du processeur du thermostat, qui permet de gérer la température d'une pièce :
(il est écrit en langage "courant" afin de faciliter son fonctionnement).

Tant que vrai :
	lire et stocker la température extérieure
	lire et stocker la température intérieure
	si la température intérieure est inférieure à 18 °C :
		mettre en chauffe les radiateurs
	sinon :
		mettre ou laisser les radiateurs en pause

Comme un ordinateur ne comprend pas un algorithme écrit ainsi, différents langage de programmation ont été développés afin de pouvoir faire comprendre à un processeur l'ensemble des tâches à réaliser. Python est un de ces langages de programmation.

Voici l'algorithme précédent réécrit en python :

while True :
	tempExt = temperatureExterieure()
	tempInt = temperatureInterieure()
	if tempInt < 18 :
		radiateur.run()
	else :
		radiateur.sleep()
  • c'est un code simplifiée fondée sur une pseudo-bibliothèque non énoncée : il n'a pas pour but d'être implémenté tel quel dans un processeur, mais est là pour donner à voir la structure globale d'un tel programme ;

  • temperatureExterieure() est une fonction servant à obtenir la température extérieure mesurée par un capteur extérieur ;

  • temperatureInterieure() est une fonction servant à obtenir la température intérieure mesurée par un capteur intérieur ;

  • radiateur.run() est une fonction mettant en marche l'actionneur radiateur.

  • radiateur.sleep() est une fonction mettant en pause l'actionneur radiateur.

  1. Quelle ligne dans l'algorithme écrit en Python permet de voir le système informatique embarqué comme une chaîne d'opérations en boucle traitées en permanence ?

  2. Sur quelle température est réglée l'algorithme du thermostat contrôlant la température intérieure ?

  3. On veut modifier cet algorithme écrit en Python pour que le radiateur ne se mette en marche que dans le cas où la température intérieure est inférieure à 16°C et est supérieure à celle extérieure (sinon, plutôt que d'allumer le radiateur, il suffit d'ouvrir une fenêtre pour réchauffer la maison : geste écologique et économique !).
    Compléter le script ci-dessous en remplaçant la ligne de pointillés :

    while True :
    	tempExt = temperatureExterieure()
    	tempInt = temperatureInterieure()
    	......................................................
    		radiateur.run()
    	else :
    		radiateur.sleep()
    

Code de déblocage de la correction :

Principe du système antoblocage ABS (de l'allemand Antiblockiertsystem) :

Un véhicule est équipé sur chacune de ses roues d'un mesureur de vitesse de rotation de la roue. Si, lors d'un freinage, la vitesse mesurée en temps réel est nulle, l'information est transmise au calculateur qui va alors commander de relâcher la pression hydraulique sur les freins afin que la roue se remmette à tourner. Le système va ainsi, jusqu'à vingt-quatre fois par seconde, bloquer et débloquer les freins, quand bien même le conducteur continue à appuyer à fond sur la pédale de frein. Ces réajustements répétés peuvent être ressentis par le conducteur au niveau de la pédale de freinage.

Voici un schéma représentant le système :

schéma
  1. Citer les capteurs en lien avec le système ABS.

  2. Citer les actionneurs en lien avec le système ABS.

  3. Écrire en langage naturel un programme permettant de décrire le fonctionnement du système ABS.

  4. Dans la seconde phrase décrivant le principe de fonctionnement, quel est le groupe de mot qui permet d'assurer que le pilotage du système se fait à une vitesse adaptée à l'évolution du système ?

  5. Est-ce à la base un "objet connecté" ? Pourquoi ?

Code de déblocage de la correction :

Voici un exercice qui vous permet de vérifier votre maîtrise des notions vues dans cette partie.
Un corrigé est accessible ici afin que vous puissiez vérifier votre travail autonome.
Pour un travail autonome, quoi de tel qu'une voiture "autonome" !

Lancé en 2014 sur la Model S, l’Autopilot Tesla n’a cessé d’évoluer grâce aux mises à jour, combinées à une technologie en progression constante. Tesla est un des constructeurs pionniers de l’automobile électrique moderne. Parmi les domaines où elle est en avance par rapport aux autres constructeurs figure la conduite semi-automatique. Baptisée Autopilot sur ses modèles depuis 2014, elle est en passe de devenir totalement autonome si l’on en croit le dirigeant. Ce serait pour 2022, où les voitures deviendraient de véritables « robotaxis »…

Quels sont les équipements de l’Autopilot ? L’Autopilot est la dénomination des systèmes d’aides à la conduite semi-autonome de Tesla. Selon les modèles, la date de construction et la version du logiciel installée, les capacités sont différentes. Depuis avril 2019, tous les véhicules Tesla sont équipés de la 3ème génération du système. Un dispositif qui serait compatible avec l’option «Capacité de conduite entièrement autonome». Dans le détail, cette V3 de l’Autopilot intègre :

Pour traiter les données reçues par les différents dispositifs, il faut un outil de calcul puissant. Entre 2014 et octobre 2016, Tesla a intégré des puces MobilEye, puis des nVidia jusqu’en avril 2019. Désormais, Tesla conçoit ses propres processeurs, avec la puce FSD autoproclamée «la plus puissante du monde».

Enfin, autre avantage des Tesla, c’est que le logiciel n’est pas figé. Le constructeur met à jour régulièrement le système embarqué, et améliore ainsi progressivement l’efficacité.

  1. Pourquoi les voitures Autopilot de Tesla peuvent être considérées comme un système informatique embarqué ?

  2. Citer des capteurs utiles à l’autopilote Tesla.

  3. Citer des actionneurs utiles aux voitures Autopilot de Tesla.

  4. Pourquoi peut-on parler d'objets connectés concernant les voitures Autopilot de Tesla ?

  5. Quels inconvénients peuvent avoir les objets connectés en général ?

Proposer une trace écrite de la séance :

Code de déblocage de la correction :

Un des domaines où l'informatique embarquée va se généraliser dans les années à venir est surement la domotique.
Visualiser ci-dessous une vidéo du CEA qui illustre le fonctionnement simplifié d'une maison connectée.
accès à la vidéo.

Home I/O

Installations

Pour les TP des séances suivantes vous allez avoir besoin de télécharger trois logiciels :

Installation de Home I/O

Veuillez télécharger ce document et suivre la procédure d'installation.

Installation de Scratch2

Veuillez installer Scratch2 à partir de ce lien.

Installation de Foxit reader

Veuillez installer Scratch2 à partir de ce lien.

TP sur Home I/O

Première séance : découverte de HOME I/O et premiers programmes

Télécharger le document pdf suivant.
Vous y trouverez l'ensemble des questions à répondre.
Compléter le document au fur et à mesure sur Foxit Reader et réaliser les programmes demandés.

Pensez à sauvegarder vos différents programes dans un même répertoire avec un nom en lien avec la question afin de pouvoir y réaccéder si besoin pour d'autres questions.

Deuxième séance :

Vous allez poursuivre le travail précédent pour gérer désormais les problèmes suivants :

Pour cela, vous allez :

Arduino

Présentation

Voici un document qui présente Arduino.

Premier TP

Voici la fiche correspondant au premier TP sur Arduino à effectuer.

Vous aurez besoin de ce programme en lanage Python.

Création d'un jeu sur téléphone portable

Présentations

L'objectif de cette partie est de réaliser grâce à la plateforme App Inventor développée par le MIT (Massachussetts Institute of Technology) le jeu du morpion sous forme d'une application fonctionnant sur téléphone portable.

Cette application comportera deux écrans successifs dans sa version de base :

Dans la version de base, la gestion de la victoire ou non d'un des joueurs n'est pas prise en compte.
Une version plus poussée, proposée en fin de partie, le fera.

  1. Créer un compte gmail de travail du type SNT_nom_prenom@gmail.com.

    Attention ! L'entreprise Google se donne le droit d'enregistrer et de lire les messages envoyés et reçus depuis une adresse gmail. Pour protéger votre vie privée, n'utilisez pas cette adresse créée SNT_nom_prenom@gmail.com pour communiquer par mail, mais seulement pour pouvoir utiliser ici la plateforme App Inventir !

  2. Muni.e de cette adresse SNT_nom_prenom@gmail.com, se connecter au site appinventor.mit.edu.

  3. Cliquer sur l'icône en haut à droite.
    Une novelle page apparaît pour se connecter à l'aide du compte SNT_nom_prenom@gmail.com.

  4. Cliquer sur l'icône en haut à droite.
    Appler ce projet morpion suivi de votre nom et prénom :

Maintenant que vous avez accéder à la plateforme, découvrons l'interface qui va vous permettre de créer une application de jeu.

Voici un résumé visuel des différentes zones de la plateforme :

Pour découvrir quelques premières fonctionnalités de cette plateforme, vous pouvez regarder cette vidéo :

Premier écran du jeu

Commençons par gérer le visuel du premier écran du jeu.

Les différents exercices qui suivent vont vous permettrent de créer progressivement le visuel du jeu.
Avec les deux exercices suivants, vous aboutirez à un visuel proche de l'image suivante :
Ces visuels sont avant tout une proposition. N'hésitez pas à adapter le visuel à vos envies et à votre esthétique personnelle. L'important est que vous vous fassiez plaisir en vous appropriant les visuels.

À la fin de chaque exercice une vidéo montre le travail à réaliser. N'hésitez pas à la visionner si besoin.

  1. Cliquer sur l'icône "Mes projets" puis dans le menu déroulant sur "Mes projets" :
    Cliquer ensuite sur le projet nommé morpion_votrenom_votre_prenom pour le lancer.

  2. L'objectif de cet exercice est de réaliser le début de l'écran d'accueil du jeu pour obtenir un visuel proche de celui-ci :
    Vos aurez pour cela besoin de télécharger et de placer dans un de vos répertoires de travil en SNT l'image suivante :

  3. Gestion du titre de l'application :

    1. Glisser déposer un Label sur l'interface, label qui servira de titre.

    2. Dans la partie de droite "Propriétés", réaliser les actions suivantes :

    3. Renommer ce label sous le nom de Titre.

    4. Le mettre en gras.

    5. Lui donner une taille de police de 20 pixels.

    6. Lui donner la largeur de l'écran en choisissant dans "Largeur" "Remplir parent...".

    7. Saisir comme texte : Jeu du morpion.

    8. Centrer ce texte.

  4. Gestion de l'affichage de la règle du jeu.

    1. Glisser en-dessous du titre un nouveau label.

    2. Le renommer règle mettre en italique, de taille de police 18, de hauteur 25 pixels, de largeur tout l'écran, de couleur gris foncé et centré.

    3. Saisir comme texte explicatif de la règle du jeu : BUT : aligner des carrés rouges ou bleus.

  5. Gestion de l'image du jeu, image que l'on veut centrée.

    1. Par défaut, toutes les images sont collées à gauche de l'écran.
      Pour centrer l'image, on va devoir la disposer dans un conteneur dans lequel on peut choisir la disposition.
      Pour cela, dans la partie "Palette", cliquer sur l'élément "Disposition".
      Glisser en dessous de la règle le conteneur "Arrangement horizontal".

    2. Dans la partie "Propriétés", choisir un alignement horizontal, aucune couleur de fondet une hauteur de 100 pixels.

    3. Dans la partie "Palette", revenir sur "Interface utilisateur" et glisser déposer dans le conteneur précédent une Image.
      Cette Image n'est liée pour l'instant à aucune image réelle.

    4. Pour lier cette image à une image réelle, cliquer dans la partie "Média" sur "Charger fichier...".
      Naviguer dans l'arborescence de vos répertoires pour sélectionner le fichier image téléchargée ici.

    5. Cliquer sur l'image au cnetre du conteneur.
      Dans "Propriétés", sélectionner dans "Image" le nom du fichier image chargé, normalement app_morpion_vue.png.

    6. Dimensionner l'image à 100 pixels de hauteur et de largeur.

  6. Voilà le visuel auquel vous devez avoir abouti :

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Dans cet exercice vous aller réaliser la partie inférieure du visuel de l'écran d'accueil du jeu :

Plutôt que de mettre des croix et des ronds, ce qui obligerait à importer deux telles images, nous avons préféré mettre deux couleurs différentes : cela permet de simplifier du codage du jeu.
De plus, nous avons pris des couleurs simples, rouge et bleu, si vous préférez d'autres couleurs, faites-vous plaisir. Vous pourrez adapter l'ensemble des travaux suivant à réaliser aux deux couleurs unies que vous aurez choisies.

Si vous choisissez deux autres couleurs, n'hésitez pas à modifier le texte explicant la règle du jeu déjà réalisé lors de l'exercice précédent.

  1. En-dessous de la zone où vous avez centré une image dans l'exercice précédent, rajouter un label.
    Ce label sera renommé consigne, aura une taille de police de 20 pixels, une hauteur de 50 pixels et comme largeur celle du parent ; ce label sera centré.

  2. Le texte de ce label sera Cliquer ci-dessous\n sur la couleur choisie.

    Les caractères \n ne seront pas visibles sur l'écran ; ils imposent seulement un retour à la ligne après le mot ci-dessous.
    Pour comprendre le rôle de ces deux caractères juxtaposés, n'hésitez pas à comparer l'affichage du texte avec et \n.

  3. En-dessous, vous devez créer un conteneur pour stocker horizontalement les deux boutons colorés.
    Pour cela, aller dans "Disposition" et glisser "Arrangement horizontal" dans l'interface.
    Choisir dans "Propriétés", une hauteur de 160 pixels, une largeur maximale (celle du parent) et un centrage horizontal.

  4. En cliquant sur "Interface utilisateur", glisser un "bouton" dans le conteneur fait précédemment.
    Dans "Composants", renommer ce bouton bouton-rouge.
    Dans "Propriétés", choisir comme couleur de fond celle Rouge, laisser "activé" coché, donner comme hauteur celle du parent et comme largeur "50 percent" : ainsi, le bouton prendra 50% de la largeur du conteneur.
    De plus, supprimer le texte par défaut lié au bouton.

  5. Faire de même pour rajouter dans le conteneur un second bouton, de couleur bleue, occupant la moitié du conteneur en largeur.

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Deuxième écran du jeu

L'objectif de cette partie est de réaliser le visuel du second écran proche de cette image :

L'objectif de cet exercice est de réaliser la partie supérieure du seconde écran : le titre et la zone de jeu :

  1. Cliquer sur le bouton .
    Nommer jeu ce nouvel écran :
    Automatiquement, l'interface doit basculer vers le nouvel écran et vous devez voir apparaître en haut à gauche l'onglet

  2. Comme fin dans l'exercice sur le visuel supérieur du premier écran, rajouter dans l'interface de ce nouvel écran le titre Jeu du morpion en gras, de taille de police 20 pixels, de largeur maximale et centré.

  3. Depuis le menu "Disposition", glisser dans l'interface un "Arrangement tableau" qui servira de zone de jeu du morpion.
    Il faut donc régler dans "Propriétés" 3 colonnes et 3 lignes. Vous pouvez imposer une hauteur de 320 pixels et une largeur de 320 pixels.

  4. Ce tableau nouvellement créer va pouvoir contenir 9 boutons : un par case.

    Glisser dans la case supérieure gauche de ce tableau un bouton.
    Afin de faciliter la différenciation de chaque bouton, renommer ce bouton Bouton11, pour bouton sur la la ligne 1 et sur la colonne 1.
    Imposer une hauteur et une largeur de 100 pixels et ôter le texte lié par défaut au bouton.

    Dans "Propriétés", imposer aussi une couleur à ce bouton. Cette couleur permettra de savoir qu'aucun joueur n'a encore cliqué sur la case.
    Dans la suite, nous prendrons comme couleur de case "gris clair".

  5. Faire de même sur les 8 autres boutons de la zone de jeu.
    Lors du renommage, nommer boutonij le bouton se trouvant en ligne $i$ et en colonne $j$. Par exemple, le bouton de la ligne 2 et et de la colonne 3 doit se nommer pour la suite bouton23.

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Maintenant que la zone principale du jeu est réalisée au niveau visuel, il ne reste plus que gérer le zone inférieure.

Dans cet exercice, vous réaliserez la zone inférieure du second écran.

  1. Rajouter en dessous de la zone aux 9 cases du morpion un "Arrangement horizontal", de hauteur 45 pixels et centrer horizontalement et sans couleur de fond.

  2. Rajouter dans le conteneur précédemment créé, un bouton qui vous nommerez recommencer, affichant ce texte recommencer, de hauteur maximale et de largueur 31%, de taille de police 14 pixels, le texte étant centré.
    Pour visualiser ce bouton, choisir une couleur différente de celles déjà utilisées, le jaune par exemple, vous pouvez aussi choisir une forme arrondie.

  3. Rajouter à droite du bouton précédent une zone de texte.
    Faire en sorte que cette zone soit nommé qui_joue, de taille de police 25, le texte centré, que sa largeur prenne 68% du conteneur et sa hauteur soit maximale.

    Le contenu du texte peut être supprimé car il sera géré par codage et non directement dans "Propriétés" : ce texte permettra d'informer quel joueur doit efffectuer son action.

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Codage

Manquant que le visuel de vos deux écrans est terminé, il reste à gérer les interactions entre ces écrans et les utilisateurs humains. Ces interactions homme/machine seront gérés grâce à un codage par blocs permis par la plateforme de MIT App Inventor, codage par blocs très proche dans l'esprit au codage que vous avez déjà rencontré avec Scratch au collège.

Pour accéder à la partie de la plateforme permettant de programmer par blocs, il suffit de cliquer sur le bouton en haut à droite .

Voici un visuel présentant succinctement la zone de codage :

La vidéo suivante présente cette zone de codage, des blocs utiles pour le projet et comment organiser ces blocs :

Pour chacun des exercices suivants, vous trouverez en fin d'exercice une image des blocs que vous devez construire ainsi qu'ensuite une vidéo détaillant le travail à faire.

Le but de cet exercice est de coder l'écran de départ nommé screen1 afin de mémoriser la couleur choisie par le premier joueur du morpion et d'automatiquement basculer vers l'écran principal jeu.

Pour cela, il faudra au cours des questions suivantes, construire un algorithme où on crée :

Pour réussir cela, il vous suffit de suivre les questions suivantes :

  1. Dans la partie "Blocs" à gauche, descendre jusqu'à la zone

  2. Cliquer sur l'onglet .
    Dans la partie Interface, un ensemble de blocs apparaît.
    Déplacer vers la zone blanche de droite de l'interface le bloc .

  3. En haut de la zone "Blocs", cliquer sur l'onglet "Contrôle" de .
    Dans la partie Interface, un ensemble de blocs apparaît.
    Descendre dans cet ensemble jusqu'au bloc et le glisser à l'intérieur du bloc déjà positionné dans l'interface.
    Vous devez obtenir un visuel comme celui-ci :

  4. screen1 est l'écran d'accueil, il faut faire basculer vers l'écran jeu.
    Changer le nom de l'écran en cliquant sur la flèche permettant d'avoir la liste des possibilités : .

  5. Il reste à rajouter comme "valeur de départ" la couleur choisie.
    Pour simplifier, cette valeur sera saisie comme la chaîne de caractères "rouge".

    Pour cela, cliquer sur l'onglet , Déplacer le bloc pour le coller à "valeur de départ" et y saisir le mot rouge.

  6. Faire la même chose que précédemment pour créer un gros bloc gérant le cas où le joueur clique sur la zone bleue.

    Pour aller plus vite, vous pouvez "dupliquer" le bloc déjà réalisé :
    Après un clic droit sur le bloc externe, apparaît .
    Cliquer sur dupliquer puis modifier le nouveau bloc en changeant tous les "rouge" en "bleu".

Vous devez aboutir à la fin de cet exercice aux deux blocs suivant :

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Le but de cet exercice est de créer deux variables globales liées au second écran jeu :

  1. Basculer sur le second écran jeu : .

  2. Cliquer dans l'onglet .
    Glisser le bloc dans l'interface et nommer la nouvelle variable globale couleur_joueur1.

  3. Dans l'onglet "contrôle", aller cherche le bloc , onglet que vous collerait à la suite du bloc de la question précédente.
    Ainsi, la variable couleur_joueur1 vaut "rouge" si le premier joueur a cliqué sur le bouton rouge et "bleu" sinon.

  4. De même, glisser un bloc créant la variable globale nommée coup.

  5. Comme cette valeur vaut 0 ou 1 suivant le choix du premier joueur, vous devez lier un bloc permettant une alternative conditionnelle .

  6. La condition de ce bloc revient à comparer la "valeur de départ" renvoyé par l'écran d'accueil (qui est "rouge ou "bleu") avec la chaîne de caractères "rouge".
    Dans le cas où ces "textes sont égaux", la variable coup doit prendre la valeur 0, dans l'autre cas, cette variable doit prendre la valeur 1.
    En utilisant entre autre les blocs suivants, finaliser le bloc initialisation la varaible coup :

    • de l'onglet "Texte",

    • de l'onglet "Texte",

    • de l'onglet "Math".

Vous devez aboutir à la fin de cet exercice aux deux blocs suivant :

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Le but de cet exercice est de gérer le bouton recommencer qui permet de revenir à l'écran initial screen1.

En vous inspirant du code réalisé lors de cet exercice, créer un bloc qui permet de revenir à l'écran d'accueil screen1 lorsqu'un joueur appuie sur la touche recommencer.

Ici, aucune valeur de départ n'est nécessaire pour gérer la page d'accueil. Vous pouvez choisir un bloc plus réduit celui utilisé pour passer de l'écran screen1 à celui jeu.

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Le but de cet exercice est de créer des éléments qui permettront de gérer la zone d'affichage pour savoir quel joueur doit jouer.

Pour cela vous allez créer dans cet exercice deux procédures, c'est-à-dire deux sous-programmes qui effectuent une action sans renvoyer de valeur, procédures qui seront appelées plus tard pour savoir quel texte affiché et sous quelle forme.

  1. Glisser le bloc et le nommer cette première procédure afficher_joueur_rouge.

  2. Le label qui a été créé pour faire apparaître le texte donnant le tour du joueur est nommé qui_joue.

    Pour pouvoir modifier cet élément par codage par blocs, cliquer sur son onglet .
    Apparaît alors un ensemble de blocs possibles. Parmi ceux-ci, vous aurez besoin pour cette première procédure de :

    • qui permet de modifier le texte en y ajoutant un texte particulier.

    • qui permet de modifier la couleur du fond sur lequel s'inscrit le texte en y ajoutant une couleur particulière.

    Sachant que les couleurs sont accessibles depuis l'onglet et qu'un texte se rajoute avec le bloc , placer à l'intérieur du bloc procédure précédent deux lignes de blocs de code, lignes qui permettent de

    • mettre comme couleur de fond du rouge dans la zone qui_joue,

    • mettre comme texte "Tour au joueur rouge" dans la zone qui_joue.

  3. Faire de même dans une seconde procédure nommée afficher_joueur_bleu qui permet de :

    • mettre comme couleur de fond du bleu dans la zone qui_joue,

    • mettre comme texte "Tour au joueur bleu" dans la zone qui_joue.

    • mettre comme couleur de texte du blanc afin de rendre le texte lisible.

    Il existe un bloc .

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Le but de cet exercice est de gérer l'initialisation de l'écran principal jeu lors de son lancement.
Grâce aux variables et aux préocédures précédentes, vous allez réussir à réaliser cette initialisation.

Pour cela, il vous faudra d'abord trouver dans l'onglet le bloc

Dans cet onglet, vous devrez insérer des blocs de sorte que si le premier joueur a choisi la couleur "rouge" alors il y a un appel à la procédure afficher_joueur_rouge et sinon un appel à la procédure afficher_joueur_bleu.

  • Pour appeler une procédure, il suffit d'utiliser le bloc

  • Pour gérer la condition, vous pouvez :

    • soit utiliser directement la variable globale coup avec un test d'égalité de deux nombres entiers ,

    • soit utiliser une comparaison de textes comme fait à l'exercice créant la variable coup.

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Le but de cet exercice est de gérer le bouton Bouton11.

Le but est que si un joueur clique à son tour de jeu sur la case Bouton11 du morpion, il faut savoir si la case a déjà été choisie ou non, non dans le cas où la couleur de la case est encore "gris clair".
Dans le cas où cette case est encore non choisie, cette case doit être colorée de la couleur du joueur puis l'affichage doit indiquer que le joueur suivant doit jouer.
Deux cas alors :

De plus, dans chacun des deux cas précédents, la variable globale coup augmente de 1 (pour signifier que l'on passe ensuite au joueur suivant).

Pour coder par blocs les instructions précédemment décrites, vous aurez besoin des blocs suivant :

Réaliser avec entre autre les blocs ci-dessus, le code permettant de gérer le Bouton11.

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Le but de cet exercice est de gérer les 8 autres boutons.

Dupliquer le code de l'exercice précédent et l'adapter pour coder les 8 autres boutons.

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Exportation

Maintenant que vous avez créé l'application de jeu pour téléphone, il ne vous rest eplus qu'à la transférer sur votre téléphone portable, ou celui d'un de vos proches.

  1. Premièrement, vous pouvez choisir le nom que portera votre application.
    Par défaut, elle portera la nom de votre fichier, soit morpion_nom_prenom.
    Comme ce nom peut vous disconvenir, vous pouvez le changer en revenant à l'écran de demarrage screen1, cliquer sur le composant "screen1" pour dans "Propriétés" changer le contenu de "AppName" : .
    Renommer votre application à votre guise.

  2. Deuxièmement, vous pouvez aussi intégrer une image comme icône pour votre application.
    Pour cela, cliquer dans la partie "Propriétés" sur le contenu de l'entrée "Icône" ; vous pouvez alors soit prendre comme icône l'image déjà importée, soit charger depuis votre ordinateur toute image libre de droit qui vous plaît, sans dévoiler toutefois de données personnelles.
    Enregistrer ces modifications pour leur bonne prise en compte.

  3. La principale chose restant à faire est de transformer votre programme en un fichier de format apk, format qui des applications fonctionnant sous Android.

    Pour cela, cliquer sur le menu "construire" puis sur l'onglet "Android App (.apk)" : .
    Une barre d'avancement de la construction du fichier .apk apparaît alors :

  4. Une fois la construction terminée, vous verrez apparaître un écran comme celui-ci : .
    Vous pouvez ainsi :

    • soit avec le lien de gauche télécharger directement le fichier de format .apk pour l'envoyer par exemple à des proches,

    • soit l'installer directement sur un téléphone portable en flashant le code QR de droite.

    • Le code QR a une durée de vie limitée à 2 heures. Passé ce déali, il vous faudra recommencer la construction du fichier .apk pour obtenir un nouveau code QR.

    • De plus, il est possible que pour pouvoir installer cette application maison, vous ayez à modifier certains propriétés du téléphone portable, propriétés permettant d'installer des applications non marchandes.

  5. Amusez-vous avec un.e ami.e sur ce jeu pour tester son bon fonctionnement !

Vous pouvez trouver dans la vidéo suivante la réalisation du travail demandé dans l'exercice précédent :

Prolongements possibles

Le jeu du morpion tel que programmé précédemment fonctionne très bien.
Cependant, il est possible d'apporter des améliorations, par exemple :

  1. Créer un nouvel écran nommé victoire.

  2. Intégrer un texte où s'affichera la couleur du joueur vainqueur (le contenu sera géré plus tard par codage).

  3. Intégrer une image libre de droit symbolisant pour vous la victoire.

  4. Intégrer un bouton permettant de revenir à l'écran de démarrage.

  5. Créer dans l'écran jeu, une nouvelle procédure est_victorieux qui analyse si un alignement existe et dans ce cas bascule l'application sur l'écran victoire avec comme valeur de départ la couleur du joueur gagnant.

  6. Modifier le code du bouton Bouton11 afin de rajouter la procédure est_victorieux.

  7. Modifier les autres boutons de case similairement.

  8. Gérer le texte de cet écran victoire afin qu'apparaisse clairement la couleur du joueur gagnant.

  9. Rajouter le code gérant le bouton de retour vers l'écran screen1, écran d'accueil du jeu.

  10. Construire le fichier .apk lié à votre application améliorée pour tester les améliorations apportées.

  1. Créer une procédure afficher_match_nul qui modifie le texte qui_joue pour y faire appraître le texte "Match nul !" avec une couleur de votre choix.

  2. Modifier le bloc qui gère le clic sur le bouton Bouton11 en rajoutant une condition utilisant les variables globales couleur_joueur1 et coup, condition qui permet de savoir lorsque toutes les cases sont colorées.
    Intégrer cette condition dans un test conditionnel pour appeler la procédure afficher_match_nul dans le cas où la condition est remplie.

  3. Modifier similairement les 8 autres boutons.

  4. Construire le fichier .apk lié à votre application améliorée pour tester les améliorations apportées.

Licence Creative Commons
Les différents auteurs mettent l'ensemble du site à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International