Durée estimée: 90 minutes

Présentation

L'appli "Peinture" est une petite application de dessin. On trempe son doigt dans la peinture, et on dessine des traits et des points sur une image.

Ensuite, nous développerons cette application pour qu'elle devienne un petit outil de reportage qui envoie par mail des images datées et géolocalisées, avec un commentaure graphique et un commentaire textuel.

L'application utilise des boutons pour représenter les pots de couleur et un gestionnaire d'évènements (event handler) pour détecter quand on touche l'écran pour dessiner un point ou quand on glisse le doigt pour dessiner des lignes.

Objectifs : dans cette leçon vous allez :

  • naviguer dans l'IDE App Inventor, et découvrir d'autres possibilités
  • réaliser l'application partir d'un tutoriel et la faire tourner sur votre smartphone,
  • utiliser des variables globales pour généraliser un programme,
  • approfondir votre compréhension de la programmation évènementielle (ou event-driven programming) et la notion de procédure asynchrone
  • utiliser de nouvelles ressources de votre téléphone : l'appareil photo
  • lancer depuis app inventor une application - déjà présente sur votre téléphone - pour prende une photo, puis récupérer la photo et l'afficher comme fond d'image du cadre,
  • approfondir votre compréhension de la programmation évènementielle (ou event-driven programming) et la notion de procédure asynchrone

Ce que vous allez faire

Dans cette leçon, vous allez réaliser une première version de cette application en 4 étapes, avec des quiz intermédiaires :
  • 1° étape : définir l'interface utilisateur et choisir les composants
  • quiz sur les composants et leurs propriéts
  • 2° étape : réalisation d'une première version avec tracé de points
  • 3° étape : lignes, couleurs et taille des lignes et points
  • quiz sur les variables
  • 4° étape : remplacement de l'image de fond par une photo

1° étape : définir l'interface utilisateur et choisir les composants

Dans cette première étape, vous allez définir l'interface utilisateur et sélectionner les composants nécessaires à l'application.

Le principe de fonctionnement de l'application est de tracer un point quand vous touchez la zone de dessin et de tracer une ligne quand vous glissez le doigt sur cette zone. Vous allez donc mettre dans l'interface utilisateur :

  • une zone de dessin, c'est à dire un cadre (ou canvas en anglais)
  • trois boutons, un par couleur, que vous allez mettre dans un arrangement horizontal pour les aligner,
  • un bouton pour prendre ue photo,
  • un bouton pour effacer les dessins,
  • un bouton pour choisir des lignes fines et des points de petite taille,
  • un bouton pour choisir des lignes épaisses et des points de grande taille,
  • un arrangement horizontal pour aligner sur une ligne les boutons précédents.

et au niveau des composants, vous allez ajouter un composant caméra pour pouvoir prendre des photos.

Auto-contrôle

Not yet started
1 point
Par défaut, les composants que vous ajoutez dans la fenêtre App Inventor, sont agencés ___________.
Not yet started
1 point
Quelle valeur devez vous mettre dans la propriété largeur (width) d'un composant
pour qu'il remplisse le composant qui le contient ?
Not yet started
1 point
Lequel ou lesquels de ces noms conviennent à un bouton dont la fonction est rafraichir l'affichage ?

2° étape : réalisation d'une première version avec tracé de points

Dans cette version de l'application, vous allez ajouter les blocs pour dessiner des points quand on clique sur la zone de dessin, puis vérifier le bon fonctionnement.

3° étape : lignes, couleurs et taille des lignes et points

Dans cette étape vous allez ajouter

  • le tracé de lignes,
  • le choix de la couleur des points et des traits,
  • le choix de l'épaisseur des lignes ete de la taille des points.

Auto-contrôle (étapes 2 et 3)

Not yet started
1 point
Laquelle de ces réponses, serait un nom de variable valide ?
Not yet started
1 point
Une variable est un symbole (ou une abstraction) qui fait référence à une valeur particulière.
Lesquels parmi les symboles suivants peuvent être une variable ?
Not yet started
1 point
Suppose you initialize dotsize with the block  . Which of the following blocks would you use to change the value of dotsize?
Not yet started
1 point
Quelle sera la valeur de la variable dotsize après exécution de la séquence suivante ?

Not yet started
1 point
L'utilisation d'une variable est un exemple d' abstraction parce que 
1 point  
1 point  
1 point  

4° étape : remplacement de l'image de fond par une photo

Dans cette étape vous allez prendre une photo avec le smartphone et remplacer l'image de fond du cadre.

Vous allez utiliser le composant Caméra, que nous avons déjà sélectionné dans la partie design de la 1° étape .
Ce composant utilise une des applications de photographie, déjà présente sur votre appareil. Cette application est lancée depuis App Inventor, et après avoir pris la photo, l'image est renvoyée à votre application App Inventor, ce qui déclenche un évènement.

C'est une opération en deux étapes : la première consiste à appeler la procédure de prise de photo, la seconde correspond à la réception par App Inventor de la photo renvoyée qui déclenche l'évènement "Camera.AprèsPrisePhoto "avec l'image en paramètre.

Ce déroulement en deux temps correspond est appelé "Asynchrone". Dans ce mode, après avoir appelé la procédure qui prend la photo, le script n'attend pas pour continuer. La procédure appelée ne renvoie pas immédiatement le résultat demandé comme ce serait le cas dans un mode "synchrone". En mode asynchrone, l'exécution des blocs qui suivent cet appel n'est pas bloqué. La photo sera traitée dans un script différent, quand elle arrivera avec l'évènement "Camera.AprèsPrisePhoto ".

Auto-contrôle

Pour votre Portfolio

Dans le portfolio, allez à la page 3.02 nommmée : Appli peinture, puis donnez une réponse courte aux questions duivantes :

  1. Expliquez la signification des instructions montrées ici en pseudocode ou avec App Inventor. Supposons par exemple que la variable X vaut 10 avant l'exécution de l'instruction. Quelle sera sa valeur après exécution de l'instrcution.
    Mettre X à X + 1
  2. Une des caractéristiques de l'abstraction est d'aider à réduire les détails pour se concentrer sur ce qui est pertinent. en quoi l'utilisation d'une variable comme dotsize, au lieu d'une valeur comme '5', nous aide t-il pour réduire les détails et se concentrer sur l'essentiel.