SommaireSommaire I. Présentation II. Création du projet III. Dessiner l’interface : o Attribuer une icône à l’application o Insérer une image animée o.

Présentation au sujet: "SommaireSommaire I. Présentation II. Création du projet III. Dessiner l’interface : o Attribuer une icône à l’application o Insérer une image animée o."— Transcription de la présentation:

1

2 SommaireSommaire I. Présentation II. Création du projet III. Dessiner l’interface : o Attribuer une icône à l’application o Insérer une image animée o Insérer un capteur IV. Comportement de l’application o Ouvrir l’éditeur de blocs o Programmer le comportement V. Simulation de l’application o Lancement de l’émulateur o Simulation sur l’émulateur VII. Transfert de l’application  Smartphone VIII. Télécharger l'application sur le PC I. Présentation II. Création du projet III. Dessiner l’interface : o Attribuer une icône à l’application o Insérer une image animée o Insérer un capteur IV. Comportement de l’application o Ouvrir l’éditeur de blocs o Programmer le comportement V. Simulation de l’application o Lancement de l’émulateur o Simulation sur l’émulateur VII. Transfert de l’application  Smartphone VIII. Télécharger l'application sur le PC

3 Le but du TP est de créer une application Android. Notre application sera une boussole.

4 Pour Créer le projet, il faut se rendre sur le site ci-dessous : Pour Créer le projet, il faut se rendre sur le site ci-dessous : http://beta.appinventor.mit.edu/ http://beta.appinventor.mit.edu/ Il faut connecter son compte Gmail pour être reconnu sur le site, comme ci-contre :

5 Pour créer une application, cliquez sur le lien « MyProjects ». Ainsi nous arrivons sur cette page ci-dessous. Cliquer sur « new », pour créer l’application. Il suffit ensuite de nommer le projet.

6 Pour définir l'icône à attribuer à notre application, celle qui apparaîtra sur le smartphone, il faut préciser le chemin d'accès à l'image qui servira d'icône, comme illustré ci-dessous : Notre application aura donc cette icône :

7 Pour insérer une image animée, il faut préparer une zone graphique à l'intérieur de laquelle l'image pourra évoluer. Pour insérer une image animée, il faut préparer une zone graphique à l'intérieur de laquelle l'image pourra évoluer. Cette zone s'appelle un "Canvas". Cette zone s'appelle un "Canvas". 1 2

8 Une fois le canvas sur l'interface graphique, nous allons modifier ses dimensions comme ceci :

9 Maintenant que le canvas est à la bonne dimension, nous allons pouvoir y intégrer l'image du cadran de boussole qui sera animée. Nous allons pour cela utiliser un composant appelé "ImageSprite".Ce type de composant peut être mis en mouvement et orienté dans toutes les directions.

10 L'image apparaît ; positionnez-la correctement sur le canvas : L'image apparaît ; positionnez-la correctement sur le canvas :

11 Insérer un capteur Pour nous repérer dans l'espace et localiser le Nord, nous allons utiliser le capteur d'orientation du téléphone. Il permet de mesurer des angles : "Roll" : angle d'inclinaison gauche-droite du téléphone. "Pitch" : angle d'inclinaison haut-bas du téléphone. "Azimuth" : 0° si on pointe le Nord, 90° pour l'Est, etc...

12 Glissez-déposez un OrientationSensor (depuis le menu "Sensors") sur l'écran du téléphone représentant l'interface graphique de l'application. Ce composant ne sera pas visible sur l'écran du smartphone, c'est pour cela qu'il apparaît en tant que "non-visible component" sous l'écran.

13 - Ouvrir l’éditeur de blocs Comportement de l’application Pour définir le comportement de l'application, il faut ouvrir l'éditeur de blocs, en cliquant sur "Open the Blocks Editor", en haut à droite de la fenêtre AppInventor : La fenêtre de l'éditeur de blocs apparaît.

14 Programmer le comportement Il suffit de cliquer sur "OrientationSensor1" présent sous l'onglet "My Blocks" (1) et de glisser-déposer l'avertisseur d'évènement "When OrientationSensor1.OrientationChanged" (2) sur la zone graphique de programmation : Dans notre application, nous souhaitons orienter l'image animée ("ImageSprite") du cadran de boussole en fonction de la valeur de l'angle d'azimuth fourni par le capteur d'orientation, afin de visualiser la position des 4 points cardinaux.

15 Il faut ensuite préciser ce qui doit se passer lorsque l'évènement se produit ; ici il faut modifier l'orientation ("Heading" en anglais) de l'image animée pour qu'elle corresponde à l'azimuth. Cliquez sur "ImageSprite1" présent sous l'onglet "My Blocks" (1) et glissez-déposez la fonction de modification de propriété "Set ImageSprite1.Heading to" (2) à l'intérieur de l'évènement précédemment déposé, sur la zone graphique de programmation :

16 Enfin, il faut récupérer la valeur de l'azimuth du capteur d'orientation. Cliquez sur "OrientationSensor1" présent sous l'onglet "My Blocks" (1) et glissez-déposez la propriété "OrientationSensor1.Azimuth" (2) afin qu'elle s'ajuste sur la commande précédemment déposée,sur la zone graphique de programmation :

17 Pour lancer l'émulateur, il suffit de cliquer sur "New emulator" sur le bandeau supérieur de la fenêtre : Finalement, l'émulateur apparaît ; comme sur un vrai smartphone, il faut faire coulisser le cadenas vers la droite pour sortir le téléphone du mode veille :

18 Simulation sur l’émulateur Une fois l'émulateur prêt, on peut lancer la simulation de notre application, en cliquant sur "Connect to Device...", puis sur "emulator-5554" : Au bout de quelques instants, l'application fonctionne sur l'émulateur :

19 Transfert de l’application  Smartphone Pour transférer l'application sur votre smartphone connecté à Internet (via un routeur Wifi ou directement sur le réseau mobile), il suffit de cliquer sur "Package for Phone" en haut à droite de la fenêtre du logiciel, puis de cliquer sur "Show Barcode" (1). Une fenêtre apparaîtra alors, signe que l'application est en cours de finalisation (2). Enfin, un QRcode permettant de télécharger l'application depuis son Smartphone apparaîtra (3).