Initiation à App Inventor 2 - Informatique Electronique PDF

Preview

Summary

Initiation à AppInventor2. ...

Description

Expériences informatiques Sujet n°2

AI2

Coupons la pizza Licence informatique 1ère année Nom Prénom 1:

Nom Prénom 2 :

PC

Groupe :

AppInventor2

CE QU'IL FAUDRA RETENIR - Charger n'importe quelle application sur son ordiphone est dangereux. - Développer une application avec AppInventor2 comporte deux étapes : dessiner l'interface puis programmer les évènements qui peuvent intervenir sur les composants de cette interface.

Smartphone android

CE QU'IL FAUDRA SAVOIR FAIRE - dessiner une interface simple sous AppInventor2, et renommer les composants afin de ne pas les confondre entre eux par la suite. - utiliser à bon escient les arrangements d'AI2. - développer des actions avec scratch (blocks).

- Une variable AppInventor2 est stockée en mémoire. Pour afficher sa valeur sur un écran, il faut modifier un des attributs d'un composant de l'interface.

- charger et tester une application sur ordiphone.

- Une photo trouvée sur InterNet n'est pas forcément libre de droits. En la réutilisant sans précaution, on peut commettre un délit de contrefaçon.

- utiliser le constructeur d'alternative : if then else.

- incrémenter ou décrémenter une variable.

- dessiner des formes simples dans un canvas d'AI2.

Fonctionnalités : Sur une image de pizza, on dessine un cercle de rayon ajustable, et on propose un découpage en parts égales.

Contrainte : Dans ce projet, on s'interdira de spécifier dans le programme des valeurs immédiates dépendantes de la machine sur laquelle s'exécute l'application. Ainsi, l'application produite pourra s'exécuter correctement quelque soit la résolution de l'écran.

1

Chargez sur votre smartphone l'application PartDePizza disponible dans votre environnement ½ moodle. Configurez les paramètres pour autoriser l'exécution d'applications de source inconnue. Quel(s) risque(s) prenez-vous en faisant cela ? Lancez l'application et effectuez quelques tests.

© Dominique Lazure – UPJV – 2018-2020

2

Avec AppInventor (accessible sur http://ai2.u-picardie.fr:8888), dessinez une ½ interface ressemblant à celle de l'application : • Découper l'écran en deux zones verticalement juxtaposées : le contrôle se fera en haut de l'écran et l'image s'affichera en partie basse ; • Dans la zone de contrôle, dessinez les boutons – et + qui permettent d'ajuster le rayon du disque et le nombre de parts, insérez les différentes zones de texte ; tous ces éléments étant alignés horizontalement dans une boite adéquate ; • Dans la partie image, insérez une photo de pizza. Comment trouver une photo libre de droits ?

3

Activez l'incrémentation et la décrémentation du rayon en programmant les évènements « click » ½ sur chacun des boutons. A chaque modification du rayon, redessinez l'image contenant le cercle de découpage. Testez et faites valider par l'enseignant.

4

Modifiez votre programme pour contraindre la valeur du rayon à rester supérieure à 20 et inférieure à la taille de la pizza. Quand le rayon atteindra une des bornes de l'intervalle de valeurs possibles, un bouton sera inactivé, puis réactivé quand la valeur changera à nouveau.

5

Ajoutez le découpage en parts : ½ • Activez les traitements sur les deux nouveaux boutons : ◦ modifiez l'affichage du nombre de parts dans la partie de contrôle ◦ empêchez un nombre de parts inférieur à 1 ou supérieur à 20 (désactivez un bouton en limite d'intervalle) ◦ à chaque modification du nombre de parts, redessinez les coupes. Une coupe est symbolisée par une ligne reliant le centre du cercle au bord.

y 1 sin α α

O

cos α 1

x

◦ On rappèle que sur AI2, l'origine d'un canvas est le pixel situé sur le coin en haut à gauche de l'image. Ainsi, la nième coupe est le segment qui relie le centre du cercle et le point de coordonnées (XO+R*cos(360°*n/P), YO - R*sin(360°*n/P)) avec P : nombre total de parts ; R : rayon du cercle ; (XO,YO) coordonnées du centre du cercle dans l'image ; les angles étant exprimés en degrés.

© Dominique Lazure – UPJV – 2018-2020

½...