Sommaire
- 1. L’équipe
- 2. Quelques références
- 3. L’approche
- 4. La méthode
- 5. La proposition
- 6. Le rendu
- Proposition créative sur l’identité visuelle
- Maquette interactive, prototype fonctionnel et protocole de test
- Stratégie de migration du service actuel : données, utilisateurs, référencement…
- Spécifications fonctionnelles détaillées et manuel d’utilisation intégré au site
- Mise en production et garantie du service
- Offre de maintenance annuelle
- 7. Le Devis
Note : Cette proposition est réalisée sous forme d‘une page HTML avec du contenu rédigé en MarkDown. Ce principe permet une écriture collaborative du contenu et évite l’échange inutile de documents. L’affichage est compatible mobile.
1. L’équipe
Chez Good Impact nous accompagnons nos clients dans la conception, le développement et la maintenance de services numériques.
Notre positionnement :
“Le numérique responsable au service de projets à impact positif”
Nous sommes conscients des impacts environnementaux et sociaux liés au numérique et nous voulons les minimiser. Ainsi nous tâchons d’incorporer dans notre travail les bonnes pratiques d’éco-conception, d’accessibilité et de respect de la vie privée.
Plus globalement, nous tâchons d’étendre notre approche à différents aspects de notre activité : gouvernance, open source, partenariats, réseaux et écosystèmes (ESS), etc.
Bien sûr, nous aimons particulièrement travailler sur des projets qui apportent des solutions concrètes aux problématiques environnementales et sociales.
Objectif Terres entre complètement dans cette catégorie de projets :)
Yaacov Cohen a décidé de s’allier à Bertrand Keller pour répondre à l’appel à prestation lancé par Terre de Liens. Sa vision : “l’éco-conception c’est un environnement dans lequel une équipe de personnes met en place des outils conviviaux respectueux de la vie des gens.”
C’est pourquoi, Yaacov et Bertrand vont coder un site mais vont surtout se soucier des outils de construction de ce site ; des outils techniques mais aussi des outils humains permettant une bonne relation.
2. Quelques références
Good Impact
- Koena : WordPress optimisé (PHP, HTML, CSS, JavaScript)
Gros travail sur l'accessibilité numérique. - Persay : WordPress optimisé (Thème basé sur Sage, PHP, HTML, CSS, JavaScript)
Mise en production prévue pour début novembre - ekodev : Développements spécifiques d'outils internes : CRM, ekovoiturage.
Maintenance depuis 2 ans. - Mon Diag Electrique : Startup sur la mise aux normes électrique (Nuxt, JAVA, Swagger)
Accompagnement et co-construction avec le client. - CO2 Calculator We Love Green : Calculateur d'empreinte CO2 pour le festival We Love Green
Multiples réflexions d'éco-conception. - Fair Trip : Application Android.
Une application qui favorise un tourisme équitable
Bertrand Keller
Tout est là :3. L’approche
Notre motivation
L’activité de Terre de liens, nous semble essentielle pour la préservation de l’environnement en permettant de laisser la terre à ceux qui en prennent soin.
Nous aimerions participer à cette activité en co-construisant un outil au service des usagers, des salariés et des partenaires.
Pourquoi réduire l’empreinte numérique ?
L‘empreinte numérique est constituée de l’énergie nécessaire pour produire, sauvegarder et produire de l’information.
Réduire son empreinte consiste à mettre en place et suivre des indicateurs sur l’énergie consommée par le code ; mais aussi à optimiser les processus de travail pour faire évoluer et maintenir le site.
L’achat de nouveaux périphériques représente la part la plus importante de consommation d’énergie au niveau mondial. Pour limiter, l’impact environnemental, ainsi que pour rendre les interfaces accessibles au plus grand nombre, il convient d’optimiser le code afin qu’il soit lisible sur des périphériques peu performants.
Notre engagement
L’outil informatique doit être placé au centre des préoccupations. Les personnes qui participent à sa création doivent trouver un mode de collaboration pour servir les usagers du site.
Au départ du projet, nous insistons pour définir le rôle de chacun des participants et ce qu’on attend précisément d’eux (sur le mode de la gouvernance partagée).
Le développement sera fait avec des itérations successives. Elles seront l’occasion de faire un retour d’expérience sur ce qui a été mis en place et de corriger le fonctionnement de l’équipe de manière permanente.
Nous insisterons sur la question financière afin de pouvoir piloter la création de valeur ; ceci en adéquation avec les moyens budgétaires de la structure pour le projet en question.
Nous devons éviter les dépenses en énergie inutiles, qu’elles soient matérielles ou humaines.
4. La méthode
Approche
Nous avons identifié 2 types de consultation différentes :
- Le service de mise en relation par annonces
- Le service de suivi des porteurs de projets
Ces 2 services se destinent à des publics différents, nous proposons de ne pas les aborder de la même manière et en même temps.
Il conviendra donc de définir les 2 approches dans le cadre de réunions de conception. Notre objectif sera de pouvoir intégrer un échantillon d’utilisateurs pertinent qui pourra intervenir aussi bien pour la définition du besoin que pour les tests des parcours.
Le service de suivi des porteurs de projets est une interface qu’on peut qualifier de métiers qui peut être réalisée en étroite collaboration avec des salariés de Terre de liens.
Conception
Une approche intéressante est de définir un groupe de travail précis, avec :
- Un groupe resserré pour les questions exécutives
- Un groupe élargi pour les discussions sur la conception, les besoins et les retours utilisateurs
C’est une proposition sur la forme des cercles de la gouvernance partagée. On pourra éventuellement utiliser la technique des chapeaux pour toujours dissocier les différents apports que peuvent faire les participants.
Un temps important est consacré aux phases de conception. Un code sobre est un code qui traduit un besoin réel et précis.
Le cahier des charges est déjà bien avancé, il servira de base aux discussions. Les phases de conception permettront de bien prioriser les besoins et d’intégrer les différents acteurs à la réalisation.
Développement
Nous visons un code simple, sobre et performant. Pour cela, nous nous baserons sur des technologies Open Source suivies par une forte communauté.
Nous ne proposerons aucune forme de dogmatisme technologique qui placerait le fonctionnement d’un outil avant les besoins des utilisateurs. Nos objectifs sont de :
- Construire un prototype fonctionnel le plus rapidement possible
- Limiter la complexité technique d’une interface
- Réduire le temps du processus mise en production
À titre informatif, à partir du cahier des charges, nous pensons qu’un système de réalisation d’applications légères comme NuxtJS pourrait être une solution pour les interfaces.
5. La proposition
Architecture
Nous avons développé une expérience certaine dans la maîtrise de ce qu’on nomme la JAMStack : JavaScript, API, Markup.
C’est-à-dire un principe technique qui se base sur des pages HTML générées rapides d’accès (Markup). Le contenu de ces pages peut provenir d’une interface d’édition comme de plusieurs dépôts de contenu spécifiques (API). Une surcouche applicative (JavaScript) peut être ajouté pour les intéractions utilisateurs. Cette surcouche interagit avec les dépôts de contenus grâce aussi aux API. On dit que les API sont utilisées côté Front et côté Back
En décentralisant le contenu (API), on permet que les contenus soient disponibles pour une galaxie de sites sans dépendre d’une technologie dite monolithe. Ainsi, il est plus facile de déployer des interfaces spécifiques pour chaque usage.
C’est un changement de paradigme fort.
UX & Qualité
Développeurs expérimentés, nous utiliserons notre connaissance dans les standards et règles d’accessibilité.
Nous utilisons des linters (conformité du code dans l’éditeur de code), ainsi que des indicateurs de performances (Tests de performances sur les interfaces générées).
Référence : https://bertrandkeller.github.io/perfect-form/
La qualité du site sera suivi avec un outils de monitoring maison : https://forestier-monitoring.netlify.com
Eco-conception
L’éco-conception consiste à limiter le poids des pages et des requêtes. L’objectif est de minimiser la charge serveur au maximum.
Code Maison
Pour limiter le poids des pages, il est nécessaire de faire alliance avec des outils Open Source et du code maison correspondant spécifiquement au besoin.
Le code CSS est écrit de manière modulaire, il est optimisé pour chaque élément graphique de la page. Il fait le moins d’appel possible à des ressources externes (images). Les effets seront réalisés en CSS et les illustrations avec du SVG (format graphique léger sans perte de qualité).
Il est aussi possible de combiner les types de ressources en un seul fichier pour éviter de multiplier les ressources appelées par le serveur (C’est très important en éco-conception).
Amaigrissement
Chaque type de ressources peut être compressé pour peser le moins possible.
Une vidéo peut voir son poids diminué par 10 en passant par un compresseur. Les images peuvent être retraitées voire dégradées pour optimiser la bande passante
Optimisation
Même si une page se charge rapidement à première vue (on parle de performance), il est possible que du code JS exécuté en permanence sur la page baisse les temps de chargement et provoque une forte consommation du navigateur.
Le code JavaScript est utilisé seulement si nécessaire. Son chargement est différé pour ne pas bloqué le chargement du contenu. Son exécution est contrôlée pour qu’elle ne ralentisse pas la page lors de la navigation.
Fonctionnalités
Alertes
Il est possible de se servir de service éprouvé comme SendGrid ou Twilio. L’idée est d’avoir un système de gestion d’événement et de définir les règles d’envoi d’alertes associé.
A définir en fonction du besoin.
Recherche(s)
Nous bénéficions d‘une grande expérience dans la réalisation de moteurs de recherche (mais aussi d’une très bonne expérience du bon coin en tant qu’utilisateur).
Pour cela, il faudra regarder du côté des moteurs de recherche de type Full Text ressemblant au fonctionnement d’Algolia.
Référence : https://www.scenso.tv/recherche/
Le temps de réponse et la qualité du moteur est essentiel pour permettre une recherche aisée.
Cartes
Passons par des cartes Open Source avec une surcouche https://leafletjs.com pour la personnalisation de cartes et marqueurs.
Possibilités d’utilisation de données géographiques de zones pour afficher des terrains ou communes et pas seulement des marqueurs. Il y a moyen de combiner des données ouvertes (Open Data) pour améliorer la connaissance d’un terrain : risques géographique, risque hydrique, proximité de sites pollués…
Possibilité d’une recherche géographique avec https://community.algolia.com/places/ ou autre.
Exemple : 
Cette carte a été réalisée à partir des données des dernières élections européennes et des données de ventes de pesticides. Les contours noirs foncées sont les zones qui ont acheté des pesticides.
Salesforce
Salesforce est un outil bien documenté qui propose beaucoup de cas possibles d’utilisation. Si on utilise une technologie comme VueJS. On peut utiliser un plugin déjà réalisé pour la connexion.
- https://developer.salesforce.com/page/FR:REST_API
- https://medium.com/@ennoucas/creating-a-salesforce-application-with-vue-js-and-webpack-part-1-17c726484f1f
- https://medium.com/@ennoucas/salesforce-lightning-application-with-vue-js-and-webpack-part-2-af0071347274
- https://github.com/Rogeriohsjr/vuejswithsalesforce
Comme Salesforce a une API, on peut se connecter avec une application et lister ce qu’on désire sur une page. On pourra faire une connexion entre les utilisateurs connectés et ce qu’on peut afficher sur le site.
Nous n’avons pas l’expérience de Salesforce. Mais nous avons déjà réalisé ce genre de relation entre services.
6. Le rendu
Proposition créative sur l’identité visuelle
Par souci de sobriété, nous n’allons pas proposer de travail spéculatif concernant l’identité graphique de Terre de Liens. En effet, l‘identité graphique se travaille après une analyse approfondie du besoin de l‘organisation.
Ce qui est sûr c’est que nous connaissons des graphistes proches de la cause paysanne, qui ont notamment réalisés ceci.
Visiter le site http://reseau-amap-hn.com/.
Maquette interactive, prototype fonctionnel et protocole de test
Comme nous l’avons dit, le but du processus de travail est de fournir au plus vite des maquettes interactives permettant de tester, revoir, corriger les interfaces.
Ce principe ets possible grâce au générateurs de site statique qui permettent de mettre des pages en ligne de manière rapide. Ils offrent l’avantage de pouvoir afficher du contenu de production, donc d’être en permanence en situation.
Il s’agit de technologies totalement maîtrisées et mises en œuvre avec différents clients avec succès.
En fonction des besoins, nous déciderons d’utiliser des outils de créations graphiques comme: Zeplin, Sketch ou Figma. Ils permettront de décliner les maquettes des pages et ainsi que chaque élément graphique.
Stratégie de migration du service actuel : données, utilisateurs, référencement…
Une stratégie de migration est compliquée à définir sans voir le code. La structure des données détermine les stratégies. L’expérience montre que c‘est en auditant le code qu’on voit ce qu’on peut faire.
Ce que compte c’est de garantir la pérennité des données dans le temps. Elles doivent donc être récupérées et transformées dans un format ouvert.
Si possible, elles seront transformés en fichiers texte car c’est ce qu’il y a de mieux pour stocker des données en matière d’éco-conception.
Pour les données personnelles, elles doivent être intégrées à un dépôt sous forme d‘une base de donnée avec un système proposant une API. Ces données pourront ainsi être partagée entre différents sites de Terre de Liens.
Enfin, il faudra au maximum respecter le RGPD. Le mieux pour le respecter est de mettre en place une privacy by design, c’est-à-dire un respect de la vie privée en ne stockant pas de données sensibles qui sont inutiles à l’organisation.
Les migrations sont fastidieuses, elles demandent de la patience et de la correction manuelle de contenus résiduels. C’est une chose que nous avons l’habitude de faire.
Spécifications fonctionnelles détaillées et manuel d’utilisation intégré au site
Nous nous engageons à fournir une documentation automatisée du code ainsi qu’une charte graphique (Design System).
Ces interfaces vont permettre de lister les fonctionnalités et modules afin de partager une base commune. Elles doivent permettre l’entrée de nouveaux développeurs sur le projet et la maintenance du code dans le temps.
Exemple : https://cocky-liskov-2d8547.netlify.com/
Le site ci-dessus est un Design System listant l’ensemble des éléments déclinés en HTML/CSS. Il permet de suivre l’avancé du code et de contrôle son évolution au cours du temps.
Exemple : : https://docuapi.netlify.com/
Le site ci-dessus est une documentation générée avec un template goHugo, il permet de mettre en ligne de manière automatique la documentation du code.
Exemple : https://swagger.io
Le site ci-dessus présente un outil de documentation d’API
Mise en production et garantie du service
Les développements se font en local sur les machines des développeurs puis sont testés sur un environnement de préproduction (staging), avant d’être finalement déployés sur l’environnement final de production.
Une période de garantie d’un mois après la mise en production permettra à Terre de Liens de remonter les bugs et à l’équipe de les corriger.
Maintenance
Nous proposons de vous accompagner au delà de la mise en ligne du service, pour la correction des anomalies non détectées durant la période de garantie.
Maintenance préventive
Sauvegarde, mises à jour des outils, bibliothèques applicatives, etc. : les opérations de maintenance préventive sont multiples et variées, et elles dépendent des solutions techniques choisies. Par exemple, une solution type “JAMstack” nécessite moins de vigilance qu’une solution à base de CMS telle que WordPress ou Drupal.
Nous proposons divers formules de maintenance “à la carte”, généralement sur des forfaits temps / mois, au tarif jour·homme en vigueur : 600 € HT / jour·homme
Maintenance évolutive
Vous voulez ajouter une foncitonnalité ? Changer une fonctionnalié existante ? Nous proposons des forfaits de tickets de maintenance au tarif jour·homme en vigueur : 600 € HT / jour·homme. L'idée étant de prévoir un certain nombre de tickets par an à l'avance. (à définir en fonction des besoins)
7. Le Devis
Voici une proposition sous forme de jours dans de grandes catégories. Une définition courte permet de toujours bien suivre la ventilation des jours au cours du projet.
Conception
Phase de définition des tâches, sous forme de journées, réunion, consultation utilisateur…
Formation
Phase d’apprentissage des outils par les usagers
Tests
Phase de vérification des interfaces, avec la mise en place de tests, de la navigation, de la mise en situation.
Accompagnement
Phase de gestion de projet, d’écritures des tâches, de gestion du rythme, de coordination…
Développement
Phase d’écriture du code.
| Budget | Jours/Homme | Sommes |
|---|---|---|
| Conception | 5 | 3 000 € |
| Formation | 2 | 1 200 € |
| Tests | 3 | 1 800 € |
| Accompagnement | 6 | 3 600 € |
| Développement | 17 | 10 200 € |
| Total | 36 | 19 800 € |