Défis

Durée estimée: 30 minutes

Présentation des défis:

Cette page comprend des défis que vous devez réaliser dans un temps donné.Ils correspondent souvent à un exercice sur un thème particulier.
En général, un canevas de départ vous est fourni avec :

  • une partie des composants d'interface (mais une partie seulement),
  • des éimages préchargées ou données prédéfinies de manière à ce que vous ne passiez pas de temps à les récupérer
  • et parfois des parties du code.

Ces défis sont à réaliser en un temps limité, 5 mn pour la présentation, 15 mn pour la réalisation et 10 mn pour la présentation de la solution.

  • En mode "compétition" dès que vous avez finalisé un projet ou le premier jalon, exportes le fichier .aia sur votre ordinateur et envoyéez le par mail à l'adresse indqiéue par votre enseignant.
  1. Défi animation danse et musique avec des listes
  2. afficher une carte dans un navigateur avec open street maps
  3. scanner le code barre d'un produit alimentaire et obtenir ses ingrédients,

Défi "Animation / danse" :

Objectifs

Réaliser une application musicale où on peut faire danser un personnage en changeant l'image affichée quand on clique sur des boutons

Notions abordées:

  • les listes,
  • navigation dans les listes : précédent, suivant, ...

Ce qui est fourni :

Un canevas dans la galerie App Inventor Dance project

Ce canevas comprend :

  • un composant image (qui permet d'afficher une image)
  • une liste d'images et les fichiers associés déjà présents
  • un fichier son (mp3)
  • des icones pour les boutons

Ce que vous devez réaliser (jalon n°1):

  • ajoutez un composant lecteur audio
  • ajoutez un arrangement horizontal avec :

    • un bouton "suivant" qui affiche (dans le composant image) l'image suivante dans une liste
    • un bouton "precedent" qui affiche (dans le composant image) l'image précédente dans une liste
    • un bouton pour commencer à jouer le morceau (mp3 fourni)
    • un bouton pour pause
    • un bouton pour augmenteer le volume
    • un bouton pour diminuer le volume
  • au départ, le sonmagidoit être à 10.
  • Les images doivent défiler en continu : quand on est à la dernière le bouton suivant passe à la première et quand on est à la première, le bouton passe à la dernière.

    Ce que vous devez réaliser (jalon n°2):

    Ajoutez à l'arrangement horizontal :

    • un bouton "augmenterVolume" qui augmente le volume de 2 à chaque fois qu'on clique dessus
    • un bouton "réduireVolume" qui augmente le volume de 2 à chaque fois qu'on clique dessus
    • un label volume qui affiche le volume actuel

    En bonus si vous avez terminé

    Ajoutez un ascenseur (slider) qui permet de changer d'image entre la première et la dernière de la liste.

    Présentation de la solution

    Solution non accessible pour l'instant.

    Défi "Afficher une carte avec open street maps" :

    Objectifs

    Dans ce défi, vous allez

    1. examiner (depuis un navigateur sur votre PC) comment est construite l'URL qui permet d'afficher une carte avec open street maps,
      1. afficher une carte centrée sur des coordonnées et un facteur de zoom renseignés à l'écran,
      2. puis afficher la carte centrée sur vos coordonnées. Elle sera mise à jour avec vos déplacements.

      Notions abordées:

      • Adresses WEb, URL et API serveurs
      • Utilisation d'un composant Navigateur (Webviewer)
      • Encodage URL/URI

      Ce qui est fourni en entrée:

      Pour cet exercice vous allez créer un nouveau projet.

      jalon n°1 : Afficher une carte, zoomer et déplacer par programme

      Vous allez d'abord utiliser un navigateur sur votre PC pour afficher une carte avec open street maps : https://www.openstreetmap.org

      Puis examiner comment est constituée l'adresse internet de cette image,ici :
      par exemple : https://www.openstreetmap.org/#map=7/47.220/2.670

      Dans lequel vous pouvez identifier le protocole, le nom de domaine du serveur de cartes, puis des paramètres après #map avec le facteur de zoom, la latitude et la longitude séparés par des /

      Ensuite, examinez comment l'URL évolue quand vous :

      Ouvrez à présent un nouveau projet sur App Inventor, avec

      • un composant "afficheur Web" ou webviewer en remplir parent
      • 2 ou 3 arrangements horizontaux comprenant
        • un label et une zone de texte pour la saisie de la altitude, de la longitue et du fcateur de zoom.
        • et un bouton Go.
      • Renseignez les valeurs par défaut des latitude, longitude et facteurs de zoom,
      • Vous pouvez aussi copier/coller une URL openstreet maps dans la propriété correspondante de l'afficheur Web.

      Vous pouvez déjà voir ce queça donne avec ces premiers éléments.
      Puis Passez à la programmation des blocs.

      • Initialisez une variable globale URL avec une adresse internet valdie pour open street map (copier/coller), ou plutôt - c'est encore mieux - initialisez une variable locale URL dans le script du bouton : quand boutonGoToURL
      • Puis, avec un des blocs de l'afficheur WEb apppelz la pécédur qui demande au navigateur d'aller à cet URL.

      Testez cette version : au départ la carte affichée doit correspondre à l'URL définie dans les propriétés, et si vous cliquez sur le bouton, elle doit basculer à celle définie dans la variable URL.

      La suite doit être complétée par vous

      • Vous allez d'abord décomposer/recomposer (dans un bloc mettre URL ...) la variable URL sous forme de concaténation de ses différentes parties :
      • Puis vous allez remplacer les parties correspondant aux coordonnées et au zoom par celles lues dans les zones de texte.
      • Remarque : dans les blocs d'initialisation vous ne pouvez pas utiliser de variables ou propriétés qui ne sont pas définies au moment où cette variable est utilisée. Donc il est souvent nécessaire de faire ces calculs dans un bloc mettre URL ...

      Réalisez le code et testez :

      la carte doit changer si vous cliquez sur le boton après avoir modifié les coordonnées et le zoom.

      Présentation de la solution

      Solution non accessible pour l'instant.

      jalon n°2 : Modifiez le type de carte par programme

      Open street maps permet d'afficher plusieurs types de cartes. On va choisir le type en ajoutant un couple clef-valeur dans les paramètres de requête. C'est une méthode très générale que vous retrouverez souvent.

      Selon le type de carte :

      • standard : dans ce cas, il n'est pas nécesaire d'ajouter de paramètre à l'URL,
      • cyclable :dans ce cas on doit ajouter dans les paramètres un coupe clef/valeur : &layers=C
      • transport :dans ce cas on doit ajouter dans les paramètres un coupe clef/valeur : &layers=T
      • humanitaire :dans ce cas on doit ajouter dans les paramètres un coupe clef/valeur : &layers=H

      Dans la partie design

      • ajoutez un sélectionneur de liste ou un crurseur déroulant (spinner),
      • Par simplicité, au niveau des propriétés, vous pouvez mettre diectement dans les éléments de la liste, la chaine de caractères à ajouter à la fin de l'URL. Les éléments sont séparés apr des virgules et il ne doit pas y avoir de blanc ou espace (sinon ils seront dans la chaine de caractères).
      • Pour faciliter la mise au point, vous pouvez ajouter un label qui vous permettra d'afficher l'URL demandée.

      Dans la partie programme/blocs pour le sélcetionneur de liste

      • Ajoutez la liste des choix "avantPrise" si vous ne l'avez pas fait dans la propriétés,
      • "aprèsPrise" Récupérez la chaine de caractères à ajouter
      • vous avez intérêt à utiliser une variable pour définir le couple clef-valeur à ajouter à l'URL.

      jalon n°3 : déplacez la carte avec les mouvements de l'utilisateur

      Dans cette étape nous allons utiliser le composant de géolocalisation de votre smartphone.

      Comme vous ferez probablement vos développements à l'intérieur d'un batiment, il est probable que la géolocalisation par GPS (qui correspond au mode high precision / haute précision) ne fonctionnera pas. Vous devrez donc configurer la géolocalisation de votre smartphone en mode réseau ou économie d'énergie. Dans ce cas, la géolocalisation se fera avec les signaux Wifi, GSM, ...

      Si vous avez le temps ou si vous souhaitez en savoir plus, les différentes etcthniques utilisées apr votre smartphone pour vous géolocaliser sont expliquées dans la vidéo à l'adresse suivante.
      https://youtu.be/CEr-YfrJYFY

      Dans la partie design

      • ajoutez depuis la catégorie des capteurs, un composant "capteur de position",
      • dans la partie programme quand la position du capteur a changé, calculez l'URL avec la latitude et la longitude retournée par le capteur et faite appel à la précédure qui affiche cet URL dans le'affichuer Web.
      • Vous pouvez aussi vérifier et afficher dans un notificateur ou dans un nouveau label, les autres propriétés du cpateur de position, dont sa validité, son mode et sa précision.

      Présentation de la solution

      Solution non accessible pour l'instant.

      Défi "Scanner un code barre et consulter une base de données alimentaires :

      Objectifs

      Dans ce défi, vous allez

      1. utiliser le scanner de code barre pour reconaitre le code d'un produit alimentaire,
      2. consulter la documentation de la base de données open food facts pour savoir comment récupérer les informations de ce produit
      3. construire l'URL correspondante et afficher le résulta dans un afficheur Web

      Notions abordées:

      • Adresses WEB, URL et API serveurs
      • recherche documentaire

      Ressources en entrée:

      Pour cet exercice vous allez créer un nouveau projet.

      jalon n°1 : scanner un produit et afficher ses données

      Open food facts renvoie les caractéristqieus d'un produit partir de son code barre, par exemple pour le code :3329770052147 https://fr.openfoodfacts.org/produit/3329770052147

      Vous allez :

      • créer un projet App Inventor
      • Dans la partie Design :
        • ajouter un composant scanner et un bouton pour déclencher le scan
        • ajouter un composant afficheur WEb aevc comme URL par défaut, l'adresse web de Open Food facts
      • Dans la partie Programme :
        • adéclencher le scan du code barre qauna l'utilisateur appuie sur lebouton
        • au retour du résultat, construire l'URL de ce produit, et demander l'affichage de cet URL par l'afficheur Web

      Présentation de la solution

      Solution non accessible pour l'instant.