br-checkin

Blood Runners — Pointage des arrivées par QR code

Application de pointage pour la course caritative d’Halloween. Un bénévole scanne le QR code du dossard d’un coureur avec son téléphone ; le statut “Arrivé” est mis à jour en direct dans le Google Sheet.

Architecture

Étape 1 — Installer le script (backend)

  1. Dans le Sheet : Extensions > Apps Script.
  2. Supprime le contenu par défaut de Code.gs et colle le contenu de apps-script/Code.gs.
  3. Choisis un code bénévole (ex. HALLOWEEN26, au moins 6 caractères pour limiter le brute-force). Dans l’éditeur Apps Script : icône ⚙️ Paramètres du projet > Propriétés du script > Ajouter une propriété :
    • Propriété : STAFF_PIN
    • Valeur : ton code choisi
  4. Déployer > Nouveau déploiement :
    • Type : Application Web
    • Exécuter en tant que : Moi
    • Qui a accès : Tout le monde
    • Clique sur Déployer, autorise l’accès.
    • Copie l’URL du Web App (https://script.google.com/macros/s/AKfycb.../exec).

Pour re-tester le jour J sans polluer les vraies données : la fonction reinitialiserArrivees (à exécuter manuellement dans l’éditeur, jamais depuis l’app) vide toute la colonne Arrivé.

Étape 2 — Configurer le frontend

Ouvre webapp/config.js et remplace APPS_SCRIPT_URL par l’URL copiée à l’étape 1.4.

Étape 3 — Héberger et publier le frontend (GitHub Pages)

✅ Déjà fait : le projet est poussé sur github.com/guillaumebernis-source/br-checkin et GitHub Pages est activé (branche main, racine).

L’app est disponible sur :

https://guillaumebernis-source.github.io/br-checkin/webapp/

Le repo doit rester public pour que Pages fonctionne gratuitement (un repo privé désactive Pages sur un compte GitHub gratuit).

Pour publier une mise à jour (ex. après avoir renseigné config.js à l’étape 2) :

git add -A
git commit -m "Mise à jour config"
git push

Pages redéploie automatiquement en 1-2 minutes après chaque push.

Alternative sans terminal : dépose les 4 fichiers de webapp/ par glisser-déposer sur Netlify Drop — tu obtiens une URL HTTPS instantanément.

Étape 4 — Le jour J

  1. Chaque bénévole ouvre l’URL de l’app sur son téléphone, saisit le code bénévole une seule fois (mémorisé ensuite sur son téléphone).
  2. Il scanne les QR codes des dossards au fur et à mesure des arrivées.
  3. Résultat affiché immédiatement :
    • 🟢 Vert : arrivée enregistrée, avec numéro/nom/prénom.
    • 🟠 Orange : “Cette personne est déjà enregistrée comme arrivée” (double scan).
    • 🔴 Rouge : dossard inconnu ou erreur réseau (le scan est automatiquement réessayé une fois).
  4. Le Google Sheet se met à jour en direct — tu peux le garder ouvert en parallèle pour un suivi global (nombre d’arrivées, etc.).
  5. Un bouton “🔦 Activer le flash” apparaît sous la caméra si l’appareil le supporte. Sur iPhone (Safari), il ne s’affichera jamais — Apple ne permet pas aux navigateurs de contrôler la torche. Sur ces téléphones, utiliser le flash natif (Centre de contrôle) en parallèle de l’app. Fonctionne en général sur Android/Chrome.
  6. L’app peut être ajoutée à l’écran d’accueil (icône « BR Pointage » : BR ensanglanté coiffé d’un chapeau de sorcière devant la pleine lune) : iPhone via Safari > Partager > Sur l’écran d’accueil, Android via le menu de Chrome > Ajouter à l’écran d’accueil. Elle s’ouvre alors en plein écran, et le code bénévole est à ressaisir une fois (Safari et l’app installée ne partagent pas leur mémoire). Les icônes sont dans webapp/ (icon.svg est la source vectorielle).
  7. Si un QR est illisible (dossard abîmé, mauvaise lumière), le champ “Ou saisir le numéro de dossard” sous le scanner permet de pointer sans scanner.

Limites à connaître