Connexion

Note utilisateur: 4 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles inactives
 

 

1.  CONTENU

  1. Présentation.
  2. Configurer son PC.
  3. Configurer son androphone.
  4. Premier essai de la plateforme de développement.
    1. Créer un projet.
    2. Dessiner l'interface.
    3. Décrire le comportement de l'application.
    4. Tester et installer.
        1. Teste sur le smartphone.
        2. Teste sur l'émulateur.
        3. Installation. 
  5. Téléchargement de l'article au format pdf.
  6. 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).

Description : screenshot 4 Test de Google App Inventor Description : screenshot 5 Test de Google App Inventor

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 :

Description : http://gaimgolf.com/wp-content/uploads/2010/12/Roll_pitch_yaw.gif

• Roll : Roulis,• Pitch : Tangage,• Yaw ou azimuth : Lacet.

 

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.

Fichiers:
débuter avec AppInventor 1.0 POPULAIRE
(0 votes)
Licence CC BY-NC-SA 2.0 France Date samedi 8 mars 2014 à 17:55 Taille du fichier 768.88 KB Téléchargement 564 Télécharger

Téléchargement de l'application sur votre téléphone.
 CODEDEMO

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.

 

 

Ajouter un Commentaire


Commentaires   
7Mat7
+1 # 7Mat7 16-10-2016 19:42
Bonjour,
Je dois programmer une application sur App inventor pour voir l'état de charge d'une batterie, mais je ne sais pas comment faire. Merci de vos réponses
Répondre | Répondre en citant | Citer
fsauret
+1 # fsauret 16-10-2016 20:23
Bonjour,
Je pense qu'avec l'extension "Battery manager" de puravida (https://puravidaapps.com/extensions.php) ce doit être facile.
Répondre | Répondre en citant | Citer
7Mat7
+1 # 7Mat7 16-10-2016 20:28
Merci beaucoup pour votre réponse
Répondre | Répondre en citant | Citer
avayking
+1 # avayking 14-02-2016 12:05
Svp j voudrais apprendre a programmer pr android j'ai un bac electronic
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 14-02-2016 14:39
Bonjour,
Vous avez un bac électronique donc depuis au moins 3 ans. Vous avez peut-être appris qqc depuis. Et puis vous ne posez pas de question donc c'est difficile d'y répondre.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 14-05-2014 19:42
Je ne comprend pas comment faire communiquer APP inventor avec arduino et l'afficheur.
Je ne trouve pas de projet similaire sur internet.
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 14-05-2014 12:13
Non je n'ai pas vraiment d'exemple mais c'est un simple traitement de la chaîne de caractère. Il y en a des prémisses dans mon exemple wifi quand je ne garde que le dernier caractère de la chaîne transmise. Après tu va sur le site Arduino.cc et tu trouves plein d'exemple ou tu "tape traitement d'un chaîne de caractère avec arduino" dans ton moteur de recherche.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 13-05-2014 18:45
Avez-vous un exemple de projet similaire car ce n'est pas très clair pour moi
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 13-05-2014 18:36
Simplement en wifi tu envoie le message que tu veux par exemple "Afficheur = 8" dans ton programme du récepteur (sur arduino) tu teste ce qui est reçu et si tu trouve le mot afficheur = tu regarde la valeur et tu l'affiche.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 13-05-2014 18:26
L'application android est prête j'ai ajouté les checkbox etc... mais comment la lier à l'afficheur ?

Exemple : Je tape le numéro 8 avec l'application. Je veux que ce numéro apparaisse sur mon afficheur, en utilisant le WIFI.
Quelle fonction utilisée pour que ce numéro s'affiche instantanément ?
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 13-05-2014 12:58
Très simplement tu choisis ton numéro avec des checkbox, un clavier, une liste déroulante, à la voix ou une animation que tu auras fait puis tu le transmets en wifi.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 12-05-2014 18:39
Je veux choisir le numéro depuis mon application app inventor et le transmettre en wifi à l'afficheur 7 segments
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 12-05-2014 16:12
Je ne comprend pas ce que tu veux faire avec tes numéros. Explique un peu plus.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 11-05-2014 21:07
D'accord merci.
Concernant le numéro que je souhaite afficher en wifi grâce à l'application APP inventor, avez-vous un exemple ou une aide à m'apporter ?
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 11-05-2014 17:58
Les fichiers aia ne s'ouvrent pas dans windows mais dans l'interface de Appinventor avec Project>import project ...
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 10-05-2014 17:32
Oui voilà c'est ça. Pouvez-vous me donner une piste car je ne trouve aucun exemple, je suis vraiment perdu avec la liaison wifi ...
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 10-05-2014 17:29
Tu veux dire choisir le numéro sur l'appli android et le transmettre via wifi vers le kart ? Si c'est ça pas de problème en wifi comme en bluetooth.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 10-05-2014 17:26
Dans mon projet je souhaite également mettre un numéro au karting avec un afficheur 7 segment.
Pensez-vous qu'il est possible de choisir ce numéro depuis APP inventor ?
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 10-05-2014 16:57
D'accord merci pour votre aide.
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 10-05-2014 16:55
Si c'est bien afficher les valeurs dans l'application Android il lui faut un moyen de communiquer avec la carte Arduino le wifi ou le bluetooth par exemple. Pour le wifi je ne vois pas comment se passer du serveur arduino.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 10-05-2014 16:50
Dans ce fichier il y a un dossier app inventor avec 3 Screen que je n'arrive pas à ouvrir.
J'ai comme projet de récupérer les valeurs (vitesse, niveau de charges des batteries) d'un karting afin de les afficher sur l'application via APP Inventor. J'ai comme matériel les capteurs, une arduino méga, un shield wifi et j'utilise App inventor.
Je n'ai pas trouvé la solution pour afficher les valeurs directement dans app inventor.J'arrive cepedant à lire les valeurs grâce au serveur mis en place par le shield WIFI. Celui-ci me fournit une adresse ip que je rentre dans la fonction activity starter pour que le bouton m'envoi sur le serveur.

Pensez-vous qu'il est possible d'afficher ces valeurs directement dans l'application sans passer par le serveur du shield WIFI ?
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 10-05-2014 16:42
Oui.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 10-05-2014 16:38
Non, je n'arrive pas à l'ouvrir. Il faut bien télécharger le fichier nommé " comwifiarduini.aia " ?
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 10-05-2014 16:29
Mais attention ce projet n'est pas terminé avec Appinventor et la communication ne marche que dans un sens.
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 10-05-2014 16:28
Il suffit de faire project>import project from my computer.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 10-05-2014 16:25
Je me suis mal exprimé. Sur votre site j'ai trouvé la communication wifi arduino app inventor, on peut télécharger un fichier .iai chose que j'ai faite mais je n'arrive pas à l'ouvrir.
Répondre | Répondre en citant | Citer
Frank SAURET
-1 # Frank SAURET 10-05-2014 16:13
Je pense que c'est un fichier ZIP. Mais le lire n'a que peut d'intérêt (voire aucun). Tu peux l'enregistrer pour le sauver en cas de panne du serveur du MIT. Il faut créer l'APK pour le mettre sur le play store ou le mettre en téléchargement ailleurs ou si c'est juste pour toi tu crées juste le qr code pour l'installer directement. Pour tout ça il faut utiliser Build.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 10-05-2014 16:10
Tout fonctionne merci beaucoup.
Pour lire votre fichier .aia quelle logiciel faut-il utiliser ?
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 10-05-2014 16:01
Dans la catégorie layout il faut choisir table arrangement qui crée un tableau de positions aussi fin que nécessaire. C'est pas la panacée mais ça permet de faire pas mal de choses.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 10-05-2014 15:59
Merci beaucoup pour votre aide.
J'ai juste une dernière petite question, les boutons se positionnent les uns en dessous des autres mais moi je souhaiterais un mettre un a droite un à gauche, les placer ou je veux. Comment dois-je faire ?
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 10-05-2014 14:26
J'ai le même problème. Il suffit de mettre la propriété backround color à none pour que ça fonctionne.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 09-05-2014 23:12
Avec app inventor 2. Oui lorsque j ajoute une background image
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 09-05-2014 18:16
Avec quelle version d'appinventor. L'image est placé en image de fond du screen ?
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 09-05-2014 16:43
J'ajoute une image de fond d'écran mais quand je place les boutons label et autres l'image se coupe. Que faire ?
merci
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 22-01-2014 20:23
La dernière version d'appinventor est ici [http://ai2.appinventor.mit.edu/][1].
Pour organiser ses éléments il faut utiliser les screens arrangements (layout dans ai2). C'est en fait historique il il fallait faire ça dans tous les outils android. Les autres sont devenu plus conviviaux.


[1]: http://ai2.appinventor.mit.edu/
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 22-01-2014 18:36
Je parle de la partie design lorsque je glisse un bouton ou label ou autres ils se placent les uns en dessous des autres alors que dans mon projet je souhaiterais placer un bouton en bas au centre, un label au milieu a droite et un autre au milieu a gauche.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 22-01-2014 18:27
J utilise la version 1 egalement mais il m est impossible de placer un bouton en haut un autre en bas etc ..
auriez vous un lien de votre version ? de plus lorsque je met une image en fond d ecran et que j ajoute les des boutons label etc ca me coupe l image.
Merci bcp de votre reponse
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 22-01-2014 11:20
Quelle version d'appinventor ?
Dans l'éditeur de bloc de la v1 je place des blocs ou je veux sans problème.
Répondre | Répondre en citant | Citer
grougrou
+1 # grougrou 21-01-2014 23:20
Pourquoi lorsque l on ajoute des composants il est impossible d en placer un en haut un en bas a droite a gauche. doit on obligatoirement les mettre les uns en dessous des autres ?
Répondre | Répondre en citant | Citer
Frank SAURET
+1 # Frank SAURET 21-08-2013 14:57
Non il n'est pas déserté. Mais une heure pour répondre... c'est court. J'ai vu votre message en remontant de la plage ;-) et j'ai oublié de répondre.

Il suffit d'aller dans Other stuff et d'utiliser le composant web.
Répondre | Répondre en citant | Citer
Neospa
+1 # Neospa 17-08-2013 18:37
On a déserté ce post ?
Répondre | Répondre en citant | Citer
Neospa
+1 # Neospa 17-08-2013 17:39
N'y a t-il pas moyen que quand on clique sur un bouton, ça nous redirige vers une page internet ?
Répondre | Répondre en citant | Citer