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 :
|
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
pour qu'il remplisse le composant qui le contient ?
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)
Lesquels parmi les symboles suivants peuvent être une variable ?
.
Which of the following blocks would you use to change the value of dotsize?
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 :
-
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 
- 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.