Présentation

La première version de l'application est une simple application de dessin. On trempe son doigt dans une couleur, pour dessiner des lignes et des points sur une image. Nous développerons ensuite cette application pour qu'elle devienne un petit outil de reportage qui envoie par mail des images datées et géolocalisées, avec des commentaires textuels et graphiques.

Nous utiliserons des boutons pour choisir les couleurs et un cadre ou canevas pour dessiner. Les évènements associés à ce cadre permettent détecter quand on touche l'écran pour dessiner un point ou quand on glisse le doigt pour dessiner une ligne.

Ce que vous allez pratiquer ou apprendre à

• naviguer dans l'IDE App Inventor et découvrir les composants de dessin,
• réaliser l'application 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 (event-driven programming) et la notion de procédure asynchrone
• utiliser de nouvelles ressources de votre téléphone dont 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,

Objectifs à atteindre

Vous allez réaliser cette première version en 2 étapes, avec un quiz intermédiaire :

• 1° étape : définir l'interface utilisateur et choix des composants ou ressources nécessaires,
• quiz sur les composants et leurs propriéts
• 2° étape : codage des opérations de dessin :points, lignes et couleurs
• 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

2° étape : réalisation V1 avec le tracé de points et lignes de couleur

Dans cette version de l'application, vous allez ajouter les blocs pour

• dessiner des points quand on clique sur la zone de dessin,
• dessiner une ligne quand on glisse le doigt sur l'écran
• Choisir les couleurs et les tailles des points et des lignes
• Effacer les dessins

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