Version textuelle

Open food facts! est une base de données ouverte qui recense les caractéristiquess des produits alimentaires. On peut la consulter pour connaitre les ingrédients et les qualités nutritives de la plupart des produits alimentaires disponibles sur le marché

Présentation de l'application:

Objectifs:

Vous allez créer une application qui permet de scanner avec votre téléphone portable, le code barre de produits, au supermarché ou chez vous et d'afficher ses caractéristiques dans une page Web. Pour créer cette application, vous allez :

• utiliser l'environnement de développement d'App Inventor,
• voir plusieurs étapes de la réalisation d'un programme dont le design et la programmation,
• compléter votre compréhension des gestionnaires d'évènement (event handlers).

Réalisation

Cette application utilise l'Internet et le Web. Il est préférable que vou ayez vu la leçon correspondante mais vous pouvez aussi la voir après.

1° partie : conception, design de l'interface et choix des ressources

Dans cette étape nous allons d'abord examiner comment construire cette application avec

• un serveur de données sur Internet, dont on va précsier l'adresse et l'URL,
• et un scanner pour récupérer le code barre du produit à rechercher.

Nous allons :

• examiner les services proposés par le serveur open food facts,
• récupérer l'adresse de produits particuliers et voir comment cette adresse est construite à partir du code produit ou code barre,
• Nous connecter à App Inventor, sélectionner la langue et créer un nouveau projet,
• Construire l'interface utilisateur avec une fenêtre daffichage Web, un bouton pour déclencher le Scan et une zone de texte pour afficher le code barre,
• Sélectionner les autres ressources dont l'application a besoin, dont le scanner

Nous passerons à la programmation avec la vidéo suivante du cours.

Message
Sur certains smaprtphones ou pour certaines versions d'Android, dans la pahse de design, la popriété "hauteur" de la fenêtre Web, doit être mise à 90% au lieu de "automatique". La zone d'affichage du bouton pouvant être masquée.

2° partie : programmation, téléchargement de l'application et tests

Dans cette 2° partie nous allons programmer le comportement de l'application :

quand l'utilisateur clique sur le bouton Scan
	lancer l'application de scan
					 
quand le scanner renvoie le résultat (code barre)
	afficher le résultat de scan dans la fenêtre de texte du code barre
	construire l'adresse ou URL de la page du produit
	afficher dans la fenêtre de navigation la page correspondant à cet URL_Youtube_video

Après avoir réalisé le code correspondant en utilisant les blocs de programmation d'App Inventor, nouseffectuerons le transfert de l'application vers le smartphone. Pour ce prmeier cas, nous utiliserns le mode "connecte" qui effectue un transfert temporaire et nous verrons dans la leçon suivante, le mode "construire" qui effectue un trsnfert permanent.

Dans les deux cas, on généère un code barre qui est lu avec l'application "AI companion" installée sur vore smartphone. Nous vous rappelons que dans cette option de téléchargement, le smartphone et le PC doivent être sur le même réseau local.
(si jamais ça ne marchait pas, utilisez le mode "construire" qui n'a aps cette contrainte.)

Auto-contrôle

Nous reviendrons en détail sur les composants dans la leçon suivante, mais vous pouvez déjà essayer de répondre au petit quiz suivant.