Les blocs logiques

1. Control (Contrôle)

Dans les descriptions ci-après, nous avons choisi de traduire les instructions en français.

1. Composant Screen (écran)

Événements associés à l’écran

BackPressed()

Cet événement permet de déclencher une suite de commandes lorsque le bouton retour de votre mobile est appuyé. En général, on recourt à ce bloc de commande pour retourner à un écran précédent ou fermer l’application. Un exemple de bloc à construire pourrait être :

Ce code peut par exemple être inséré sur le premier écran d’une application. Ici, lorsque nous appuyons sur le bouton retour de notre mobile, un message sous forme de pop-up apparaît pour nous demander si nous souhaitons quitter l’application. Si nous répondons Yes alors l’application se ferme.

ErrorOccured()

Cet événement est à conseiller pour les utilisateurs avancés, lorsque votre application rencontre une erreur, par exemple un souci de connexion avec une base de données ou avec un autre appareil, vous pouvez créer une suite de commandes qui vous permettra de connaître les caractéristiques de l’erreur rencontrée et ainsi de pouvoir trouver des pistes de résolution.

Initialize()

Probablement l’une des fonctions les plus utilisées pour l’écran. Elle permet d’indiquer les commandes que vous voulez voir exécuter lorsque l’application se lance. Par exemple dans l’application ci-dessous :

Lorsque l’écran est chargé, alors le fond d’écran prend la valeur personnalisée indiquée....

1. Camcorder

RecordVideo

Comme son nom l’indique, cette fonction vous permet d’enregistrer une vidéo depuis votre smartphone en utilisant la fonction intégrée à celui-ci ; par exemple, le code ci-dessous déclenchera le composant vidéo à l’ouverture de l’écran :

Ce qui donnera :

AfterRecording

Cet événement vous permet de connaître le chemin d’accès à la vidéo (représentée par une variable du nom de clip) que vous venez d’enregistrer et qui est donc stockée dans votre téléphone ; par exemple, si vous écrivez le code suivant :

Ici, nous demandons à afficher le chemin d’accès à la vidéo enregistrée par notre smartphone ; nous obtenons :

Cet événement peut vous paraître ici d’un intérêt limité, mais si nous l’associons à un lecteur de vidéo, nous obtiendrons la lecture de la vidéo que nous venons d’enregistrer.

2. Camera

Le composant Camera offre exactement les mêmes fonctionnalités que le composant Camcorder, nous n’allons donc pas les détailler à nouveau, la seule différence est qu’au lieu de faire appel à la caméra vidéo, il fait appel à l’appareil photo :

3. ImagePicker

AfterPicking

Cet événement se déclenche une fois qu’une image a été sélectionnée.

BeforePicking

Cet événement se déclenche une fois que vous avez cliqué sur le bouton ImagePicker mais avant qu’une image ait été sélectionnée.

GotFocus

Cet événement se déclenche lorsque le composant ImagePicker est sélectionné au détriment d’un autre.

LostFocus

Cet événement se déclenche lorsque le composant ImagePicker est désélectionné au détriment d’un autre.

TouchDown

Cet événement se déclenche lorsque le bouton est appuyé.

TouchUp

Cet événement...

1. Canvas

Clear

Cette méthode permet d’effacer tout ce qui est écrit sur le canvas (cadre).

DrawCircle centerX centerY radius fill

Cette fonction permet de tracer un cercle sur le canvas (cadre) dont le centre sont les coordonnées X et Y que vous mentionnez. Radius fait ici référence au rayon du cercle en pixels, et fill indique si vous souhaitez que celui-ci soit rempli ou non. Ainsi, lorsque vous écrivez cela :

Vous obtenez :

DrawLine x1 y1 x2 y2

Permet de tracer une ligne en fonction des coordonnées x1 y1 et x2 y2 que vous lui indiquez.

Exemple :

Ce qui donne :

DrawPoint x y

Comme le nom de cette méthode le suggère, elle permet de tracer un point sur le canvas dont les coordonnées sont x y. Nous n’allons pas détailler davantage l’utilisation de cette fonction.

DrawText text x y

Comme son nom l’indique, cette méthode permet d’afficher un texte sur le canvas qui commencera dès les coordonnées x et y. Par exemple, le code suivant :

Donnera :

DrawTextAtAngle text x y angle

Permet d’écrire un texte incliné en fonction de l’angle d’inclinaison que vous lui indiquez en degrés, exemple :

Ce qui donnera :

GetBackgroundPixelColor x y

Permet de récupérer la couleur de fond des coordonnées x et y indiquées.

GetPixelColor x y

Permet de récupérer la couleur du point x et y indiqué.

Save

Permet de sauvegarder le canvas dans votre smartphone. Les noms de fichier par défaut sont en général de type : app_inventor_XXXX.png

SaveAs fileName

Permet de sauvegarder le canvas en indiquant le nom de fichier que vous souhaitez lui donner.

Voici un exemple d’application :

Grâce à cette application, chaque clic effectué sur un bouton permet l’enregistrement du canvas dans une image différente. La première image portera le nom de Picture1.jpg, la deuxième Picture2.jpg et ainsi de suite.

Pour rappel, vous...

1. AccelerometerSensor

Le composant Accéléromètre (AccelerometerSensor) ne possède que deux événements :

AccelerationChanged

Cette fonction permet d’indiquer si le smartphone a bougé de position en fonction des coordonnées x, y et z. Il s’agit d’un composant très sensible. En réalisant l’application suivante :

vous verrez que les coordonnées x, y, z de votre téléphone changent en continu même quand celui-ci est immobile :

Shaking

Cette fonction permet d’indiquer que vous êtes en train de secouer le téléphone. Nous pourrions imaginer l’application suivante :

qui affichera à l’utilisateur un message lui indiquant que le téléphone est secoué ou a été secoué :

2. BarcodeScanner

DoScan

Cette fonction permet d’activer votre appareil photo et en même temps utilise une fonctionnalité de reconnaissance d’image. Si cette image paraît ressembler à un code-barres alors l’application réagira. Par exemple, si vous réalisez l’application suivante :

celle-ci lancera la fonctionnalité de scan de code-barres dès l’ouverture de l’application.

AfterScan

Cet événement permet de renvoyer le résultat obtenu par le scan du code-barres ; par exemple, cette application :

va renvoyer le numéro du code-barres. Il faudra utiliser une base de données pour faire correspondre les numéros envoyés avec des références.

Par exemple :

Dans le cas de cette application, si le résultat obtenu par le scan du code-barres correspond au numéro indiqué alors des informations spécifiques à celui-ci seront affichées :

Ici, il s’agit du numéro ISBN du livre dont le titre apparaît.

Les propriétés

Result

Permet d’obtenir la valeur renvoyée par le scan effectué.

UseExternalScanner

Par défaut App Inventor 2 utilisera son propre programme de scan. Si vous souhaitez en utiliser un autre, il vous suffit de définir la valeur de UseExternalScanner à false. Le mieux pour se rendre compte de la différence entre le programme de scan d’App Inventor 2 et celui de votre...

1. ContactPicker

Événements

Les événements supportés par ContactPicker ont déjà été évoqués par le passé, nous n’allons pas les détailler à nouveau mais sachez que ce composant supporte les événements suivants : AfterPicking, BeforePicking, GotFocus, LostFocus, TouchDown, TouchUp.

Méthodes

Open

Cette fonctionnalité va ouvrir le carnet de contacts de votre smartphone.

Exemple avec l’application suivante :

Un simple clic sur le bouton ContactPicker vous affichera la liste des contacts de votre téléphone.

ViewContact uri

L’URI contact d’Android correspond à l’emplacement sur votre téléphone du contact que vous avez sélectionné. Pour pouvoir afficher l’URI d’un contact en particulier vous pouvez, par exemple, procéder de la manière suivante :

Lorsque nous appuierons sur le bouton ContactPicker, nous obtiendrons donc l’URI du contact sur notre appareil :

Ainsi, si nous réalisons une application de ce type :

Un simple clic sur le bouton ContactPicker nous permettra d’accéder à la fiche contact sur votre mobile :

Propriétés

Les fonctionnalités offertes par le composant ContactPicker vous permettent de récupérer les principales informations telles...

1. File

Différentes fonctionnalités vont être proposées par l’intermédiaire de ce composant. Ce qu’il faut surtout retenir ici, c’est que le fichier doit être sauvegardé avec un slash / devant afin que celui-ci soit enregistré au sein de la carte SD de votre téléphone et de le faire terminer par une extension en .txt pour que celui-ci soit considéré comme un fichier texte.

Afin de pouvoir tester ce composant, vous pouvez facilement répliquer le programme suivant :

Que permet de faire cette application ?

Lorsque l’utilisateur saisit du texte dans le composant intitulé SaisieTexte et appuie sur le bouton Envoyer, cela écrit dans un fichier appelé ExempleStockageFichierTexte qui se trouve sur la carte SD du téléphone.

En cliquant sur Récupérer, le contenu du fichier sera affiché à l’écran de l’utilisateur.

2. FusiontablesControl

Les tables de fusion sont un type de base de données de Google. Cela permet notamment de les intégrer facilement à un site Internet.

App Inventor 2 propose un très bon tutoriel en anglais (http://appinventor.mit.edu/explore/ai2/pizzaparty.html) montrant la puissance de ce composant. Dans notre cas de figure nous allons réaliser un tutoriel un peu plus succinct afin de vous montrer les fonctionnalités principales :

Notre tutoriel va consister à créer une application permettant d’indiquer via une application, qu’une personne est présente ou non à un endroit donné, en renvoyant le résultat sur un site Internet. 

La première chose à savoir avec les tables de fusion, c’est qu’il s’agit d’un service de Google que vous trouverez directement dans Google Drive :

Comme vous pouvez le constater avec l’image ci-dessous, il s’agit ni plus ni moins que d’un simple tableur, un peu à la manière de Google Sheets...

1. ActivityStarter

Le composant ActivityStarter permet de lancer d’autres applications de votre appareil à partir d’App Inventor 2. Vous pouvez également émettre et recevoir des données depuis ces autres applications. 

Afin de l’illustrer, nous allons créer deux applications, la première va afficher une phrase, la seconde (qui utilisera le composant ActivityStarter) va lancer la première.

Voici le code de notre première application :

Comme vous pouvez le voir, cette application n’est là que pour afficher un message.

Afin de pouvoir travailler avec le composant ActivityStarter vous aurez besoin de deux éléments :

Une fois cette application installée, vous verrez qu’au lancement de celle-ci, elle vous redirigera directement vers la première. Félicitations, vous maîtrisez les bases du composant ActivityStarter.

Vous pouvez également utiliser les applications natives fournies avec votre appareil. C’est notamment le cas de l’application YouTube.

Par exemple, l’application suivante lancera directement une vidéo YouTube :

Ici, les propriétés Action indiquent l’utilisation d’un navigateur ; DataUri, l’URL à laquelle vous souhaitez que le navigateur accède.

2. Bluetooth

Qu’est-ce que le Bluetooth ?

Bluetooth est un standard de communication permettant l’échange bidirectionnel de données à très courte distance, de l’ordre de quelques mètres, utilisant...

1. FirebaseDB

Evénements

DataChanged

Probablement la fonctionnalité la plus puissante de ce composant. Elle permet d’enregistrer le fait que la valeur dans la base de données associée à un tag a changé.

Cela signifie que concrètement vous pouvez mettre à jour en temps réel une donnée d’une application client en fonction d’une autre application client. Imaginons une application dans laquelle un tag appelé "score" a changé car un joueur a battu le record alors le joueur 2 verra ce nouveau score. En effet, lorsque le joueur 1 a battu le record, ce score a été envoyé à la base de données de Firebase qui, elle, a mis à jour le score. L’application de joueur 2 a vérifié à un moment donné que ce score a été mis à jour et l’a affiché en conséquence.

Imaginons un jeu dont le fonctionnement est le suivant :

Nom de l’application : Chrono Game

Objectif du jeu : Arrêter le chronomètre le plus proche de la valeur 100

Fonctionnement du jeu : Lorsqu’on clique sur le bouton...