Votre première application sur Android en moins de 10 mn

MIT App Inventor est un outil de programmation basé sur des blocs, dans un environnement graphique, qui permet à toute personne (même les novices), de commencer la programmation et créer des applications entièrement fonctionnelles pour les appareils Android.

Initialement MIT App Inventor était développé par le professeur Hal Abelson et une équipe de Google éducation quand Hal était en année sabbatique chez Google. App Inventor fonctionne comme un service Web administré par le personnel au Centre du MIT pour l'apprentissage mobile - une collaboration entre le département informatique du MIT, le Laboratoire d'Intelligence Artificielle (CSAIL) et le MIT Media Lab.

Dans ce qui suit nous allons monter une application simple en moins de 5mn sur cette plateforme. Cette application convertit les températures de Fahrenheit en Celsius.

L’URL de l’application MIT App Inventor est : http://ai2.appinventor.mit.edu/

Pour le moment les navigateurs supportés sont : Google Chrome version 29 ou plus, Safari version 5 ou plus et Firefox version 23 ou plus. Nous avons aussi besoin d’un compte gmail pour utiliser le service. Donc une fois authentifié, l’interface de l’application apparait. Nous pouvons créer autant de projets qu’on veut, toutes les données sont stockées dans le cloud.

Nous allons commencer notre projet cliquant sur le menu Projects puis en choisissant start new project

Nous allons appeler notre Projet Converter

App Inventor permet de faire les tests sur un émulateur ou mieux encore sur un portable ou une tablette Android. Pour cela nous allons d’abord préparer le portable pour qu’il puisse dialoguer avec la plateforme en installant une application MIT AI2 companion qui se trouve à l’adresse https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=fr

Vous pouvez aussi y accéder en utilisant le code QR suivant :

Revenons maintenant sur la plateforme et cliquons sur le menu Connect puis AI Companion

La fenêtre suivante s’affiche :

Sur le portable lancer MIT AI2 Companion

Nous pouvons soit saisir le code à 6 lettres ou bien scanner le code QR affiché sur la fenêtre

Dorénavant tout ce que nous allons faire sur l’interface web va être dupliqué en temps réel sur notre portable.

La fenêtre de l’interface est divisée en plusieurs parties : une palette d’outils, le viewer où on va disposer les différents composants, la liste des composants utilisés dans l’application en cours de développement et une fenêtre de propriétés.

Nous allons avoir besoin de deux labels et de deux zones de textes. Chaque zone de texte et le label associés doivent être juxtaposés. Pour cela, cliquer dans la palette sur Layout puis cliquer et glisser HorizontalArrangement vers l’écran de l’application dans la partie Viewer

Nous allons d’abord changer le titre de notre application. Pour cela, cliquer dans la fenêtre Components sur Screen1 et modifier la propriété Title de Screen1 à F2C Converter par exemple

Ensuite le conteneur HorizontalArrangement doit être étalé sur toute la largeur de l’écran. Le choisir dans Components puis modifier la propriété Width pour qu’elle devienne Fill parent (il est évident que le parent ici est l’écran)

Ajouter un Label et une étiquette à l’intérieur de HorizontalArrangement

Modifier les noms par défaut. Par exemple pour changer le nom du Textbox1, on clique dessus puis on clique sur le bouton Rename.

Ajouter un deuxième HorizontalArrangement puis un autre Textbox, un label et un bouton. L’interface doit ressembler à cela :

Si on consulte le portable, on voit l’interface suivant :

Le texte Température en degrés.. correspond à la propriété Hint des contrôles Textbox

Jusqu'à présent nous avons travaillés sur l’interface graphique de notre application. Il est temps de passer au code. Pour cela cliquer sur le bouton Blocks

Nous avons maintenant une fenêtre de blocks et le viewer ou notre code va apparaitre. Noter qu’on peut revenir à tout moment sur le look de notre application en cliquant sur le bouton Designer.

On doit dire à notre application ce qu’elle doit faire lorsque l’utilisateur clique sur le bouton convertir. Pour cela, dans Blocks, cliquer sur le bouton (que j’ai appelé ButtonConvertir), Les blocks associés à ce contrôle apparaissent

Choisir le block When ButtonConvertir.Click. Il est ajouté à l’écran. Cliquer maintenant sur le contrôle TextBoxTempCelcius. Choisir le block Set TextBoxTempCelcius.Text to puis glisser et relâcher le dans le creux du block précédent

Le code doit ressembler à cela

La formule de conversion entre les degrés fahrehneit et Celsius est : Celsius=(Fahrenheit -32)/1.8. Cela se traduit sous forme de blocks comme suit :

Nous avons eu besoin des blocks Math suivant

Sur le portable, nous allons introduire une température de 90 °F puis cliquer sur Convertir. Un résultat de 32.22 °C s’affiche dans la zone de texte correspondant

Bonus : Pourquoi ne pas annoncer le résultat une fois la conversion fait.

Ajouter le composant TextToSpeech à l’interface de l’application.

Ce composant est non-visible dans la mesure où il n’a pas d’aspect visuel sur l’interface.

Le code devient :

Nous avons utilisé le block Text Join qui permet la concaténation de deux chaines de caractères.

Une fois on est satisfait de l’application, on peut passer à la génération du fichier apk de deux manières : On clique sur le menu Build puis soit on télécharge directement le fichier apk qui sera généré ; soit générer le code QR qui permet l’accès direct au fichier sur le cloud

En choisissant la méthode du code QR, nous avons deux heures pour le consommer, sinon il faudrait générer un autre.

Si on scan le code, l’application est téléchargée puis installée. Toutefois il ne faut pas oublier de permettre d’installer les applications de Sources Inconnues.

Application Converter version 1

Vidéo sur Youtube

Amélioration :

Nous allons modifier notre programme pour qu’il puisse convertir dans les deux sens. C’est-à-dire, si on introduit une température en °C il la convertit en °F et inversement.

Le programme modifié se présente comme suit :

Nous avons utilisé les blocks : Control if/then/elseif, Math is a number qui teste le contenu des zones de texte et format as decimal number qui formate un nombre en précisant le nombre de chiffres après la virgule. Nous avons aussi créé deux procédures F2C et C2F.

Application Converter Version 2