Application 1 - Durée 10 minutes

Code couleur :

Bleu = action sur l'ordinateur. Jaune = action sur le téléphone / tablette.

Mise en place

Ordinateur

  • Démarrage des ordinateurs sur le système d'exploitation Linux Debian. Identifiant + mot de passe [voir tableau A]
  • Sur un navigateur web (en bas de l'écran : ou dans le menu en haut à gauche : Applications / Internet / Firefox):
    • connexion au site https://appinventor.mit.edu/
    • puis Create Apps! 
    • Identifiant + mot de passe
      • votre compte google
      • ou le mien en cas de problème de compte. Me demander.
    • Interface Classique ou Néo, au choix.

Téléphone/Tablette

Objectif(s)

  • Téléphone connecté au WiFi de la salle
  • Application MIT AI2 Companion connecté à l'ordinateur

Réussite si

  • Modifications réalisées sur l'ordinateur répliquées sur le téléphone

Présentation de l'outil

Interface projet :

  • SI PARTAGE DE COMPTE GOOGLE :
    • Création d'un dossier personnel nommé pour chaque étudiant : Bouton New folder.
      Par exemple : Bob Dupont => BobD. Si déjà existant, rajouter une lettre ou un chiffre.
    • Retour à cet écran d'accueil : Bouton My Projects
    • MERCI DE NE RIEN SUPPRIMER ET DE NE PAS CASSER LE TRAVAIL DES AUTRES !
  • Refuser la création de 
  • Créer un nouveau projet :
    • Bouton New projet > nom INITIALES_App1
    • Revenir sur l'écran projet, selectionner le projet et le déplacer (Move) dans le dossier personnel.
  • Cliquer sur le projet pour (enfin...) le modifier. Vous êtes en Mode Designer.

Interface application :

  • Connecter le téléphone : Menu Connect > AI Companion
      ->
  • Application MIT A2I Companion : Scanner le QRCode ou taper le code pour se connecter.
    • Ne PAS cocher "Use legacy connection"
    • Attention : cela ne fonctionnera QUE si le téléphone est sur le réseau WiFi de la salle.
  • Remarque : si la connexion est perdue : Menu Connect > Reset Connection et refaire la manipulation de connexion.
    • Cela arrive souvent donc dès que vous avez l'impression qu'il y a un soucis -> Reset Connection !

 

L'écran du mode Designer s'utilise de la gauche vers la droite :

  • Zone 1 : Composants disponibles pour l'application, à glisser déposer dans la zone 2
  • Zone 2 : Aperçu de l'application, réorganisation des composants
  • Zone 3 : Organisation des composants et renommage des composants.
    • Les noms des composants permettent de simplifier leur utilisation en Mode Blocks.
  • Zone 4 : Propriétés du composant sélectionné.
    • Par exemple pour un bouton : Texte du bouton, couleur de fond, couleur du texte, typographie.

A faire

Ajouter un bouton sur l'écran. Constater son apparition sur le téléphone. Modifier quelques propriétés de ce composant dans la zone de droite, comme sa couleur ou son texte.

En mode Blocks (en haut à droite de l'interface ), cliquer sur l'élément bouton et prendre la fonction "When button1.click do"

Y mettre (pour l'exemple) l'action de grossissement du texte. A chaque appui sur le bouton, la taille du texte va grossir. Pour cela, il est nécessaire de rajouter une quantité à la quantité actuelle. Il est nécessaire d'utiliser des propriétés venant du bouton, et des propriétés mathématiques.

Le résultat, toujours côté Blocks ressemble à ceci :

Si tout se passe bien, sur le téléphone, chaque appui sur le bouton déclenchera l'action programmée.

Pour aller plus loin

Cette application n'est là que pour présenter le logiciel et valider le fonctionnement global ordinateur + téléphone + wifi + logiciels.

Il serait bien sûr possible de présenter chaque composant et chaque propriété des composants. Sauf que le temps passe vite !

Bref, direction l'application 2 !