Fermer
DéveloppementMobile

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer

Google a lancé au mois de Juillet 2010 l’App Inventor, sous la forme d’un Google Labs pour aider sa plateforme à se développer. Malgré le nombre explosant d’applications sur l’Android, voici une application qui augmente de manière exponentielle le nombre d’applications sur ce système. Ce service permet de développer des applications Android directement depuis son navigateur, et sans réellement avoir des notions de programmation, de quoi permettre à presque tout le monde de créer des applications. Il est ensuite possible de les utiliser sur l’émulateur ou bien directement sur le téléphone. Les serveurs stockent vos travaux, ce qui vous permet de toujours en garder une trace.

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - App Inventor sur Google Apps

Pourquoi un tel service ?

Google a créé ce projet, car depuis son lancement on assiste à de grands changements dans la manière dont les gens utilisent leurs smartphones. Que ce soit sur un système Android ou iPhone, nos téléphones fournissent de nombreuses fonctionnalités reliées à Internet. Comme les gens sont de plus en plus à l’aise avec l’accès au Web par leur mobile, Google a voulu leur permettre de créer des applications. App Inventor va leur permettre de développer des applications, indépendamment de leurs connaissances en programmation informatique.

C’est un concept intelligent. Non seulement l’Android Market est une plateforme ouverte pour les développeurs (sans processus d’approbation), mais maintenant nous avons une vaste gamme d’applications spécialisées construites par des non-développeurs. Cela permet d’accroître radicalement le volume des applications dans le marché par rapport à l’App Store.

Comment ça marche ?

Google App Inventor permet de “prototyper” facilement des applications Android. Effectivement c’est très facile puisqu’il suffit d’effectuer un glisser-déposer des “blocs” graphiques pour créer son application. Cette manière de créer des applications cherche à être la plus simple et la plus accessible que possible. Ce sont d’ailleurs des étudiants non formés à l’informatique qui ont fait les tests utilisateurs pendant un an, dont Harold Abelson du MIT qui a conduit le développement chez Google explique la finalité de Google App Inventor :

The goal is to enable people to become creators, not just consumers, in this mobile world

La création d’applications utilise deux parties :

  • App Inventor Designer : permet de sélectionner les composants de l’application
  • App Inventor Blocks Editor : assemble les différents blocs de l’application et indique comment les composants doivent se comporter
Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - App Inventor Diagramme

Voici une vidéo montrant comment Google App Inventor fonctionne :

Il s’agit d’une application java (en ligne) dont toutes les manipulations se font en drag&drop comme le montre la vidéo ci-dessus. L’interface se présente sous la forme d’une boite à outils dont vous manipulez les objets à la souris… On y trouve des boutons, des timers, des images, des labels, des listes, des champs de mot de passe, etc… Tout ce qui concerne un AGL (Atelier de Génie Logiciel) est présent sur ce service en ligne. De plus, vous pourrez exploiter les fonctionnalités de votre téléphone comme : le GPS, l’accéléromètre ou les événements liés aux appels et à la réception de SMS. Enfin, vous pourrez également utiliser des composants sociaux, comme Twitter.

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Utilisation de Twitter dans la palette des composants

Votre application apparaît pas-à-pas sur votre téléphone étape par étape afin que vous puissiez tester votre travail que vous êtes en train de réaliser. Lorsque vous avez terminé, vous pouvez empaqueter votre application et produire une application autonome à installer.

Si vous n’avez pas de téléphone Android, vous pouvez réaliser vos applications en utilisant l’émulateur Android, un logiciel s’exécute alors sur votre ordinateur et se comporte exactement comme le téléphone.

Et la force d’App Inventor est l’imbrication des blocs permettant de créer une suite d’événements sans écrire une ligne de code…

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Blocs graphiques des composants

Ce n’est évidemment pas la première application utilisant le “simple” glisser-déposer pour programmer. Cette programmation aisée est même un standard dans le domaine de la robotique (MS RDS, …). Là encore Google réutilise des briques logicielles éprouvées.

Développez votre propre application ?

Dans cette partie, je vais vous montrer comment faire pour réaliser votre propre application Android. Vous allez le constater par vous-même c’est enfantin !

L’environnement est compatible avec Mac OS X (10.5+), GNU/Linux (Ubuntu 8+, Debian 5+) et Windows (Xp, Vista et 7). Les navigateurs Google Chrome 4+, Mozilla Firefox 3.6+, Apple Safari 5+ et Microsoft Internet Explorer 7+ sont supportés. Les téléphones pouvant officiellement utiliser ce service sont les Google (Nexus One, ADP1, …), T-Mobile et Motorola. Mais d’autres modèles de HTC, Samsung et Dell sont aussi compatibles, en y installant des applications supplémentaires.

Donc une fois connecté sur l’App Inventor, je récupère l’application disponible pour Mac OS X, permettant de faire communiquer l’application web avec le téléphone Android.

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Installation de l'application sur Mac OS X

Ensuite, j’ai configuré mon téléphone pour qu’il accepte la connexion avec App Inventor. Pour ce faire, allez sur cette page et vérifiez vos paramètres avec ceux exigés.

Une fois que tout est configuré, nous pouvons nous lancer dans la création de notre première application Android.
Pour ce faire, nous allons suivre un tutoriel présenté sur le site d’App Inventor. Celui-ci va nous permettre de prendre en main les trois principaux outils de travail :

  • Le design, il s’exécute dans votre navigateur web
  • L’éditeur de blocs, l’endroit où vous allez définir le comportement de l’application
  • L’émulateur, un dispositif mobile virtuel qui s’exécute sur votre ordinateur en parallèle d’App Inventor.

Allez c’est parti ! La première étape consiste à insérer un texte ainsi qu’une image, la seconde étant d’insérer un son lors du clic sur cette dernière.

Prise en main de l’environnement

Vous allez créer un nouveau projet, en cliquant sur le bouton “New” en haut à gauche puis en indiquant un nom pour votre projet. En ce qui me concerne, le projet va s’appeler “BlogNouvellesTechnologie”.

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Création du projet

Une fois votre projet créé, le navigateur ouvre le design, l’endroit où vous allez sélectionner les composants de votre application. Cette interface ressemble beaucoup à certains IDE comme Visual Basic ou Visual Sudio, etc…

Les composants d’App Inventor sont situés sur le côté gauche de l’écran sous le titre “Palette”. Pour utiliser un composant dans votre application, vous devez cliquer et le faire glisser au centre de l’écran, dans le “Viewer”.
Les composants ont des propriétés qui peuvent être modifiées vous permettant de changer la façon dont le composant va apparaître dans l’application. Pour afficher et modifier les propriétés d’un composant, vous devez d’abord sélectionner le composant souhaité dans la liste des composants.

Voici un aperçu des étapes que vous allez faire dans ce tutoriel pour terminer l’application:

Dans le Concepteur :

  • Ajoutez un composant “label”
  • Ajoutez un bouton qui va afficher l’image logo.png
  • Téléchargez le fichier test.mp3
  • Ajoutez un composant “sound” qui va jouer le fichier test.mp3

Dans l’éditeur de blocs :

  • Créez un gestionnaire d’événements qui va décrire la séquence sonore à jouer lorsque l’utilisateur tape sur le bouton

Je place donc mon “label” que je paramètre pour en modifier différentes propriétés (couleur, taille de la police, texte, …) puis, je place un bouton (“button”) que je personnalise en lui spécifiant une image.

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Ajout de l'image dans le projet

Ensuite nous allons ajouter le son à notre projet. Pour ce faire, cliquez sur “Media” pour développer la section spécifique aux médias dans la palette des composants, puis faites glisser un élément “Sound” et le placer dans le Viewer.

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Ajout du son dans le projet

Voici à quoi doit ressembler votre éditeur :

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Projet final

Prise en main de l’éditeur de blocs

Vos éléments sont tous en place, vous allez pouvoir coder les actions. Cliquez sur le bouton “Open Block Editor” en haut à droite. Votre navigateur (chrome en ce qui me concerne) me propose d’enregistrer un fichier .jnlp sur mon ordinateur.

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Lancement de l'éditeur de blocs

L’utilisation de l’éditeur de blocs va nous permettre de définir la façon dont l’application va se comporter. Voici les étapes à suivre pour faire jouer votre son :

  • Accédez à l’éditeur de blocs
  • Cliquez sur l’onglet “My blocks” dans le coin supérieur gauche. Ce dernier va nous permettre de visionner tous les éléments qui ont été posés dans l’éditeur (label, son, etc…)
  • Cliquez sur “Button1”
  • Faites glisser le bloc “Button1.Click” sur l’éditeur
  • Cliquez sur “Sound1”
  • Faites glisser le bloc “Sound1.Play” sur l’éditeur, et le déposer dans le bloc “Button1.Click”

Voici à quoi devrait ressembler votre éditeur de blocs :

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Éditeur de blocs après construction

Félicitation, votre première application est en marche ! Vous pouvez créer un package de votre application et de générer un code à barres, le télécharger sur votre ordinateur, ou le télécharger sur votre téléphone connecté en cliquant sur le paquet pour le bouton “Package for Phone”.

Ensuite il suffit de connecter le téléphone, ici ce sera un virtuel, et vous pourrez tester votre application. Rien de plus simple !

Démonstration de Google App Inventor, la création d’application Android par glisser-déposer - Connecter le téléphone

Maintenant que votre application est créée et que vous avez tout compris, vous pouvez dès à présent imaginer l’application du futur, donc à votre clavier et votre souris.

Conclusion

Avec cette manière de programmer, n’importe quel novice ou personne qui n’a jamais programmé de sa vie va pouvoir réaliser des applications personnelles et même professionnelles. Le risque avec l’utilisation d’AGL comme celui-ci, est que la structure d’application simpliste et plus ou moins pauvre en termes de fonctionnalités, va impacter ce que vous voulez développer, et surtout la finition que vous voulez y apporter.

L’autre défaut d’un tel système, c’est que les applications ne peuvent pas être envoyées directement sur l’Android Market. De même, il est impossible de récupérer les fichiers source pour ainsi exporter le projet sur un autre environnement de développement tel que Eclipse. De plus le travail collaboratif n’est pas possible, puisque chacun dispose de sa propre copie indépendante de celle de ses amis.

Enfin dernier désavantage, l’expansion peut, bien sûr, se faire au détriment de la qualité. Nous allons voir des milliers de nouvelles applications Android, mais seront-elles offrir une grande valeur ajoutée ?

Toutefois, Google mise sur une hausse à long terme : si l’App Inventor est tellement simple pour que des élèves puissent eux-même faire des applications, des enfants deviendront bientôt eux-mêmes les codeurs et peut-être qu’ils choisiront de développer des applications pour Android plutôt que iOS .

Google et Apple sont actuellement dans une chaude lutte pour gagner les cœurs et les esprits des développeurs. Google semble prendre également un autre tournant en essayant de gagner les non-développeurs.

Que pensez-vous ? Est-ce que App Inventor est un pari gagnant de la part de Google ?

Ressources

Pour en savoir plus :

[download id=”2631″]

Mots-clé : AndroidApp inventorémulateurGoogleGoogle App InventorGoogle Labs
Yohann Poiron

L’auteur Yohann Poiron

J’ai fondé le BlogNT en 2010. Autodidacte en matière de développement de sites en PHP, j’ai toujours poussé ma curiosité sur les sujets et les actualités du Web. Je suis actuellement engagé en tant qu’architecte interopérabilité.