# data[].attributes.attachment_link.title
MIT App Inventor for iOS on the App Store

# data[].attributes.attachment_link.title
Explication - 1 - Internet ! Comment ça marche ?

# data[].attributes.attachment_link.title
App Inventor : Scan du code barre d'un livre et recherche de son titre sur le Web

# data[].attributes.attachment_link.description
App Inventor Foundation Get Started Documentation Support and community Tutorials Books Open Source Information Research Hour of Code Additional Resources

# data[].attributes.body
Paint

# data[].attributes.attachment_link.readable_text
Présentation :

Cette application est un grand classique. Elle consiste à dessiner dans un cadre. C'est un bon point de départ avec App Inventor.
La version ci-dessous est inspirée de celle du Pr Wolber.
Pour commencer, vous dessinerez des lignes et points de différentes couleurs et épaisseurs, puis vous prendrez une photo et l'afficherez comme fond du dessin.

Ce que vous allez faire :

Vous allez réaliser cette application avec les fonctions suivantes :

dessiner des points en touchant l'écran,

tracer des lignes en glissant le doigt sur l'écran,

choisir la couleur en cliquant sur le bouton correspondant,

effacer votre dessin,

changer la taille des points et l'épaisseur des lignes,

et prendre un photo pour l'afficher en fond d'écran du dessin.

Ce que vous allez apprendre :

Ce tutoriel vous conduira à :

définir une application par la manière dont elle réagit à une liste d'évènements
(programmation évènementielle ou event driven programming),

choisir les composants dont vous avez besoin et les mettre en page (Design)

des boutons pour choisir les couleurs, l'épaisseur du trait, effacer ou prendre une photo,

un cadre (canvas) pour dessiner et afficher la photo,

des arrangements horizontaux pour mettre en page,

un appareil photo (camera).

décrire ce que doit faire l'application pour chaque évènement puis coder ce comportement dans un script associé à cet évènement,

définir et utiliser des variables, par exemple pour la taille des points.

Ressources en entrée :

Pour cette application, connectez vous au site app Inventor http://ai2.appinventor.mit.edu/?locale=fr_FR et créez un nouveau projet appelé Paintpot. Si vous êtes en groupe, ajoutez vos initiales à la fin, par exemple Paintpot_PH ou suivez les indications de votre animateur.

Réalisation

Décomposition fonctionnelle :

Les fonctions de cette application sont :

1. tracer des points en cliquant dans le cadre,

2. dessiner des lignes en glissant le doigt dans le cadre,

3. changer la couleur avec les boutons,

4. effacer avec un bouton,

5. changer l'épaisseur des lignes et la taille des points,

6. prendre une photo et afficher l'image.

Design de l'application :

Nous allons commencer par définir la partie de l'application qui est visible à l'écran, et choisir toutes les ressources nécessaires à son fonctionnement.

Nota : Vous pouvez connecter votre smartphone ou votre tablette dès cette étape (mais ce n'est pas obligatoire).
Sur votre PC, la fenêtre de Design App Inventor vous donne une bonne indication du look de votre application. Si vous connectez votre smartphone, vous verrez son aspect exact.
La manière de vous connecter est décrite dans les leçons de démarrage (vous pouvez vous y reporter). Pour mémoire : sur votre PC, dans l'onglet connecte en haut à gauche de la fenêtre sélectionnez compagnon AI, et sur votre smartphone, lancez l'appli AI2 companion puis scannez le flashcode (vous devez être sur le même réseau Wifi).

Créer trois boutons pour le choix des couleurs

Depuis la colonne de gauche, et l'onglet "Interface Utilisateur", glissez/déplacez un Bouton dans la fenêtre. Puis, dans la partie droite, renommez le bouton en BoutonRouge, et modifiez ses propriétés dans la colonne de droite : mettez le texte à "Rouge", la couleur de fond du bouton à rouge, la taille et la hauteur à automatique.

idem pour les 2° bouton en bleu et le 3° bouton en vert.

Il est important que le nom des composants permette de savoir à quel type ils appartiennent (bouton, cadre, ...) et leur rôle. Si vous ne le faites pas dans cette phase de Design, vous ne vous en rappellerez plus pendant la programmation des blocs. Soignez votre style, un programme bien écrit doit être facile à lire par des personnes qui ne l'ont pas écrit.
Arranger horizontalement les boutons

On souhaite que les boutons soient disposés horizontalement plutôt que verticalement :

depuis la catégorie Disposition glissez/déplacez un arrangement horizontal dans la fenêtre,

renommez cet arrangement ArgtHorCouleurs,

modifiez la largeur en remplir parent et l'alignement horizontal en centrer,

puis avec la souris, déplacez les trois boutons dans l'arrangement horizontal.

Testez votre application sur votre téléphone en mode connect.

Ajouter un cadre pour le dessin et l'image

1. Depuis la catégorie Dessin et animation glissez dans la fenêtre un composant cadre. Renommez le composant enCadreDessin, mettez sa largeur à remplir parent et sa hauteur à 320 pixels.
Nota : Lorsque la propriété sizing de Screen1 est à fixed la largeur de l'écran est de 320 pixels et sa hauteur 480. Si vous passez à responsive, la résolution sera celle du téléphone. Alors, il vaut mieux choisir les tailles en pourcentage.

2. Mettez la couleur de dessin du cadre à rouge, qui sera la couleur initiale,

3. Vous pouvez importer une image au format jpeg ou png et la choisir comme fond en cliquant dans la fenêtre de la propriété image de fond. Choisissez une image de petite taille, (quelques centaines de pixels en largeur et hauteur) à peu près carrée pour correspondre au facteur d'aspect du cadre.
Ici nous avons choisi sur internet une image de BSF, retaillée avec Paint à 320x 320 pixels.
Créer et mettre en page les boutons de dessin et pour la photo :

depuis la catégorie Disposition glissez/déplacez un arrangement horizontal dans la fenêtre, sous le cadre image

renommez cet arrangement ArgtHorDessin, et mettez sa largeur à remplir parent et son alignement horizontal en centrer,

créez quatre boutons dans cet arrangement par glisser/déplacer depuis la catégorie Interface utilisateur et nommez ces boutons : BoutonPrendrePhoto, BoutonEffacer, BoutonGrosTrait, BoutonTraitFin,

Notez que le nom de ces composants permet de savoir que ce sont des boutons et qu'il permet d'avoir une bonne idée de ce qu'il fait. Par aileurs, notez qu'il n'y a pas de blanc et qu'il est d'usage de mettre une majuscule au début de chaque mot dans le nom, ce qui permet de le lire facilement.

si vous le souhaitez, vous pouvez importer des icônes en image de fond des boutons. Choisissez les de petite taille 32x32 ou 64 x64. Vous devrez également fixer leur hauteur et largeur en pixels, pour harmoniser,

ajoutez un composant Caméra depuis la catégorie de media. Ce composant n'a pas d'interface visible, il apparait en-dessous de la fenêtre.

Vérifiez le résultat sur votre téléphone ou tablette (Si vous étiez connectés, il est possible que la connection ait été rompue, vous devrez peut-être la relancer). Le résultat devrait avoir cet aspect là :

La partie design est à présent terminée, elle a conduit au choix et à la mise ne page de la liste des composants rappelés ci-dessous, avec leur rôle :

Screen1

Composant parent obligatoire

Alignement horizontal : centrer

AppName : PainPot

Orientation écran : portrait

Icône : néant ou petite image importée dans des les Média.

Arrangement horizontal

Disposition

ArgtHorCouleurs

Encapsule les boutons pour la couleur

Hauteur : automatique

Largeur : remplir parent

Alignement horizontal : centrer

Arrangement
horizontal

Disposition

ArgtHorDessin

Encapsule les boutons pour la couleur

Hauteur : automatique

Largeur : remplir parent

Alignement horizontal : centrer

Programmation :

Après avoir défini l'aspect visuel de l'application et les ressources qu'elle utilise (la caméra), nous allons maintenant pogrammer le comportement de l'application avec des séquences blocs appelés scripts.
Chaque script commence par un évènement et définit le comportement de l'application quand cet évènement se produit. C'est ce que l'on appelle la programmation évènementielle ou event driven programming. Chaque évènement est associ à un gestionnaire d'évènement ou event handler qui correspond - dans App Inventor - aux blocs de couleur beige. (Les blocs verts sont des propriétés, avec une valeur, et les blocs violets sont des fonctions ou procédures ou fonctions).

La liste des évènements disponibles pour la programmation est la liste des évènements de tous les composants que l'on a mobilisé dans la partie design, en l'occurence pour les composants Screen1, les boutons,le Cadre, et la caméra. Vous pouvez les voir en début de liste quand vous sélectionnez un composant dans la colonne de gauche :

Reprenons la liste des fonctions vues au départ, etréécrivons les avec les évènemenst dipsonibles :

Fonction

Evènement et action

Dessiner des points en touchant l'écran,

Quand CadreDessin.Touché dessiner un point aux coordonnées touchées,

Tracer des lignes en glissant le doigt sur l'écran,

Quand CadreDessin.Glissé dessiner une ligne entre le point précédent et le point courant,

Choisir la couleur en cliquant sur le bouton correspondant,

Quand BoutonRouge.Clic mettre la couleur du dessin à rouge,
idem pour BoutonBleu et BoutonVert.

Effacer le dessin,

Quand BoutonEffacer.Clic effacer le dessin,

Changer l'épaisseur des lignes et la taille des points,

Quand BoutonGrosTrait.Clic mettre l'épaisseur du trait et la taille du point à une valeur forte (à ajuster)

Prendre un photo et l'afficher en fond d'écran pour le dessin.

Quand BoutonPrendrePhoto.Clic appeler la fonction qui prend une photo. Mais ça ne va pas suffire, il faudra récupérer et afficher la photo, .... on verra ça un peu plus loin.

Pour passer à la programmation du comportement de l'applicataion, vous devez passer de la partie Design à la partie Blocs en cliquant sur le bouton Blocs en haut à droite de la fenêtre.

Les scripts du programme seront dans la partie centrale. On va les construire en glisssant des blocs depuis la colonne de gauche où on retrouve les composants définis dans la partie Design. Les blocs disponibles pour chaque composant apparaissent quand on clique sur le composant dans la colonne de gauche. Dans l'exemple ci-dessus, on a sélectionné le composant CadreDessin et la liste des blocs disponibles dans ce composant sont affichés pour que l'on puisse choisir celui que l'on veut : les évènements puis les procédureset les propriétés. Tout script devant commencer par un évènement.

Dessiner un point quand le cadre est touché :

Dans le bloc correspondant à l'évènement Quand CadreDessin.Touché vous allez écrire le script qui dessine un point à l'endroit touché.

1. Dans la colonne de gauche, sélectionnez le composantCadreDessin puis faites glisser dans la partie centrale le bloc Quand CadreDessin.Touché. Les paramètres x et y à l'intérieur de ce bloc nous indiquent l'endroit ou les coordonnées du point touché.

2. De même, toujours depuis le composant CadreDessin, faites glisser dans la partie centrale le bloc CadreDessin.Dessiner cercle, et mettez le dans le bloc précédent. Vous aurez peut être besoin de descendre avec l'ascenceur dans la liste pour voir ce bloc.
Cette procédure comprend des encoches pour quatre paramètres dont le dernier est déjà assigné àvrai. Les deux premiers centerX et centerY correspondent à l'endroit ou aux coordonnées auxquels le point sera dessiné. Le troisième radius correspond à sa taille en pixels.

On va prendre les coordonnées touchées : les paramètres du bloc Quand CadreDessin.Touché

pour les mettre dans les coordonées à dessiner dans le bloc CadreDessin.Dessiner cercle.

Pour ajouter le paramètre x, vous pouvez sélectionner dans la colonne de gauche et le premier onglet (incorporé ou built in)le composantvariables, glisser un bloc obtenir vers l'encoche du apramètre x et sélectionner, via le petit triangle de ce bloc, la bonne variable.
Une manière plus rapide de le faire est de faire passer la souris au dessus du paramètre x dans le bloc Quand CadreDessin.Touché, ce qui aura pour effet de faire apparaitre le bloc recherché que vous pourrez glisser au même endroit.

3. Choisissons maintenant la taille du crayon, ou le rayon (radius) du point ou du cercle.
Il suffit de mettre une valeur en entrée du paramètre radius de la procédure CadreDessin.Dessiner cercle.

Mais, anticipons un peu et rappelez vous que l'on va devoir changer cette taille. La taille du crayon n'est pas fixe, mais variable. On va donc définir la taille du crayon comme une variable avec un nom pour la manipuler dans le programme, par exemple : tailleDuCrayon (dans les noms de variables, on ne peut pas mettre de blanc).
D'un côté on va fixer la valeur de cette variable, puis son nom sera utilisé pour remplacer sa valeur. On utilise donc un bloc pour créer la variable et lui donner une valeur, puis on l'utilise à la place du chiffre dans la procédure CadreDessin.Dessiner cercle.

Testez les deux solutions, elles donnent le même résultat, mais dans le deuxième cas, on pourra changer la taille du point en donnant une nouvelle valeur à la variable tailleDuCrayon.

Testez votre application : Quand vous touchez la fenêtre ou le cadre du dessin, un point doit être dessiné à l'endroit touché. La couleur du point doit correspondre àa celle que vous avez choisie dans la paretir Design, c'est la propriété couleur de dessin, donc rouge si vous avez choisi la même couleur que tout à l'heure.

Dessiner une ligne quand vous glissez ledoigt sur le cadre :
Après le point dessiné en touchant l'écran, on va dessiner une ligne en glissant le doigt sur l'écran.
Depuis la colonne de gauche et le composant CadreDessin faites glisser dans la partie centrale le bloc Quand CadreDessin.Glissé, puis faites glisser le bloc CadreDessin.Dessiner ligne et posez le dans le bloc précédent.

Comme dans le cas précédent, on va utiliser les paramètres renvoéys par l'évènement Glissé pour ensuite dessiner avec la procédure Dessiner ligne.
Les paramètres renvoyés par l'évènement Quand CadreDessin.Glissé sont Xdébut, Ydébut, Xprécédent, Yprécédent, Xactuel, Yactuel et draggedanysprite.

Xdébut et Ydébut correspondent aux coordonnées au moment où j'ai posé le doigt,

Xactuel et Yactuel correspondent à la dernière position (quand l'évènement se déclenche),

Xprécédent et Yprécédent correspond à l'avant dernière position, sachant que l'évènement se déclenche à chaque fois que le doigt bouge un peu, donc souvent.

A chaque fois que l'évènement se déclenche, on va donc tracer un trait entre l'avant dernière position et la dernière. On aura ainsi une courbe constituée de petits segments de droite.

Testez votre application en dessinant une ligne.
Changez la couleur en cliquant sur les boutons :

Nous allons maintenant utiliser les boutons pour changer la couleur et pour effécaer le dessin.

1. Depuis la colonne de gauche et le composant BoutonRouge glissez dans la partie centrale le bloc Quand boutonRouge.Clic,

2. Depuis le composant CadreDessin faites glisser le bloc qui permet de mettre la couleur de dessin dans le bloc précédent.

3. Dans l'onglet des couleurs sélectionnez la couleur rouge et assignez la dans l'encoche du bloc précédent

4. Faites la même chose pour les boutons vert et bleu. (vous pouez dupliquer l'évènement du prmeir bouton puis changer le nom du bouton et les couleurs en cliquant sur les triangles associés au nom des boutons paramètres et en changeant les couleurs)

Effacez le dessin :

1. Depuis la gauche et le composantBoutonEffacer glissez le bloc Quand boutonEffacer.Clic,

2. Depuis le composant CadreDessin faites glisser à l'intérieur le bloc CdreDessin.supprimer (qui correspond à effacer ou clear en anglais)

Testez votre application en dessinant des points et ligens de diférentes ouleur et en effaçant.
Changer la taille des points et des lignes

Nous avons vu que la taille du crayon est enregistrée dans une variable, et que cette variable est utilisée dans le bloc de dessin. Nous allons modifier la taille des points, (puis l'épaisseur des lignes) avec les boutons BoutonGrosTrait et BoutonTraitFin

1. Depuis la gauche et le composant BoutonGrosTrait glissez le bloc Quand BoutonGrosTrait.clic dans la fenêtre,

2. Depuis les variables (catégorie Incorporé ou Built In glissez le bloc Mettre ... à à l'intérieur du bloc précédent,

3. Puis, en cliquant sur le triangle à l'intérieur du paramètre de ce bloc, sélectionnez la variable tailleduCrayon définie plus haut,

4. et affectez une valeur avec un bloc de la catgorie des mathématiques, par exemple 10.

5. Faites la même chose avec le bouton BoutonTraitfin avec une valeur de 5.

Testez votre application : La taille des points doit maintenant changer en fonction du dernier bouton sur lequel vous avez appuyé.

Pour changer l'épaisseur du trait, on va utiliser les mêmes boutons. La petite différence par rapport aux points, c'est que l'épaisseur du trait n'est pas un paramètre dans la fonction .Dessiner ligne mais une propriété du cadre, la .Largeur ligne.
On peut la modifier directement, sans utiliser de variable, mais ça peut être une bonne idée de le faire.

1. Depuis la gauche et le composantCadreDessin glissez le bloc CadreDessin.Largeur ligen à l'intérieur du bloc Quand BoutonGrosTrait.clic, avec la commande qui change la taille du crayon.

2. et affectez une valeur avec un bloc de la catégorie des mathématiques, par exemple 5.

3. Faites la même chose pour le bouton BoutonTraitfin avec une valeur de 2.

Testez votre application :La taille des lignes doit également changer.

Prendre une photo:

App Inventor permet d'utiliser les ressources de votre téléphone portable, ses capteurs et en aprticulier l'appareil photo. Ces capteurs et les fonctions associées permettent de réaliser des applications très variées.
Pour prendre une photo (ou une vidéo) et la récupérer dans l'application, on procède en deux temps :

1. Dans un premier temps, on demande une prise de photo en appelant la procédure camera.Prendre photo. Cette procédure lance une application (déjà présente sur votre téléphone) qui va prendre la photo. Mais le script qui a lancé la demande de photo n'attend pas la réponse, il continue et exécute les blocs qui suivent la demande de photo.

2. Dans un deuxième temps, quand l'utilisateur a pris et validé la photo, l'évènement Caméra.après prise photo se déclenche et c'est dans les cipt de cet évènement que l'on va récupérer la photo et l'afficher dans le cadre.

Nous allons donc demander une photo quand on clique sur le bouton BoutonPrendrePhoto et au déclenchement de l'évènement Quand Camera.après prise photo, récupérer cette photo pour l'afficher come fond d'image du CadreDessin.

1. Depuis la gauche et le composant BoutonPrendrePhoto glissez le bloc Quand BoutonPrendrePhoto.clic dans la fenêtre,

2. Depuis le composant Camera1 glissez le bloc de procédure Appeler Camera1.Prendre photo et placez le à l'intérieur du bloc précédent,

3. toujours depuis le composant Camera1 glissez le bloc Quand Camera.Apres prise photo dans la fenêtre des blocs. Cet évènement comprend le paramètre image qui contient la photo que l'on pourra mettre en fond d'image duCadreDessin.

4. Depuis le composantCadreDessin faites glisser la commande mettre CadreDessin.Image de fond à l'intérieur du bloc précédent,

5. et mettez le paramètre image dans l'encoche de mettre CadreDessin.ImageDeFond, ce qui correspond à mettre ou assigner l'image à l'image de fond du cadre.

.
Testez votre application : Cliquez sur le bouton pour prendre une photo, ce qui doit conduire à l'ouverture d'une application de prise de photo (elle peut varier selon les applications installées sur votre smartphone).
après validation de la photo, l'image préscédente (si vous en aviez mise une) est remplacée et c'est votre photo qui s'affiche, et vous pouvez dessiner dessus, ...

Notez que le rapport entre la largeur et la hauteur de l'image (le facteur d'aspect) n'est pas le bon. Pour des photos au format portrait, vous pouvez le compenser en modifiant la largeur et la hauteur du canevas.

Transférer l'application sur le portable:

Dans lapahse de développement, on effectue généralement les tests avec le portable en mode "connecté". C'est pratique car les modifications du programme depuis le PC sont immédiatement répercutés sur le téléphone. PAr contre l'application n'est pas réellement téléchargée sur le téléphone.
Pour le fire, lorsque l'application est au point, reportez vous au cours et vidéos sur l'installation, mais en résumé : dans l'onglet "construire" en haut à gauche de la fenêtre, sélectionnez"App (Donnez le code QR pour fichier .apk)" et sur votre prtable lancez l'aI2 companion et scannez le QR code.Après quelques dizaines de secondes, il vous proposera d'installer l'application. Autorisez et validez cette installation (paramètres de sécurité). L'application est alors installée et vous pouvez l'ouvrir.

Code de l'application

Améliorez cette application

Quelles sont les améliorations que vous pouvez apporter et comment les réaliser ?
quelques pistes :

Remplacez les boutons gros trait et trait fin par des boutons qui augmenten ou réduisent la taille du trait, avec certaines limites,

ou utilisez un composant Ascenceur,

Affichez la couleur active à côté des autres boutons, pour la connaitre avant de dessiner,

Revue et discussion des notions mises en oeuvre

Les étapes dans la réalisation d'une application :

L'analyse initiale : définir ce que va faire l'application, pour qui, à quel besoin elle répond.
Dans cette phase, il vous faut un crayon, un papier mais aussi des copains à qui vous pouvez soumettre vos idées. Ca n'est pas de la programmation, mais c'est important.

Le développement :

1. Design de l'interface utilisateur et le choix des ressources,

2. Programmation : scripts ou séquences d'instructions (ou de blocs) qui font suite à un évènement,

C'est le plus souvent un processus itératif, les idées s'améliorent au fil de la réalisation, mais faites bien attention à garder en tête vos priorités.

Vérifiez TRES souvent ce que ça donne sur votre téléphone,testez à chaque étape, n'attendez pas d'avoir terminé un gros morceau,

Une erreur ou un petit accident sont vite arrivés ... surtout quand vous êtes le plus pressés. Sauvegardez régulièrement des étapes ou versions intermédiaires, en particulier avec les points de contrôle (checkpoints).

Transférez souvent votre programme vers le mobile, travaillez de préférence en mode connecté (ou debug interactif),

Faites des essais pour mettre au point et vérifier le bon fonctionnement.

Dans la partie design :

Choisir/trouver les composants

Le choix du nom des composants a t-il un impact théorique ou pratique sur la phase suivante de programmation ?
Il a un impact pratique car le nom va permettre de se rappeler à quoi correspond chaque composant quand on va écrire le programme. Par exemple : "BoutonScan" permet de se rappeler qu'il s'agit bien du bouton de scan. Par contre, ça n'a aucune importance pour le programme. On aurait très bien pu appeler ce bouton "Michel" ou "MaBicyclette". Vous pouvez le renommer et vir que le programme marche exactement pareil. La différence est pratique, ni informatique ou théorique.

Le design permet de choisir les principales propriétés des composants. Il restera possible de modifier ces propriétés ensuite dans le programme, mais ça n'est pas toujours nécessaire.

Dans la partie Programmation : les évènements et les blocs utilisés :

Quels évènements avons nous pris en compte ?

les interventiosn de l'utilisateur : Clics sur les boutons, cadre touché ou glissé,

et les évènement déclenchés apr des fonctions du smartphone : l'arrivée de la photo après la prise de vue.

Les blocs ont plusieurs formes : lesquelles et à quoi correspondent-elles ?

idem pour la couleur ?

Transfert permanent du programme vers le téléphone ou la tablette : Vous avez utilisé deux modes de communication avec le portable :

le premier (mode connecté), dans la phase de développement, où l'application reste contrôlée depuis le PC, ce qui permet des tests et modifications rapides,

le second (mode construire ou build) où l'application est téléchargée sur le portable et fonctionne de façon indépendante.

# data[].attributes.attachment_link.description
Cette application est un grand classique. Elle consiste à dessiner dans un cadre. C'est un bon point de départ avec App Inventor.La version ci-dessous est inspirée de celle du Pr Wolber.Pour commencer, vous dessinerez des lignes et points de différentes couleurs et épaisseurs, puis vous prendrez une photo et l'afficherez comme fond du dessin.

# data[].attributes.attachment_link.readable_text
If you do not have an Android phone or tablet, you can still build apps with App Inventor. App Inventor provides an Android emulator, which works just like an Android but appears on your computer screen. So you can test your apps on an emulator and still distribute the app to others, even through the Play Store. Some schools and after-school programs develop primarily on emulators and provide a few Androids for final testing.

To use the emulator, you will first need to first install some software on your computer (this is not required for the wifi solution). Follow the instructions below for your operating system, then come back to this page to move on to starting the emulator

Important: If you are updating a previous installation of the App Inventor software, see How to update the App Inventor Software. You can check whether your computer is running the latest version of the software by visiting the page App Inventor 2 Connection Test.

Step 1. Install the App Inventor Setup Software

Step 2. Launch aiStarter (Windows & GNU/Linux only)

Using the emulator or the USB cable requires the use of a program named aiStarter. This program is the helper that permits the browser to communicate with the emulator or USB cable. The aiStarter program was installed when you installed the App Inventor Setup package. You do not need aiStarter if you are using only the wireless companion.
For Help with aiStarter, see Connection Help.
Step 3. Open an App Inventor project and connect it to the emulator

First, go to App Inventor and open a project (or create a new one -- use Project > Start New Project and give your project a name).

Then, from App Inventor's menu (on the App Inventor cloud-based software at ai2.appinventor.mit.edu), go to the Connect Menu and click the Emulator option.

You'll get a notice saying that the emulator is connecting. Starting the emulator can take a couple of minutes. You may see update screens like the following as the emulator starts up:

The emulator will initially appear with an empty black screen (#1). Wait until the emulator is ready, with a colored screen background (#2). Even after the background appears, you should wait until the emulated phone has finished preparing its SD card: there will be a notice at the top of the phone screen while the card is being prepared. When connected, the emulator will launch and show the app you have open in App Inventor.

If this is the first time you are using the emulator after installing the App Inventor Setup software, you will see a message asking you to update the emulator.  Follow the directions on the screen to perform the update and reconnect the emulator.   You will need to do this kind of update whenever there is a new version of the App Inventor software.

For problems with aiStarter, or if the Emulator does not connect,go to Connection Help for information about what might be wrong.

Setup complete! You are now ready to build your first app!

# data[].attributes.attachment_link.title
Installing and Running the Emulator in AI2

# data[].attributes.attachment_link.description
If you do not have an Android phone or tablet, you can still build apps with App Inventor. App Inventor provides an Android emulator, which works just like an Android but appears on your computer screen. So you can test your apps on an emulator and still distribute the app to others, even through the Play Store.

# data[].attributes.headline
Comment intégrer la traduction instantanée à son appli mobile 

# data[].attributes.subject
Comment intégrer la traduction instantanée à son appli mobile 

# data[].attributes.attachment_link.title
Comment intégrer la traduction instantanée à son appli mobile ?

# data[].attributes.headline
Comment intégrer des pages web à son appli mobile 

# data[].attributes.subject
Comment intégrer des pages web à son appli mobile 

# data[].attributes.attachment_link.title
Comment intégrer des pages web à son appli mobile ?

# data[].attributes.headline
Comment intégrer des vidéos à son appli mobile 

# data[].attributes.subject
Comment intégrer des vidéos à son appli mobile 

# data[].attributes.attachment_link.title
Comment intégrer de la vidéo à son appli mobile ?

# data[].attributes.headline
Comment intégrer l'usage de la voix à son appli mobile 

# data[].attributes.subject
Comment intégrer l'usage de la voix à son appli mobile 

# data[].attributes.attachment_link.title
Comment intégrer l'usage de la voix à son appli mobile ?

# data[].attributes.headline
Comment intégrer des sons dans son appli mobile 

# data[].attributes.subject
Comment intégrer des sons dans son appli mobile 

# data[].attributes.attachment_link.title
Comment intégrer des sons dans son application mobile ?

# data[].attributes.headline
Comment intégrer des images à son appli mobile 

# data[].attributes.subject
Comment intégrer des images à son appli mobile 

# data[].attributes.attachment_link.title
Comment intégrer des images à son application mobile ? (Partie 2/2)

# data[].attributes.body
Pilotes Windows pour les téléphones Android

# data[].attributes.attachment_link.title
Windows Drivers | Explore MIT App Inventor

# data[].attributes.attachment_link.description
If your phone is one of these, then the driver should have been installed along with the App Inventor Setup software. All other devices will require you to obtain and install a USB driver from the device manufacturer. In either case it's a good idea to check the driver installation, as described below, before proceeding.

# data[].attributes.body
Installationde MIT Emulator in AI2  sous Windows

# data[].attributes.attachment_link.readable_text
Create Apps!

Installing the Windows software for App Inventor Setup has two parts:

Installing the App Inventor Setup software package. This step is the same for all Android devices, and the same for Windows XP, Vista, Windows 7, 8.1, and 10.

If you choose to use the USB cable to connect to a device, then you'll need to install Windows drivers for your Android phone.

NOTE: App Inventor 2 does not work with Internet Explorer. For Windows users, we recommend using either Chrome or Firefox as your browser for use with App Inventor.
Note: These instructions are for the new Emulator package that requires 64-bit Windows. You can find the older version Here.

Installing the App Inventor Setup software package

You must perform the installation from an account that has administrator privileges. Installing via a non-administrator account is currently not supported.

Note: You will need to be logged in as an Administrator to complete the steps below.

1. Download the installer.

2. Locate the file MIT_App_Inventor_Tools_30.265.0_win_setup64.exe (~1.5 GB) in your Downloads file or your Desktop. The location of the download on your computer depends on how your browser is configured.

3. Open the file.

4. Click through the steps of the installer. Do not change the installation location but record the installation directory, because you might need it to check drivers later.

5. You will likely get a dialog box from the User Account Manager asking if you wish to make changes to your device. It should say that the software is signed by the Massachusetts Institute of Technology. Click Yes.

Locating the Setup software

In most cases, App Inventor should be able to locate the Setup software on its own. But if it asks for the location of the software, the path to enter is C:\Program Files\App Inventor.

Something not working right? Visit thetroubleshooting page, or check the App Inventor User Forum for help.

Continue with setup - Choose the connection instructions you were following:
Back to Setup Menu

# data[].attributes.attachment_link.title
Installing App Inventor 2 Setup on Windows

# data[].attributes.attachment_link.description
Create Apps! Installing the Windows software for App Inventor Setup has two parts: Installing the App Inventor Setup software package. This step is the same for all Android devices, and the same for Windows XP, Vista, Windows 7, 8.1, and 10.

# data[].attributes.headline
Partage d'une application sur Google Play Store 

# data[].attributes.subject
Partage d'une application sur Google Play Store 

# data[].attributes.attachment_link.title
Sharing and Packaging Apps | Explore MIT App Inventor

# data[].attributes.attachment_link.description
Select "App (save .apk to my computer)." A pop-up box should alert you that your download has begun. Note: The other option (provide QR code for .apk) produces a scannable QR code that will download the app for two hours. You can share this code with others, but they have to use it within 2 hours of your generating it.

# data[].attributes.body
Traqueur

# data[].attributes.attachment_link.title
Créez une application mobile Traqueur (Android)

# data[].attributes.body
Hello_World

# data[].attributes.attachment_link.title
Créez votre première application mobile (Android)

# data[].attributes.attachment_link.description
moncoursdetechno - Site sur l'enseignement de la technologie en collÃƒÂ¨ge. Cours, activitÃƒÂ©s, tutorial, maquettes, ... par Laurent Chastain.