1. CONTENU
- Présentation.
- Configurer son PC.
- Configurer son androphone.
-
Premier essai de la plateforme de développement.
- Créer un projet.
- Dessiner l'interface.
- Décrire le comportement de l'application.
-
Tester et installer.
-
- Teste sur le smartphone.
- Teste sur l'émulateur.
- Installation.
-
- Téléchargement de l'article au format pdf.
- Téléchargement de l'application sur votre téléphone.
2. Présentation.
3. Configurer son PC.
Le texte original de cette aide se trouve à cette adresse : http://www.appinventorbeta.com/learn/setup/.
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 (90MB) 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.
6. Normalement au branchement de votre smartphone 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é :
a. Faites Touche Windows + R ;
b. Dans la fenêtre qui s’ouvre tapes cmd et une console de commande s’ouvre ;
c. 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.
d. 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 téléphone) :
C:\Program Files\AppInventor\commands-for-Appinventor>adb devices
* daemon not running. starting it now on port 5037 *
* daemon started successfully *
List of devices attached
12345678910111213 device
4. Configurer son androphone.
Aller dans les paramètres et cocher les options suivantes :
Dans les réglages des Applications (et Applications -> Développement).
5. PREMIER essai de la PLATEFORME de développement.
5.1. Créer un projet.
Pour se connecter il faut un compte Gmail personnel (www.gmail.com).
Pour créer une application, cliquez sur le lien « MyProjects ».
Nous arrivons alors sur une page nous présentant tous les projets App Inventor du compte, pour en créer un nouveau il suffit de cliquer sur « New ».
Nous entrons le nom du projet et c'est parti ! Nous pouvons aussi charger et télécharger des projets.
Attention : le projet n’est pas exportable en code Java réutilisable par un IDE standard.
5.2. Dessiner l’interface.
Pour créer une application, la première phase est la création de son interface. Pour cela, le site affiche un écran de téléphone dans lequel nous pouvons placer, par Drag-and-Drop, les éléments que nous voulons utilser.
Il y a des éléments graphiques comme des boutons, des labels… ainsi que beaucoup d'éléments non graphiques, comme des capteurs (accéléromètre, orientation, géo localisation) ou des fonctions permettant d'effectuer des actions : lecteur audio, lanceurs d'applications basiques du téléphone (gestionnaire de contacts, appareil photo, scanneur de code 2D, etc.).
Cette application affichera la valeur de l'angle d'inclinaison du téléphone quand l'utilisateur appuiera sur un bouton.
Tout d'abord, mettons un label qui permettra d'afficher la valeur.En cliquant sur le bouton d'aide du composant, une petite description du composant s'affiche.
Pour placer le label sur le téléphone, il suffit de le faire glisser vers l'écran.
De la même façon, ajouter un bouton.
Comme écrit dans l'aide, nous pouvons modifier de nombreuses propriétés des composants.
Nous avons la possibilité, par exemple, de changer simplement le texte ou la couleur, mais beaucoup d'autres options sont modifiables.
Finalement nous ajoutons un composant permettant d'obtenir l'orientation du téléphone : l'OrientationSensor. Nous le glissons sur le téléphone, celui-ci n’étant pas visible, il s'affiche sous l'écran. Le fait de l'ajouter permet simplement d'accéder à ses méthodes dans la seconde étape du développement.
5.3. Décrire 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.
Cette interface est très simple et épurée. En effet, en haut on retrouve des éléments classiques – « Save », « Undo » et « Redo » ainsi qu’un bouton de test pour lancer l’application sur le mobile ou sur l’émulateur.
Lorsque cette interface est lancée, il nous est demandé si nous souhaitons tester l’application sur un mobile (à brancher après l’ouverture de la fenêtre et dont les pilotes doivent préférablement être installés) ou sur l’émulateur fourni.
Sur la gauche, nous avons un système d’onglets. Nous y retrouvons les différents composants (blocks) que nous avions pris soin de placer dans l’onglet – « My Blocks » – et des blocs utilitaires – « Built-in ».
Dans l’onglet « My Blocks » de notre projet DEMO, on retrouvera nos éléments et leurs accesseurs &
fonctions :
• MyDefinitions : variables & procédures globales.
• Button1 : variables & procédures spécifiques au bouton.
• Label1 : variables & procédures spécifiques au label.
• OrientationSensor1 : variables & procédures spécifiques au capteur.
• Screen1 : variables & procédures spécifiques à l’écran (assez restreint).
Dans l’onglet « Built-in », nous retrouverons toujours les mêmes éléments :
- Definition : morceaux permettant de définir des procédures (avec/sans résultats/attributs).
- Text : morceaux permettant de traiter du texte.
- Lists : morceaux permettant de traiter des listes.
- Math : morceaux permettant de traiter des nombres.
- Java.
- Logic : morceaux permettant de traiter des booléens.
- Control : outils permettant d’effectuer de la programmation conditionnelle.
- Colors : couleurs.
Pour en revenir à notre projet DEMO, nous voulons que notre application « affiche la valeur de l'angle d'inclinaison du téléphone quand l'utilisateur appuiera sur un bouton ». On va donc positionner les blocs suivants :
Ce qui se traduit par : Quand le bouton 1 est appuyé, le label1 affiche la valeur de roulis du capteur d’orientation.
5.4. Tester et installer.
Nous distinguons bien les termes « tester » et « installer », car il n’est pas nécessaire de disposer du fichier d’installation de l’application (le .APK) pour l’installation. Lorsque nous avons branché notre téléphone à l’ordinateur et sommes passés en mode Debug (Paramètres>Applications>Développement>Débogage USB), une icône apparaît en haut de l’éditeur de blocs.
5.4.1. Teste sur le smartphone.
Lorsque nous cliquons dessus, l’application est compilée, envoyée au téléphone pour être installée et lancée dessus, cependant, une fois celle-ci quittée, elle n’est plus disponible sur le mobile. L’application est donc temporairement installée.
5.4.2. Teste sur l’émulateur.
En cliquant sur « New emulator ». Une nouvelle fenêtre contenant un émulateur d’Androïd s’ouvre. Il suffit de cliquer sur « connect to device », puis de choisir l’émulateur pour voir notre application se lancer dessus. Malheureusement, si cet outil est très pratique, il ne permet pas de faire tourner le téléphone et ne sert donc pas à grand-chose dans notre cas.
5.4.3. 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 » :
1. En cliquant sur « Show Barcode », l’application sera empaquetée et, après quelques secondes, une fenêtre avec QRCode apparaîtra sur l’interface web. En le scannant avec une application du mobile, le QRCode vous redirigera sur une page web. Vous devrez alors vous identifier avec le même compte Google que celui qui développe le projet pour pouvoir télécharger le fichier .APK. Il suffira de lancer le fichier APK pour installer l’application.
2. En cliquant sur « Download to this Computer », l’application sera empaquetée et une fenêtre de téléchargement vous permettra de sauvegarder le fichier .APK sur votre ordinateur. Cela permet ensuite de la mettre sur un site internet en recréant éventuellement un QRCode.
3. En cliquant sur « Download to Connected Phone », l’application sera empaquetée et installée sur le téléphone Androïd connecté à l’ordinateur.
Pour ces trois manipulations, il est nécessaire que l’éditeur de blocs soit encore ouvert.
« Présentation » et « premier essai de la plateforme de développement » quasiment recopié de : « Master 2 informatique, E-services — Université des Sciences et Technologies de Lille 1 — App Inventor — Projet de Génie Logiciel et Interactions Homme-Machine (GLIHM) — Baptiste CARLIER & Alban DE UBEDA — 2010-2011 ».
5.4.4. Téléchargement de l'article au format pdf.
Impossible de trouver le layout
Téléchargement de l'application sur votre téléphone.
Utiliser le QRCode pour installer directement l'application sur votre téléphone :
- Installez sur votre téléphone une application qui lit les codes 2D : Allez dans l'androïd Market et rechercher Mobiletag par exemple puis installez-la.
- Flasher le code avec votre téléphone et l'appli se télécharge.
- Installez l'appli que vous trouvez dans la barre d'événement.