[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"work-fr-cultural-trails":3,"work-cards-fr":168},{"id":4,"title":5,"approach":6,"body":85,"brief":92,"card":98,"description":89,"extension":102,"gallery":103,"hero":128,"heroAlt":129,"meta":130,"navigation":131,"outcome":132,"path":136,"problem":137,"reflection":140,"resources":141,"role":153,"seo":163,"status":164,"stem":165,"summary":166,"__hash__":167},"work_fr\u002Fwork\u002Fcultural-trails.md","Cultural Trails",[7,25,52,69],{"label":8,"title":9,"prose":10,"artifacts":13},"Architecture","Une seule app, pas un front et un back",[11,12],"Nous sommes partis d'une base Laravel Breeze, qui nous a donné l'authentification, Tailwind et Vue clés en main, puis avons pris la décision qui a tout façonné : Blade, Livewire ou Inertia. Nous avons choisi Inertia. Elle nous a permis de construire une application monopage avec des transitions fluides tout en écrivant le back-end comme une application Laravel normale, sans API REST séparée à concevoir, versionner et maintenir synchronisée.","C'est ce choix qui a permis à une équipe de cinq personnes d'avancer vite. Inertia fait le pont entre le back et le front, si bien qu'un contrôleur renvoie les données directement à une page Vue, et la frontière dont j'avais la charge (les modèles, les requêtes, les règles d'accès) est restée propre et côté serveur tandis que le front-end restait réactif.",[14,20],{"alt":15,"caption":16,"decision":17,"width":18,"src":19},"Un schéma d'architecture aux couleurs de la marque : un front-end Vue, Tailwind et MapLibre au-dessus d'un back-end Laravel et MySQL, avec une flèche entre les deux et un lien API vers le service de routage OpenRouteService.","La stack : Vue, Tailwind et MapLibre sur Laravel et MySQL.","Une seule application Laravel pilote le front-end Vue via Inertia, donc il n'y a pas d'API REST séparée à concevoir, versionner et maintenir synchronisée.","half","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-stack.jpg",{"alt":21,"caption":22,"decision":23,"width":18,"src":24},"Un schéma du processus de construction aux couleurs de la marque, de gauche à droite : schéma relationnel, puis migrations et modèles, puis seeders, puis contrôleurs, avec une piste parallèle pour la cartographie, les composants de base et les flux de création de sentiers et de POI.","Comment c'était construit : schéma, puis modèles, seeders, contrôleurs.","Bien poser le schéma et les modèles en premier est ce qui a permis aux contrôleurs et aux composants front-end de se mettre en place rapidement.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-buildprocess.jpg",{"label":26,"title":27,"prose":28,"artifacts":31},"Modèle de données","Un système de contenu pour les sentiers",[29,30],"Le cœur du back-end est le schéma. Un sentier (parcours) est relié à de nombreux points d'intérêt et un point d'intérêt peut appartenir à de nombreux sentiers, donc la table de jonction entre eux porte l'ordre de la marche. Chaque point d'intérêt possède ses propres guides audio, photos et faits ; chaque sentier appartient à un thème. Au-dessus du contenu se trouve un modèle de quiz (quiz, questions, réponses) pour les arrêts gamifiés.","Vient ensuite la couche d'engagement, celle qui donne le sentiment d'un produit plutôt que d'un catalogue : favoris et historiques de complétion pour les sentiers comme pour les points d'intérêt, accomplissements avec une table pivot utilisateur, avis, et un système de rôles sous l'ensemble. Bien établir ces relations dès le départ, c'est ça l'architecture ; tout le reste se construit dessus.",[32,37,42,47],{"alt":33,"caption":34,"decision":35,"width":18,"src":36},"Une diapositive produit présentant l'application sur sentiers-culturels-vaud.ch, listant trois niveaux d'accès : pour tous les utilisateurs, pour les utilisateurs avec un compte, et pour un acteur local avec un compte éditeur.","Le produit : une seule app, trois niveaux d'accès.","Le même système de contenu sert les visiteurs anonymes, les titulaires de compte et les éditeurs, avec des vues débloquées par le rôle.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-product.jpg",{"alt":38,"caption":39,"decision":40,"width":18,"src":41},"Une diapositive produit, \"Onglet Accueil\", montrant l'onglet d'accueil sur mobile : explorer les sentiers par thème, proximité et popularité, et un quiz \"quel sentier es-tu\" qui recommande des sentiers.","L'onglet d'accueil : explorer par thème, lieu, et un quiz de recommandation.","Les thèmes, la popularité et le quiz lisent tous le même contenu relationnel, donc la découverte n'est qu'une requête de plus sur le modèle.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-home.jpg",{"alt":43,"caption":44,"decision":45,"width":18,"src":46},"Une diapositive produit, \"Page d'un sentier\", montrant la page d'un sentier sur mobile : photos, description, distance et durée, ses arrêts ordonnés, l'accessibilité et un panneau d'avis noté 4.5.","La page d'un sentier : description, arrêts ordonnés, accessibilité, avis.","Chaque champ ici correspond au schéma : un sentier et ses arrêts ordonnés, son accessibilité, et les avis superposés par-dessus.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-trail.jpg",{"alt":48,"caption":49,"decision":50,"width":18,"src":51},"Une diapositive produit, \"Page d'un point d'intérêt\", montrant la page d'un POI sur mobile (Gare de Lausanne) avec un guide audio, un quiz, et la liste des sentiers qui le traversent.","Un point d'intérêt : guide audio, quiz, et les sentiers auxquels il appartient.","Chaque point d'intérêt porte ses propres médias et son quiz et peut appartenir à de nombreux sentiers, ce qui est la jonction many-to-many au centre du modèle.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-poi.jpg",{"label":53,"title":54,"prose":55,"artifacts":58},"Rôles","Explorateurs et éditeurs, un seul schéma",[56,57],"L'application sert deux publics depuis le même code. Un explorateur parcourt la carte, arpente un sentier, marque des points d'intérêt comme faits, et gagne des accomplissements. Un éditeur (un acteur culturel local) crée et édite des sentiers et des points d'intérêt à l'aide de formulaires guidés, avec ses propres flux de création et de suppression.","Cette séparation est imposée par l'accès basé sur les rôles. Les routes des favoris, du tableau de bord, des accomplissements et de l'édition sont protégées par un middleware de rôle, si bien que la même application expose en toute sécurité une expérience publique et la boîte à outils d'un contributeur sans que l'une déborde sur l'autre.",[59,64],{"alt":60,"caption":61,"decision":62,"width":18,"src":63},"Un diagramme de séquence UML, \"Voir un itinéraire\" : un utilisateur sur le front-end Vue demande un sentier, le routeur web.php appelle MapController, PathController et PoiController, chacun interroge MySQL, et le contrôleur renvoie une vue Inertia avec ses props.","Le flux explorateur : voir un sentier et ses points d'intérêt.","Le chemin de lecture d'un explorateur passe par les mêmes contrôleurs et les mêmes vues Inertia sur lesquels toute l'application est construite.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-view-sequence.jpg",{"alt":65,"caption":66,"decision":67,"width":18,"src":68},"Un diagramme de séquence UML, \"Créer un sentier\" : un éditeur passe par les étapes de création d'un sentier, le NewPathController appelle l'API OpenRouteService et interroge les POI et les thèmes dans MySQL, puis crée le sentier et ses liens vers les points d'intérêt.","Le flux éditeur : créer un sentier, son itinéraire et ses arrêts.","Le chemin d'écriture de l'éditeur est la même architecture protégée par un middleware de rôle, si bien qu'une seule base de code sert en toute sécurité les deux publics.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-create-sequence.jpg",{"label":70,"title":71,"prose":72,"artifacts":74},"Cartes et routage","Planifier de vrais itinéraires de marche",[73],"Les cartes interactives tournent sur MapLibre, et les sentiers eux-mêmes sont de vrais itinéraires, ce qui implique une planification d'itinéraire entre les points d'intérêt. Nous avons utilisé OpenRouteService pour cela via son API publique, en l'appelant depuis le flux d'édition pour planifier un itinéraire au fur et à mesure qu'un sentier était construit. Auto-héberger le moteur était la suite logique, que nous avons signalée pour un vrai déploiement, afin d'échapper aux limites de débit publiques et de lever toute contrainte sur cette planification.",[75,80],{"alt":76,"caption":77,"decision":78,"width":18,"src":79},"Une diapositive produit, \"Onglet Sentiers\", montrant l'onglet des sentiers sur mobile : une carte filtrable des sentiers et un aperçu de sentier avec son itinéraire tracé entre ses arrêts.","L'onglet des sentiers : une carte avec des filtres par distance, durée et thème.","Les sentiers sont de vrais itinéraires sur une carte MapLibre, parcourables et filtrables avant de partir.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-trails.jpg",{"alt":81,"caption":82,"decision":83,"width":18,"src":84},"Une diapositive produit, \"Lancement de la navigation\", montrant la navigation en cours de marche sur mobile : la liste des étapes, l'itinéraire sur la carte, le prochain arrêt avec la distance et le temps restant, et une boîte de dialogue pour quitter la navigation.","Navigation guidée : le prochain arrêt, la distance et le temps restant.","Suivre un sentier déroule l'itinéraire OpenRouteService planifié arrêt par arrêt, avec la possibilité de sauter un arrêt ou de quitter à tout moment.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-navigation.jpg",{"type":86,"value":87,"toc":88},"minimark",[],{"title":89,"searchDepth":90,"depth":90,"links":91},"",2,[],{"role":93,"year":94,"host":95,"scope":96,"shipped":97},"Responsable back-end","2024","HEIG-VD · Projet d'articulation","Équipe de cinq","Application web en ligne, présentation, rapport",{"title":99,"alt":100,"image":101},"Cultural Trails — une app de randonnée patrimoniale full-stack","Deux écrans de l'application Sentiers culturels sur le ruban de sentier vert, pêche et bleu du projet : la carte d'exploration des sentiers le long de la rive de Lausanne, et la navigation en cours de marche suivant un itinéraire sur une carte satellite.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fadjacent.jpg","md",[104,108,112,116,120,124],{"alt":105,"caption":106,"src":107},"La carte d'exploration sur mobile : sentiers et points d'intérêt affichés sous forme d'épingles le long de la rive de Lausanne et de Lavaux, avec des filtres pour le thème, les critères et le rayon, et un bascule Sentiers \u002F Lieux.","Explorer : sentiers et lieux sur la carte.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-map.jpg",{"alt":109,"caption":110,"src":111},"La page d'un lieu sur mobile, \"Gare de Lausanne\", listant les sentiers qui le traversent, chacun avec une photo, une distance, une durée et un dénivelé.","Un lieu, et les sentiers qui le traversent.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-poi.jpg",{"alt":113,"caption":114,"src":115},"L'écran de navigation d'un sentier sur mobile, \"Étapes\" : une chronologie verticale des arrêts depuis le point de départ, chacun marqué comme fait, avec un bouton de démarrage.","Navigation : les arrêts d'un sentier, étape par étape.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-steps.jpg",{"alt":117,"caption":118,"src":119},"L'écran des avis sur mobile, \"Avis\" : une note de 4.5 avec une distribution des étoiles et des avis individuels de voyageurs portant des dates et du texte.","Avis : une note, une distribution, et des retours de voyageurs.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-reviews.jpg",{"alt":121,"caption":122,"src":123},"L'écran des accomplissements sur mobile, \"Accomplissements\" : une grille de badges obtenus au-dessus de barres de progression réparties par thème, comme l'art et l'histoire.","Accomplissements, gagnés en marchant et par thème.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-achievements.jpg",{"alt":125,"caption":126,"src":127},"L'écran de profil sur mobile, \"Profil\" : une statistique de complétion, des listes de sentiers terminés et téléchargés, et des avis rédigés, au-dessus de la navigation inférieure de l'application.","Le profil : sentiers terminés, téléchargés, commentés.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-profile.jpg","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fhero.jpg","Trois écrans de l'application Sentiers culturels posés sur le ruban de sentier vert, pêche et bleu du projet : la page d'un sentier pour Les chemins de fer par-dessus une photo de la gare de Lausanne, la carte d'exploration des sentiers le long de la rive de Lausanne et de Lavaux, et la navigation en cours de marche suivant un itinéraire sur une carte satellite.",{},true,[133,134,135],"Une application web full-stack en ligne et déployée sur sentiers-culturels-vaud.ch, construite sur Laravel, Inertia et Vue avec une base de données MySQL.","Un riche modèle de données relationnel et un système de contenu basé sur les rôles qui permet aux acteurs locaux de publier leurs propres sentiers, et pas seulement un catalogue fixe contrôlé par l'équipe.","Une cartographie interactive et une planification d'itinéraire entre les points d'intérêt, construites sur MapLibre et OpenRouteService, avec l'auto-hébergement du moteur de routage signalé comme l'étape suivante pour un déploiement en production.","\u002Fwork\u002Fcultural-trails",[138,139],"Le patrimoine culturel du canton de Vaud est riche mais dispersé, et difficile à découvrir à pied de façon guidée et engageante. Le brief était de construire une application web complète qui le transforme en sentiers de randonnée gamifiés et accessibles, et, point crucial, de permettre aux acteurs locaux de publier et d'éditer les leurs.","Sous le brief produit se trouvait un vrai problème d'ingénierie : une application riche en contenu et centrée sur la carte, avec deux types d'utilisateurs très différents (des gens qui explorent les sentiers et des gens qui les créent), portant du multimédia, des quiz et une couche de gamification, conçue et développée full-stack dans le temps imparti d'un projet étudiant. J'ai pris en charge la moitié back-end.","C'est le projet qui m'a appris que le back-end, c'est surtout de la modélisation de données. Les semaines passées à bien établir les relations (sentiers vers points d'intérêt, la couche d'engagement, le système de rôles) sont ce qui a permis au reste de la construction d'avancer vite, et les parties brouillonnes, plus tard, se trouvaient presque toujours là où le modèle avait été trop lâche. Choisir Inertia plutôt qu'une API séparée était le choix pragmatique que je referais : il a échangé un peu de mise en place contre beaucoup moins de friction par la suite.",[142,146,150],{"type":143,"title":144,"url":145},"github","Code source du projet (Laravel)","https:\u002F\u002Fgithub.com\u002Fantonynyt\u002FprojArt-loomi-SentiersCulturels",{"type":147,"title":148,"url":149},"pdf","Rapport de projet","\u002Ffiles\u002Fcultural-trails-rapport.pdf",{"type":147,"title":151,"url":152},"Schéma relationnel de la base de données","\u002Ffiles\u002Fcultural-trails-schema.pdf",{"led":154,"contributed":157,"notTouched":160,"team":162},[155,156],"Le back-end : le modèle de données, les contrôleurs et la logique applicative, l'authentification et l'accès basé sur les rôles","L'intégration de la planification d'itinéraires, ainsi que le seeding de la base de données, les migrations et le déploiement",[158,159],"Des composants front-end qui dialoguent avec la base de données : les formulaires de création de sentiers et de POI, les filtres et les pages de profil","La phase UX initiale avec l'équipe",[161],"Le travail du responsable front-end, celui du responsable design UX, et le volet visuel et communication","Équipe de cinq (Groupe Loomi) pour le Projet d'articulation à la HEIG-VD : Jérémy Martin (responsable back-end), Antony Neyret (responsable front-end), François Cuennet (design UX), Leïla Fidalgo (cheffe de projet) et Ariadne Melissargos (communication). Encadrés par Laurent Berthelot (gestion de projet et technique), Jonathan Favre-Lamarine (UX\u002FUI et design) et Noemi Romano (cartographie).",{"title":5,"description":89},"live","work\u002Fcultural-trails","Une application web complète qui transforme le patrimoine culturel du canton de Vaud en sentiers de randonnée gamifiés et accessibles : des parcours thématiques, des points d'intérêt avec guides audio et quiz, et un mode éditeur qui permet aux acteurs locaux de publier leurs propres sentiers. J'étais responsable du back-end.","5ttmTTkMiWMH5sybHPODm-hGkxH0D-7IjRgRfzUEf5U",[169,175,181,187,193,199,201,207,213,219,225,231,237,243,249],{"path":170,"card":171},"\u002Fwork\u002Fa-ta-dispo",{"title":172,"alt":173,"image":174},"À ta Dispo — mettre en relation les bénévoles d'événements avec les organisateurs","Le logotype dessiné à la main d'À ta Dispo, un logo corail sur une forme d'autocollant rose, sur un fond corail uni.","\u002Fimages\u002Fwork\u002Fa-ta-dispo\u002Fadjacent.jpg",{"path":176,"card":177},"\u002Fwork\u002Fan-aura-of-words",{"title":178,"image":179,"alt":180},"An Aura of Words — les parcs de Lugano, racontés par leurs avis","\u002Fimages\u002Fwork\u002Fan-aura-of-words\u002Fadjacent.jpg","Les cinq parcs de Lugano montrés sur une carte, chacun une aura organique aux couleurs mêlées dimensionnée par le volume d'avis.",{"path":182,"card":183},"\u002Fwork\u002Fbeau-rivage",{"title":184,"alt":185,"image":186},"Beau-Rivage Eco-Redesign — un site d'hôtel de luxe 95 % plus léger","Le site du Beau-Rivage Palace refondu : sobre, élégant, bien plus léger que l'original.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fadjacent.jpg",{"path":188,"card":189},"\u002Fwork\u002Fbereal",{"title":190,"alt":191,"image":192},"Recoder BeReal — une capture à double caméra et un pipeline d'images","Recoder BeReal : la publication composée à double photo à côté du fil d'un ami, sur une interface mobile sombre.","\u002Fimages\u002Fwork\u002Fbereal\u002Fadjacent.jpg",{"path":194,"card":195},"\u002Fwork\u002Fbrushbuddy",{"title":196,"image":197,"alt":198},"BrushBuddy — un cube monstre qui guide deux minutes de brossage des dents","\u002Fimages\u002Fwork\u002Fbrushbuddy\u002Fadjacent.jpg","Une main soulève la brosse à dents du socle au sommet du cube BrushBuddy, qui arbore un visage de monstre jaune inquiet.",{"path":136,"card":200},{"title":99,"alt":100,"image":101},{"path":202,"card":203},"\u002Fwork\u002Fdatabloom",{"title":204,"image":205,"alt":206},"DataBloom — rendre visible l'impact énergétique des usages numériques","\u002Fimages\u002Fwork\u002Fdatabloom\u002Fadjacent.jpg","La fleur DataBloom : des pétales en feutre outremer sur une tige verte segmentée dans un petit pot en terre cuite, sur un fond de studio blanc.",{"path":208,"card":209},"\u002Fwork\u002Felen",{"title":210,"image":211,"alt":212},"ELEN — une caméra spéculative pour les présences sans fil invisibles","\u002Fimages\u002Fwork\u002Felen\u002Fadjacent.jpg","ELEN, une caméra portable au corps orange translucide avec deux poignées blanches, éclairée sur un fond de studio gris, son écran bleu profond visible à travers le plexiglas.",{"path":214,"card":215},"\u002Fwork\u002Ffamily-space",{"title":216,"image":217,"alt":218},"UBS Family Space — l'endroit partagé d'une famille pour gérer l'argent","\u002Fimages\u002Fwork\u002Ffamily-space\u002Fadjacent.jpg","Concept UBS Family Space : deux écrans de téléphone sur un dégradé rouge doux, un hub parent pour les analyses, les limites et les objectifs de l'enfant, et l'écran d'objectif d'épargne de l'enfant.",{"path":220,"card":221},"\u002Fwork\u002Fhuman-loci",{"title":222,"image":223,"alt":224},"Human Loci — un objet d'écoute synesthésique","\u002Fimages\u002Fwork\u002Fhuman-loci\u002Fadjacent.jpg","Human Loci : une boîte d'écoute transparente en acrylique avec trois disques de plâtre pour un parc, un port de plaisance et une gare.",{"path":226,"card":227},"\u002Fwork\u002Fmeeting-pond",{"title":228,"alt":229,"image":230},"Meeting Pond — des objets lumineux connectés pour la présence à distance","Deux unités Meeting Pond connectées posées côte à côte, l'une luisant en bleu et l'autre en rose, chacune montrant des ondes sur une grille de LED 32×32.","\u002Fimages\u002Fwork\u002Fmeeting-pond\u002Fadjacent.jpg",{"path":232,"card":233},"\u002Fwork\u002Fthea",{"title":234,"image":235,"alt":236},"Thea — un nouveau sens, calme, pour vivre avec une allergie","\u002Fimages\u002Fwork\u002Fthea\u002Fadjacent.jpg","Le wearable Thea suspendu dans un entrelacs de cordes orange sur un ciel cobalt, sa jauge oblongue qui luit, un cliché éditorial tiré de la présentation finale.",{"path":238,"card":239},"\u002Fwork\u002Fuefa-female-coaches",{"title":240,"alt":241,"image":242},"Why Not You? — la campagne UEFA pour les entraîneuses","La campagne Why Not You? : une typographie d'affichage percutante sur une entraîneuse, avec la ligne Lead Your Passion, Shape the Game.","\u002Fimages\u002Fwork\u002Fuefa-female-coaches\u002Fadjacent.jpg",{"path":244,"card":245},"\u002Fwork\u002Fwama",{"title":246,"image":247,"alt":248},"Wama — le machine learning comme témoin au bord de l'évier","\u002Fimages\u002Fwork\u002Fwama\u002Fadjacent.jpg","Le montage d'évier construit pour Wama, de biais : un robinet versant dans un bac transparent, le téléphone dans son support découpé au laser affichant le personnage.",{"path":250,"card":251},"\u002Fwork\u002Fwematch",{"title":252,"image":253,"alt":254},"WeMatch — un service de matching AX pour l'univers WeRoad","\u002Fimages\u002Fwork\u002Fwematch\u002Fadjacent.jpg","Carte-titre WeMatch : « WeMatch finds your group before you find your trip » en corail et encre sur un dégradé doux du blanc au rose, avec le personnage rond de l'agent Matchy.",1783535580512]