Il y a plusieurs manières de configurer App Inventor. Nous vous recommandons au minimum d'installer l'application" AI2 companion" sur votre smartphone, ça prend 5 mn et ça marche très bien (voir configuration rapide). Ce n'est pas la peine d'en faire plus si vous travaillez sur un réseau comme le Wifi de votre domicile.

Par contre ça ne marche pas toujours sur des réseaux comme celui des collèges, hotels, ... Nous décrirons donc des configurations utiles lorsque votre smartphone est le seul moyen d'accès à Internet ou que le réseau Wifi applique des restrictions particulières.

App Inventor est une application "cloud" (i.e. qui s'exécute principalement sur le réseau). La partie qui tourne sur votre ordinateur est "entièrement" à l'intérieur de votre navigateur. Chrome, Firefox ou Safari sont recommandés. Vérifiez que vous avez une version récente du navigateur choisi.

App Inventor est un exemple d' Environnement de Développement Intégré (IDE). Ca veut dire qu'il intègre tous les logiciels nécessaires pour concevoir, développer et tester une application nomade sur Android. Les IDEs font partie de la "boite à outils" standard des programmeurs.

Configuration rapide (recommandée)

Cette vidéo décrit comment configurer rapidement votre ordinateur et votre mobile et comment importer des applications enregistrées sur internet ou votre PC. Cette configuration fonctionne si le PC et le smartphone sont sur le même réseau Wifi et sont autorisés à communiquer entre eux sur ce réseau.

Configuration complète (optionnelle)

Le guide d'installation décrit quatre options (complémentaires) pour développer des applications. Pour l'installation, si vous êtes à l'aise en anglais il est préférable d'utiliser le site App Inventor du MIT. Une version française est proposée (sans garantie de mise à jour) sur ce site avec les liens suivants pour les différentes options d'installation :

• Wifi: Connection par Wifi de la tablette or du smartphone Android, (installation rapide)
• USB: Connection avec un cable USB de la tablette or du smartphone Android,
• Emulateur Android : Utilise un simulateur logiciel de matérile Android. Ce simulateur tourne sur votre ordinateur et permet de tester vos applications.
• l'émulateur Genymotion (recommandé !)
• ou d'autres émulateurs

L'installation de la configuration qui permet des développements interactifs avec une connexion USB est décrite ici. Nous vous recommandons de faire cette installation par sécurité. Cette configuration vous sera très utile en cas de défaillance du réseau principal.

En milieu scolaire, si tous les élèves ne disposent pas d'un smartphone ou d'une tablette, vous pouvez installer une 3° configuration avec un émulateur Android.
Pour suivre ce cours dans de bonnes conditions, l'idéal est d'avoir une tablette ou téléphone par personne, mais on peut parttager et le travail se fait souvent à deux. (Dans la pratique j'ai rarement utlisé cette configuration en cours).
L'intérêt de cette configuration est de pouvoir tester le fonctionnement d'une application sur une variété de smartphones,par contre certaines fonctions (dont celles liées aux capteurs) fonctionneront assez mal avec l'émulateur.

Après avoir terminé l'installation, vous pouvez utiliser l'application test ci-dessous pour vérifier que tout fonctionne correctement.

Tester votre installation

1. Télécharger TestApp.aia, le projet de test d'AppInventor en vous rappelant à quel endroit le fichier est enregistré sur votre ordinateur (souvent le répertoire " Téléchargements" de votre bureau).

2. Ouvrir App Inventor 2. Cliquez sur "continue", si une fenêtre "Welcome to App Inventor" s'affiche en popup.
   (Il est parfois nécessaire de remonter vers le haut de la fenêtre en utilisant l'ascenceur à droite, pour faire apparaitre les commandes qui sont en haut de la fenêtre).

3. Choisir la langue :
   Le choix de la langue se fait en haut à droite de l'écran, immédiatement à gauche du login.
   Vous pouvez choisir le français ou rester en anglais. Vous pouvez également lancer App Inventor directement en français avec

   http://ai2.appinventor.mit.edu/?locale=fr_FR

   Note sur le choix de la langue :

   Pour éviter la barrière du vocabulaire (qui est réelle au départ), ce cours est en français, y compris les programmes. Nous suggérons de passer à l'anglais lorsque la signification des blocs ne présente plus de difficulté (la documentation en ligne est en anglais).

4. Cliquez sur l'onglet "Projets" ou "Projects".

5. Sélectionnez Importer le Projet (.aia) de mon ordinateur.

6. Naviguez dans les répertoires et sélectionnez le projet TestApp.aia que vous venez de télécharger.

Quand le projet s'ouvre, la partie Designer de App Inventor est affichée.

Le Designer est l'endroit où vous concevez l'interface utilisateur de votre application. Dans l'exemple ci-dessus, l'application contient une image (pour l'instant affichée en icône), deux labels pour afficher un texte, et un composant Player avec lequel on va jouer les sons.

Maintenant, basculons vers l'affichage de l'éditeur de blocs en cliquant en haut à droite sur le bouton "blocs".

L'éditeur de blocs est l'endroit où on va coder. Remarquez que les blocs d'App Inventor se raccordent entre eux comme des pièces de puzzle. Les blocs de cette application vont afficher un message de félicitations à l'écran et jouer un son.

Ca y'est vous êtes sur votre chemin de programmeur !
Dans la prochaine leçon, vous apprendrez comment naviguer entre les différentes vues (designer et éditeur de blocs), à quoi sert chacune d'elles, comment on fait le design d'une appli et comment on la programme.

Exécuter une application sur votre tablette via Wifi

Pour l'instant, notre objectif est uniquement de vérifier que l'installation et la configuration sont correctes. Pour le vérifier, suivez les instructions suivantes :

1. Vérifiez que votre ordinateur et votre tablette ou votre téléphone sont connectés au même réseau Wifi, puis démarrez l'appli " MIT AI2 Companion app" sur votre tablette ou téléphone.
2. Dans la barre en haut de l'application App Inventor, sur votre ordinateur cliquez "Connecte" puis sélectionnez Compagnon AI. Une fenêtre apparaitra avec un flash code et un code de 6 lettres en clair. (Note: Le code de 6-lettres sera différent à chaque fois. Celui illustré ci-dessous ne marchera pas.)

   

3. Sur votre appareil (tablette ou téléphone) lancez l'application AI2 companion, puis
   • scannez le flash code en appuyant sur le bouton "scan QR code",
   • ou tapez le code de 6 lettres et cliquez sur le bouton “Connect with code”.

Exécuter une application sur votre tablette via une connexion USB

Pour le guide d'installation, rendez-vous ici et suivez les étapes 1 à 6.

Exécuter une application avec l'émulateur

si vous utilisez un émulateur, les étapes sont les suivantes:

1. Dans App Inventor (sur votre ordinateur), cliquez "Connecte" puis sélectionnez Emulateur.

2. Ceci connectera automatiquement l'application à l'émulateur. Il n'y a pas besoin de scanner le flashcode, ni d'entrer le code de 6 caracères. La connection se fera automatiquement.

Dépanner

Si la configuration est correcte, vous devriez voir l'application test fonctionner sur le smartphone ou l'émulateur. Vous devriez voir un message, une image d'Android et entendre un tonnerre d'applaudissements.

Si l'appli ne fonctionne pas correctement, vous devrez vérifier les étapes de l'installation, et si malgré tout vous n'y arrivez pas, consultez le forum et postez une question si nécessaire.
Pour les écoles, consultez l'administrateur réseau. La connection via USB est souvent une solution de secours en milieu scolaire ou publics.