Ce document présente App Inventor, un logiciel de programmation visuelle destiné aux débutants pour créer des applications mobiles sur Android. Il décrit les étapes d'installation, les interfaces de design et de programmation, ainsi que les méthodes de test et de partage des applications. App Inventor, développé par Google et le MIT, est accessible en ligne, gratuit et utilisé par des millions d'utilisateurs à travers le monde.

1. Création d’applications mobiles
pour débutants
INTRODUCTION A
APP INVENTOR

2. Apprendre la programmation et la création
d’applications mobiles avec App Inventor (sur Android)
1. Introduction : quoi, pour qui ?
2. Installation
3. Interface de design
4. Interface de programmation
5. Test
6. Installation et partage des applications
7. Aller plus loin
2

3. 1. Introduction

4. appinventor.mit.edu
Logiciel de programmation visuelle conçu pour l’initiation à la
programmation et à la création d’applications mobiles (sur
Android)
Conçu par une équipe conjointe de Google et du MIT en 2009
Open-source, gratuit, accessible en ligne
En 2015 : + 3 millions d’utilisateurs dans 195 pays, + de 7
millions d’applis créées à des fins pédagogiques, de prototypage
ou de publication (sur le Google Play Store)

5. 2. Installation

6. Adresse Gmail + Appli à télécharger
Pour démarrer sur App Inventor, rien de plus simple :
- Il faut se connecter à l’adresse « ai2.appinventor.mit.edu » muni
d’une adresse Gmail (dès la première utilisation)
- Pour tester en temps réel sur son téléphone (ou sa tablette) :
télécharger l’appli « MIT AI2 Companion » sur le Google Play Store
- Si vous n’avez pas de téléphone/tablette Android sous la main, vous
pouvez toujours tester avec l’émulateur en ligne, téléchargeable à
partir du site internet du logiciel
- Navigateurs à utiliser : Chrome ou Firefox sont recommandés, ça
marche avec Safari, Internet Explorer n’est pas supporté.

7. 3. Interface de design

8. Création de l’interface utilisateur de
l’application
2 interfaces de travail dans App Inventor : l’interface de design, et
l’interface de programmation
L’interface de design permet de concevoir l’apparence des écrans
de votre application : apparence visuelle, et composants invisibles
La définition des propriétés de ces différents composants se fait
dans cette interface (par défaut dans un premier temps)
Tous les médias externes (images, sons, etc.) à intégrer à votre
application se téléchargent également dans cette interface

9. 4. Interface de
programmation

10. Programmation du comportement de
l’application
L’interface de programmation permet de définir le comportement
de l’application et de ses différents composants, une fois qu’ils ont
été créés dans l’interface de design
La programmation se fait à l’aide de « blocs » précodés, rédigés en
anglais ou français (ou autre langue), qui s’emboîtent les uns dans
les autres selon la logique souhaitée
Les blocs de code ont déjà un ensemble de propriétés, méthodes
et événements associés, qu’on peut enrichir avec la création de
nouvelles procédures

11. 5. Test

12. Test, test, test !
Pour tester son développement en
temps réel, le logiciel permet de
générer un code barre qu’on scanne
à partir de l’appli « compagnon »
installée sur le téléphone
En quelques secondes, l’appli
apparaît sur l’écran et on peut la
tester sous quasiment toutes ses
coutures.

13. 6. Installation et partage

14. Installation de l’application sur le téléphone
Pour installer une application sur le
téléphone, 2 méthodes :
- Génération d’un code-barre à partir de
l’interface du logiciel (code valable 2
heures)
- Partage du fichier d’installation par email
(le plus simple pour le partager avec
plusieurs personnes).
On peut également publier les applis sur le
Google Play Store.
Les fichiers source sont également
partageables et modifiables par d’autres.

15. 7. Aller plus loin
Ateliers & Stages
(à partir de 13 ans)
CREATION
D’APPLICATIONS MOBILES
Inscriptions &
renseignements :
www.teen-code.com
teencodeedu

16. www.teen-code.com
teencodeedu