App Inventor Travaux pratiques dirigs!

BouleDeCristal
Au cours de ce tutoriel, vous allez crer une application qui fonctionne comme une boule de cristal : lutilisateur rflchit une question, comme Est-ce que je vais gagner le match de foot ? puis il secoue le tlphone pour connatre la rponse de la boule de cristal !

Pour commencer
Se connecter sur App Inventor Consulter http://appinventor.mit.edu/ Se connecter en utilisant le nom dutilisateur et le mot de passe du compte Gmail. Cliquer sur longlet My Projects, et cliquer sur New. Crer un nouveau projet appel BouleDeCristal . Tlcharger les lments extrieurs Tlcharger le fichier de limage de la boule de cristal de http://bit.ly/crystalballTC

Programmer linterface de lapplication dans le Designer

Crer Screen1

REMARQUE: Cest une bonne ide de prendre lhabitude de crer un cran Accueil pour les applications, puisquon ne peut pas mettre dcran avant Screen1 avec App Inventor. Donc si on programme Screen1 en tant qucran principal, on ne peut plus ajouter dcran accueil parce quon ne la pas fait depuis le dbut. Nous vous montrerons comment crer un cran daccueil qui est reli lcran principal dans les tutoriels BouleDeCristal et PotDePeinture. Ajouter une tiquette Bienvenue Screen1 Tirer une Label de la Basic Palette jusqu lcran. Cliquer sur Rename et la renommer EtiquetteBienvenue . Dans le panneau de configuration Properties, changer le champ de saisie Text Bienvenue . Ajouter le bouton Entrer Screen1 Tirer un Button de la Basic Palette jusqu lcran. Cliquer sur Rename et le renommer BoutonEntrer . Dans le panneau de configuration Properties, changer le champ de saisie Text Accder la Boule de Cristal .
Crer lcran BouleDeCristal

Ajouter lcran BouleDeCristal Cliquer sur le bouton Add Screen du menu en haut de longlet Design. Slectionner llment Screen dans le Designer. Dans le panneau de configuration Properties changer le champ de saisie Title BouleDeCristal . Vous devriez maintenant voir un nouveau titre dans le champ de saisie. Ajouter les tiquettes Mode demploi Tirer une Label de la Basic Palette jusqu lcran. Cliquer sur Rename et la renommer EtiquetteQuestion . Dans le panneau de configuration Properties, changer le champ de saisie Text Que voudriez-vous savoir ?
! 1

App Inventor Travaux pratiques dirigs! Tirer une Label de la Basic Palette jusqu lcran. Cliquer sur Rename et la renommer EtiquetteModeEmploi . Dans le panneau de configuration Properties, changer le champ de saisie Text Secouer la boule de cristal et tout vous sera dvoil

Ajouter la boule de cristal Tirer un Button de la Basic Palette jusqu lcran. Cliquer sur Rename et le renommer TextePrediction . Dans le panneau de configuration Properties, effacer TextForButton1 du champ de saisie Text. Dans le panneau de configuration Properties, attribuer BackgroundImage limage de la boule de cristal tlcharge ultrieurement. Cliquer sur None et choisir Add pour tlcharger le fichier image. Ajouter Accelerometer Dans le panneau de configuration Sensor, tirer llment Accelerometer jusqu lcran.

Programmer dans le Blocks Editor

Ecrire lalgorithme pour aller de Screen1 lcran BouleDeCristal Dans le Designer, slectionner Screen1 pour quil apparaisse dans le panneau de configuration Viewer. Tirer du Blocks Editor, sous My Blocks, un gestionnaire dvnement When...Clicked event handler pour BoutonEntrer. Dans la colonne Built-in, ouvrir le tiroir Control et en tirer le bloc call open another screen. Placer ce bloc lintrieur du gestionnaire dvnement click. Dans la colonne Built-in, ouvrir le tiroir Text et en tirer une bote Text et lattacher au bloc call open another screen. Changer le texte BouleDeCristal . Programmer lcran BouleDeCristal Dans le Designer slectionner lcran BouleDeCristal pour quil soit visible dans le panneau Viewer. Retourner au Blocks Editor; il est maintenant vide. Ecrire lalgorithme pour faire apparatre une rponse quand le tlphone est secou Dans le Blocks Editor sous My Blocks, slectionner le gestionnaire dvnement Shaking Event Handler pour lAccelerometer. Dans la colonne My Blocks, ouvrir le tiroir TextePrediction et en tirer set TextePrediction.Text. Placer ce bloc lintrieur du gestionnaire dvnement when ... Clicked event handler. Dans la colonne Built-In, ouvrir le tiroir Lists. En tirer le bloc call pick random item. Attacher ce block au bloc set TextePrediction.Text. Dans la colonne Built-In, ouvrir le tiroir Lists. En tirer le bloc make a list et lattacher au bloc call pick random item. Dans la colonne Built-In, ouvrir le tiroir Text. En tirer 4 botes Text et les ajouter la list en tant que items. Changer le texte Oui , Non , Peut-tre et Qui vivra verra . Ecrire lalgorithme pour effacer la rponse quand on clique sur lcran Tirer depuis le Blocks Editor dans My Blocks un gestionnaire dvnement when ... Clicked event handler pour le bouton TextePrediction. Dans la colonne My Blocks, ouvrir le tiroir TextePrediction et en tirer set TextePrediction.Text. Placer ce bloc lintrieur du gestionnaire dvnement when ... Clicked event handler. Dans la colonne Built-In, ouvrir le tiroir Text. En tirer une bote Text et lattacher au bloc set TextePrediction.Text. Effacer le texte.
! 2

App Inventor Travaux pratiques dirigs!

Tester et tlcharger lapplication Sauvegarder lapplication depuis le Blocks Editor et depuis le Designer. Connecter le tlphone grce au cble USB, puis cliquer sur Connect to Device dans le coin en haut droite du Blocks Editor. Slectionner le tlphone de la liste et vrifier que le tlphone et la flche jaunes clignotent et deviennent vertes. Vous saurez que le tlphone est connect quand ils sont verts, et lapplication devrait apparatre sur lcran du tlphone. Tester lapplication pour vrifier quil marche, puis la tlcharger : dans le Designer, choisir Package for Phone et attendre quelle soit tlcharge, ce qui peut prendre quelques minutes.

Piratez votre application! Changer la police de caractre, les couleurs, etc. Ajouter de nouvelles rponses la liste! Ajouter un son de carillon quand lapplication est secoue. Mettez vos questions et une capture dcran de votre application pirate sur P2PU.

App Inventor Travaux pratiques dirigs!

PotDePeinture
Au cours de ce tutoriel, vous allez crer une application qui permet lutilisateur de dessiner sur lcran des traits et des points en couleur.

Pour commencer

Se connecter sur App Inventor. Crer un nouveau projet appel PaintPot .

Programmer linterface de lapplication dans le Designer

Crer Screen1

Ajouter une tiquette Bienvenue Screen1 Tirer une Label de la Basic Palette jusqu lcran. Cliquer sur Rename et la renommer EtiquetteBienvenue . Dans le panneau de configuration Properties, changer le champ de saisie Text Bienvenue . Ajouter le bouton Entrer Screen1 Tirer un Button de la Basic Palette jusqu lcran. Cliquer sur Rename et le renommer BoutonEntrer . Dans le panneau de configuration Properties, changer le champ de saisie Text Accder Pot de Peinture
Crer lcran PotDePeinture

Ajouter lcran PotDePeinture Cliquer sur le bouton Add Screen du menu en haut de longlet Design. Slectionner llment Screen dans le Designer. Dans le panneau de configuration Properties changer le champ de saisie Title PotDePeinture . Vous devriez maintenant voir un nouveau titre dans le champ de saisie. Ajouter les boutons couleurs Maintenant, vous allez ajouter 3 buttons pour changer la couleur de la peinture. Pour commencer, ajouter lcran un button appel BoutonRouge . Changer la couleur de fond au Rouge dans le panneau de configuration Properties et le texte Rouge . Crer un autre button appel BoutonVert de couleur verte et de texte affich Vert . Crer un troisime button appel BoutonBleu de couleur bleue et de texte affich Bleu . Organiser les boutons Aligner les boutons cte cte en les tirant dans un Horizontal Arrangement. Vous devez fixer la largeur de la disposition et des boutons Fill parent pour faire en sorte que les boutons prennent toute la place sur lcran. La composition est-elle amliore ? Comment a-telle change ? Crer un espace de dessin Ajouter une canvas appele ToileDessin . Fixer la hauteur 300 pixels et la largeur pour quelle prenne toute la largeur de lcran (Indice : vous avez fait la mme chose pour le Horizontal Arrangement).

App Inventor Travaux pratiques dirigs!

Ajouter un bouton Effacer Ajouter un autre button appel BoutonEffacer de texte affich Effacer . Ce button effacera lcran.

Programmer dans le Blocks Editor

Ouvrir le Blocks Editor et le connecter au tlphone.

Ecrire lalgorithme pour aller de Screen1 lcran PotDePeinture Dans le Designer, slectionner Screen1 pour quil apparaisse dans le panneau de configuration Viewer. Dans le Designer slectionner Screen1 pour quil soit visible dans le panneau Viewer. Tirer depuis le Blocks Editor sous My Blocks, un gestionnaire dvnement When...Clicked event handler pour BoutonEntrer. Dans la colonne Built-in, ouvrir le tiroir Control et en tirer call open another screen. Placer le bloc lintrieur du gestionnaire dvnement click. Dans la colonne Built-in, ouvrir le tiroir Text et en tirer une bote Text. Lattacher au bloc call open another screen et changer le texte PotDePeinture . Programmer lcran PotDePeinture Dans le Designer slectionner lcran PotDePeinture pour quil soit visible dans le panneau Viewer. Retourner au Blocks Editor; il est maintenant vide. Programmer les boutons couleurs Programmer les boutons couleurs. Premirement, trouver le gestionnaire dvnement click event handler pour BoutonRouge et le tirer jusquau Blocks Editor. Il affichera when RedButton.Click do. Maintenant vous allez le remplir avec des blocs pour lui dire ce quil faut faire quand on clique sur le BoutonRouge. Trouver le bloc qui choisit la couleur de la toile et le mettre dans le gestionnaire dvnement BoutonRouge. Il affichera set DrawingCanvas.PaintColor to. Lui attacher un bloc couleur rouge (indice : regarder dans les blocs Built-in ). Quaccomplit cet algorithme ? Maintenant programmer les boutons vert et bleu de la mme manire. Programmer le bouton Effacer Programmer le bouton Effacer. Trouver le gestionnaire dvnement click de BoutonEffacer (comme pour les boutons couleurs). Maintenant le programmer pour quil efface la toile. (Indice : il y a un bloc pour la ToileDessin qui a pour fonction ToileDessin.clear). Ecrire lalgorithme pour dessiner les points Maintenant vous allez ajouter un algorithme pour quun point soit dessin lendroit o la toile est touche. Trouver le gestionnaire dvnement touched de ToileDessin et le tirer jusquau Blocks Editor. Les variables x et y fournis par le gestionnaire dvnement reprsentent les coordonnes du point o lcran est touch. Utiliser la DrawCircle Procedure avec les valeurs de x et y fournis sous My Definitions pour dessiner un cercle au point o lcran est touch. La variable r de la procdure DrawCircle reprsente le rayon du cercle en pixels. 5 est une bonne valeur pour commencer. (Indice : regarder sous les blocs Built-in ). Tester lapplication Tester les boutons couleur, le bouton Effacer, et ce qui se passe quand on touche lcran du tlphone. Les boutons changent-ils la couleur de la peinture ? Le cercle est-il dessin l o vous avez touch ? Le bouton Effacer efface-t-il toute la peinture ?

App Inventor Travaux pratiques dirigs!

Ajouter lalgorithme pour dessiner les lignes Maintenant vous allez ajouter lalgorithme pour que quand lutilisateur dessine avec son doigt (en tirant) sur la toile, lapplication trace une ligne. Trouver le gestionnaire dvnement dragged de ToileDessin. Un vnement drag vient avec 7 arguments. Il y a trois couples de coordonnes x et y qui montrent la position de votre doigt o la trace a commenc, la position actuelle du doigt, et la position instantanment ultrieure du doigt. Il y a aussi sprite, que nous nutiliserons pas pour ce tutoriel. Maintenant trouver la procdure ToileDessin appele DrawLine. Cette procdure dessine un trait de la position prcdente (x1, y1) la position actuelle (x2, y2). Modifier les arguments pour quelle dessine un trait depuis la position prcdente du doigt la position actuelle du doigt. Tester votre application Tester votre application. Essayer de dessiner des droites et des courbes. Ajouter des variables pour dessiner des points de tailles diffrentes Maintenant vous allez amliorer votre application en ajoutant deux boutons pour changer la taille des points dessins quand lcran est touch. Premirement ajoutons une variable appele TaillePoint. Fixer la valeur initiale de TaillePoint 8. Modifier la procdure DrawCircle pour quelle dessine un point de rayon 8 (se rappeler quavant vous laviez fix 5 pixels). Maintenant quand lcran est touch, le cercle dessin sera de la taille du nombre affect la variable TaillePoint. Maintenant dans le Designer, ajouter un BoutonGros et un BoutonPetit lcran. Utiliser un autre horizontal arrangement pour les aligner avec le bouton Effacer. Faire en sorte que les boutons affichent le texte Gros Points et Petits Points . Dans le Blocks Editor, trouver le gestionnaire dvnement click de BoutonPetit et utiliser-le pour affecter 2 la variable TaillePoint quand le BoutonPetit est cliqu. Maintenant faisons de mme pour GrosBouton, mais affecter 8 TaillePoint. Tester votre application Tester votre application sur le tlphone. Piratez votre application! Personnaliser votre application : utiliser llment appareil-photo pour prendre des photos de vos amis et de les mettre comme fond dcran pour que vous puissiez dessiner dessus.

Ressources
Vidos YouTube Vido du Professor Wolber, Partie 1: http://www.youtube.com/watch?v=gHPae2B5pN0 Vido du Professor Wolber, Partie 2: http://www.youtube.com/watch?v=L1_ATVJiiLI Vido du Professor Wolber, Partie 3: http://www.youtube.com/watch?v=XGXFJxrYBc0 Vido Camra, Professor Wolber: http://www.youtube.com/watch?v=q39n6JwrdPk Vido de Chris Groff, Partie 1: http://www.youtube.com/watch?v=31bi9tWOLcY Vido de Chris Groff, Partie 2: http://www.youtube.com/watch?v=JX8Gn7FLcHY Mettez vos questions et une capture dcran de pirate sur P2PU.
!

votre application

App Inventor Travaux pratiques dirigs!

JeuDeLaTaupe
Au cours de ce tutoriel, vous allez crer un jeu : une taupe saute tous les 0,5 secondes, partout sur lcran dune manire alatoire, et si lutilisateur russit toucher la taupe, le score augmente dun point.

Pour commencer

Se connecter sur App Inventor Crer un nouveau projet appel JeuDeLaTaupe . Tlcharger limage de la taupe de bit.ly/moleimage!

Programmer linterface de lapplication dans le Designer

Changer le titre de lcran Changer le titre de lcran JeuDeLaTaupe depuis le panneau de configuration properties dans le Designer. Pouvez-vous voir le nouveau titre affich sur le tlphone ? Ajouter la toile, les boutons et le son Ajouter une canvas appele MaToile . Fixer la hauteur 300 pixels et la largeur la largeur de lcran. (Indice : cest pareil que dans PotDePeinture). Maintenant, vous allez ajouter un button pour redmarrer le jeu. Ajouter un bouton sur lcran appel BoutonRedmarrer . Changer le texte affich Redmarrer . Maintenant ajouter une label. Vous allez utiliser cette tiquette pour afficher le score, donc appelons-la EtiquetteScore .Changer le texte Score : --- . Ensuite, ajouter llment sound. Remarquer que quand vous le tirer jusqu la toile il apparat en bas de lcran. Pourquoi pensez-vous quApp Inventor fait cela ? Cest parce que le son est un composant non-visible. Renommer llment son Bruit . Ajouter un lment Clock Maintenant, vous allez ajouter un lment clock qui servira de chronomtre, pour que lapplication sache quand il faut bouger la taupe. Renommer la clock ChronoTaupe , et fixer son TimeInterval 500 millisecondes pour faire bouger la taupe toutes les 0,5 secondes. Vrifier que TimerEnabled est coch, pour que le chronomtre soit actif. Ajouter la taupe En utilisant lAnimation Palette, ajouter une ImageSprite, et lappeler Taupe . Mettre comme image, limage de la taupe tlcharge prcdemment. Vrifier que lImageSprite est activ, et que Visible est coch. Height et Width devraient tre fix leur taille automatique. Maintenant, vous aller modifier les proprits qui contrlent le mouvement de la taupe. La position initiale (reprsente par les coordonnes X et Y) est dtermine par o vous avez plac la taupe quand vous lavez tir jusqu MaToile. Tirer la taupe jusqu une position diffrente. Vous devriez voir X et Y changer. Le Heading reprsente la direction dans laquelle la taupe va bouger. Fixons-le 0. Ensuite fixer Speed 0 puisquon ne veut pas que la taupe bouge en une ligne. Vous allez plutt la faire sauter partout en changeant la position. Fixer lintervalle 500 puisquon veut que la taupe bouge toutes les 500 millisecondes.

App Inventor Travaux pratiques dirigs!

Programmer dans le Blocks Editor

Ouvrir le Blocks Editor et connecter le tlphone.

Ecrire une procdure qui contrle le mouvement de la taupe Ajouter un bloc procedure du tiroir definition. Vous pouvez cliquer sur le texte procedure pour renommer le bloc. Le renommer BougerTaupe . Dans la partie do de la procdure BougerTaupe, ajouter le bloc qui bougerait la taupe une nouvelle localisation x et y. (Indice : Il sera sous la section Taupe.) Ensuite changer les coordonnes x et y pour contrler l o la taupe va bouger. Les coordonnes peuvent tre un nombre quelconque du moment que cest sur la toile. La coordonne x peut tre entre 0 (le ct gauche de la toile) et la largeur de la toile moins la largeur de la taupe. La coordonne y peut tre entre 0 (le bas de la toile) et la hauteur de la toile moins la hauteur de la taupe. Vous voulez que la taupe bouge partout une localisation imprvisible, donc vous allez dfinir les valeurs de x et y comme des nombres alatoires dans les intervalles dcrits prcdemment. Vous trouverez le bloc random dans le tiroir Math. Fixer le nombre from 0. Dans lemplacement to, effacer le bloc number et ajouter sa place un bloc subtraction. Affecter la valeur MaToile.Width moins Taupe.Width la coordonne x et la valeur de MaToile.Width moins Taupe.Width la coordonne y. Maintenant (soit avec le tlphone ou le programme dmulation connect au Blocks Editor), tester la procdure Bouger.Taupe en faisant un clic-droit et choisissant Do It . Que se passe-t-il ? Est-ce que cest ce quoi vous vous attendiez ? Ecrire lalgorithme pour activer la procdure Bouger.Taupe toutes les 0,5 secondes Prendre le bloc ChronoTaupe.Timer et le faire activer (call) la procdure Bouger.Taupe dans My Definitions. Que fait cet algorithme ? Comment sait-il de le faire toutes les 0,5 secondes ? Indice : comment avez-vous fix les proprits ? Tester votre application Tester lapplication. La taupe bouge-t-elle alatoirement toutes les 0,5 secondes ? Crer une procdure pour changer le score Crer une variable appel score pour reprsenter le score. Fixer la valeur initiale 0. Prendre un bloc de procdure et lappeler MiseAJourScore . A lintrieur mettre le bloc qui change le texte dEtiquetteScore. Vous allez changer le texte Score : suivi de la valeur du score, donc il faut utiliser un join. Le bloc join se trouve dans le tiroir Text. Modifier la premire moiti du join au texte Score : et la deuxime la variable que vous avez cr pour le score. Ajouter lalgorithme qui augmente le score quand la taupe est touche Trouver le gestionnaire dvnement pour quand la Taupe est touche. Vous souvenez-vous des gestionnaires dvnements de PotDePeinture ? Premirement vous allez utiliser le bloc set global pour changer la variable Score. Il vous faut un nouveau bloc addition pour fixer la nouvelle valeur du score la valeur prcdente + 1. Ensuite, on veut afficher le nouveau score, donc il faut activer (call) la procdure MiseAJourScore que vous avez cr pour changer ltiquette, dans My Definitions. Activer (call) Son.Vibrate pendant 100 millisecondes pour que le tlphone vibre, depuis My Blocks > Noise et activer BougerTaupe pour que la taupe bouge. Tester lapplication Tester lapplication en jouant le jeu. Le score augmente-il quand la taupe est touche ? Programmer le bouton Redmarrer pour remettre le score 0
! 8

App Inventor Travaux pratiques dirigs! Trouver le gestionnaire dvnement click pour le bouton Redmarrer. Prendre le bloc set global score et le placer lintrieur. Fixer la valeur du score 0. Encore une fois, il faut activer (call) MiseAJourScore, pour que le nouveau score apparaisse sur lcran.

Tester votre application Tester lapplication en jouant le jeu et en utilisant le bouton Redmarrer. La taupe bouge-t-elle alatoirement toutes les 0,5 secondes ? Le score augmente-il quand la taupe est touche ? Le bouton Redmarrer fonctionne-t-il ? Piratez votre application ! Ajouter un son au jeu, pour que le tlphone joue un son au lieu de vibrer. Vous devez mettre jour llment sound et le gestionnaire dvnement touched de la taupe. Et si on ajouter une deuxime taupe ?

Ressources
Vidos YouTube Vido de Chris Groff Part 1: http://www.youtube.com/watch?v=X-0zwa-BqG8 Vido de Chris Groff Part 2: http://www.youtube.com/watch?v=BOprKoivALQ Vido de Chris Groff Part 3: http://www.youtube.com/watch?v=iNzLmqNtW5c Vido du Professeur Wolber Partie 1: http://www.youtube.com/watch?v=uj8b19S1F50 Vido du Professeur Wolber Partie 2: http://www.youtube.com/watch?v=sP30C29J44w Vido du Professeur Wolber Partie 3: http://www.youtube.com/watch?v=NCgmyoHWiE4 Vido du Professeur Wolber Partie 4: http://www.youtube.com/watch?v=3BWOE9Gulhk Vido du Professeur Wolber Partie 5: http://www.youtube.com/watch?v=tkjjDfOa3ZA Mettez vos questions et une capture dcran de votre application pirate sur P2PU

App Inventor Travaux pratiques dirigs!

Inventer Votre Propre Application

Travailler en autonomie ou en binme pour crer et dvelopper votre propre application.

Essayer dutiliser les outils que vous avez appris :

Ecran Accueil Evnements Variables Listes Procdures Appareil Photo Boutons Acclromtre Etiquette Image Sprites Chronomtres Sons

Obtenir les impressions de lutilisateur Montrer lapplication votre groupe, votre famille, vos amis. Est-ce quils ont aim ? Est-ce quils utiliseraient cette application ? Est-ce que cest facile comprendre/utiliser ? Est-ce quils ont des ides pour lamliorer ?

Ressources
Vidos sur YouTube Regarder les vidos ou les indications des piratages prcdents si vous voulez vous rappeler de comment utiliser un certain lment. Mettez vos questions et une capture dcran de votre application pirate sur P2PU.

10

App Inventor Travaux pratiques dirigs!

Pas de SMS au Volant

Au cours de ce tutoriel, vous allez crer une application qui rpond automatiquement aux SMS pendant que lutilisateur est en train de conduire. Lutilisateur a aussi loption de faire lire haute voix le message qui a t reu.

Pour commencer
Se connecter sur App Inventor Crer un nouveau projet appel PasDeSMSAuVolant

Programmer linterface de lapplication dans le Designer

Changer le titre de lcran Changer le titre de lcran Pas de SMS au Volant dans le panneau de configuration Properties du Designer. Pouvez-vous voir le nouveau titre affich sur le tlphone ? Crer linterface Ajouter une Label appele EtiquetteEntrerTexte affichant le texte Le texte ci-dessous sera envoy en rponse tout message SMS reu. Ajouter une Label appele EtiquetteReponse affichant le texte Je suis en train de conduire linstant, je vous rappellerai prochainement. Changer la police, les couleurs, etc. pour que lcran soit comme vous le souhaitez. Ajouter une Textbox appele ZoneDeTexteNouvelleReponse et affecter au texte. Que va-t-il se passer quand on fixe le texte ? Changer le Hint Taper le nouveau message SMS. Ajouter un Button appel BoutonEntrerReponse affichant le texte Modifier la rponse . Ajouter les lments non-visibles Ajouter les lments : Texting, TinyDB, et TextToSpeech.

Programmer dans le Blocks Editor

Ouvrir le Blocks Editor et connecter le tlphone.

Programmer une rponse automatise Vous allez crire un algorithme pour que lapplication envoie une rponse automatise quand quelquun envoie un SMS au tlphone. En utilisant le composant Texting, trouver le gestionnaire dvnement Message Received et la fonction Send Message. Placer les blocs pour que lalgorithme envoie un message quand un message est reu. Vous devez modifier les proprits PhoneNumber et Message de llment Texting avant dactiver (call) la fonction Send Message. Indice : utiliser le numro de Message Received pour dfinir le numro de tlphone appeler (cest gnr automatiquement dans le tiroir My Definitions.) Le Message doit tre chang au texte dEtiquetteReponse. Tester lapplication Tester lapplication en envoyant un SMS au tlphone. Le tlphone envoie-t-il la rponse automatise ? Vous pouvez le tester dans le programme dmulation en utilisant lidentifiant de lmulateur (par ex : 5554) comme numro de tlphone.

11

App Inventor Travaux pratiques dirigs!

Entrer une rponse personnalise Maintenant vous allez crire lalgorithme qui permet lutilisateur de changer la rponse quenvoie son tlphone. Trouver le gestionnaire dvnement click de BoutonEntrerReponse. Utiliser le bloc Text de Set EtiquetteReponse pour changer le texte ZoneDeTexteNouvelleReponse.Text quand le bouton est cliqu. Tester votre application Tester lapplication en entrant une nouvelle rponse et en envoyant un SMS au tlphone. Le tlphone qui a envoy le message reoit-il la nouvelle rponse automatise ? Stocker les rponses personnalises dans une base de donnes Que se passe-t-il la rponse personnalise quand on quitte puis on rouvre lapplication ? Pour stocker les rponses personnalises de lutilisateur, il faut une base de donnes. Le composant TinyDB nous permet de stocker des donnes (StoreValue) et de rcuprer des donnes (GetValue). Modifier le gestionnaire dvnement click de BoutonEntrerReponse que vous avez dj programm pour stocker la rponse. Affecter le texte MessageReponse au champ tag. Vous utiliserez ce tag pour rcuprer le message plus tard. Affecter valueToStore EtiquetteReponse.Text. Vrifier que vous aviez mis un nouveau message dans EtiquetteReponse avant de le stocker. Rcuprer les rponses personnalises quand lapplication est initialise App Inventor fournit un gestionnaire dvnement spcifique (Screen1.Initialize) qui commence quand lcran est ouvert, cest--dire quand lapplication est initialise. Vous pouvez utiliser Screen1.Initialize pour affecter la rponse personnalise stocke dans la base de donnes EtiquetteReponse quand lapplication est initialise. Cependant, il se peut quaucune rponse personnalise nait t stocke, donc il faut vrifier la rponse rcupre de la base de donnes avant de laffecter EtiquetteReponse. Crer une variable appel reponse et lui affecter un texte vide. Dans le gestionnaire dvnement initialize, affecter la valeur rcupre de CallTinyDB1.GetValue la variable reponse . Souvenez-vous quil faut affecter MessageReponse au tag pour rcuprer une rponse de la base de donnes. En utilisant un bloc If then, mettre comme condition : la longueur de la variable reponse est plus grande que 0. Indice : utiliser le bloc Call Length text et le bloc suprieur (>). Changer la partie then-do du bloc pour que lapplication affecte la variable reponse ResponseLabel.Text. Tester votre application Regarder ce qui se passe quand vous ouvrez et fermez le logiciel sans sauvegarder de message personnalis. Quel message automatis est affich ? Regarder ce qui se passe quand vous ouvrez et fermez le logiciel aprs avoir sauvegarder un message personnalis. Ce message personnalis apparat-il ? Lire les nouveaux messages voix haute Maintenant vous allez modifier lapplication pour que quand lutilisateur reoit un SMS, le numro de tlphone et le message reu soient lus voix haute. Ajouter le bloc TextToSpeech1.Speak la fin du gestionnaire dvnement Message Received. Pour identifier le message qui va tre lu, utiliser un bloc Call Make Text. Changer la premire valeur (= value) du texte SMS reu de . Noublier pas lespace aprs de . Changer la deuxime valeur du texte au numro de tlphone quon trouve dans le gestionnaire dvnement Message Received. Changer la troisime valeur du texte Le message est . Noublier pas lespace aprs est . Changer la dernire valeur du texte messageText, quon trouve dans le gestionnaire dvnement Message Received. On vient de crer un seul message qui lit le numro de tlphone est le message lutilisateur.
! 12

App Inventor Travaux pratiques dirigs!

Tester lapplication Tester lapplication en envoyant un SMS au tlphone. Le tlphone lit -il le numro et le message haute voix ? Se rappeler de tester toutes les caractristiques techniques de lapplication pour sassurer quelles marchent toujours. Piratez votre application! Dvelopper une version qui permet lutilisateur de dfinir des rponses personnalises pour les diffrents numros de tlphones. Dfi : Utiliser llment LocationSensor pour envoyer la localisation actuelle du conducteur.

Ressources
Vidos sur YouTube Vido de Professor Wolber, Partie 1: http://www.youtube.com/watch?v=rrwrfX8T_c8 Vido de Professor Wolber, Partie 2: http://www.youtube.com/watch?v=0FTdv1SxGmc Vido de Professor Wolber, Partie 3: http://www.youtube.com/watch?v=7PmDsrGHIZI Vido de Professor Wolber, Partie 4: http://www.youtube.com/watch?v=5RIdqkJgfn4 Vido de Professor Wolber, Partie 5: http://www.youtube.com/watch?v=R9MPcbe_oo4 Mettez vos questions et une capture dcran de votre application pirate sur P2PU.

13