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.

Téléphone/Tablette

  • Téléchargement et installation de l'application Lecture de QR Code SANS PUBLICITE :
  • Téléchargement et installation de l'application MIT AI2 Companion :
  • Connexion sur le réseau WiFi de la salle : Identifiant + mot de passe [voir tableau C]
  • Possibilité de recharger via les ports USB des ordinateurs
  • Confort = augmenter le temps avant la mise en veille de l'écran à 10 minutes (ou plus) : Paramètres > Affichage et luminosité > Extinction automatique de l'écran.

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.
  • SI PARTAGE DE COMPTE GOOGLE : Retour à cet écran d'accueil : Bouton My Projects
  • SI PARTAGE DE COMPTE GOOGLE : MERCI DE NE RIEN SUPPRIMER ET DE NE PAS CASSER LE TRAVAIL DES AUTRES !
  • 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.
    • 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.

 

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, 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 + 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 !