Cherchez vos composants dans la Palette à gauche, et faites les … · 2020. 3. 26. · une application plus compliquée de carte au trésor qui utilisera le Gps par exemple (notez

WWW.VOYAGEURSDUCODE.FR – Marie-Caroline Gries –

COMPOSANT CAMCORDER

Cherchez vos composants dans la Palette à gauche, et faites les glisser dans votre interface

Essayez ce script

Avec le composant Camcorder vous pouvez enregistrer une vidéo et l’afficher via une application. Vous pouvez imaginer intégrer une vidéo

enregistrée dans une application plus complexe. Vous pouvez y intégrer un filtre pour y faire apparaitre des éléments par exemple.

Le script se lit ainsi : Quand le bouton est cliqué, la caméra se met en route. Lorsque l’enregistrement est terminé, le player affiche la vidéo.

Trouver les blocs (phase Blocks) :

Nom du bloc Où le trouver ?

« when Button1 .Click » Button1

« call Camcorder1 .RecordVideo »

Camcorder1 « when Camcorder1 .AfterRecording do »

« set VideoPlayer1 – Source to » VideoPlayer1

« get clip » Appuyez sur le bouton “clip” du bloc « when Camcorder1 .AfterRecording do »


COMPOSANT ACCELEROMETERSENSOR


Modifiez les propriétés de vos Labels comme ci-dessous :

Essayez ce script

Le composant AccelerometerSensor permet de capter le mouvement de l’appareil. Ici nous l’avons

programmé de façon à ce qu’il nous donne les s de l’inclinaison de l’appareil : X étant l’abscisse ; Y est

l’ordonnée (ou la profondeur) ; Z est la cote (ou la hauteur). Ce composant peut servir dans un jeu

d’équilibre, ou bien plus simplement à détecter les secousses, ce qui peut permettre de programmer, par

exemple, une ardoise magique.

Le script se lit ainsi : Quand le bouton est cliqué, la première étiquette affiche les coordonnées de l’axe X

derrière « X » ; la seconde étiquette affiche les coordonnées de l’axe Y derrière « Y » ; la troisième

étiquette affiche les coordonnées de l’axe Z derrière « Z ».



« when Button1 .Click do » Button1

« set Label1 - Text to » Label1



« join » Text

« »

« AccelerometerSensor - XAccel » AccelerometerSensor1 « AccelerometerSensor - YAccel »

« AccelerometerSensor – ZAccel »

Coordonnées cartésiennes


COMPOSANT CLOCK


Modifiez les propriétés de vos Buttons comme ci-dessous :

Essayez ce script

Le composant Clock peut s’utiliser pour récupérer des informations sur la temporalité. Ici il est sous sa forme la plus simple, mais vous pouvez le complexifier, afficher les heures, les minutes, les secondes et les millisecondes (voir fiche « Chronomètre »). Vous pouvez aussi faire un décompte. Ce composant peut s’intégrer facilement à plusieurs types d’applications, des jeux par exemple (quiz, jeux d’arcade,...). Le script se lit ainsi : lorsque le bouton1 est cliqué, le temps se met en marche. Le Label affichera alors les secondes qui défilent. Lorsque le bouton 2 est cliqué, le temps s’arrête et se remet à zéro. Notez que vous pouvez modifier l’intervalle de l’horloge (TimerInterval) qui est de 1000 par défaut (soit un décompte par seconde) dans les propriétés de Clock1. Plus l’intervalle est petit, plus le décompte est rapide (1 000 = 1 000 milliseconde = 1 seconde).





« set Clock1 .TimeEnabled to »

Clock1 « when Clock1 .Timer do »

« true »

Logic « false »

« set Label1 - Text to »

Label1 « Label1 - Text »

« 0 » / « 1 »

Math « + »


COMPOSANT IMAGEPICKER


Essayez ce script

Le composant ImagePicker vous permet de sélectionner une image sur votre téléphone et de l’afficher via l’application. Vous pouvez utiliser ce

composant dans une application plus complexe de dessin par exemple.

Le script est le suivant : quand une image a été sélectionnée via ImagePicker, la sélection s’affiche à l’emplacement de Image1.



« when ImagePicker1 .AfterPicking do »

ImagePicker1 « ImagePicker1 – Selection »

« set Image1 – Picture to » Image1


COMPOSANT ORIENTATIONSENSOR


Importez une image de compas, nous avons choisit la suivante : https://pixabay.com/fr/boussole-directions-east-carte-160051/

Essayez ce script

https://pixabay.com/fr/boussole-directions-east-carte-160051/

Le composant OrientationSensor détecte votre orientation. Nous l’utilisons ici simplement comme un compas, mais vous pouvez l’utiliser dans

une application plus compliquée de carte au trésor qui utilisera le Gps par exemple (notez que votre appareil doit posséder ce dernier composant

pour que votre application fonctionne).

Le script est le suivant : quand le composant OrientationSensor détecte un changement d’orientation, l’image est capable de tourner et

s’oriente vers la direction détectée.



« when OrientationSensor1 .OrientationChanged do » OrientationSensor1

« set ImageSprite1 - Rotates to »

ImageSprite1 « set ImageSprite1 - Heading to »

« true » Logic

« get azimuth » Cliquez sur « azimuth » dans le bloc « when OrientationSensor1 .OrientationChanged do »


COMPOSANT PLAYER


Renommez vos boutons « Play », « Pause » et « Stop » en cliquant sur « Rename » en bas de « Components ». Modifiez aussi les propriétés des boutons et du Player (voir verso de la carte) ainsi :

Essayez ce script

Le composant Player vous permet de créer une application de lecteur audio ou vidéo (médias que vous pouvez trouver dans une banque libre

de droit comme celle-ci par exemple : http://www.auboutdufil.com/). Ici nous avons choisit d’en faire un lecteur audio MP3 en téléchargeant un

son libre de droit nommé « 16276.mp3 » ; vous pouvez bien évidemment choisir ce que vous voudrez à la place. Il vous suffit d’importer votre

son ou votre vidéo : téléchargez le média désiré, cliquez sur « Upload File », sélectionnez votre média depuis votre ordinateur. Il est à présent

dans votre bibliothèque, vous pouvez le sélectionner via les propriétés du Player.

Le script se lit ainsi : quand le bouton « Play » est cliqué, le Player démarre ; quand le bouton « Pause » est cliqué, le Player se met en pause ;

quand le bouton « Stop » est cliqué, le Player s’arrête.



« when Play .Click do » Play

« when Pause .Click do » Pause

« when Stop .Click do » Stop

« call Player1 .Start » Player1 « call Player1 .Pause »

« call Player1 .Stop »


COMPOSANTS SPEECHRECOGNIZER ET TEXTTOSPEECH


Modifiez le texte du Button1, écrivez « Parler »

Essayez ce script

Le composant SpeechRecognizer sert à la reconnaissance vocale. Vous pouvez l’inclure dans une application plus large de moteur de

recherche par exemple, ou pour verrouiller l’accès à un second écran vers une autre application (il s’agira alors d’un mot à reconnaitre et non

d’une voix). Ici nous l’avons associé au composant TextToSpeech : il permet à votre appareil d’émettre un son enregistré ou bien de lire la

phrase écrite préalablement.

Le script se lit ainsi : quand le bouton « Parler » est cliqué, déclencher la reconnaissance vocale. Quand la phrase a été prononcée, déclencher

le texte vocal et répéter la phrase enregistrée.




« call SpeechRecognizer1 .GetText »

SpeechRecognizer1 « when SpeechRecognizer1 AfterGettingText do »

« call TextToSpeech1 .Speak message » TextToSpeech1

« get result » Appuyez sur l’onglet “result” du bloc « when SpeechRecognizer1 AfterGettingText do »


COMPOSANT TEXTING


Modifiez le texte du Button1 par « Envoyer »

Essayez ce script

Le composant Texting vous permet de créer une application messagerie. Vous pouvez y ajouter la possibilité d’ajouter des émoticônes, des

sons, etc.

Le script est le suivant : quand le bouton « Envoyer » est cliqué, le texte de TextBox2 sera envoyé via l’application au numéro inscrit dans

TextBox1.




« set Texting1 – Message to »

Texting1 « set Texting1 – PhoneNumber to »

« call Texting1 .SendMessage »

« TextBox1 – Text » TextBox1

« TextBox2 – Text » TextBox2


COMPOSANT TINYDB


Modifiez les textes de vos buttons comme ci-dessous :

Essayez ce script

Le composant TinyDB sert à sauvegarder des données. Ici nous l’avons utilisé dans une forme très simple. Vous pouvez cependant complexifier

l’application, rajoutez des étiquettes (Label) pour sauvegarder vos données sur plusieurs lignes ou en faire un bloc note par exemple, ou bien

carrément l’inclure dans un petit jeu en tant qu’historique des scores.

Le script est le suivant : Quand le bouton1 est cliqué, le composant TinyDB s’active et enregistre ce qui a préalablement été entré dans la boite

de texte, et l’associe à un tag, une étiquette par laquelle il pourra retrouver l’enregistrement. L’étiquette (Label) affiche alors la ou les données

sauvegardées. Quand le bouton2 est cliqué, les données sauvegardées s’effacent et plus rien ne s’affiche sur l’étiquette.





« call TinyDB .StoreValue tag valueToStore »

TinyDB1

« call TinyDB .GetTags »

« call TinyDB .ClearAll »

« call TinyDB .GetsTag »

« TextBox1 - Text » TextBox1


« » Text


COMPOSANT NOTIFIER


Essayez ce Script

Le composant Notifier permet d’afficher des alertes où des bulles infos lorsque vous effectuez une action sur l’élément choisit. Par exemple ici

nous avons créé un bouton qui affiche « coucou » lorsque l’on appui longtemps dessus. Vous pouvez, par exemple, décréter qu’une info

s’affiche lorsqu’on appui longtemps sur ce bouton, et qu’une page s’ouvre si on clique normalement dessus.

Le script se lit ainsi : quand on appui longtemps sur le bouton, la notification s’active et un message d’alerte apparait et indique « coucou ». Vous

pouvez choisir l’action à effectuer pour afficher la notification (cliquer, passer dessus,…)



« when Button1 .LongClick do » Button1

« call Notifier1 .ShowAlert notice » Notifier1

«» Text


COMPOSANT DATEPICKER


Modifiez le texte du Label1

Essayez ces Scripts

Le composant DatePicker vous permet de sélectionner une date comme le permettrait une application d’agenda. Vous pouvez pousser la chose

un peu plus loin en associant, par exemple, une application ou une animation à une date particulière, ou inclure cette fonctionnalité à un projet

plus large.

Le script signifie qu’une fois le bouton DatePicker1 cliqué et la date sélectionnée, le texte du Label1 change pour afficher la sélection : à la

place de « Day », « Month » et « Year », il indique respectivement la date du jour, du mois et de l’année, tout en gardant les « / » qui facilitent la

lecture.



« when DatePicker1 .AfterDateSet do »

DatePicker1

« DatePicker1 .Day »

« DatePicker1 .Month »

« DatePicker1 .Year »

« set Label1 .Text to » Label1

« join » Text

« »


COMPOSANT WEBVIEWER

Cherchez vos composants dans la Palette à gauche, et faites les glisser dans votre interface (référez-vous à la carte « Utiliser les Layout» si besoin)

Renommez vos boutons (en appuyant sur Rename) ainsi que leur texte. Puis changez les propriétés HomeUrl du WebViewer (ici http://appinventor.mit.edu/explore/)

Essayez ces Scripts

Le WebViewer peut servir, simplement, à créer une application de moteur de recherche. Vous pouvez cependant l’inclure dans une application

plus complexe.

Ici, le script définit ce à quoi serviront les boutons. Les boutons « Back » et « Next » vous permettront – comme sur vos moteurs de recherche

habituels – de revenir en arrière ou en avant. Le bouton « Home » servira à revenir sur la homepage (la page qui s’ouvre par défaut lorsque

vous démarrer l’application : ici la page d’accueil de App Inventor 2) que vous avez définit dans les propriétés du WebViewer.


P.S. : Pensez à bien renommer vos trois boutons comme indiquer plus haut pour éviter les confusions (Home, Back, Next, sont nos trois

boutons).


« when Home .Click do » Home

« when Back .Click do » Back

« when Next .Click do » Next

« call WebViewer1 .GoHome » WebViewer « call WebViewer1 .GoBack »

« call WebViewer1 .GoForward »


COMPOSANST LISTPICKER


Modifiez le texte de la ListPicker (ici «Liste de sélection »)

Essayez ces Scripts

Le composant ListPicker permet de créer une liste de sélection. La sélection s’affiche à la place du texte du bouton ListPicker (ici « Liste de

sélection » sera remplacée soit par « sélection1 » soit par « sélection2 »).

Tout d’abord, il vous faudra créer une variable que vous pouvez appeler « list ». Celle-ci vous permettra de générer une liste que vous pouvez

définir (ici nous avons le choix entre « sélection1 » et « sélection2 » et nous n’avons que ces deux choix, mais vous pouvez modifier le nombre

de choix ainsi que les choix eux-mêmes). Ensuite, vous devez programmer le bouton. Celui-là cliqué, la liste apparait, une fois la sélection faite,

celle-ci s’affiche.

Vous pouvez inclure ce composant dans un jeu de devinette ou bien dans une application plus complexe que vous imaginerez.



« initialize global list to » Variables

« get global list »

« make a list » Lists

«» Text

« when ListPicker1 .BeforePicking do »

ListPicker1

« set ListPicker1 .Elements to »

« when ListPicker1 .AfterPicking do »

« set ListPicker1 .Text to »

« ListPicker1 .Selection »


COMPOSANT PASSWORDTEXTBOX


Modifiez les textes du Label1 et du Button1

Créez un second Screen

Essayez ce Script (vous pouvez modifier le mot de passe – ici « 123 »)

Le PasswordTextBox est un composant qui vous permet de programmer un mot de passe. Vous pouvez l’associer à de nombreuses

applications. Par exemple une application de journal intime, une application e-mail,…

Vous n’avez que quelques éléments : un bouton et une étiquette. Le script se lit ainsi : lorsque vous cliquez sur le bouton, si le mot de passe que

vous avez entré préalablement est « 123 », alors le second écran s’ouvre. Si en revanche vous n’avez pas entré le bon mot de passe, alors le

texte de l’étiquette change pour vous signaler que le mot de passe est erroné.




« if then else » Control

« open another screen screenName »

« PasswordTextBox1 .Text » PasswordTextBox1

« = » Logic

« » Text

« set Label1 .Text to » Label1

P.S.: Pour obtenir le bloc « if then else », sélectionnez la petite roue bleue sur le bloc « if then » et ajoutez une ligne comme ci-dessous :


COMPOSANT CAMERA


Essayez ce script

Avec le composant Camera, vous pouvez, via une application plus complexe que vous aurez imaginé, prendre et afficher une photo. Incluez

cette fonctionnalité dans une application de dessin par exemple.

Le script est le suivant : quand vous cliquez sur le bouton, l’appareil photo démarre et oriente la caméra vers vous. Une fois la photo prise, elle

s’affiche dans votre application à l’emplacement réservé à l’image.




« call Camera1 .TakePicture » Camera1

« when Camera1 .AfterPicture do »

« set Image1 .Picture to » Image1

« get image » Cliquez sur l’onglet « image » du bloc « when Camera1 .AfterPicture do »


COMPOSANT SPINNER


Modifie les propriétés du Spinner comme ci-dessous

Essayez ce script

Un Spinner est un dérouleur à choix multiple. Vous pouvez définir les choix dans la partie Designer, dans les propriétés de votre Spinner. Le

script se lit ainsi : après avoir fait un choix dans le dérouleur, l’étiquette affiche la sélection.

Vous pouvez, par exemple, inclure ce composant dans un jeu de devinette.



« when Spinner1 .AfterSelecting do » Spinner1

« set Label1 . Text to » Label1

« get selection » Cliquez sur l’onglet « selection » du bloc « when Spinner1 .AfterSelecting do »



Modifiez les valeurs de vote Slider (ici il ira de 0 à 10)

Essayez ce Script

Un Slider est une jauge qui s’accompagne d’une échelle (ici de 0 à 10). C’est un composant qui peut s’avérer utile pour gérer le son, la

luminosité ou même la difficulté d’une application ou d’un jeu.

Le script est le suivant : quand vous changez la position du curseur avec le doigt, l’étiquette indique celle-ci en se basant sur l’échelle que vous

avez préalablement définit (dans la partie Designer).



« when Slider1 .PositionChanged do » Slider1

« Slider1 . ThumbPosition »

« set Label1 . Text to » Label1


COMPOSANTS LAYOUT

Dans Palette / Layout, choisissez votre disposition (HorizontalArrangement, VerticalArrangement ou TableArrangement) et faites la glisser dans votre interface. Choisissez ensuite vos éléments que vous ferez glisser dans l’Arrangement (ici trois boutons). Ici nous avons choisit HorizontalArrangement, les boutons sont maintenant alignés sur la même ligne (voir interface à gauche).

Documents

Cherchez vos composants dans la Palette à gauche, et faites les … · 2020. 3. 26. · une application plus compliquée de carte au trésor qui utilisera le Gps par exemple (notez