La Box À Rôtir

Présentation du projet

Le projet La Box À Rôtir a été mené dans le cadre de mon cursus à l’ESIEA, en partenariat avec l’entreprise du même nom, spécialisée dans la location de remorques équipées pour la cuisson de méchouis lors d’événements festifs. Son service repose sur la mise à disposition de dispositifs mobiles et autonomes, permettant aux clients de gérer eux-mêmes la préparation de leurs repas, dans un cadre convivial, sans assistance extérieure.

Dans une logique d’évolution de son modèle, l’entreprise a souhaité recentrer son activité sur la logistique et la mise à disposition des remorques, tout en renforçant l’autonomie de ses clients. Pour cela, elle exprimait le besoin d’une solution numérique capable d’offrir une expérience simple, guidée, et fonctionnant indépendamment de toute infrastructure connectée. En effet, certains événements pouvant se tenir dans des zones sans couverture réseau, il était essentiel que les fonctionnalités restent accessibles hors ligne.

Le projet s’inscrivait donc dans une approche distribuée, fondée sur une initialisation locale des données via un système de QR Code, et sur le développement de deux applications complémentaires : une application administrateur destinée aux équipes internes, et une application client embarquée dans les remorques.

Objectifs

L’objectif principal était de concevoir une solution complète permettant à La Box À Rôtir de structurer la préparation de ses prestations, tout en garantissant une autonomie totale à ses clients lors de l’utilisation des remorques. Le système devait s’adapter aux contraintes de mobilité, de simplicité d’usage et d’absence de connexion.

L’application administrateur devait permettre de paramétrer chaque prestation et de générer un QR Code contenant les données nécessaires à l’exécution de la prestation sur site. L’application client, une fois initialisée à partir de ce QR Code, devait permettre au client d’accéder localement aux instructions de préparation et au déroulé des recettes, sans recours à internet.

Le projet visait ainsi à optimiser la gestion en amont des prestations, tout en offrant aux utilisateurs finaux une expérience fiable, claire et indépendante techniquement.

Enjeux de la réalisation

L’un des enjeux majeurs résidait dans la mise en œuvre d’un fonctionnement totalement déconnecté. Le système devait garantir l’exploitabilité des informations en local, sans serveur ni synchronisation, en s’appuyant uniquement sur le QR Code comme point de transfert entre les deux environnements.

Ce mécanisme d’initialisation concentrait à lui seul une partie critique de la fiabilité du système. Il devait encapsuler l’ensemble des paramètres d’une prestation (type d’événement, remorque concernée, recettes à afficher) dans un format lisible, sécurisé et suffisamment compact pour être scanné facilement, quel que soit le support.

Par ailleurs, l’enjeu portait sur la cohérence d’ensemble entre deux applications autonomes, devant fonctionner en parfaite complémentarité. L’interface administrateur devait rester accessible pour l’équipe interne, tandis que l’application client devait être suffisamment robuste et intuitive pour une utilisation ponctuelle, sur des supports variés, dans un cadre non supervisé.

Risques et contraintes

Le choix d’une architecture sans infrastructure connectée introduisait des contraintes fortes : chaque application devait fonctionner de manière isolée, avec une initialisation fiable et une exécution sans faille. Une erreur dans la génération ou la lecture du QR Code pouvait compromettre l’ensemble de la prestation, d’où la nécessité d’un processus rigoureux et tolérant aux erreurs.

La sécurité des données embarquées constituait également un point d’attention important. Le QR Code transportant l’ensemble des informations nécessaires à la prestation, il était essentiel de veiller à la confidentialité et à l’intégrité des données. Les recettes et consignes fournies par La Box À Rôtir, fruit de son savoir-faire et de son image de marque, devaient être protégées contre toute tentative de réutilisation ou de diffusion non autorisée. Il était donc nécessaire de structurer les échanges de manière sécurisée, en limitant les risques de détournement, tout en garantissant une lecture simple et fiable pour l’utilisateur final.

Enfin, en tant que projet académique, le développement devait être réalisé dans des délais courts, avec une organisation claire des tâches et une montée en compétence progressive sur des technologies parfois nouvelles pour l’équipe. L’enjeu était donc aussi pédagogique, en combinant rigueur technique et contraintes métier réelles.

Ma position dans le projet

Sur ce projet, j’ai occupé le rôle de développeur, au sein d’une équipe de cinq, dont l’une assurait la fonction de chef de projet. J’ai occupé un rôle actif en tant que développeur full-stack sur l’ensemble du cycle de réalisation. Le projet impliquait une forte coordination entre les différents membres de l’équipe, chacun étant responsable d’un pan fonctionnel spécifique, tout en veillant à la cohérence technique globale.

J’ai participé à plusieurs aspects techniques du projet, tant sur la partie front-end que back-end, en intervenant sur différentes fonctionnalités des deux applications. Parmi ces contributions, l’un des volets les plus structurants a été la mise en place du système de QR Code, sur lequel j’ai travaillé en collaboration avec un autre développeur. Ce travail commun a nécessité une coordination précise entre l’encodage des données côté administrateur et leur déchiffrement côté client, afin de garantir une transmission fiable et sécurisée des informations entre les deux environnements.

Mise en œuvre

Information

Avant d’aborder cette réalisation, il est important de souligner qu’elle m’a permis d’approfondir et de mettre en pratique plusieurs compétences techniques et humaines. Certaines d’entre elles sont détaillées dans d’autres sections de ce portfolio. Si certaines explications vous semblent trop succinctes, je vous invite à vous y référer pour une meilleure compréhension.

Première tâche - Maquettage

Le point de départ de cette réalisation a été la conception, en autonomie, d’une interface dédiée à la génération de QR Code, intégrée à l’application administrateur. Cette fonctionnalité devait permettre aux équipes de La Box À Rôtir de préparer une prestation en encodant toutes les données nécessaires dans un QR Code lisible hors ligne par l’application client. J’ai pris en charge l’ensemble du maquettage de cette interface sur Figma, en tenant compte des contraintes d’usage terrain, de la logique métier propre aux prestations de méchoui, et des enjeux techniques liés au transfert d’informations entre applications.

L’interface a été pensée sous la forme d’un formulaire multi-étapes, garantissant à la fois simplicité d’usage et exhaustivité des données saisies.

Étapes 1 à 3 - Collecte des informations de base

La première partie de l’interface a pour but de contextualiser la prestation.
Dès le premier écran, l’utilisateur est invité à préciser si son client est un particulier ou un professionnel. Ce choix n’est pas anodin : il influence directement les paramètres de découpe, le matériel mis à disposition, et certaines consignes spécifiques de cuisson ou de conditionnement.

L’étape suivante permet de définir la date d’expiration de l’application client. Celle-ci sert à limiter dans le temps l'accès aux données et à l’interface de préparation. Elle contribue également à sécuriser l’usage de l’application côté client en empêchant toute réutilisation en dehors du cadre prévu.

Enfin, l’utilisateur sélectionne les types de viandes commandées pour l’événement. Ce choix déclenche dynamiquement la création de nouvelles étapes spécifiques à chaque viande sélectionnée.

Étapes 4 à 5 - Paramétrage technique des viandes

Pour chaque viande choisie, deux écrans successifs permettent de configurer les détails logistiques liés à sa préparation.

L’utilisateur commence par renseigner le nombre de barquettes disponibles. Cette donnée est cruciale : elle permettra de calculer automatiquement le nombre de fours nécessaires, en fonction des capacités de cuisson des remorques, ainsi que leur répartition optimale.

Ensuite, l’application invite à indiquer le nombre de parts commandées pour cette viande. Cette valeur permet de déterminer le temps de cuisson, la disposition des barquettes dans les fours, ainsi que le moment précis où chaque viande devra être insérée ou retirée du four.

Cette structuration étape par étape garantit que toutes les informations nécessaires à une cuisson maîtrisée soient bien saisies, sans erreur ni oubli.

Étapes 6 et 7 - Validation et génération du QR Code

Une fois toutes les données saisies, l’application affiche un récapitulatif clair et modifiable. L’utilisateur peut à ce stade vérifier les informations ou revenir sur une étape précédente pour ajuster un paramètre.

Une fois la configuration validée, l’application procède à la génération du QR Code, qui encapsule l’ensemble des informations nécessaires à la configuration de l’application client. Ce QR Code pourra être scanné ou partagé directement, et servira de point d’entrée unique pour que le client accède à son interface, en toute autonomie, même en l’absence de connexion.

Ce travail de maquettage a été l’occasion pour moi de concevoir une interface claire, intuitive et adaptée aux contraintes terrain. Il m’a permis de lier compréhension des besoins métier, anticipation des usages réels, et rigueur dans l’enchaînement des écrans, pour fournir une base solide à l’implémentation technique du module.

Deuxième tâche - Front-end

Après la phase de maquettage, j’ai pris en charge le développement du parcours administrateur dans l’application Flutter. Celui-ci repose sur une succession d’écrans permettant à un employé de La Box À Rôtir de renseigner les paramètres liés à une prestation client (type de client, choix des viandes, quantités, etc.), puis de générer un QR Code contenant l’ensemble de ces données.

Ce travail a été réalisé en étroite collaboration avec un autre membre de l’équipe, chargé du chiffrement des données côté application administrateur, ainsi que de leur déchiffrement côté client. Cette coordination nous a permis d’assurer une parfaite compatibilité entre la structure des données embarquées dans le QR Code et leur exploitation dans l’application finale.

Structure générale et gestion des vues

Le système de navigation entre les étapes s’appuyait sur un PageView contrôlé par un PageController, afin de créer une expérience fluide tout en conservant un bon contrôle sur les validations et la progression.

Flutter - PageController

final PageController _controller = PageController();

PageView(
  controller: _controller,
  physics: NeverScrollableScrollPhysics(),
  children: [
    ClientTypeStep(),
    ExpirationDateStep(),
    ViandeSelectionStep(),
    RecapStep(),
    QrCodeStep(),
  ],
);

Ce composant contrôle la progression linéaire du formulaire en bloquant la navigation manuelle. Chaque étape est validée avant de passer à la suivante via le bouton "Suivant", assurant une saisie cohérente et complète.

Composants Flutter et cohérence graphique

Chaque étape de saisie s’appuyait sur des composants Flutter personnalisés pour respecter les contraintes graphiques issues des maquettes Figma : arrondis larges, couleurs contrastées, icônes expressives, et textes hiérarchisés.

Par exemple, pour le choix du type de client, j’ai utilisé un widget basé sur Card et InkWell afin de créer des boutons sélectionnables au style proche de celui observé sur les captures.

Widgets Flutter - Widgets Card et InkWell

Widget OptionCard({required String label, required IconData icon, required bool isSelected, required VoidCallback onTap}) {
  return InkWell(
    onTap: onTap,
    child: Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
        side: BorderSide(color: isSelected ? Colors.orange : Colors.grey.shade300, width: 2),
      ),
      elevation: 2,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
        child: Column(
          children: [
            Icon(icon, size: 40),
            const SizedBox(height: 8),
            Text(label, style: TextStyle(fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    ),
  );
}

Ce widget personnalisable permet de sélectionner un type de client avec un retour visuel immédiat. L’utilisation de Card et InkWell respecte les codes graphiques définis dans les maquettes, tout en assurant une bonne réactivité tactile.

Stockage et sérialisation des données

Les informations saisies au fil des écrans étaient stockées dans un objet de type Prestation. Celui-ci centralisait tous les paramètres nécessaires à l’encodage du QR Code et à la configuration de l’application client.

Modèle - Prestation

class Prestation {
  bool isParticulier;
  DateTime expirationDate;
  List<String> viandes;
  Map<String, int> barquettes = {};
  Map<String, int> parts = {};

  Map<String, dynamic> toJson() => {
    'isParticulier': isParticulier,
    'expirationDate': expirationDate.toIso8601String(),
    'viandes': viandes,
    'barquettes': barquettes,
    'parts': parts,
  };
}

Cette classe centralise les informations saisies tout au long du parcours. La méthode toJson() facilite leur conversion en chaîne JSON, utilisée ensuite pour générer le QR Code.

Génération du QR Code

À la fin du parcours, un écran de récapitulatif permettait à l’utilisateur de vérifier ses données, avant de l’encoder en QR Code. La librairie qr_flutter permettait de convertir l’objet sérialisé au format JSON.

Librairie qr_flutter - Rendu du QR Code

final String qrData = jsonEncode(prestation.toJson());

QrImageView(
  data: qrData,
  version: QrVersions.auto,
  size: 200.0,
  backgroundColor: Colors.white,
);

Le QR Code est généré à partir de l’objet Prestation sérialisé. Cette méthode assure une compatibilité totale avec le décodage attendu dans l’application client.

Le QR Code généré pouvait ensuite être partagé à l’aide de la méthode native Share.share(), facilitant son envoi vers les tablettes utilisées sur le terrain, ou son intégration dans un email explicatif adressé au client.

Résultat

Le développement des deux applications a permis de répondre pleinement aux attentes initiales de l’entreprise La Box À Rôtir. Grâce à l’interface Flutter pensée pour les administrateurs**, les équipes internes peuvent désormais configurer chaque prestation en quelques minutes, en sélectionnant les paramètres essentiels et en générant un QR Code contenant l’ensemble des données. Cette solution a considérablement simplifié la préparation des remorques et renforcé la rigueur dans la transmission des informations aux clients.

Du côté client, l’application déployée sur tablette ou smartphone permet d’accéder facilement aux instructions de préparation et aux recettes, sans nécessiter de connexion internet. L’autonomie des utilisateurs est assurée dès le scan du QR Code, rendant l’expérience fluide, fiable et conforme aux objectifs du projet.

Ce dispositif s’inscrit pleinement dans l’évolution stratégique de La Box À Rôtir, qui cherche à recentrer son activité sur la logistique et la mise à disposition des remorques. Pour permettre cette transformation, il était essentiel de confier davantage de responsabilités aux clients dans la préparation de leur prestation. En intégrant l’ensemble des informations nécessaires dans un QR Code utilisable hors ligne, l’application client permet aujourd’hui une utilisation fluide et guidée, y compris dans des environnements sans réseau, tout en garantissant une prestation cohérente et maîtrisée.

Enfin, l’impact de l’application s’est aussi manifesté sur le terrain, à travers des retours utilisateurs particulièrement positifs. À titre personnel, j’ai eu l’occasion de discuter avec une connaissance ayant utilisé l’application lors d’un événement organisé avec une remorque de La Box À Rôtir. Sans savoir que j’avais participé au projet, elle m’en a spontanément fait l’éloge, soulignant la clarté de l’interface et la simplicité d’utilisation. Ce retour inattendu et sincère a été une véritable source de satisfaction, venant confirmer la qualité et la pertinence du travail réalisé.

Avenir du projet

Bien que le projet ait atteint ses objectifs initiaux, plusieurs pistes d’évolution sont envisageables pour en assurer la pérennité et l’élargissement. À court terme, une refonte de l’application client, actuellement développée en Java JEE, pourrait être envisagée afin de permettre une compatibilité native avec les appareils Apple. Cela ouvrirait l’accès à une base d’utilisateurs plus large et garantirait une meilleure adaptabilité du service, quel que soit le support utilisé.

Par ailleurs, des ajustements plus fins pourraient être apportés en réponse aux retours terrain, comme l’optimisation du contenu du QR Code, une meilleure gestion des erreurs à la lecture ou l’enrichissement des interfaces pour améliorer l’expérience utilisateur. Ce travail d’itération permettrait d’affiner encore la fluidité d’utilisation et de consolider l’autonomie du client en situation réelle.

À plus long terme, l’architecture du projet, pensée pour fonctionner de manière déconnectée, pourrait inspirer d’autres applications mobiles dans le domaine de l’événementiel ou de la location de matériel. Cette approche distribuée, légère et guidée, peut en effet servir de modèle dans d'autres contextes nécessitant une autonomie complète des utilisateurs sur le terrain, sans dépendance à une infrastructure réseau.

Retour sur expérience

Ce projet a été pour moi une expérience particulièrement enrichissante. Il m’a permis de renforcer mes compétences en développement mobile dans un contexte concret, avec de vrais enjeux métier et des contraintes techniques bien définies. Entre la phase de Maquettage, la conception des parcours utilisateurs et l’implémentation des interfaces sous Flutter , j’ai pu m’investir dans plusieurs tâches complémentaires qui demandaient à la fois rigueur, sens du détail et vision d’ensemble. Cette diversité m’a permis de gagner en autonomie, tout en m’adaptant aux exigences fonctionnelles d’un projet orienté utilisateur.

Un autre aspect marquant de cette expérience a été la collaboration avec le porteur du projet, qui n’avait au départ qu’une vision partielle de ce qu’il souhaitait. Nous avons travaillé main dans la main pour affiner les besoins, évaluer les différentes possibilités techniques et trouver des solutions adaptées aux contraintes spécifiques du terrain, notamment l’absence de connexion réseau. Cette dynamique de co-construction, très présente dès la phase de maquettage, a donné un vrai sens à notre travail.

De plus, le retour d’une connaissance rencontrée après la mise en production, qui m’a spontanément partagé son enthousiasme sans savoir que j’avais participé au projet, a été une vraie source de satisfaction et une belle reconnaissance du travail accompli.

Compétences liées

Maquettage - Flutter - Autonomie - Travail en équipe