Lycée > Premiere > NSI > Réaliser une interface homme-machine sous Android

Réaliser une interface homme-machine sous Android

Fiche de cours
Quiz
Profs en ligne
Videos
Application mobile

Objectif

Comprendre la réalisation d’une interface homme-machine (IHM).

Point clé

Une interface homme-machine (IHM) est généralement composée de capteurs et d’actionneurs : les capteurs envoient un signal analogique qui doit être transformé en signal numérique pour pouvoir être utilisé par les actionneurs.

Pour bien comprendre

Capteurs et actionneurs
Programmation graphique (type Scratch)

On va créer pas à pas une interface homme-machine (IHM) pour smartphone sous Android. Si notre smartphone n’utilise pas comme système d’exploitation Android, on peut utiliser l’émulateur du site App Inventor qui simule le système d'exploitation Android.

1. Le cahier des charges

On souhaite fabriquer une application pour smartphone qui réponde aux critères ci-dessous.

Du point de vue graphique : un fond cyan, avec comme titre « IHM ».
Du point de vue des capteurs : utilisation de l’accéléromètre du smartphone ou tablette. Il s’agit d’un capteur qui mesure l’accélération linéaire.
Du point de vue de l’actionneur : choc du smartphone ou de la tablette qui déclenche l’envoi d’un SMS d’alerte « Choc détecté » à un numéro prédéfini « 06suitedemonnuméro ».

2. L'utilisation de MIT App Inventor pour Android

App Inventor est un outil de développement en ligne conçu et développé à l’origine par Google pour le système d’exploitation Android. Il est actuellement géré par le MIT (Massachusetts Institute of Technology).

Cette application, simple d’utilisation, est constituée d’une interface graphique qui permet le développement d’applications sous Android avec une interface entièrement graphique, à la manière du logiciel de programmation Scratch (qui a également été créé par le MIT). Voici le lien pour accéder à cet outil en ligne : https://appinventor.mit.edu/

3. Création d'une application App Inventor

Voici la méthode à appliquer pour créer une application App Inventor.

a. Commencer un nouveau projet

Voici comment débuter un nouveau projet.

On clique sur « Create Apps! » puis on utilise un compte Gmail pour se connecter. On obtient la fenêtre suivante.
On clique sur « Commencer un nouveau projet » et on nomme ce projet « IHM ». On obtient la fenêtre suivante.

b. Préparer l'interface graphique

L’interface graphique est un dispositif de dialogue homme-machine dans lequel les objets à manipuler sont dessinés sous forme d'icônes ou de boutons à l'écran.

Voici comment définir les différents paramètres graphiques listés dans le cahier des charges.

Définir la couleur de fond

La couleur de fond souhaitée est le cyan. Il faut pour cela choisir comme « couleur de fond » d’écran « Cyan ».

Définir le titre

Le titre souhaité est « IHM ». Il faut pour cela rajouter à l’écran une fonctionnalité qui permette de taper du texte. On utilise donc l’outil « Label » qui est présent dans la première colonne « Palette ».

À l’aide d’un clic gauche continu sur « Label », on le fait glisser sur l’écran du smartphone. On obtient alors le résultat suivant.
Pour modifier le « texte du Label », il faut accéder aux propriétés de celui-ci, c'est-à-dire à la colonne « Propriétés », puis écrire « IHM » dans la case « Texte ».

On obtient alors le résultat suivant.

c. Préparer l'interface matérielle

L’interface matérielle permet la communication entre les différents composants matériels.

Voici comment définir les différents paramètres matériels listés dans le cahier des charges.

Il faut indiquer que l’on va utiliser l’accéléromètre du smartphone et l’envoi de SMS. Il faut pour cela installer les composants en utilisant une fois de plus la colonne « Palette ».

On tape « SMS » dans le champ de recherche, puis on fait glisser le résultat de la recherche sur l’écran du smartphone. On fait de même pour l’accéléromètre.

Il ne faut pas oublier d’enregistrer le projet.

d. Programmer l'application

Pour accéder à la console de programmation, on doit appuyer sur « Blocs ».

On obtient la fenêtre suivante, où l’on va déplacer des Blocs.

Programmation du bloc accéléromètre

Un clic sur le bloc « Accéléromètre » dans le menu à gauche donne l’affichage suivant.

Détecter un choc, c’est détecter une secousse de l’accéléromètre. On utilise donc le bloc suivant.

Il faut compléter l’action à effectuer lorsque le capteur repère un choc.

Programmation du bloc sms

Pour un envoyer un message, il faut d’abord indiquer que l’on va taper le message.
On ajoute un bloc texte que l’on imbrique à la suite.
Il faut maintenant indiquer le numéro destinataire du SMS.
On ajoute à la suite un bloc texte qui contient le numéro mis à l’international, c’est-à-dire que « 06suitedemonuméro » doit être transformé en « +336suitedemonnumero ».
On doit indiquer à l’application d’envoyer le message.
On assemble les lignes de blocs ensemble, ce qui donne le résultat suivant.

Mise au point finale

Voici le programme final lorsqu’on assemble les différents blocs.

Il ne faut pas oublier d’enregistrer régulièrement le projet.

4. Téléchargement de l'application

Pour télécharger l’application sur un smartphone, il faut cliquer sur « Construire » puis « App (Donnez le code QR pour fichier .apk) », cela va générer la création d’un QR code.

Un QR code est une sorte de code barre composé de pixels qui permet de coder une URL.

Remarque
« apk » signifie « Android Package Kit », c’est un format de fichiers pour le système d'exploitation Android.