Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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>