Kiizoom Radio — App Inventor client

🇫🇷 Version française · 🇬🇧 English version

Client mobile Android sans code pour la web radio Kiizoom, construit avec MIT App Inventor. No-code Android client for the Kiizoom web radio, built with MIT App Inventor.

Ce dépôt fait partie du projet pédagogique RaaS (Radio as a Service) mené avec des étudiants de BTS SNO (Services Numériques aux Organisations).

Le projet RaaS diffuse des programmes audio pour un client : la web radio pour enfants Kiizoom, hébergée sur invethic.org, qui propose quatre canaux thématiques (comptines, contes, chansonnettes, histoires) via une API de streaming protégée par un jeton (token).

Deux clients consomment cette même API :

L'intérêt pédagogique est là : une même API, deux clients de nature totalement différente.

.
├── app-inventor/
│   ├── KiizoomRadio_ELEVE_starter.aia    # Interface construite, blocs VIDES (à distribuer)
│   └── KiizoomRadio_CORRIGE.aia          # Projet complet et fonctionnel
├── docs/
│   ├── TP_KiizoomRadio_AppInventor_ELEVE.docx     # Sujet de TP élève
│   └── TP_KiizoomRadio_AppInventor_CORRIGE.docx   # Corrigé + notes professeur
├── assets/
│   └── fond_kiizoom.png                  # Fond d'écran de l'application
└── README.md

⚠️ Si le dépôt est public et utilisé en évaluation, envisagez de placer le corrigé (*_CORRIGE.*) dans un dépôt privé séparé.

https://www.invethic.org/hcgi/api/stream?token=KZ-TEST-ESP32&channel=comptines

Le jeton KZ-TEST-ESP32 est un jeton de test destiné à la salle de cours. Aucun jeton client ne doit être versionné dans ce dépôt.

• Un compte Google (obligatoire pour ai2.appinventor.mit.edu)
• Un smartphone Android avec l'application MIT AI2 Companion (Play Store)
• PC et smartphone sur le même réseau Wi-Fi (les réseaux invités avec isolation client bloquent le Companion)

1. Se connecter à ai2.appinventor.mit.edu
2. Projets → Importer un projet (.aia) depuis mon ordinateur
3. Choisir KiizoomRadio_ELEVE_starter.aia (pour construire) ou KiizoomRadio_CORRIGE.aia (pour tester)
4. Connecter → AI2 Companion, puis scanner le QR code avec le téléphone
5. Pour générer un APK : Construire → App (enregistrer l'APK sur mon ordinateur)

Pour exporter son travail : Projets → Exporter le projet sélectionné vers mon ordinateur.

Interface (vue Designer)

Logique (vue Blocs)

Trois variables globales : jeton, urlBase, canaux (liste de 4 textes).

L'URL est construite à l'exécution par concaténation :

urlBase + "?token=" + ZoneJeton.Text + "&channel=" + sélectionner_élément(canaux, SpinnerChaine.SelectionIndex)

Point clé : SelectionIndex (position 1 à 4) est utilisé plutôt que Selection (texte affiché « Comptines », avec majuscule), ce qui sépare la couche présentation de la couche donnée. Rappel : en App Inventor, les listes commencent à l'index 1.

• Public : BTS SNO (post-bac, niveau 5) — transposable en BTS CIEL ou en école d'ingénieurs
• Durée : 3 h, en binôme
• Compétences : import/export de projet, distinction interface / logique, variables et listes, construction dynamique d'une requête HTTP, authentification par jeton, test sur matériel réel
• Évaluation : grille sur 20 fournie dans le sujet de TP

• Mémoriser le jeton avec un composant TinyDB
• Curseur de volume (Slider → Lecteur.Volume)
• Bouton « canal surprise » (nombre aléatoire entre 1 et 4)
• Détection d'absence de réseau avant lecture
• Comparaison de l'IHM mobile avec celle du client Tab5

Code et matériel pédagogique proposés à des fins d'enseignement. (Suggestion : MIT pour le code, CC BY-NC-SA 4.0 pour les documents de TP.)

This repository is part of the RaaS (Radio as a Service) teaching project run with BTS SNO students (French higher-education programme in digital services for organisations).

The RaaS project delivers audio programmes to one customer: the children's web radio Kiizoom, hosted on invethic.org, offering four thematic channels (comptines, contes, chansonnettes, histoires) through a token-protected streaming API.

Two clients consume that same API:

That contrast is the point: one API, two radically different clients.

.
├── app-inventor/
│   ├── KiizoomRadio_ELEVE_starter.aia    # UI built, blocks EMPTY (handed to students)
│   └── KiizoomRadio_CORRIGE.aia          # Complete, working project
├── docs/
│   ├── TP_KiizoomRadio_AppInventor_ELEVE.docx     # Student lab sheet (French)
│   └── TP_KiizoomRadio_AppInventor_CORRIGE.docx   # Answer key + teacher notes (French)
├── assets/
│   └── fond_kiizoom.png                  # App background image
└── README.md

⚠️ If this repository is public and used for graded work, consider moving the answer key (*_CORRIGE.*) to a separate private repository.

https://www.invethic.org/hcgi/api/stream?token=KZ-TEST-ESP32&channel=comptines

KZ-TEST-ESP32 is a classroom test token. No customer token should ever be committed here.

• A Google account (required by ai2.appinventor.mit.edu)
• An Android phone with the MIT AI2 Companion app (Play Store)
• Computer and phone on the same Wi-Fi network (guest networks with client isolation block the Companion)

1. Sign in at ai2.appinventor.mit.edu
2. Projects → Import project (.aia) from my computer
3. Pick KiizoomRadio_ELEVE_starter.aia (to build it yourself) or KiizoomRadio_CORRIGE.aia (to test)
4. Connect → AI2 Companion, then scan the QR code with the phone
5. To produce an APK: Build → App (save .apk to my computer)

To export your work: Projects → Export selected project (.aia) to my computer.

User interface (Designer view)

Logic (Blocks view)

Three global variables: jeton (token), urlBase, canaux (list of four channel names).

The URL is assembled at runtime by string concatenation:

urlBase + "?token=" + ZoneJeton.Text + "&channel=" + select_list_item(canaux, SpinnerChaine.SelectionIndex)

Key idea: SelectionIndex (position 1–4) is used rather than Selection (the displayed label "Comptines", capitalised), which keeps the presentation layer separate from the data layer. Note that App Inventor lists are 1-indexed.

• Audience: post-secondary students (EQF level 5); transferable to embedded-systems or engineering courses
• Duration: 3 hours, in pairs
• Skills: project import/export, UI vs. logic separation, variables and lists, dynamic HTTP request building, token authentication, testing on real hardware
• Assessment: a 20-point marking grid is included in the lab sheet

Lab documents are written in French; the App Inventor projects are language-independent (component names are in French and can be renamed).

• Persist the token with a TinyDB component
• Volume slider (Slider → Lecteur.Volume)
• "Surprise channel" button using a random number between 1 and 4
• Offline detection before playback
• Compare the mobile UI with the Tab5 client's touch HMI

Code and teaching material shared for educational purposes. (Suggestion: MIT for the code, CC BY-NC-SA 4.0 for the lab documents.)