Archives de catégorie : App Inventor

[App Inventor] Du binaire à l’héxadécimal

Publié le par

 

Le But de l’application :

Convertir le binaire de l’application précédente en héxadécimal

Moyen mis en oeuvre pour ce tutoriel:

-Utilisation des procédures
-utilisation des “ifelses” (et oui encore)
-Utilisation de (beaucoup) de listes et de variables.

1) Prérequis :

-Avoir fait le tuto précédent sur le binaire (sinon télécharger de code source ici)

2) Objectif :
Avec notre liste Bits faite dans le précédent tuto, afficher le nombre hexadécimal du nombre décimal entré par l’utilisateur dans la hint box.

3) La structure dans App Inventor :

Voila le screenshot plus de précision en-dessous
Source : Image LP2I

Le Tableau suivant montre les objets à rajouter au projet binaire.

Objet Nom Propriétés
Label HexaResultLabel Width=Fill parent
TextAlignement=center
Label Label3 Width=Fill parent
TextAlignement=center
Text=Hexadécimal :

4) La Structure dans le bloc editor

4.1 Les variables en + :

Nom de la variable Type Contenu Description
HexBit number 0 Valeur du bit (0,1,2,4,8)
HexChiffre number 0 Valeur du paquet de 4 bits (0,1,2…,E,F)
HexNombre text Text vide Nombre final (ex:A2F1)

Voila les variables à rajouter dans le bloc editor voici le résultat :

Source : LP2I

Une fois les variables définies, les listes !

4.2 Les listes en +

Nom de la liste Contenu Description
Hexa (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) Les valeurs de l’hexadécimal
AddIndex (0,4,8,12) Nombre de bits pour passer d’un paquet de bits à l’autre.
ValeurBits (1,2,4,8) Valeur que peut prendre un bit (sans le zéro)

Je reviendrais sur ces listes au moment de leurs utilisation (notamment AddIndex).
Une image de vérification pour la route :

Source : LP2I

Une fois toutes les variables et listes définies passons au programme !

4.3 Une nouvelle structuration avec les procédures :

Comme le programme commençais à toucher le sol j’ai décider de le décomposer et pour cela il existe un outils très pratique : le bloc procédure !
On va donc créer 3 procédure :
-16 bits
-8bits
-et 4 bits
On va donc déplacer le programme pour 16 bits dans la procédure 16 bits et on va appeler la procédure à la place :

On va donc pouvoir travailler sur la procédure 16 bits sans changer la fonction “ButtonConversion.Clik”

4.4 La Syntaxe de la conversion

On va faire une première boucle qui va tester 1 par 1 les 4 bits de chaque paquet pour savoir si le bit à la valeur 1 ou 0:
Si on a 1 (donc un ifelse et oui encore) on va déterminer sa position dans les quatre bits et on va assigner à HexBit la valeur 1,2,4 ou 8 en fonction de celle-ci
Si on a 0 on va juste assigner à HexBit la valeur 0

On va faire un deuxième boucle entourant la première qui va l’exécuter 4 fois pour chercher le nombre hexadécimal de chaque paquet.

Voila la boucle explication plus bas :

Voila la procédure de conversion en entier l’explication est juste en-dessous.
Source : Image LP2I

Valeur des cycles des boucles et placement de celle-ci et du ifelse

On a bien les deux boucles imbriqués l’une dans l’autre avec un ifelse dans la deuxième.
Les deux boucles on le même nombre de cycles : de 1 à 4 (j’ai pris 1 comme valeur de départ pour ne pas avoir de +1 partout après)

Test du ifelse

On va tester dans la liste Bits si le bit lu est égal à 1.
Pour cela on va chercher la valeur d’index à ajouter dans la liste AddIndex par rapport au cycle de la grande boucle et on lui ajoute la valeur de la petite boucle: ex : on ce place dans le cas du test du bit 13 on est donc au paquet 4 la valeur du cycle de la grande boucle est 4 donc on va chercher dans la liste AddIndex la valeur 12 on lui ajoute sa position dans le paquet (la première ici donc 1) et on a la position du bit.

Vert : valeur de cycle de la grande boucle dans la liste AddIndex
Bleu : valeur de cycle de la petite boucle
Source : Image LP2I

Assignation de la valeur du bit

Si le bit testé est égal à 1 on va assigner à HexBit sa valeur par rapport à sa position.
Si le bit testé est égal à 0 on va assigner 0 à HexBit dans le esle-do.

Fin du ifelse

On va donc ajouter la valeur du bit à HexChiffre puis on remet HexBit à 0

L’assemblage du nombre hexadécimal

En dehors de la petite boucle (mais toujours dans la grande ) on va chercher le chiffre hexadécimal correspondant au chiffre trouvé à la fin de la petite boucle et on va l’ajouter à HexNombre pour former le nombre hexadécimal final comme-ceci :

On remet ensuite HexChiffre à 0 pour le prochain paquet.
Source : Image LP2I

L’affichage du nombre

Une fois le nombre final stocké il ne nous reste plus qu’a l’afficher (en dehors des deux boucles) avec “set HexaResultLabel”.

Je met le code source pour ceux qui voudrai jeter un coup d’oeil :
Hexadécimal
Et l’apk pour ceux qui veulent leur convertisseur :
Hexadecimal apk
/!\ Il faut appuyer 2 fois sur le bouton convertir pour avoir un nombre juste /!\

[App Inventor] Du décimal au binaire

Publié le par

Le But de l’application:

Afficher un nombre binaire correspondant au nombre décimal entré.

Moyen mis en oeuvre pour ce tutoriel:

-Utilisation des “ifelse” et “for range” dans le bloc “control” du bloc editor
-Utilisation des “Lists” (et oui encore) en plus approfondit.
-Utilisation des puissances (ex: 2^10) dans app inventor ( avec la fonction “expt”)

1) Prérequis:

Aucun ! ou presque : Beaucoup de temps devant soit et une bonne dose d’aspirine si vous n’êtes pas encore entré dans le monde de la programmation.

2) Objectif:

Avec un nombre entré par l’utilisateur (dans une hint box) calculer le nombre binaire et l’afficher dans un label ainsi que le nombre de bits qui le composent.

3) Structure dans App Inventor:

J’ai sélectionné le label prévu pour le résultat puisque je n’avait rien mis dedans
Source : Image LP2I

-1 hintbox
-1 bouton
-1 label pour le résultat
-1 label pour le nombre de bits (facultatif)(Attention le label n’est pas présent quand j’ai pris le screen de ma fenêtre app inventor)

Voilà c’était très dur je conçois, maintenant on passe à la suite :

4) Editor :

4.1 Définitions des variables et autres listes :

Variables avec… Rien dedans !:

Voila tout est dit on va donc créer 2 variables avec des text vides:

2 variables vides !
Source : Image LP2I

Nbr: récupère le nombre rentré dans le hintbox pour lui faire subir toutes les opérations que l’on veut.
result: stocke le nombre binaire final

On crée une variable Bits qui va stocker les 16 bits dont on a besoin. On va donc créer une liste avec 16 zéros :

Voila une belle liste de zéros
Source : Image LP2I

4.2 Une fonction = tout le programme

Et oui le programme n’a qu’un seul évènement : l’appui sur le bouton conversion.
On va donc ajouter à notre bloc editor une seule et unique fonction “ButtonConversion.Click”

Source : LP2I

On va ensuite initialiser nos fonctions pour les remettre à zéros (si l’on veut faire plusieurs conversions) et assigner le nombre rentré par l’utilisateur dans la variable Nbr.

A chaque fois que l’on appuie sur le bouton Conversion. Les variables result et BitsLabel sont mis à zéro, Nbr prend la valeur du nombre entré par l’utilisateur.
Source : LP2I

Mise en place des “ifesles”:

C’est la que ça ce corse
On à 3 type de longueur de bits : 4, 8 et 16
On a donc trois ifelses comme ceci:

Un petit schéma pour que ce soit clair ^^
Source : LP2I

Les tests sont logiques puisque le nombre maximum pour:
-16 bits = 65535
-8 bits = 255
-4 bits = 16

Voilà la structure dans app inventor :

Voila la structure dans app inventor (j’ai pris aussi la fin de la fonction avec “set ResultatLabel to result”)
Source : LP2I

Gardez bien à l’esprit le schéma de tout-à-l’heure puisqu’il va nous guider pour la suite.

Programme de conversion 16 bits

Voila la procédure de conversion pour 16 bits elle est relativement similaire aux autres (8 et 4) je ne develloppe donc que celle-ci.

On sait que pour convertir un nombre décimal il faut le soustraire au différentes puissances de 2. Si la soustraction est possible le bits correspondant à la puissance (2^2 = bit 3) prend la valeur 1, on effectue la soustraction et on passe au bit suivant. Si elle n’est pas possible on passe directement à la puissance suivante soit le bit suivant (le bit que l’on a passé prend alors la valeur 0).

Cette procédure doit se répéter le nombre de fois qu’il y a un bit (soit 16 fois ici) on ne va donc pas la modélisée 16 fois (je vois vos yeux qui brillent) et on va plutôt utiliser une boucle.

La boucle “for range”

D’abord c’est quoi une boucle ?

C’est une fonction très pratique de la programmation qui nous permet de répéter un nombre de fois défini (ou infini) une même action.

Maintenant que c’est clair pour tout le monde je continue :

On veut que la boucle ce répète un nombre de fois défini (le nombre de fois qu’il y a de bits je rappelle)
Donc notre boucle aura 16 cycle ici
Ensuite, on veut que à chaque fois qu’un cycle s’exécute :
-On teste le nombre avec une première puissance de 2 (la première pour 16 bits c’est 2^15).
-Si on peut le soustraire on soustrait la puissance à notre nombre et on change le bit correspondant par la valeur 1.
-Si on ne peut pas le soustraire on ne fait rien et on change le bit correspondant par la valeur 0.

Dit comme ça c’est simple maintenant dans le bloc editor :

Essayer de placer tout seul la boucle “for range” qui se trouve dans la palette “built-in”/”control” (ref. au schéma plus haut. Rappel : c’est la procédure 16 bits)

Une fois placée vous devez obtenir ceci :

Voilà la boucle de base crée par App inventor
Source : Image LP2I

-variable i: (vous pouvez la renommer) elle fait partie de la boucle for (elle ne peut pas être utilisée ailleurs) et représente le numéro de cycle.
-start: il faut mettre un nombre ici qui représente le départ de la boucle (j’ai mis zéro dans mon cas)
-end : idem sauf que c’est l’arrivée (j’ai mis 15. De 0 à 15 il y a 16 cycles, pile ce qu’il nous faut)
-step : tout simplement le pas entre 2 cycles (ici quand la boucle se répète on ajoute à la variable i 1. Laissez comme tel)

ce qui doit donner ça :

Voila on a fait le plus facile (ne faites pas cette tête la j’ai pas eu la correction moi)
Source : LP2I

Ne reste plus qu’a la remplir attaquons dès maintenant le plus difficile :

Dans la procédure j’ai dit “si” il y a donc un “ifesle” dans la boucle.
Son test par contre est différent des autres parce que l’on veut savoir si une soustraction est possible ou pas.
C’est la qu’il va falloir ruser parce qu’on ne peut tester qu’une égalité ou une inégalité.
Quand on fait la soustraction d’un nombre plus grand sur un nombre plus petit (quand la puissance est trop grande par rapport au nombre)
le nombre devient… négatif !
se qui nous donne :

(l’opération de la puissance sur le nombre) >= 0.

On teste donc si le nombre est supérieur ou égal à 0.

L’opération de la puissance sur le nombre :

Dans la procédure on veut soustraire le nombre à la puissance correspondant au bit voulu.
On place donc le nombre soustrait par la puissance.

la puissance :

Plus compliqué ici puisqu’on va devoir récupérer notre variable i pour celle-ci. En effet si on veut que la puissance change quand un cycle change il faut donc introduire la variable de celui-ci.
Il faut aussi savoir comment on introduit une puissance dans app inventor.
Voilà magie :

Ici la variable i est X
Source : Image LP2I

-On retrouve donc le … >= 0
-On soustrait le chiffre (Nbr)…
-… a 2^15-X ici

Pourquoi 15-X ? puisque la variable commence à 0 et que nous on veut commencer par la dernière puissance (2^15).
Donc à chaque cycle de la boucle “for” la puissance va diminuer.

La conversion :

On va se placer dans le cas ou la condition est vrai (on fait prendre la valeur 1 au bit)
Il faut d’abord que l’on enlève la valeur de la puissance et que l’on stocke le résultat dans la variable Nbr pour pouvoir utiliser le nombre sur la puissance inférieure dans la prochaine boucle.

ça ne vous rappelle rien ?
Source : Image LP2I

Et oui c’est la même chose qu’au dessus sauf que ce n’est plus un test.

Ensuite, on va remplacer un item de la liste bits.
Pour cela on va utiliser la fonction “replace list item”:

-On va lui indiquer la liste bits
-On va lui dire que l’index désiré c’est X+1 (normal, un index ne peut pointer vers 0 et notre boucle commence à 0)
-Et enfin on va lui dire qu’on remplace le 0 par un 1
le tout en image…

On attribue la valeur 1 au bit X+1
Source : LP2I

On rempli maintenant la partie “esledo” du “ifelse”
Ce n’est pas bien compliqué il faut juste copier le “replace list item” et changer le 1 par 0 C’est tout ^^.

Voici la fonction en entier “ifelse” dans la boucle “for”:

Source : Image LP2I

Attention on a pas fini la procédure 16 bits (on reste donc dans la boucle “for”) !
Il faut maintenant rassembler tout les 0 et les 1 qui composent le nombre binaire.
Pour cela on va appeler la fonction “set global result to”.
On va mettre dedans un “join” qui va rassembler à chaque fois qu’une boucle ce termine les 0 et les 1.
Il est composé d’un “select list item” qui va chercher dans la liste bits l’item 16-X (On part du plus grand bit au plus petit) et on lui ajoute le reste du nombre binaire dans la 2ème partie du “join”.

La fin de la boucle for pour 16bits.
Source : Image LP2I

Et voila vous pouvez souffler (un peu c’est pas fini mais vous avez fait le plus dur).
La boucle “for” en entier pour pas vous tromper:

Et voilà la partie la plus dur du tuto est faite (ne vous inquiéter pas il y en a deux autres similaires ^^)
Source : LP2I

Voila vous n’avez plus qu’a refaire la même chose pour les nombres de 4 bits et 16 bits.

Je met le code source pour les feignants (ou pour la correction):
Binaire

[App Inventor] Trouver sa Résistance. Utilisez des listes pour modifier une image.

Publié le par

Le But de l’application :

Trouver facilement une résistance avec comme base sa valeur en Ohm.

Moyen mis en oeuvre pour ce tutoriel :

-Utilisation de l’élément ListPicker (dans la palette “Basic”)
-Utilisation de sprites pour un changement d’images simples
-Affichage d’une valeur composé de plusieurs élément de listes (Label)

1) Prérequis :

Pour ce tutoriel j’ai utilisé plusieurs images :

La base de la résistance. Source: Image LP2I

Note : l’image du dessous n’a pas de légende puisqu’elle est trop petite c’est donc le fond pour un anneau de la résistance (sachant qu’il vous en faudra un pour chaque couleur prise par un anneau soit noir, marron, rouge, orange, jaune, vert, bleu, violet, gris et blanc ( je n’ai pas fais or et argent pour ce tutoriel).( elle est aussi de source LP2I).

2)Objectif :

Afficher les anneaux de couleur de la résistance voulue par l’utilisateur avec comme entrées 4 paramètres : 1er, 2ème, 3ème chiffre ainsi que le nombre de zéros (multiplicateur) sous forme de liste. On affiche aussi la valeur de la résistance pour que l’utilisateur ne se trompe pas.

3) La structure dans App Inventor :

Screen de la fenêtre App Inventor.
Source : Image LP2I

Voici donc le screen de ma fenêtre de App inventor une fois l’application finie.
J’ai commencer par ajouter un canvas avec à l’intérieur 5 ImageSprite (non visibles): 1 pour la résistance, et 4 pour les anneaux (1er chiffre, 2ème, 3ème et multiplicateur (nombre de zéros)). Viens ensuite 2 Labels : le premier affichant “la valeur de la résistance :” et le deuxième le résultat. En dessous ce trouve les 4 listes.

Bien définir une liste :

Point important ici : les choix séparés par une virgule dans ElementsFromString
Source: Image LP2I

Propiétés des listes :

1er chiffre : valeur de 1 à 9 (on ne compte pas le 0 puisqu’on ne peux pas avoir 010 comme valeur de résistance )
2ème chiffre : valeur de 0 à 9
3ème chiffre : idem
multiplication :de 10^0 à 10^9 ( représentation sous forme de puissance )

4) Editor :

La variable principale : couleurs ! :

Comme les couleurs des anneaux sont les mêmes pour tous j’ai donc défini une variable couleurs comme ceci :

La GROSSE variable couleurs
Source : Image LP2I

Ajout d’un “Make a list” avec tout les fonds de couleur (faites attention à bien tous les uploadés avant).

L’évenement affichage de l’anneau pour les trois chiffres des listes :

Objectif : Quand on a sélectionné un choix dans un ListPicker, l’anneau avec la couleur désiré s’affiche dans le canvas.
On appelle donc la fonction “.AfterPicking” dans la palette du ListPicker.
On lui demande d’afficher le sprite concerné.
Puis on lui demande de prendre l’image correspondant au fond désiré on appelle donc un “select list item” (Built-in/List) avec comme list “couleurs” et index “.Selection” de notre ListPicker + 1 ( puisque l’index est de 1 à 10 alors que le listPicker de 0 à 9 on ajoute donc 1 a la valeur de la liste).
Si dessous l’exemple avec le liste FirstNumbList :

Affichage du premier anneau (même principe pour les deux autres)
Source : Image LP2I

On répète cette fonction pour chaque chiffre.

L’évenement affichage de l’anneau pour le multiplicateur :

La syntaxe est à peu près la même que les trois chiffres sauf que l’on ne va pas récupérer la valeur du choix de la liste puisque qu’on a mis des puissances de 10. on va donc remplacer le “.Selection” par “.SelectionIndex” (sans le + 1 puisque qu’on commence à 1 zéro).

“.Selection” devient “.SelectionIndex”
Source : Image LP2I

Affichage de la valeur de la résistance (Optionnel sachant que j’ai encore des bugs pour cette partie je pose juste les idées):

On avait prévu un label dans la fenêtre App Inventor pour afficher la valeur de la résistance montrée dans le canvas.
On place donc dans chaque “.AfterPicking” une fonction “ValeurOhm.text” avec comme valeur le 1er, 2ème et troisième (avec des “join”):

Embricage de plusieurs “join” pour former un chiffre
Source : LP2I

J’ai ajouter un “text” au début pour l’espace après les deux points de “Valeur de la résistance :” (note : on aurait pu la mettre dans l’autre label)

Affichage des zéros après les trois chiffre :

On pourrait juste afficher le contenu de la sélection “multiplicateur” (puissances de 10) après les trois chiffres mais j’ai voulu afficher les zéros derrière pour faire un chiffre uni.
J’ai donc créé une autre variable “nbrZero” comme ceci:

Des 0 de 0 à 10 !
Source : Image LP2I

On appelle donc un “.SelectionIndex” et on le place à la fin de “ValeurOhm.Text”:

La fin de “ValeurOhm.Text”
Source : Image LP2I

Voila je poste le code source pour y jeter un coup d’oeil ou l’amélioré si vous le souhaiter :
Code_source_Resistance

Pour faire fonctionner l’appli sans bug il faut choisir d’abord le multiplicateur

Ouvrir une page HTML dans une application Android avec App Inventor

Publié le par

Voici comment ouvrir des pages HTML dans une apllication Android, avec App Inventor, depuis un composant de type WebViewer :

– Uploader vos fichiers HTML dans votre application depuis App Inventor : aller dans la fenêtre Media, située sous la fenêtre Components, puis cliquer sur Upload New.
– Ajouter un composant  de type WebViewer (dans les composants “Not ready for prime time”).
– Dans le blocs editor, ajouter un bloc WebViewer1.GoToUrl avec un bloc text contenant l’adresse de la page HTML.
Ce bloc peut être utilisé dans n’importe que évènement (butoon1.click par exemple, screen1. initialyse, …)

Attention à l’adresse de la page html :
Pour l’émulation utiliser : file:///mnt/sdcard/AppInventor/assets/nomfichier.html
Pour la compilation utiliser : file:///android_asset/nomfichier.html

Exemple de blocs :

Ouvrir une page appelée ici Essai3_300113.html, par exemple lors de l’appui d’un bouton appelé lien1_html_Interne, dans notre cas. Le texte dessus est pour le développement, dessous pour la compilation finale. (Source : LP2I)

Le fichier HTML peut contenir ce qu’on veut avec le formatage souhaité. Cela est très utile pour afficher simplement du texte formaté.
Le fichier html peut faire appel à un gif animé. Uploader le fichier .gif comme la page html.

Exemple de fichier html avec un gif annimé :

<!doctype html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>Animated Gif</title>
</head>
<body>
<p>
<img src=”ani.gif” width=”100%” alt=”” title=””>
</p>
</body>
</html>

Source : http://puravidaapps.com/snippets.php#ani

 

Utiliser la résolution de l’écran de la tablette avec App Inventor

Publié le par

Par défaut, l’application développée avec App Inventor utilisera une résolution maximale de 480×320 au moment d’être exécutée sur la tablette. Pour éviter cela il faut désactiver le mode de compatibilité de l’affichage pour que la résolution de l’écran de la tablette soit prise en compte. Ce paramètre n’est pas rendu accessible directement par Android. Des applications permettent d’accéder à ce paramètre comme par exemple Spare parts, Marketizer, …

– Installer l’application Spare parts.
– Décocher l’option Compatibility Mode.
– Redémarrer la tablette.

Votre application créée avec App Inventor peut maintenant utiliser la résolution de la tablette (1280×800 dans mon cas au lieu de 480×320).
Ceci fonctionne sur ma tablette sous Android 4.0.3, mais pas sous les versions antérieures à Android 3.2, mais peut-être pas non plus sous Jelly Bean.
Attention, contrairement à ce qu’on peut lire parfois, il n’est pas nécessaire de rooter la tablette pour changer ce paramètre d’affichage.

Décocher Compatibility Mode avec Spare Parts (source : vodeblog.com)

Quelques liens :
http://developer.android.com/guide/practices/screen-compat-mode.html

 

Liens et trucs utiles pour développer avec App Inventor

Publié le par

1) Liens utiles en Anglais

http://puravidaapps.com/snippets.php (une mine d’exemples basics ou avancés)
http://puravidaapps.com/snippets.php#htmlread (pour lire du HTML)
http://puravidaapps.com/javascript.php (pour intégrer du javasript)
http://www.tair.info/faqs-and-how-tos/how-tos/ (une autre mine de tutoriels)
http://www.tair.info/faqs-and-how-tos/common-tasks/ (y compris des applications basiques)
https://www.youtube.com/watch?v=y6gZhTb0M_4 (pour ouvrir une page web dans le navigateur)
http://appinventortutorials.com/tag/text-box-2/ (idem)
https://play.google.com/store/apps/details?id=appinventor.ai_mletsch80.AppInvActivityStarter (pour gérer l’ouverture d’applications)

http://puravidaapps.com/tribblehunter.php (très bien pour faire du multi-écran)

2) Trucs utiles

– Copier / coller des blocs : simplement CTRL C et CTRL V.

– Ajouter des commentaires à des blocs, désactiver des blocs : à partir du menu contextuel (clic droit sur un bloc)

Premiers pas avec App Inventor : une “application” test sur la LGV

Publié le par

Voici un premier essai d’une application avec une animation interactive et divers liens, développée avec App Inventor.
Je suis parti de mon travail actuel sur le développement d’une étude de cas sur la signalisation sur la Ligne à Grande Vitesse (LGV) Tours Bordeaux. Mon objectif était avant tout de tester quelques une des possibilités offertes par App Inventor. Je ne me suis pas focalisé sur la pertinence de l’analyse technique de la LGV, ni sur la pertinence des objectifs pédagogiques.

Un premier écran avec une animation interactive évoque ici l’envoie par un centre de contrôle à distance du trafic des TGV, d’informations aux conducteurs, par l’intermédiaire d’une signalisation codée qui chemine à travers divers matériels au sol, ainsi que les rails. L’information envoyée peut être différente sur chaque portion de ligne (canton de 1,5 km). Dans le cas où l’on souhaite faire ralentir un TGV, on l’informera d’une vitesse maximale décroissante sur chaque tronçon.

Le train peut se déplacer sur la voie avec le doigt.
L’animation utilise des images et du textes (qui varient dynamiquement en fonction de la position du doigt qui déplace le train).
Les boutons cliquables dessous donnent accès à des liens de plusieurs type :
. Un lien vers une page web qui s’ouvre avec le navigateur (sans fermer l’application). Il semble que le navigateur plante si on ouvre ce lien après YouTube (bug ?). Relancer l’application dans ce cas.
. Un lien vers vers une page web dans un viewer situé sur la page de l’animation qu’il faut faire défiler (pour l’instant il faut tirer les boutons vers le haut : à améliorer !).
. Un lien vers une page html intégrée à l’application (donc pas sur le web), qui ne contient que tu texte dans mon exemple. La page HTML s’ouvre dans le même viewer que précédemment.
. Un lien vers YouTube, qui ouvre l’application YouTube (cliquer sur la flèche retour pour revenir).
. Un lien vers un fichier pdf est masqué car non fonctionnel dans cette apllication. Il fonctionne avec un fichier pdf sotcké en local, mais cela n’a que peu d’intérêt avec des élèves. Un lien vers un fichier pdf stocké sur Dropbox ne fonctionne pas, même si le lien ne nécessite pas de mot de passe. Acrobat Reader s’ouvre sans télécharger le fichier pdf. L’interface web de Dropbox s’ouvre bien dans le viewer, sans permettre le téléchargement. Il faut donc l’ouvrir dans le navigateur, comme avec le premier lien.

– Voici l’application (.zip à dézipper pour obtenir le .apk qui permet l’installation) :

LGV_300113_V2_Appli

Version du 06/02/13 (en 1280×800, multi-écran, avec formulaire sur Google Drive, …) :

LGV_060213_V2_Appli

– Voici le code source (.zip à télécharger dans App Inventor sans le dézipper) :

LGV_300113_V2.zip

Version du 06/02/13 (présentation dans un article à venir) :

LGV_060213_V2.zip

– Voici mes composants et les blocs (version du 30/01/13) :

 

Développer des applications Android avec App Inventor

Publié le par

Présentation d’App Inventor le 24 janvier 2013

Les connaissances de base pour commencer à développer des applications Android :
– Qu’est qu’Android ?
– Quels outils utilisent les développeurs habituellement ?
– Pourquoi et comment est né App Inventor ?
– Quelques exemples d’applications développées avec App Inventor.
– Quels sont les avantages et inconvénients d’App Inventor ?
– Comment installer Java et App Inventor ?
– L’environnement de développement et les outils d’App Inventor.
– Création d’une première application très simple (pour essayer).
– Comment partager des codes sources ?

1 Android

Androïd est un système d’exploitation développé initialement pour les smartphones.
Il utilise un noyau Linux qui est un système d’exploitation libre pour PC.
Il intègre tous les utilitaires nécessaires à un smartphone. Il est optimisé pour les outils Google (Mail, agenda, maps, Youtube, …).
Android est libre et gratuit et a été ainsi rapidement adopté par des fabricants.
La société Android a été rachetée en 2007 par Google.
Android est aujourd’hui utilisé dans de nombreux appareils mobiles (smartphones et tablettes tactiles notamment).
Les applications sont exécutées par un processeur de type ARM à travers un interpréteur Java.
Android concurrence iOs d’Apple qu’il tend à dépasser en nombre d’utilisateurs.
Windows Phone reste en retard.
Android évolue pour mieux gérer l’hétérogénéité des appareils qui l’utilisent.

2 Développer pour Android

Google fournit gratuitement un kit de développement (SDK) prévu pour s’intégrer (sous la forme d’un plugin) à l’environnement de développement Eclipse (libre).
Il permet de développer des applications codées en langage Java pour les différentes versions d’Android.
Java est un langage de programmation, orienté objet, développé par Sun Microsystèmes, sorti en 1995. Sun Microsystèmes est racheté en 2009 par Oracle.
Une application écrite en Java est facilement portable sur plusieurs système d’exploitation, dont Android, Linux, iOS, Windows.
Une application exécutable sous Android (interprétable par une interface en Java) est un fichier avec l’extension .apk.
Google Play (anciennement Android Market) est une boutique en ligne qui simplifie la distribution des applications pour Android.
Google Play représente une source importante de revenus pour Google qui prend 30% du prix de vente (donc il reste 70% pour les développeurs).
25 Milliards d’applications installées en sept 2012 (comme pour iOs).
Revenus de l’Apple Store 4 fois supérieurs à ceux de Google Play mais Google progresse beaucoup plus vite.

3 Historique du logiciel App Inventor

2009 : Début du développement du logiciel App Inventor par Google à partir de recherches dans l’enseignement de l’informatique faites par le MIT(Institut de technologie du Massachusetts, Boston près de New-York).
Objectif : Permettre à des étudiants qui débutent en informatique d’apprendre à programmer sans se noyer sous le code Java.
2011 : Google rend App Inventor opensource. Le MIT poursuit le développement.
2012 : Version bêta d’App Inventor diffusé par le MIT. Encore en version bêta aujourd’hui.

4 Avantages et inconvénients d’App Inventor

4.1 Avantages d’App Inventor

. Logiciel conçu à des fins pédagogiques (avec des profs).
. Logiciel très bien documenté (site dédié, ebook gratuit en pdf, tutoriels, …), surtout en anglais, mais aussi en français.
. Prise en main rapide par des élèves niveau lycée (dès la classe de seconde)
. Environnement simple et efficace
. Pas de langage à apprendre, ni de lignes de code à écrire : pas de risque d’erreur de syntaxe.
. Programmation graphique : des blocs à définir, à déposer et à assembler, comme un puzzle.
. Accès à toutes les ressources de la tablette : écran tactile, multimédia, microphone avec reconnaissance vocale, les capteurs (accéléromètre, boussole, GPS, …), le WiFi, le bluetooth, connexion internet, mémoire interne pour la gestion de bases de données, …
. Test de l’application pendant son développement, par émulation, directement sur la tablette en Wifi (live testing). Test possible également sur le PC.
. Création d’applications fonctionnant sur tous les appareils Android.
. Possibilité de diffuser des applications via Google Play (25$ par compte, 70% du prix de vente pour le développeur).
. Possibilités d’échanges entre développeurs : application exécutable (.apk) ou code source pour App Inventor (.zip).
. Logiciel libre, gratuit, et multi-plateforme (Wondows XP, Vista, Seven, Mac, Linux).
. App Inventor fonctionne en mode Cloud : Les fichiers sont tous sauvegardés sur les serveurs de Google et accessibles à partir de votre compte Google.
. Logiciel de plus en plus utilisé et qui continue d’évaluer grâce au MIT.

4.2 Inconvénients d’App Inventor

. App Inventor fonctionne en mode Cloud : Des temps de latence peuvent être assez longs. La compilation se fait sur les serveurs du MIT. Une application complexe nécessitera un temps assez long de compilation. Les serveurs peuvent être surchargés voire indisponnibles.
. Pas de code Java modifiable : il faut utiliser une passerelle vers le SDK (pour les développeurs en Java).
. Ne permet pas toutes les possibilités offerte par une programmation en Java avec Eclipse (SDK de Google).
. L’anglais peut être un défaut pour certains.
. Encore en version Bêta.

5 Exemples d’applications développées avec App Inventor

– Applications de la communauté utilisant App Inventor déposées sur le site du MIT :
http://gallery.appinventor.mit.edu/#
Exemple : Molecular movement

6 Installation de Java et d’App Inventor

Page d’aide du MIT (en anglais) pour l’installation.

6.1 Installation et test de Java sur votre PC

Tester si Java est installé sur votre PC avec la dernière version en allant sur cette page de test de Java.
Si nécessaire une mise à jour sera proposée.
Si Java n’est pas installé, aller sur la page de téléchargement de Java.
App Inventor s’exécutera depuis les serveurs du MIT. Il utilisera une fonction de Java, appelé Java Web Start, qui  permet l’exécution d’une application Java à partir d’un navigateur Web (fichier .jnlp).
Tester ici Java Web Start. Pour ce test il s’agit de lancer un éditeur de texte type notepad.
Causes possibles de problèmes : pare-feu, configuration navigateur, configuration réseau, …

6.2 Installation d’App Inventor

. Télécharger l’installer pour Windows : AppInventor_Setup_Installer_v_1_2.exe (environ 90 Mo).
. Lancer l’installation (de préférence en mode administrateur).

7 L’environnement de développement et les outils d’App Inventor

7.1 Lancer App Inventor et créer un nouveau projet

. Se connecter à Internet.
. Ouvrir votre navigateur et vous connecter à votre compte Google.
. Se connecter au site Internet d’App Inventor du MIT : http://beta.appinventor.mit.edu/
Cela peut-être assez long parfois car App Inventor est lancée depuis le Web en mode cloud.
. Créer un nouveau projet :
Cliquer sur My Projects (en haut à gauche) / New / Project Name (sans espace) / OK
Votre projet est sauvegardé sur votre compte Google (donc dans le cloud).
. 1ère fenêtre = Component Designer :
Permet de sélectionner les composants de l’application (boutons, textes, …) et de définir leurs propriétés (taille, couleurs, position, textes, …).
Se décompose en : une palette de composants disponibles, le viewer qui permet de disposer les composants sélectionnés (mais le rendu n’est qu’indicatif), la liste des composants sélectionnés mais aussi des médias (fichiers images ou audio listés dessous), puis les propriétés données à ces composants.
L’App Inventor Designer s’exécute dans une fenêtre de votre navigateur.
. 2ième fenêtre = App Inventor Blocks Editor :
Permet d’assembler les différents blocs de l’application et indique comment les composants doivent se comporter.
Pour l’ouvrir : cliquer en haut à gauche sur “Open the Blocks Editor”.
App Inventor lance le Blocks Editor depuis les serveurs du MIT et propose d’exécuter le fichier AppInventorForAndroidCodeblocks.jnlp. Après téléchargement, Java ouvre la fenêtre du Block Editor sur votre PC (cela peut être assez long).
La palette à gauche contient les blocs à assembler dans la partie droite de la fenêtre pour décrire le comportement de votre . application. Les blocs peuvent être standards (dans l’onglet “Built-in”) ou définis spécifiquement pour votre application (dans l’onglet “My Blocks”).

7.2 Connecter sa tablette en Wifi à App Inventor

. Installer App Inventor Companion sur votre tablette.
App Inventor Companion est une application Android pour vous connecter en Wifi à App Inventor sur votre PC. Le plus simple est d’installer cette application depuis Google Play.
. Se connecter à votre tablette depuis la fenêtre du Block editor :
Cliquer sur Connect to device / WiFi : un code de 6 caractères est donné.
Lancer l’application App Inventor Companion sur votre tablette, saisir sur la tablette le code de 6 caractères donné précédemment (recommencer si le temps prévu est dépassé).
. Si vous n’avez pas de réseau WiFi, vous pouvez vous connecter en USB. L’installation d’un driver USB adapté à votre tablette peut être nécessaire (et éventuellement probléamatique).
. Si vous n’avez pas de tablette (là c’est pas de chance !), vous pouvez utiliser un émulateur en cliquant sur New Emulator.

8 Création d’une première application très simple (pour essayer)

Partons du tutoriel proposé par le MIT pour créer une première application : “Bonjour minette”.
Premier tutoriel téléchargeable ici (en anglais).
– Objectif :
Créer un bouton cliquable avec une image de chat.
Faire miauler le chat quand on clique sur l’image.
– 1ère étape : créer les composants spécifiques à notre application dans le Component Designer.
Création d’un bouton avec l’image et le son.
Dans la palette (à gauche) : cliquer et déposer un Button (dans Basic).
Dans Propriétés (à droite) : ajouter le fichier image, puis un texte.
Dans la palette : cliquer et déposer un Sound (dans Media), qui apparaît dessous le viewer dans les composants non visibles, mais aussi dans la liste des composants à droite,
Dans Propriétés : ajouter le fichier son (dans Source).
– 2ième étape : définir le comportement des composants dans le Blocks Editor
Définir ce qu’il faut faire quand on clique le bouton (= un événement à gérer) :
Dans My Blocks (à gauche) :
Cliquer sur Button1, puis cliquer et déposer (droite) le bloc “when Button1.Click do”
Cliquer sur Sound1 puis cliquer et déposer le bloc “call Sound1.Play”
Assembler les deux blocs précédent pour former “when Button1.Click do call Sound1.Play”
Un son valide l’assemblage.
On peut ajouter d’autres événements, par exemple faire vibrer la tablette si on appuie sur le bouton.
Dans My Blocks (à gauche) :
Cliquer sur Sound1 puis cliquer et déposer le bloc “call Sound1.Vibrate”.
Pour définir une durée de vibration de 500 ms par exemple.
Cliquer dans l’espace de travail, choisir Math, 123, puis éditer la valeur numérique du bloc qui apparait.
Assembler ce bloc avec le précédent.
On peut ajouter encore un autre événement : miauler si on secoue la tablette :
Dans le Component Designer, ajouter un composant pour l’accéléromètre.
Cliquer sur Sensors (palette à gauche), cliquer sur AccelerometerSensor1, puis déposer.
Dans le blocks Editor :
Ajouter un bloc pour gérer l’événement AccelerometerSensor1.Shaking (depuis My Blocks).
Ajouter et assembler un bloc “call Sound1.Play” pour cet événement.

Fenêtre du Component Designer d’App Inventor (Source LP2I)

Blocs de l’application dans le Blocks Editor (Source LP2I)

8.1 Compiler votre application pour obtenir le fichier .apk

. Dans le Component Designer :
Cliquer sur “Package for Phone” / Download to this Computer.
Une barre de progression apparaît alors pendant la compilation sur les serveurs du MIT.
Enregistrer le fichier .apk de votre application.

8.2 Installer et tester votre application sur la tablette

. Configurer votre tablette pour autoriser, temporairement, l’installation d’applications qui ne proviennent pas de Google Play.
. Fermer éventuellement l’application App Inventor Companion sur votre tablette (qui permettait de tester l’application avant compilation).
. Récupérer le fichier .apk de votre application dans votre tablette.
. L’ouvrir pour l’installer.
. Lancer l’application.

9 Partager des codes sources

Depuis le component Designer :
Dans My Projects : More actions
choisir upload source pour ouvrir un code source zippé (.zip)
choisir download source pour récupérer l’application sélectionnée, sous la forme d’un fichier .zip.

10 Autres ressources

Diaporama de José Rouillard (universiété de Lile)
Electropol
Tutoriel d’Objectif Nux
ebook sur App Inventor de David Wolber (libre et gratuit)