Hackathon #17 à Lyon

Pour notre 17ᵉ KNP Hackathon au Château de Faverges-la-Tour avec sa magnifique vue sur les montagnes lyonnaises, nous avons bossés dur, certes pour des projets fictives, nos Toy Projects, mais la techno utilisées est bien réelle.

Pourquoi faire des ToyProjects jetables ?

👉 Pouvoir rapidement commencer à coder afin de découvrir une nouvelle techno, sans se prendre la tête avec les fonctionnalités.
👉 Apprendre par l'échec, ce n'est pas grave si la techno est une déception, pas pratique, ou pas fun.
👉 Travailler avec des KNPeers qui ne sont pas sur les mêmes projets clients, donc peu de temps pour préparer une backlog en amont.

Chaque KNPeer est libre de proposer ou de rejoindre un Toy Project, qui sera présenté à la fin, sans avoir pour but de continuer. L'accent est mis sur l'apprentissage, l'expérimentation : à la fin, la question n'est pas ce qui a été accompli mais ce qui a été appris.

Les Toy Projects en détail

Équipe KNP Hot Tools 🌶️

Le KNP HOT Tools c'est l’outil le plus chaud de ta région ! 🌍💡
L’objectif était de remplacer tous nos outils internes de suivi (exit Excel and CO) par une seule application centrale. (donc finalement pas jetable, mais hey, on s'adapte ;-)

🛠️ L'application est construite avec Next.js et TypeScript, intégrant des actions serveur pour la gestion back-end. Un excellent exercice pour certains afin de bien comprendre et utiliser ce framework si populaire, et une initiation pour d'autres. 🧑‍💻

Le projet avait été bootstrap en amont. Tout était donc prêt dès le début pour que l’équipe puisse produire massivement en quelques jours. ⏳💡

Entre Atomic Design System, découverte de Prisma, les problèmes d’autorisation Google pour le déploiement et le droplet, les wireframes, le design, Tailwind… Il y avait beaucoup de matière pour si peu de jours ! 🎨🔧

C’est pourquoi le projet est relancé en interne depuis peu, afin qu’il voie réellement le jour ! 🌱✨

Le morale de cette histoire : Next.js, c’est bien. 💡

Pourquoi c’est bien ? 🤔 Next.js permet la réalisation d'une application fullstack, un peu comme avec notre Symfony national. Ce framework React nous permet de développer une application dynamique assez légère et rapide à mettre en place. ⚡

La team :
👨‍🎨 Le designer : Cédric
🎨 Notre team Front : R2, Léna, Léo
👨‍💻 La team Back : Swanoo, Flo, Tonio
🛠️ La team DevOps : Clément et Manon

🛠️ La stack : Next.js, TypeScript, Prisma, AuthJS, Digital Ocean

Équipe Ave Mairie IA 🛸

L’objectif ici était clair : révolutionner (oui, véritablement révolutionner) l’accès aux informations d’une commune via leur site web, souvent peu optimisé. 🌐

Jusqu’à présent, les habitants de cette belle commune devaient parcourir de nombreux menus et pages pour trouver la moindre information. 📜 Mais désormais, une simple discussion avec Sainte Marie suffit pour obtenir ce que vous cherchez en un clin d’œil. ⚡️ Notre équipe enthousiaste s’est lancée dans la création d’une interface web intégrant GPT-4. L’idée ? Exploiter l’IA pour améliorer et simplifier la navigation sur ce type de site web. 🤖✨
Concrètement, l’utilisateur peut saisir une question, comme par exemple : « Quels sont les événements à venir à Préfailles ? », et notre chatbot prend les commandes pour vous envoyer toutes les informations que vous avez demandées !!! 🎉

(Petit plus, vous pouvez choisir le ton employé par le chatbot pour vous répondre… Vous avez le choix entre Johnny Hallyday 🎤 et un goéland très énervé 🐦💢.)

👨‍💻 L’équipe : Emma, Pedro, Hugo, Nico, Alé
🛠️ La stack : RemixJs, Vercel AI, Orama Search, OpenAI

Équipe 🎲 JARNAC 🎲 sur BGA ❤

Nos KNPeers, Alu et Nathan, ont décidé de créer un jeu de société sur la plateforme BGA (Board Game Arena). Cette plateforme propose un moteur permettant la création de jeux de société à jouer directement dans le navigateur, en solo ou en multijoueur. 🖥️👾

BGA inclut une structure permettant d'utiliser l'écosystème du site (matchmaking, scoring, gestion des états, chat) 💬, ce qui permet aux développeuses et développeurs de se concentrer sur l'implémentation technique des mécaniques et des règles du jeu. 🛠️

Dans notre cas, nous avons choisi d'implémenter Jarnac, un jeu de lettres semblable à Scrabble, où l'on joue avec ses propres lettres ainsi qu'avec celles de l'adversaire. Cette expérience nous a permis de revisiter certains concepts que nous n'utilisons pas tous les jours, comme la mise en place du pattern State Machine et l'utilisation du drag-and-drop natif en HTML. 🖱️💻

👨‍💻 La team : Alu, Nathan
🛠️ La stack : HTML/CSS, PHP, JS

Équipe IO Team 🛰️

Ne vous fiez pas à l’image, aussi réaliste soit-elle, nos KNPeers n’ont pas arpenté le pôle Sud à dos de morse. Erwann et Joris ont voulu partir à l’aventure et ont décidé d’aller un peu plus loin que le développement web.
Munis de puces Arduino Uno et Mega, et de connaissances en C++ (enfin, plutôt du C-, voire même du B), nos deux compères s'étaient fixé pour objectif de faire communiquer les deux puces entre elles. L’une envoyant du morse, la deuxième décodant le message.

Finalement, après quelques problèmes techniques, ils ont changé d’objectif. Une des puces émet toujours du Morse, mais le but du jeu est qu’un utilisateur devine le code secret et l’envoie à l’autre puce grâce à une télécommande, un genre de juste prix de l’Arduino.

👨‍💻 La team : Joris, Erwann
🛠️ La stack : C ++, Puce Arduino

The ScreenSavers

A partir d’une certaine nostalgie des anciennes animations 2D/3D PIB et Louis ont imaginé un Toy Project autour des screensavers.

Exemples :

XScreenSaver: Screenshots : En cherchant à remplacer i3-lock, qui ne fonctionnait plus sur ma machine, j'ai installé XScreenSaver. Cela m'a rappelé avec nostalgie les animations générées par algorithme qui étaient omniprésentes à l'époque des écrans cathodiques. Ces animations exploitent des algorithmes de génération procédurale, des moteurs physiques, et des techniques de pathfinding.

Technologies variées : Nous pensons à XScreenSaver car il est utilisé pour verrouiller nos écrans (il offre une petite API en C et permet d'utiliser xlib et OpenGL). Cependant, il existe de nombreuses autres options, telles que WebGL, SDL, ou n'importe quelle bibliothèque de rendu 2D/3D.

Approche : Liberté technologique : Il n'y a aucune limite en termes de technologie. Chacun est libre d'utiliser les outils et les langages qui lui plaisent, quel que soit le niveau d'abstraction.

Ressources : Documentation : Par exemple, vous pouvez consulter le guide sur "Writing an Xscreensaver module using xlib" pour commencer.

Architecture : Langages et technologies : Nous utilisons principalement le langage Go et la bibliothèque Raylib (qui encapsule OpenGL) pour la partie graphique.

Équipe Cél’IA 🤖

Chaque année, lors de notre Hackathon, la répartition des chambres pour nos quelques jours de festivités est une étape un peu délicate... et source de débats 😅. Il faut regrouper les ronfleurs 😴 entre eux, les couche-tard 🌙 avec leurs semblables, et ainsi de suite.

Pour éviter ce casse-tête 🧩 et gagner du temps ⏳, nos brillants KNPeers, Arthur, Soizic et Léa, ont eu une idée de génie 💡 : créer le double maléfique (?) de Célia, notre office manager qui gère habituellement tout ça.

Mesdames et messieurs, nous vous présentons : Cél’IA ! 🤖✨

Le but ? Récupérer les infos des formulaires remplis par nos KNPeers, comparer les préférences et former automatiquement des binômes parfaits pour chaque chambre 🏨. Et tout ça sera réalisé via le Block Kit Builder de Slack 💻.

🔧 Comment ça marche ?

Au départ, on pensait à une petite application web 🌐. Mais après quelques réflexions en équipe 🤔, nous avons décidé de plonger dans l’univers des services de l'API Slack pour pimenter un peu les choses ! 🌶️

Notre script en JavaScript permettra d'envoyer un formulaire via Slack aux personnes concernées 📩. Ces données seront ensuite traitées par un algorithme, déclenché par l'Office Manager (OM) 🔄, qui répartira tout ce joli monde dans les chambres 🛏️. Celles-ci pourront même être verrouillées 🔒 ou modifiées si besoin.

Ainsi, bien que cette tâche fastidieuse soit automatisée 🛠️, la solution reste flexible et toujours sous le contrôle avisé de Célia ! 👩‍💼

👥 La team : Soizic, Léa, Arthur
🛠️ La stack : TypeScript, API Slack

Workshop : Initiation à Figma

Notre Team Design 🎨, avec Soizic Hamard et Cédric Le Bars , a organisé un workshop d'initiation à Figma 🖌️.

Ce workshop était basé sur une réplique du design d'une application de recherche d'appartements de vacances 🏖️. Il a permis à nos devs 👩‍💻, notre office-manager 🧑‍🎨 et notre facilitatrice 🧑‍🎨 de :

👉 Comprendre l'utilité d'un UI kit,
👉 Créer des composants,
👉 Jouer avec leurs propriétés.

La Team Design a également créé une machine à posts 📸. Cet outil permet de créer des visuels pour nos réseaux sociaux en un clin d'œil, simplement en modifiant les attributs. Et hop, nous avons notre visuel 🎉 (comme sur ce post). C'est parfait pour les chargés de com 📢 ou les équipes de communication qui ont besoin d'unifier les visuels sans réinventer la roue à chaque fois.

Nous proposons des formations en design pour tous les niveaux et pour tous les corps de métier 🏫. Que vous soyez développeur souhaitant intégrer et utiliser un UI Kit et un Design System 🛠️, ou chargé de communication cherchant à créer des templates et des composants pour unifier vos campagnes de communication 🗂️, nous avons une formation adaptée à vos besoins !

Workshop : Archi héxagonale

Notre KNPeer Clément a proposé un workshop sur l'architecture hexagonale 🛑🔷.

De nombreux projets ont déjà migré vers cette architecture ou sont en cours de migration 🔄. Clément a pris le temps d'expliquer aux nouveaux KNPeers l'utilité et les bénéfices de cette approche :

👉 Introduction à l'architecture hexagonale
👉 Les avantages et les inconvénients
👉 Un atelier pratique de refonte d’un projet 🧩
👉 Découverte et application des différents patterns utilisés dans cette architecture 📐

Vous souhaitez adopter l'architecture hexagonale pour votre projet ? Nous pouvons vous accompagner, vous et votre équipe, soit en collaborant directement sur la migration, soit en formant votre équipe à cette architecture ! 🤝

Conférence : MapReduce

Notre KNPeer Joris Langlois nous a fait une introduction à HDFS et MapReduce 📊.
Ce paradigme, largement répandu et démocratisé par Google, permet de passer à l'échelle (fichiers en Po, milliers de nœuds, milliards de relations, etc.).

La présentation a couvert les deux aspects principaux de cette stack, à savoir :

Le stockage distribué via HDFS 📂 :
HDFS (Hadoop Distributed File System) est un système de fichiers distribué conçu pour stocker de très grandes quantités de données de manière fiable et pour permettre un accès rapide à ces données. Il divise les données en blocs, les réplique sur plusieurs nœuds pour assurer la tolérance aux pannes et la haute disponibilité.

La parallélisation des traitements avec MapReduce 🔄 :
MapReduce est un modèle de programmation qui permet de traiter et de générer de grandes quantités de données en parallèle sur un cluster. Il se compose de deux étapes principales : la phase Map, qui divise les tâches en sous-tâches indépendantes, et la phase Reduce, qui agrège les résultats des sous-tâches pour produire le résultat final. Ce modèle est particulièrement efficace pour les calculs massivement parallèles.

Lego4Scrum

Nos KNPeers Hugo LEGAY et Lénaïc Couëllan ont animé le workshop Lego4Scrum (c'est leur plaisir à quasi chaque KNPHackathon).
Nous organisons régulièrement ce workshop pour permettre aux nouveaux et nouvelles KNPeers de vivre les valeurs de la gestion de projet agile à travers un projet fictif en Legos. 🧱🚀

Les avantages du Lego4Scrum :

👉 Au lieu de rester dans la théorie, l'équipe peut vivre et apprendre en petites itérations ce que signifie un sprint. 🏃‍♂️🏃‍♀️
👉 Comprendre le sens pratique de backlog, sprint backlog, MVP, rétrospective, sprint planning et sprint review... 📋🔄
👉 Amélioration de la collaboration et de la communication au sein de l'équipe. 🗣️🤝
👉 Renforcement de la compréhension des rôles et des responsabilités dans un cadre agile. 🎭👥
👉 Développement des compétences en résolution de problèmes et en prise de décision rapide. 🧠⚡
👉 Expérimentation sans risque dans un environnement ludique et engageant. 🧩🎉

Vous souhaitez adopter l'approche agile pour vos projets ? Nous pouvons accompagner vous et votre équipe, soit en animant des workshops comme Lego4Scrum, soit en formant votre équipe à la gestion de projet agile ! 💼🌟

Nous consacrons également des discussions aux sujets fondamentaux concernant l'organisation de KNP, basée principalement sur l'autonomie et l'autogestion par les KNPeers. Nous n'avons pas de CTO, pas de commerciaux, pas de DRH, pas de chargés de communication. Nos KNPeers s'organisent de manière autonome.

Nous avons des équipes dédiées à divers sujets :
👉 La montée en compétences de nos alternants par la Team Mentoring 📈
👉 La qualité du code par la Team Continuous Quality 🛠️
👉 La communication interne et externe par la Team Com 📣
👉 Les formations internes et externes par la Team Training 🎓

Pour accompagner nos KNPeers dans leurs projets et leur épanouissement chez KNP, nous avons mis en place des conversations en one-to-tone, des follow-ups depuis 2015, initialement gérés par notre People Manager. Avec le temps, nous avons grandi, tant en nombre qu'en maturité, et nous avons distribué les follow-ups entre les facilitatrices et notre office-manager.
Aujourd'hui, nous constatons que les besoins ont encore évolué, et que la maturité de l'équipe nous permet de changer encore davantage.
Nous avons donc revisité nos pratiques de follow-ups pour trouver de nouvelles solutions adaptées à nos besoins actuels. 💡

Le KNPHackathon, c'est aussi le moment de réfléchir tous ensemble. Toujours avec une touche d'humour, nous abordons des sujets sérieux comme la gestion de nos sanctuaires. Et oui, avec nos bureaux à Nantes et à Caen, Célia, notre magicienne de l'administration et Office Manager, doit jongler avec les deux 🤹‍♀️.

En plus de ce temps hackathon et pour continuer de faire vivre nos beaux bureaux, nous nous réunissons tous les deux mois pour une rétro où nous discutons de questions cruciales : le mystère des tasses qui se multiplient ☕, l'art subtil du rangement (ou du désordre artistique) 🎨, et bien sûr, les périples de nos câbles qui semblent avoir une vie propre 🔌.

Nous regorgeons toujours d'idées pour dynamiser nos espaces, comme organiser un Hacktoberfest 🎉 ou accueillir des événements avec l'AFUP, et bien sûr célébrer les anniversaires en grand 🎂.

Ces moments d'échanges ne sont pas là que pour être fonctionnels, ils visent surtout à permettre le dialogue entre nos bureaux de Nantes et de Caen. Parce que ça, c'est essentiel 🤝.

❤️ Nos KNPHackathons sont un bel investissement, dans l'humain, la collaboration, la découverte, la passion ❤️