====== Tutoriel AppInventor - Première App ======

Maintenant que tu es connecté au site [[http://ai2.appinventor.mit.edu/|AppInventor]] avec le **compte de ton équipe**, et tu peux créer ta première App.

==== Commencer un nouveau projet ====
  * Clique sur le bouton **Commencer un nouveau projet**
{{  :icn:appinventor_05.png |}}
  * Donne un nom au projet et clique sur le bouton **OK**
{{  :icn:appinventor_06.png |}}

==== Crée le premier écran ====
Tu vas dessiner le premier écran de ton App.

  * à gauche tu as la palette qui propose les composants que tu peux utiliser.
  * tu vas choisir un **bouton** et une **zone de texte** et les mettre sur l'écran qui s'appelle **Screen1**.
{{ :icn:appinventorpalette_01.png |}}
 
  * voila ce que tu dois obtenir :
{{ :icn:appinventorpalette_02.png |}}

Tu peux modifier les propriétés de tes composants: le texte, la couleur, etc. Pour cela :
  * sélectionne le composant dans **l'arborescence** des composants en cliquant sur le composant **Bouton**
{{ :icn:appinventorarborescencee_01.png |}} 

  * modifie le contenu du champ **Texte**
{{ :icn:appinventorpropriete_01.png |}}
  * tu peux alors voir le résultat de ta **modification** sur le texte du **bouton**
{{ :icn:appinventorinterface_01.png |}}

==== Ajoute des actions ====
Maintenant tu vas indiquer ce que **l'App doit faire** quand on **clique sur le bouton**. Pour cela tu vas maintenant utiliser les fonctions de création de **blocs** d'action. 
  * dans la barre de menu du projet choisis le bouton **Blocs** :
{{ :icn:appinventormenu_01.png |}}

  * choisis à gauche, dans la **partie blocs** le **composant Bouton** :
{{ :icn:appinventorblocs_01.png |}}

Dans l'interface apparaît une liste de ce que tu peux demander à l'App de faire.
  * Choisis ce bloc et dépose le dans la zone de création des actions
{{ :icn:appinventorblocs_02.png |}}

Voila ce que tu dois obtenir :
{{ :icn:appinventorinterfacebloc_01.png |}}

 * choisis à gauche, dans la **partie blocs**  le **composant ZoneDeTexte1** et essaie d'obtenir le résultat suivant :
{{ :icn:appinventorinterfacebloc_02.png |}}

Pour terminer tu vas indiquer à l'App d'afficher la phrase **Bonjour !**. 
{{ :icn:appinventorinterfacebloc_03.png |}}

<WRAP center round tip 60%>
Astuce : {{ :icn:appinventorblocs_03.png |}}
</WRAP>

==== Teste ton application sur l'émulateur ====
Dans le menu **Connecte** choisis **Emulateur**
{{ :icn:appinventormenuprincipal_01.png |}}

Soit patient, le temps que l'émulateur soit lancé et prêt :
{{ :icn:appinventoremulateur_01.png |}}

  * Tu auras ce message te proposant une **mise à jour**. Choisis **OK**.
{{ :icn:appinventoremulateur_03.png |}}

  * Attend la fin du téléchargement de la mise à jour.
{{ :icn:appinventoremulateur_04.png |}}

  * Dans l'émulateur accepte de remplacer l'application par la nouvelle version :
{{ :icn:appinventoremulateur_05.png |}}
  * Et lance l'installation
{{ :icn:appinventoremulateur_06.png |}}
  * à la fin de l'installation ne lance pas l'application
{{ :icn:appinventoremulateur_07.png |}}


  * **Réinitialise** la connexion
{{ :icn:appinventoremulateur_08.png |}}

  * et reconnecte-toi à l'émulateur
{{ :icn:appinventormenuprincipal_01.png |}}

  * Utilise ton App
{{ :icn:appinventoremulateur_09.png |}}

==== Quand tu as fini le tutoriel ====

<WRAP center round info >
Revenir à l'activité [[icn:appandroiddecouvrir|Créer une première application mobile Android]]
</WRAP>