Projets "peindre avec les doigts"

Durée estimée: 90 minutes

Présentation

Passez à la création !
Dans cette leçon, vous allez réaliser plusieurs petits projets pour améliorer l'application : peindre avec les doigts. Des indices et conseils vous seront donnés.

Objectifs : Dans cette leçon vous allez :

  • ajouter à une application existante, la réponse à de nouveaux évènements ;
  • apprendre à résoudre des problèmes simples de programmation.

Projets de programation. Avec un partenaire, réalisez les mini projets suivants :


Mini Projets de création: améliorer l'application de peinture

  1. Ajoutez un bouton pour avoir une quatrième couleur.
  2. Remplacez l'image fournie par une image qe vous avez choisie. Vous pouvez télécharger des images dans votre projet depuis la fenêtre du designer ou celle des blocs. (voir dans l'onglet Medias la commande 'charger fichier') Mettez cette image comme 'image de fond' (backround image) du cadre (canvas). Vérifiez que l'image n'est pas sous copyright et que vous avez le droit de l'utiliser.
  3. Au lieu d'utiliser une image existante, prenez une photo avec l'appareil et mettez là en image de fond dans le cadre.
    Indice : vous aurez besoin d'un nouveau bouton et du composant 'Caméra'. Vous devrez aussi utiliser le gestionnaire d'évènement (event handler) : "Quand Caméra.après prise photo". Pour de l'aide, voir le tutoriel Paint Pic (en anglais).
  4. L'application a déjà les boutons BountonPlus et BoutonMoins, mais nous n'avons écrit le code que pour BoutonPlus. Maintenant que vous savez comment incrémenter une variable en ajoutant 1, faites le code du BoutonMoins et retirez 1 à la taille du point lorsque l'on clique sur BoutonMoins.
  5. en option : Pour l'instant, si un utilisateur veut un point très grand puis un petit il doit cliquer un zssez grand nombre de fois sur les boutons. Par exemple si la taille du dernier point est de 25 et que la taille du suivant est de 4, c'est un peu fastidieux. Donc pour que ça soit plus pratique, ajoutez un bouton qui réinitialise la taille du point à sa valeur initiale. Indice : ici vous aurez besoin d'une deuxième variable pour se rappeler de la taille initiale du point.
  6. Exercice si/sinon (if/else) : En programmation, les bogues (ou les bugs en anglais) est une erreur ou un défaut qui empêche le programme de fonctionner comme on le voudrait. Dans ce programme, si l'utilisateur continue à appuyer sur 'boutonMoins', la taille du point va devenir négative ! Que va t-il se passer dans ce cas ? Essayez de corriger ce bogue en ajoutant un test si/sinon sur la valeur de la taille du point. Indice : Le test si/sinon se trouve dans l'onglet contrôle de la boite à outils. Si vous avez fait la deuxième partie de l'application "I have a dream", (voir leçon 2.4) vous devriez vous rappeler comment utiliser cette commande.
  7. En Option : Créez une ou deux autres améliorations de cette application. Avant de commencer à programmer, pensez à écrire le pseudocode correspondant à la réalisation de vos idées.

Pour commencer,ouvrez App Inventor avec la version de l'application "peindre avec les doigts" que vous avez réalisée ou à partir d'un modèle fourni par votre enseignant. Puis réalisez les projets ci-dessus. Des informations complémentaires sont disponibles dans al Version textuelle de cette leçon. .

Solutions

Il est important de savoir chercher et trouver des solutions par soi-même dans la palette des outils d'App Inventor, et de programmer sans avoir une liste précise d'instructions à suivre. Alors essayez les défis ci-dessus et allez aussi loin que possible. Si vous êtes bloqués -- ou après avoir terminé et que vous souhaitez comparer votre solution à la notre -- regardez les vidéos ci-dessous qui montrent comment nous avons résolu ces défis.

Solutions pour les exercices 1, 2 et 3 ci-dessus (TeacherTube version)

Solutions pour les exercices 4, 5 et 6 ci-dessus ( TeacherTube version )

Auto-contrôle

1 point  

1 point  

1 point  

Pour votre Portfolio

Créez une page nommée : Projets Peinture dans la catégorie "création de projets" de votre portfolio, puis donnez une réponse courte aux questions duivantes :

  1. Pour l'amélioration #6 ci-dessus (l'exercice si/sinon) donnez une description rapide de votre solution. Ajoutez une copie d'écran de votre code (la partie nouvelle des blocs), et décrivez comment fonctionne le bloc si/sinon. Décrivez également les éventuels bogues ou difficultés que vous avez rencontrés pour résoudre ce défi.
  2. Quand vous avez utilisé le composant Caméra pour prendre une photo et la mettre en image de fond, cette image disparait quand vous fermez l'application et la redémarrez.
    Expliquez pourquoi.
    Indice : Pensez aux composants matériels dont nous avons parlé dans une leçon précédente et à quel endroit est stockée l'image. Qu'est-ce que l'on pourrait faire à votre avis pour empêcher l'image de disparaitre à chaque fois que l'on arrête l'application ?