Projets

[MP04a] AppInventor pour Androvore

Objectifs :

  • Développer une application sur un OS de terminal mobile (tablettes tactiles, smartphones...)
  • Mettre en oeuvre différents capteurs d'un terminal mobile

Critères d'évaluation :

  • C2.1 Analyser le fonctionnement d'un algorithme
  • C2.3 Développer une interface logicielle ou une interface homme-machine

Lectures et travail demandés :

Introduction

App Inventor permet de créer depuis un PC des applications pour un téléphone ou une tablette Android. La figure ci-dessous donne une vue d'ensemble :

Configurer son PC

Le texte original de cette aide se trouve à cette adresse : http://experimental.appinventor.mit.edu/learn/setup/index.html.

  1. Testez votre configuration java en vous rendant sur la page de test java.
  2. Si Java n’est pas installé (l’animation n’est pas visible) allez sur la page de téléchargement de java. Là, installez la version 6 (ou 1.6 c’est la même chose). Puis lancez l’installateur.
  3. De retour sur la page de test java, installez éventuellement le plug-in et l’animation fonctionne vous indiquant que java est installé.
  4. Pour vérifier que l’application permet de faire fonctionner App Inventor, rendez-vous sur cette page. Une belle coche verte doit apparaitre. Effectuez un nouveau teste en cliquant sur  dans la page du navigateur. Ceci lance une application Notepad. Vous pouvez la fermer c’est juste un test.
  5. Si vous désirez faire une installation pour tous les utilisateurs du poste, faites l’installation à partir d’un compte administrateur. Téléchargez-le (90Mio) puis lancez l’installateur. Attention, vous ne devez pas changer le dossier d’installation, par contre vous devez le noter, car vous en aurez peut-être besoin pour trouver les drivers de votre smartphone/tablette.
  6. Normalement au branchement de votre smartphone/tablette sur le PC il devrait installer les drivers, mais si ce n’est pas le cas vous pouvez vous rendre sur cette page d’aide (en anglais).
  7. Vérifiez que le téléphone est bien installé :
    1. Faites Touche Windows + R ;
    2. Dans la fenêtre qui s’ouvre tapes cmd et une console de commande s’ouvre ;
    3. Changez de répertoire en saisissant « CD\ » puis « CD C:\Program Files\AppInventor\commands-for-Appinventor » pour un Windows 32 bit ou « CD C:\Program Files (x86)\AppInventor\commands-for-Appinventor » pour un Windows 64 bit.

Branchez votre téléphone si ce n’était pas déjà fait puis tapez la commande « adb devices ». Vous devriez avoir un écran qui ressemble à ça (bien sûr pas la dernière ligne qui désigne votre smartphone/tablette) :

Configurer son appareil Android

Pour votre tablette ASUS MEMOPAD 7 HD, sous Android 4.2.2, le menu pour développeur est caché, pour le faire apparaître il faut d'abord aller dans le menu "A propos de la tablette", puis de appuyer une dizaine de fois sur le "Numéro de build".

Ensuite aller dans les paramètres puis options de développement puis cocher débogage USB et Rester activé. Puis sécurité et cocher sources inconnues.

Lancement d'AppInventor

Pour se connecter, il faut un compte Gmail personnel (www.gmail.com) et accéder au site à cette adresse http://experimental.appinventor.mit.edu.

Après avoir cliqué sur Connexion, la fenêtre suivante demande confirmation de l’autorisation de transfert d’adresse au MIT. Après avoir accepté, la fenêtre d’App Inventor s’affiche dans le navigateur.

Si des projets existent, lors de l'ouverture le dernier projet en cours est affiché dans la page Design. Pour changer de projet ou en créer un nouveau, il faut cliquer sur My Projects.

Vue d’ensemble sur un projet

Un programme App Inventor décrit comment le téléphone ou la tablette réagit à certains événements (events) : un bouton a été appuyé, l’objet Android est secoué, l’utilisateur déplace son doigt sur une surface, etc. Certains des événements sont déclenchés par une action de l’utilisateur sur un des éléments (aussi appelés composants) de l’interface graphique créée par le concepteur de l’application ; d’autres événements sont déclenchés sans action sur l’interface graphique.

Les différents types d’événements gérés par App Inventor sont :

Type d’événement

Exemple

Evénement initié par l’utilisateur

Le plus commun

Quand l’utilisateur appuie sur bouton1, faire

Evénement d’initialisation

Quand l’application se lance, faire

Evénement lié à un « timer »

Quand 20 millisecondes sont écoulées, faire

Evénement d’animation

Quand deux objets entrent en collision, faire

Evénement externe

Quand le téléphone reçoit un texte, faire

 Il existe un gestionnaire d’événement pour chacun des événements possibles.

 Pour réaliser une application avec App Inventor, il faut donc :

  • Dessiner l’interface graphique et ce qui lui est lié (son à jouer, …)
  • Décrire le comportement de l’application avec les gestionnaires d’événements

Ma Première Application Android : Affichage de l'inclinaison

Cette application affiche l'angle d'inclinaison du téléphone lorsque l'utilisateur appui sur un bouton.

Création du projet

Dessiner l'interface

Pour créer une application, la première phase est la création de son interface. Celle-ci se fait à partir de l'éditeur d'IHM (Interface Homme Machine). Pour ce premier exemple très simple, on ne place que 3 éléments (ou composants).

Décrir le comportement de l'application

Une fois l’allure de notre application créée, nous allons devoir décrire son comportement. Pour cela, il faut cliquer sur « Open the Blocks Editor » en haut à droite de la page.

Il faut alors télécharger puis exécuter un fichier .JNLP (Java Network Launching Protocol) permettant de lancer une application Java depuis le web. Une fois téléchargées, nous pouvons lancer cette application fenêtrée.

Après ouverture de l'éditeur de blocs, la page AppInventor dans le navigateur est toujours visible.

Test et installation de l'application

Test

On peut tester l'application sur un émulateur qui apparait sur l'écran du PC ou sur l'objet Android. L'émulateur est très long à se lancer et les tests sont limités (impossible de simuler l'orientation de l'objet Android, etc.). Le test sur émulateur n'est pas décrit ici.

Une fois l’appareil Android connecter par câble USB à votre PC, lancer la connexion entre notre programme et l'appareil avec Connect to Device. Il doit apparaitre un numéro dans la liste Connect to Device.

Installation

 Pour installer son application, il y a trois solutions. Toutes trois démarrent sur l’interface web, en haut à droite de la fenêtre, via le bouton « Package for Phone » :

Show Barcodepermet de générer un code QR pour permettre un téléchargement de l'application sans câble USB entre l'objet Android et le PC utilisé pour le développement.  Pour télécharger l'application, il suffit de scanner le code avec une application dédiée installée sur l'appareil Android. Une fois le fichier téléchargé, il faut l'installer avec la procédure habituelle.

Download to this computer permet de sauvegarder sur l'ordinateur le fichier d'installation .apk de l'application pour une installation ultérieure sur n'importe quel objet Android.

Download to Connected Phone permet d'installer l'application par l'intermédiaire de la liaison USB. Le téléphone doit être connecté avec AppInventor pour que l'installation s'effectue. Voir le § sur le test.

Pour aller plus loin :

Une nouvelle version de AppInventor est aujourd'hui disponible.

Nous vous invitons à tester les tutos sur http://appinventor.mit.edu/explore/ai2/tutorials

Ressources :

Remerciements à F.Sauret (Professeur au lycée A. Briand de Saint-Nazaire) et P.Morenton (Professeur au Lycée Pierre Emile Martin de Bourges).