Bonjour, je vais vous montrer comment faire une première petite application
qui va consister à afficher une image de Coluche
et quand on clique dessus, à jouer son appel de septembre 1985
qui est à l'origine des restaurantsdu coeur.
Comme c'est notre première application, on va dire un mot de la configuration logicielle.
Sur le PC on a besoin d'un navigateur, qui peut être firefox ou Chrome. Par contre, ça ne marche pas avec Internet explorer.
Si vous n'avez ni firefox, ni Chrome, installez en un. Personnellement j'utilise firefox.
Pour utiliser App Inventor, vous devez disposer d'un compte Google ou gmail.
Si vous n'en n'avez pas créez en un. L'adresse pour le faire est indiquée ici.
On va maintenant passer à la configuration du smartphone ou de la tablette Android,
sur laquelle je dois installer l'application MIT AI2 companion depuis le playstore
Donc, pour que vous voyez, j'affiche ici une copie de l'écran du téléphone que je tiens dans la main.
Je sélectionne le playstore et je demande l'application AI2 companion.
Elle apparait en haut de la liste, je clique dessus, je clique sur le bouton "installer", puis sur "accepter"
et lorsque l''application est installée,
elle apparait à l'écran de mon téléphone portable comme une icone.
Si je double clique sur cette icone, l'application s'ouvre
et on verra tout à l'heure commen sen servir.
Le dernier point à vérifier , c'est que le PC et le smartphone sont sur le même réseau wifi
ici, freeboxPierre
Voilà, nous avons terminé la configuration en mode Wifi sur un réseau local personnel
Alors attention ! cette configuration ne marche pas souvent sur les réseaux des écoles
en raison des règles de sécurité applicables
On va maintenant rentrer dans l'environnement de dévelooppement d'App Inventor.
en allant à l'adresse ai2.Appinventor.MIT.edu
il vous demandera le login et le mot de passe de votre compte Google,
et vous arriverez à l'environnent de développement App Inventor.
parfois en bas de la fenêtre
et vous devrez utiiser l'ascenceur
pour remonter en haut.
Si un projet a été ouvert précédemment c'est ce projet qui sera réouvert.
Je signale ici, que le changement de la langue se fait en haut à droite,
et vous pourrez choisir votre langue préférée, par exemple le français
La modification de la langue va déclencher une réinitialisation de l'environnement de développement App Inventor.
Pour revenir à la liste des projets, vous pouvez cliquer sur l'onglet "Projets" puis sur "Mes projets".
et vous avez ici la liste des projets sur lesquels vous travaillez.
Naturellement, si vous débutez, il n'y en aura aucun.
On va enfin pouvoir commencer la programmation
et on va le faire à partir d'un canevas applicatif qui est vide,
sauf qu'il dispose déjà de l'image et de la bande son de Coluche.
On va le faire en deux temps,
D'abord récupérer le fichier applicatif depuis internet vers notre PC
puis importer ce même applicatif depuis notre PC vers l'environnement de développement App Inventor
Le canevas applicatif se trouve en l'occurrence à l'adresse indiquée ici
et vous pouvez charger en cliquant dessus : "unePetiteIdéeStarter.aia"
que vous enregistrez sur votre PC.
ensuite, dans votre navigateur, revenez dans l'onglet MIT App Inventor
Cliquez sur "Projets"
et "importer le projet (.aia) de mon ordinateur"
cliquez sur "parcourir"
et allez chercher le fichier à l'endroit où il a été enregistré
En l'occurence "téléchargements/unePetiteIdeestarter.aia"
et vous cliquez sur OK
Le projet a été chargé et démarre
Voilà, on a donc maintenant un projet qui est vide
du point de vue du programme,
mais qui comprend déjà le fichier correspondant à Coluche
avec sa bande son.
On va maintenant réaliser le programme de cette application, en deux parties :
Le DESIGN dans lequel on va sélectionner
les boutoins et les textes qui seront visibles par l'utilisateur
et les autres ressources comme le lecteur pour la bande son
La deuxième partie va correspondre à l'écriture des blocs de programme
qui vont définir le comportement de l'application
pour chaque évènement, par exemple quand on clique sur l'image de Coluche.
alors commençons par la partie design
J'ai ouvert le projet "unePetiteIdee_starter"
et je suis passé en français.
Ce que je vais faire,d'abord, c'est enregistrer ce projet sous un nom différent
de manière à ne pas perturber le modèle initial
donc, je fais : "enregistrer le projet sous "
et au lieu de mettre "starter_copie" je vais l'enregistrer sius le nom "unePetiteIdee"
et je clique sur OK.
Je suis donc maintenant avec le projet "unePetiteIdee"
et dans l'interface correspondant à la partie Designer d'App Inventor.
Dans la colonne de gauche, je vois les ressources utilisables,
comme les boutons, les cases à cocher, etc.
et dans la aprtie de droite, je vais trouver
les menus me permettant de modifier les propriétés de cet interface.
autre élémént important à indiquer, c'est que si on appuie sur Ctrl+
ou Ctrl- on peut zoomer ou dezoomer
de quels composants ai-je besoin pour construire mon application ?
Alors pour que ce soit plus facile, je vais afficher un modèle de ce que je veux réaliser.
Dans lequel je vois que j'ai un texte en haut
une image, mais qui est en faitun bouton,puisque je veux poouvoir cliquer dessus pour jouer le discours de Coluche.
et ensuite, un autre texte.
Donc, je vais prendre un texte qui correspond à la notion de "label"
Je le dépose sur l'acran
Je prends ensuite un boton et je mets un deuxième label
J'aurai également besoin d'une ressource pour jouer l'apapel de Coluche.
Donc je vais dasn l'ongle des Media
et je prends un lecteur qui va me permettre de jouer la bande son.
Comme ce lecteur n'a pas d'interfacec visible, il apparait en dessous de l'écran
dasn la fenêtre du Designer.
Réglons maintenant les prpriétés des différents composants
en commençant par exemple par le bouton
L'image corespondant à ce bouton
je vais dire,dans la colonne de droite, que c'est "Coluche.jpeg"
et mon image apparait
Je vais supprimer le texte pour qu'il n'apparaisse pas en surcharge
et pour le label au dessus de l'image
je vais mettre Couche, 26/09/1985
Donc, dans la propriété "texte" de ce label on va mettre 26/09/1985
et la propriété texte du deuxième label, sera "cliquer sur l'image"
Voilà, ce que je remarque par ailleurs,
c'est que mes textes ici sont cadrés à gauche,
donc dans le composant écran, ce que je vais demander
c'est que l'alignement horizontal ssoit centré
l'autre aspect c'est que je préfèrerais avoir un fond noir
donc je vais demander que la couleur de fond soit noire.
Mais dans ce cas là, il faut que le texte correspondant à mes labels soit blanc.
donc il faut que je choisisse blanc pour la couleur de mes textes
de la même manière pour le deuxième label.
Ce que je remarque aussi, c'est que mes caractères sont un petit peu trop petits,
donc je vais demander une taille de caractères de 20
je vais demander aussi la m^e taille de caractères pour le titre au dessus de l'image
une autre information que je dois fournir,
c'est le nom du fichier son que je dois jouer quand je clique sur l'image
alors cette information, je vais la donner dans le lecteur, ici
et la source que je veux, c'est le fichier "coluche26091985.mp3"
Voilà, on a terminé la partie Design, on peut passer aux blocs,
J clique donc, en haut à droite sur "les blocs"
Ce que je dois définir dans cette partie, c'est le comportement de mon application pour chaque évènement
les évènements, je n'en n'ai qu'un ici, c'est quand je clique sur le bouton
Donc je vais sélectionner le bouton,
et je vois qu'il y a en haut un évènement qui s'appelle " quand bouton.clic"
qu'est-ce que je dois faire quand on clique sur le bouton ?
eh bien, je dois jouer le morceau,
donc je vais dans le composant "lecteur" et je dis "lecteur commencer"
A priori, j'ai terminé mon programme.
Ce que je vais faire maintenant, c'est le tester.
Alors on va faire ces tests, mais pour que vous voyez ce que je fais sur mon téléphone, je vais l'afficher
à droite de la fenête App Inventor
Voilà ... donc ça, c'est le téléphone que j'ai dans la main
Alors comment faire pour transférer le programme depuis mon PC vers le portable ?
eh bien, je sélectionne "connecte"
et j e clique sur "companion AI"
Je vois apparaitre une trame ou un flashcode,
e du côté de mon portable, je clique sur "MIT AI2 companion"
que l'on a installé auparavant
ensuite je clique sur "scan QR code"
et je vais mettre mon téléphone, devant le flashcode
C'est ce que je viens de faire, et il a reconnu le flashcode
et il télécharge de lui même l'application.
La voilà,
je vois ici mon téléphone, avec l'application que je viens de réaliser
Je peux maintenant cliquer sur la tête de coluche :
Aors c'est bien, notre application tourne,
La dernière chose que je voudrais faire, c'est installer cette application sur le portable pour pouvoir partir avec !
Eh bien, pour ça, il faut que je fasse ... construire
donner le QR code pour fichier .apk
j'attends quelques secondes
le QR code apparait, je fais comme tout à l'heure
je clique sur "MIT AI2 companion"
je demande le scan du QR code
je scanne ce code
et cette fois ci, au lieu de faire un transfert temporaire, il va faire un transfert permanent,
si bien que l'application sera "installée" sur mon portable.
donc je clique sur "installer" et j'ouvre l'application
Alors la différence entre les deux essais que j'ai faits,
c'est que dans le premier cas, l'application tournait en grande partie sur mon PC
mais me permettait des corrections interactives, nécessaires pour la mise au point
Dasn le deuxième essai j'ai installé l'application (apk) sur mlon portable, et j'en dispose en permanence
Voilà, c'était notre première application !