Tutoriel – App Inventor : Talk To Me

Étape 1 : Partie Designer

Vous pouvez télécharger la fiche complète au format PDF ici.

1. Pour commencer, allez sur le site App Inventor

Allez sur le site http://appinventor.mit.edu/ et cliquez sur le bouton “Create”.

2. Se connecter avec un compte Gmail

Utilisez un compte Gmail pour vous connecter à App Inventor, vous pouvez également en créer un.

3. Cliquez sur “New Project”

4. Nommer son application

Ecrivez dans la zone de saisie le nom de votre projet (les underscores sont autorisés mais pas les espaces) et cliquez sur OK

5. Vous voici dans la partie Designer où vous arrangez la partie graphique de votre application

La partie “Designer” est l’endroit où vous pouvez définir l’apparence de votre application ainsi que les fonctionnalités dont elle dispose. Vous choisissez les éléments pour l’interface utilisateur comme dès les boutons, les images, zone de texte mais également les fonctionnalités comme le Text-toSpeech, les senseurs (sensors) ou encore le GPS :

6. Ajouter un bouton

Notre projet nécessite un bouton et pour cela, il faut cliquer sur le mot « Button » dans la palette et rester appuyé tout en glissant vers la zone centrale « Viewer », lorsque vous y êtes, relâchez le bouton et votre bouton devrait apparaître dans la zone de rendu :

7. Connecter App Inventor à votre appareil pour les tests

Une des choses très pratique avec App Inventor, c’est la possibilité de pouvoir tester l’application en direct sur un appareil connecté. Si vous avez un téléphone ou une tablette sous Android, suivez les instructions suivantes : sinon allez sur setting up the on-screen emulator pour configurer l’émulateur

 

8. Pour télécharger directement AI2 Companion App sur votre appareil (sauter cette étape si vous l’avez récupéré par le Play Store)

Si jamais vous n’arrivez pas à vous connecter sur le Google Play Store, vous pouvez télécharger l’application en suivant les étapes ci-dessous.
Premièrement allez dans les paramètres de votre téléphone et dans la partie sécurité, permettez l’installation d’application de source inconnue (qui ne provienne pas directement du Play Store comme par exemple l’application que vous allez créer).
Deuxièmement vous pouvez choisir une des deux méthodes suivantes :
A) Scan the QR code ci-dessous
ou
B) Cliquez sur « Need help finding… » et vous arriverez sur la page de téléchargement, de là
téléchargez l’application sur votre ordinateur, puis transférez la sur votre appareil. Enfin lancez l’installation.

 

9. Lancer AI2 Companion sur votre appareil

Cliquez sur l’icône MIT AI Companion pour lancer l’application.
Attention : Votre téléphone /tablette doit être connecté au même réseau wifi que votre ordinateur pour que l’application fonctionne, si vous ne pouvez pas vous connecter au wifi, allez dans la partie instruction du site App Inventor et cherchez « How To connect with a USB cable »

 

10. Récupérer le code de connexion depuis App Inventor et le scanner (ou le recopier) avec l’application

Dans le menu « Connect » de App Inventor, choisissez « AI Companion ».
Vous pouvez vous connecter soit :
1- En Scannant le QR code
Ou
2- En recopiant le code dans la zone de texte

 

11. Votre application sur votre appareil

Si la connexion s’est correctement établie, vous devriez voir votre application sur l’écran de votre appareil. D’ailleurs si vous changez quelque chose sur votre projet, cela changera automatiquement sur votre téléphone.

12. Changer le texte du bouton

Dans la partie « Properties », aller sur la zone de saisie « Text » et remplacer « Text for Button1 » par « Talk To Me »

13. Ajouter l’élément TextTo Speech

Allez dans la partie « Média » de la « Palette » et faites glisser l’élément Text To Speech dans votre application. C’est un élément non visible : il n’apparaît pas dans l’interface utilisateur

Étape 2 : Animer la partie block/ Programmation

1. Passer dans la partie “Blocks”

Il est temps de dire à votre application quoi faire. Cliquer sur le bouton « Blocks » pour passer dans la partie édition. Voyez les boutons « Designer » et « Blocks » comme des onglets entre lesquels on peut naviguer pour s’occuper de la partie graphique et de la partie programmation.

2. L’éditeur de Bloc

La partie « Blocks » est là où vous allez programmer votre application. Cela se présente sous la forme de blocs à assembler. Il en existe 2 types :
Les blocs Built-in (natif) : qui sont toujours disponible Text, Logic, Math etc…
Les blocs de composants : qui dépendent des composants de votre application

3. Programmer votre bouton

Cliquez sur « Button 1 » pour afficher les différents blocs relatifs à ce bouton et prenez le bloc
« When Button 1.click, do » qui permet de définir ce que doit faire l’application si on clique sur le bouton

4. Programmer le Text To Speech

Cliquer sur Text To Speech et faites glisser « Call TextToSpeech1.Speak » à l’intérieur du bloc
précédent. Lorsque le bouton sera cliqué, il faudra donc appeler le TextToSpeech et lui faire dire…
Rien pour l’instant.

5. Choisir quoi dire

Pour lui faire dire quelque chose, il va falloir aller dans l’onglet « Text », et prendre le premier bloc, comme vous pouvez le voir, il est vide donc n’hésitez pas à le compléter selon vos envies !

 

6. Maintenant, l’instant de vérité…

Reprenez votre appareil et c liquez sur le bouton (soyez sur que les haut-parleurs sont allumés).
Si cela ne fonctionne pas, n’hésitez pas à reconnecter votre appareil comme vue précédemment.

 

Bien joué !

Vous avez programmé votre première application