KNPHackathon #15 au Chateauform Rosay

Pour notre 15e KNPHackathon nous sommes allé.es dans un château du XVII siècle pas loin de Rouen. Dans un cadre enchanteur, nous avons profité de ces quelques jours de retrouvailles (nos bureaux ne sont pas dans la même ville). Les KNPeers ont travaillé sur leurs Toy Projects afin de découvrir des nouvelles technologies ou approfondir leurs connaissances. Nous avons aussi profité d’être tous sur place pour faire des workshops et des conférences. Le soir lui était réservé aux activités sportives (la team Tennis  ou Tir à l’arc était présente) ou plus ludiques (la team Jeux de société ou billard). Comme d’habitude lors de ces séjours, les repas étaient nombreux et délicieux, à la hobbit!

Voici le résumé des Toy Projects :

Team Plug&Play Monitoring system

Alé, Hugo

Alessandro et Hugo ont travaillé pour ce KNPhackathon sur un Toy Project qu'ils avaient commencé l'année dernière à Bordeaux. C'est un système de monitoring plug and play basé sur la suite ELK (Elasticsearch, Logstash, Kibana). Le but est de brancher très rapidement ce système de monitoring à un projet interne ou client. Ces dashboards permettent d'avoir accès à toutes les informations nécessaires pour savoir si le système est opérationnel.

PimpMyKnpeers

Emma, Manon, Soso

C’est un projet qu’Emma et Soso avaient déjà commencé au dernier KNPHackathon. Le but étant de s’initier à React et faire une app de génération d’avatar pour les KNPeers. Il restait encore quelques fonctionnalités à faire, dont le téléchargement de l’avatar et la navigation, et quelques améliorations à apporter sur le code déjà produit.

Soso code généralement sur du back, mais sur un projet client, elle a commencé à faire du React, c’est donc l’occasion d’approfondir. Manon suit une formation React avec Antoine, et va aussi aborder React sur son projet client, donc ça lui permet également de s'entraîner sur cette techno. Emma travaille principalement sur du back, mais également sur du front en React sur un projet client, et ce toy project, full front, permet de voir ce que l’on peut faire avec les bases de React, sans X librairies, et une stack différente.

Wall of Shame

Kevin, Swanoo, Erwänn, Michel, Antoine, Flo

Le projet a été initié au dernier KNPHackathon. Il avait été commencé avec Flutter pour tester la techno, mais l'équipe a réalisé qu’ils voulaient continuer à long terme le projet, et la montée en compétences aurait été trop longue. Pendant les temps de R&D ils ont fait une refonte en React Native. Une partie de l'équipe s’occupe de l’application d’administration qui est faite avec React et Symfony. Elle gère la gestion des utilisateurs, des badges, les règles d’attribution… Lors de la compilation du code pour l'app mobile, particulièrement pour IOS, il n’est pas possible de compiler le code sur nos postes, donc ils sont en train de monter un déploiement automatique sur un service qui héberge MAC pour compiler ce code.

BabySharp

Flaggy, Nico, Laurent, Brice

Le toy project leur a permis de découvrir la programmation de jeux vidéo avec Unity (moteur de jeu vidéo). Le langage de programmation derrière est le C#. Ils ont choisi de créer un Tower Defense, ce qui leur a permis de travailler plusieurs points intéressants : la génération procédurale de la grille de jeu, la programmation du comportement des ennemis ainsi que celui des tours de défense. Ils y ont intégré différents assets et fonctionnalités afin de rendre le jeu agréable (ou pas) à utiliser. #babySharp

PokeSafari

Quentin, Nathan

Le but de ce toy project est de prendre en main React avec un petit backend en Symfony. Cette application est un jeu de capture de Pokemon. Quentin et Nathan suivent en parallèle une formation React afin de pouvoir mettre en place un nouveau frontend sur leur projet client.

Belote me!

Clément, Lena, Tonio

Le but de cette application est de pouvoir enregistrer les scores des manches lors d’une partie de Belote. Ensuite, avoir une possibilité d’avoir des statistiques, un historique etc. Une appli de ce genre existe déjà sur Android, mais pas encore sur IOS. Concernant la stack, le développement est en React Native, Redux ToolKit et Typescript. Lena et Tonio ne connaissaient pas encore les trois technos, Clément n’avait jamais travaillé avec React Native. Le but final sera de publier l’application sur les stores, mais la phase de compilation aura sûrement lieu après le hackathon.

Team Solo

Site de KNP

Joris

L’idée était de finaliser le nouveau site de KNP. Il restait entre autres l’intégration des jolies illustrations faites par notre designer et à développer quelques pages manquantes. C’était l’occasion de travailler en binôme avec Justine qui vient de rejoindre l’équipe, et aussi avec Laetitia qui a fourni les différents contenus, alors que d’habitude on ne travaille pas directement ensemble.
La techno principale est Gatsby, c’est un framework qui se base sur React et qui permet de générer des sites statiques. Notre blog a également été développé avec ce framework, qui consomme un backend Ghost pour la rédaction des articles. Pour le site, il n’y a pas du tout de backend, car les informations ne bougent pas souvent.
Pour faciliter la mise à jour des quelques contenus qui évoluent régulièrement (par exemple les dates ou les lieux de formations), nous utilisons des fichiers markdown qui peuvent facilement être modifiés via une pull request sur github. Une configuration de la CI permet ensuite de régénérer tout le site et de le redéployer sur la prod.

ReadingRoom

Louis

Aux derniers KNPHackathons, Louis avait créé un projet interne ReadingRoom avec Elm et Haskell afin de permettre aux KNPeers de partager leurs articles de lecture préférés. Quand un favori est ajouté, il est partagé automatiquement sur slack. Il a continué également pendant le temps de R&D ou à la maison. Louis a eu l’idée d’ajouter une autre fonctionnalité: l'app récupère les liens youtube qui sont postés par les KNPeers dans notre channel slack “musique”. Et ça génère une playlist par utilisateur.

Dewey - Arrêter au besoin un droplet.

Pedro

Nous avons des serveurs qui sont dédiés à faire tourner des tests automatisés d’applications. Github actions fait l’orchestration du lancement des tests et décide sur quel runner sont lancés les tests automatisés.

Ce sont des droplet sur DigitalOcean qui tournent 24/24 et 7j/7 pour un usage occasionnel. Cela coûte de l’argent, et consomme de l’électricité inutilement, donc c’est un coût économique et écologique. Le but du projet c’est de faire une application qui crée des machines à la demande et les arrête quand il n’y a plus besoin.

Pedro arrive à arrêter la machine et il est sur la partie d'automatisation qui détecte le besoin et la fin d’une machine.

Design

Justine

• Préparation de deux ateliers Figma (théorie + pratique)
• Consulting UX / UI sur les toy projects (Pimp my KNPeer, Wall of shame et Belote me) : à la demande, elle apportait des conseils sur des problématiques d’architecture de l’information et de composants. Sur Wall of shame, elle a eu avec Erwann une petite session de pair design sur le composant d’une liste.
• Veille designOps :
• comment structurer ses fichiers Figma de manière efficace ?
• comment gérer les versions (fichier, composant, etc.) ?

Chez KNP, Justine intervient sur plusieurs projets et qui dit multiples projets… dit multiples UI kits ! Le KNPhackathon était l’occasion idéale pour se documenter sur la manière de structurer ce type de livrable. Elle en a profité pour lire et synthétiser plusieurs articles. Au programme : les différentes architectures de fichiers (monolithe vs modulaire), les outils de versioning dans Figma, semantic versioning, etc. Les lectures étaient techniques et les retours d’expériences de designers très enrichissants.

Ce que Justine a retenu : la structuration des fichiers Figma est très liée à la stack technique dev. Une approche de fichier modulaire est parfaitement adaptée à l’utilisation d’un framework JS comme React. Aujourd’hui, elle centralise l’ensemble des éléments dans un seul fichier (project-name_UI-kit).
Elle va tester la séparation des UI kits en plusieurs fichiers : fondations, core et domain components. Le fichier “fondations” contiendra les atomes (nuancier, niveaux de texte, styles, icônes). Le fichier “core” contiendra les composants génériques (boutons, inputs, dropdowns, messages d’alerte, etc.). Les fichiers “domain components” contiendront les templates et les organismes complexes (filtres, tableaux, etc.) spécifiques aux différentes features.

Team KNPoulettes

Amandine (à distance), Anais, Cécile, Eve, Laet

La team des Office Managers, facilitatrices et Laet ont pris le temps de discuter les workflows existants afin d'améliorer la gestion des projets. Chacune a également discuté avec les KNPeers ou les équipes projets.

Le KNPHackathon c’est aussi…

Les retrospectives
Quand toute l’équipe est sur place, on profite du cadre sympa pour faire les rétrospectives des projets ou discussions autour des sujets internes de KNP.
Le off projet
Les jeux, le karaoké, le billard, la piscine, le tennis, le tennis de table… pleins d'occasions d’échanger avec les KNPeers “en vrai”.
Le plaisir de manger ensemble
Pendant quatre jours nous sommes gâté.es par les chefs du Châteauform. On profite pleinement et c’est le moment de se ressourcer.

Want to join us? => hello@knplabs.com