Pensée logique et programmation

Développer
avec

Présentation : App Inventor est une application développée par

Google et évolué grâce à MIT (Massachusetts
Institute of Technologie)

App Inventor permet de créer des applications pour

appareils Android à travers une interface purement
visuelle et de configurer les actions de l’application
par un système de blocs logiques.

Avec App Inventor, vous pourrez réaliser vos

applications et les installer sur votre smartphone.

Remarque : on peut utiliser App Inventor online et aussi hors ligne

Accès à App Inventor :

Pour utiliser App Inventor online, il vous faudra obligatoirement :

 un compte Gmail
 un smartphone ou tablette Android pour tester votre application
 l’application MIT AI2 Companion installée.
 Rendez-vous sur le site suivant avec votre compte Google : http://ai2.appinventor.mit.edu
Présentation de l’interface :
1

Choisir la langue :
Français

Commencer un
nouveau projet
Saisir le nom de votre
projet et commencer la
création de votre
application

Remarque : le nom du projet ne doit pas commencer par un numéro, ni contenir des espaces, ni
être un nom d’une autre application qui se trouve dans notre smartphone par exemple Gmail.

En cliquant sur « Ok », l’écran suivant s’affiche

Palette des composants Screen1 : écran Les propriétés du

Liste des composants
(objets) qu’on peut virtuel pour bien composant
utilisés dans le screen
utiliser dans la zone de placer les objets sélectionné dans la
travail (screen1) liste précédente
 2
Tester une application
Pour tester une application avec App Inventor, il y a 3 méthodes

1
ère
1 méthode
Tester avec le QR code
2
- Télécharger l’application
MIT AI2 companion
sur le smartphone
- Choisir le menu « Connecte » puis la
commande « Compagnon AI »
- Scanner le QR code ou saisir le code
- Enfin tester l’application sur le smartphone

2ème méthode 1
Tester avec l’émulateur
- Télécharger sur votre ordinateur 2
l’application Ai2 Starter 3
- Choisir le menu « Connecte » puis la
commande « Emulateur »

3ème méthode 1
Tester avec un câble USB
- Choisir le menu « Connecte » puis la
commande « USB » 2
- Programmer votre projet puis le tester avec
votre smartphone
 3

Création d’application avec

Activité N°1
Créer une application AppInventor intitulé « App1 » permettant
de changer la couleur d’un texte ainsi que la couleur de l’écran
(Interface ci-contre)
1ère étape : designer
- Configurer l’application :
* Titre : 1ère application
* Nom de l’application : App1
- Insérer l’arrangement et les composants nécessaires
(Boutons et zone de texte)
- Configurer les propriétés des composants :
 Arrangement_horizontal1
- Alignement horizontal : centrer
- Hauteur : 50 pixels / Largeur : remplir parent
 Boutons
- Couleur de fond : rouge/bleu
- Gras/Italique
- Taille de police : 20
- Hauteur : automatique / Largeur : 90 pixels
- Forme : arrondie
- Texte bouton1 : rouge / Texte bouton2 : bleu
- Alignement texte : centre
- Couleur texte : blanc
 Zone de texte
- Couleur de fond : par défaut
- Gras/Italique
- Taille de police : 25
- Hauteur : automatique / Largeur : remplir parent
- Texte : ma première application
- Alignement texte : centre
- Couleur texte : noir

2ème étape : blocs (programmation de l’application)

Ajouter des blocs afin d’assimiler les comportements suivants :
- Lorsqu’on clique sur le bouton « Rouge », la couleur de l’écran devient rouge et la couleur du texte
devient bleue.
- Lorsqu’on clique sur le bouton « Bleu », la couleur de l’écran devient bleue et la couleur du texte
devient rouge
3ème étape : tester l’application
a) tester l’application en utilisant l’émulateur
b) générer un fichier .apk à télécharger puis installer et tester l’application sur le smartphone

Création d’application avec

Activité N°2
Créer une application App Inventor intitulé « App2 » permettant
de calculer de résultat de la somme, la soustraction, la multiplication ou
la division de deux nombres
(Interface ci-contre)
1ère étape : designer
- Configurer l’application :
* Titre : 2ème application
* Nom de l’application : App2
* Insérer les arrangements, les zones de texte, l’arrangement,
les boutons et l’image.
- Configurer les propriétés des composants :
 Arrangement_horizontal
- Alignement vertical : centrer
- Hauteur : 50 pixels / Largeur : remplir parent
- Couleur du fond : noir
 Les labels :
- Gras / Italique - Taille de police : 20
- Texte : « Nombre1 :, Nombre2 : , Résultat : »
- Alignement texte : centrer - Couleur de texte : blanc
 Les zones de texte :
- Couleur de fond : jaune
- Gras - Taille de police : 20
- Nuance : vide
- Couleur de texte : noir
 Boutons
- Couleur de fond : blanc
- Gras - Taille de police : 20
- Forme : arrondie
- Texte bouton1 : + Texte bouton2 : - Texte bouton3 : * Texte bouton4 : /
- Alignement texte : centre
- Couleur texte : noir
 Image
- Image : nommée « calculatrice » situé sur le bureau
- Hauteur : 200 pixels / Largeur : 200 pixels

2ème étape : blocs (programmation de l’application)

Ajouter des blocs afin d’assimiler les comportements suivants :
- Lorsqu’on clique sur le bouton « + », la zone de texte « résultat » affiche le résultat de nb1+nb2
- Lorsqu’on clique sur le bouton « - », la zone de texte « résultat » affiche le résultat de nb1-nb2
- Lorsqu’on clique sur le bouton « * », la zone de texte « résultat » affiche le résultat de nb1*nb2
- Lorsqu’on clique sur le bouton « / », la zone de texte « résultat » affiche le résultat de nb1/nb2

5
5
3ème étape : tester l’application
a) tester l’application en utilisant l’émulateur
b) générer un fichier .apk à télécharger puis installer et tester l’application sur le smartphone

Partie bloc de l’activité 1

Partie bloc de l’activité 2

 6
Création d’application avec

Activité N°3
Créer une application nommée « animaux » qui permet d’afficher
les images de quelques animaux (Interface ci-contre)

1ère étape : designer

- Configurer l’application :
* Titre : 3ème application
* Nom de l’application : animaux
* Insérer l’arrangement, les boutons et les images
- Configurer les propriétés des composants :
 Arrangement_horizontal
- Alignement vertical : centrer
- Largeur : remplir parent
- Couleur du fond : noir
 Boutons
- Couleur de fond : gris clair
- Gras - Italique - Taille de police : 20
- Forme : arrondie
- Texte bouton1 : vache Texte bouton2 : canard Texte bouton3 : chèvre
- Alignement texte : centre
- Couleur texte : noir
 Image
- Images : nommées « vache, canard, chèvre » enregistrer dans le dossier animaux situé
sur le bureau

2ème étape : blocs (programmation de l’application)

Ajouter des blocs afin d’assimiler les comportements suivants :
- Lorsqu’on clique sur le bouton « vache », uniquement l’image de la vache s’affiche
- Lorsqu’on clique sur le bouton « canard », uniquement l’image de la vache s’affiche
- Lorsqu’on clique sur le bouton « vache », uniquement l’image de la vache s’affiche

Activité N°4

Créer une application nommée « convertir » qui permet de convertir

un nombre octet en KO, MO et Go (Interface ci-contre)
Le bouton « effacer » permet d’effacer le contenue des différentes zone
de texte.
 7
Partie bloc de l’activité 3

Partie bloc de l’activité 4

8