Article crée par : Amina Abdelkafi  : CTO / Olivier Zuratas : Directeur des opérations

Préambule

A l’heure du tout digital et de l’émergence d’une génération « digital native » talentueuse et créative, une multitude de projets prometteurs voient le jour.
Porteuses de richesses et d’emplois pour les 10 prochaines années, nombre de Startups ont néanmoins le besoin d’être accompagnées et conseillées pour franchir avec succès les étapes de la création d’entreprise.
L’émergence de technologies toujours plus puissantes et interconnectées les unes aux autres a favorisé un modèle « inflationniste » autour des développements web.
Les ressources techniques (développeurs, ingénieurs) sont difficiles à recruter, les meilleurs demandant des salaires prohibitifs pour les jeunes pousses disposant de budgets limités.
En parallèle, les temps de production n’en finissent pas de se rallonger dès lors que la quantité et la qualité des ressources ne sont pas suffisamment affectées sur un projet.
Il y a donc un impératif à faire les meilleurs choix techniques en amont, disposer de ressources compétentes pour respecter les exigences techniques et fonctionnelles.
L’autre enjeu est de pouvoir produire dans des délais assez courts et à un coût compétitif pour permettre aux Startups de générer de la traction commerciale rapidement.
Un des principaux facteurs d’échec est relatif à des temps de développement trop importants eu égard au budget limité dont dispose la plupart des Startups « early stage ».
Partant de ces constats, SASTEC a initié en 2018 de la R&D autour des méthodologies de programmation, convaincue qu’il était possible d’implémenter des services via une plateforme web capable d’optimiser les temps de développement des applications web.

Les avantages de DevFactory pour les développements web

La méthodologie et l’architecture de travail proposées via la plateforme web DevFactory permet de programmer plus rapidement en contextualisant certaines tâches de programmation et en supprimant des lignes de codes répétitives.

Devfactory automatise les workflows via différents services internes et externes :

• Le générateur de Front qui permet de créer des pages Figma automatiquement et de convertir le design en code
• Le générateur d’api qui permet à partir d’un modèle de données de générer
  automatiquement des codes
• L’IDE Cloud qui permet de créer un environnement de développement automatisé et d’en faciliter l’exécution.
• Des bibliothèques de composants préalablement testés comme l’upload d’images, l’envoi d’email, les solutions de paiements, l’intégration de chatbot….

Une vidéo de 3mn est disponible pour visualiser ces différents services

Les bénéfices pour les porteurs de projet

• Les développeurs se concentrent sur vos besoins métiers et laissent la plateforme s’occuper des tâches basiques et répétitives
• Les développeurs travaillent plus vite /produisent plus de codes grâce aux
  environnements de travail automatisés
• Le temps de production est réduit en moyenne de 30% avec un impact important sur les coûts de développement

Une planification inappropriée, le non-respect des délais, les dépassements de budget et un manque de coordination peuvent compromettre un projet.
Ce document présente notre méthodologie pour un développement web en s’appuyant sur la méthode DevFactory.

La réalisation d’un projet peut être effectuée en suivant un processus divisé en quatre étapes :

steps to develop a web application that meets technical and functional requirements faster

• Planification : réfléchissez à votre application avant de commencer à la créer – Données : définissez les données que vous souhaitez collecter, afficher, traiter et rapporter
• Design : pensez aux parcours utilisateurs, comment voulez-vous que les autres interagissent avec votre application ?
• Développement : quelles sont les fonctionnalités nécessaires pour faire tourner votre application ?

1.Planification

Dans cette partie nous présentons les principes de base de la gestion de projets, les étapes de la planification de la gestion d’un projet, ainsi que les techniques spécifiques que nous utilisons au quotidien.

La méthode classique pour préparer un plan de projet est de rédiger un document (Word ou feuilles de calcul Excel) qui décrit le périmètre, les objectifs et les livrables du projet. Faire un plan de projet permet entre autres de définir le travail à fournir et de préciser qui effectuera quelles tâches et quand.
La phase de planification est sans doute la partie la plus importante de la gestion d’un projet. L’utilisation d’un format de planning projet visuel permet :

• D’analyser clairement les projets et de définir tous les livrables.
• De diviser n’importe quel projet en parties plus petites et donc plus faciles à gérer.
• D’estimer et de détailler le temps, les coûts et les ressources nécessaires pour l’exécution d’un projet.

En transformant les idées non structurées en maps visuelles organisées, nous pouvons donner à toutes les personnes impliquées dans un projet une compréhension plus claire de leurs objectifs et une meilleure maîtrise de leur temps.
Nous utilisons le mindMap (miro.com) qui permet de subdiviser les principales activités ou sous-activités du projet en activités plus petites et plus gérables jusqu’à ce que les activités soient définies de manière suffisamment détaillée pour soutenir la gestion et le développement des travaux du projet.

Avec DevFactory, l’objectif est de développer notre propre mindMap et permettre de :

• Générer automatiquement des tâches après la phase de planification par un
  mindMap.
• Travailler avec un référentiel d’informations unique et centralisé pendant
  toute la durée du cycle de vie du projet.
• Capturer et partager en temps réel les nouvelles idées, informations et
  suggestions de toutes les personnes impliquées.

2. Données

Après la phase de planification et de préparation des prérequis, il est temps de créer le modèle de données. Nous allons créer une ou plusieurs tables avec des champs dessus, éventuellement les charger avec des données.
On utilise actuellement des méthodes classiques qui permettent de transformer les données de feuille de calculs en modèle json et des tables.
Il y a six champs créés automatiquement pour chaque table. Les six champs contiennent des informations renseignées automatiquement sur la table, telles que la date de sa création, la date de sa dernière mise à jour et la personne qui l’a mise à jour. Les champs contiendront également un identifiant unique pour la table. Ces champs ne peuvent pas être manipulés.

→ Cette étape nous permet de préparer des fake API basées sur une feuille de calcul

• Chaque feuille de calcul doit correspondre à un modèle (Entity) dans le projet.
• Chaque colonne peut devenir un champ dans la table
• Chaque ligne peut devenir un enregistrement de données dans la table

Notre objectif avec DevFactory est d’automatiser la création et le déploiement des fake API à partir d’un document Excel. Pour cela on prépare un outil d’import de données et cet outil va déclencher un worker qui reste toujours en écoute d’une nouvelle demande.
Le rôle du worker est de créer une instance docker qui permet d’afficher un studio d’API.
Le rôle du studio est d’afficher la liste des tables et les API de base pour chaque table.
Cet outil permet de :

• Documenter l’API
• Tester la conception de l’API
• Préparer des services d’intégration de l’API pour l’équipe front et backend
• Synchroniser les tâches entre l’équipe front et backend.

3. Design

Le Wireframe et le prototypage font partie de notre processus de conception. Ce sont les deux livrables de conception les plus souvent associés à la conception UX.
Le rôle d’un wireframe est de créer une base pour la conception finale. Les concepteurs créent des wireframes et les valident pour s’assurer que le wireframe contient tous les éléments essentiels. Un nombre limité d’éléments visuels permet à l’équipe de se concentrer uniquement sur les décisions de conception de base avant de plonger dans les détails.
Les concepteurs créent généralement des wireframes au début du processus de conception, avant que l’équipe ne commence à travailler sur les détails visuels.
On utilise actuellement Figma pour présenter le wireframe qui facilite le partage des wireframes et le partage des formations. Mais bien évidemment, il est plus facile de concevoir des wireframes lorsque l’on a des références visuelles.
Pour cela nous avons créé des collections utiles de modèles de Wireframing qui nous aident à démarrer le projet. Nous avons mis au point un système qui aide les concepteurs à créer des conceptions esthétiques, conviviales et évolutives très rapidement.
Pour optimiser la durée de préparation d’une maquette et un prototype pour nos clients, on prépare un fichier de conception avec tous les composants :

• Icônes
• Styles de couleurs
• Styles de texte
• Styles de grille pour commencer immédiatement le travail de conception.

Ce kit de conception est utile pour comprendre comment créer, organiser et nommer des composants dans Figma. Il garantit ainsi le respect des meilleures pratiques en termes de conception.

→ L’objectif avec DevFactory est de préparer des plugins Figma qui facilitent les partages de collections de wireframe et de kit de conceptions.

Ainsi, les développeurs peuvent rester dans le contexte et avoir la garantie de prendre toujours comme référence les dernières conceptions.

4. Développement

Après la validation de prototype, le plan établi dans la charte du projet est mis en application. Les tâches sont affectées à chacun des membres de l’équipe et les choses sérieuses commencent.
Développer plus rapidement un produit, sans en altérer la qualité, est un challenge pour tout porteur de projet.
Pour répondre à cet enjeu crucial des stratégies de développement existent.

a. Création des projets Boilerplate

L’objectif principal de Boilerplate est de mettre en place des projets prêts à l’emploi. Le Boilerplate essaie donc de suivre les meilleures pratiques partout où il le peut, savoir :

• Une structure de répertoires cohérente, significative pour les nouveaux membres de l’équipe et soutenant les points ci-dessus.
• Bien documenté, pour montrer aux nouveaux développeurs pourquoi les choses sont configurées comme elles sont.
• Le système de construction doit fonctionner automatiquement, sans implication du développeur. Les projets doivent être testés, lissés, compilés et minimisés, prêts à être utilisés dans un environnement de production.

b. Utilisation des fake API

L’utilisation de fake API peut s’avérer pertinente pour assurer les fonctionnalités backend des applications, que ce soit dans sa phase de développement ou dans sa phase de test. Parfois, l’API réelle qui s’intègre à l’application peut ne pas être prête à être testée, ce qui peut être une cause de blocage. Pour surmonter ce genre de situations, nous suggérons de développer notre propre fake API et la déployer. Ainsi, elle peut être facile à utiliser par n’importe qui et de n’importe où pour avancer rapidement.

c. Socle technologique (Technology Stack)

Nous n’utilisons pas une approche mono stack. Notre large stack nous donne la possibilité d’utiliser les meilleurs outils pour chaque cas d’utilisation, anticiper les évolutions technologiques et éviter le verrouillage technologique en provenance de certains fournisseurs.
La meilleure stratégie est de choisir les bons outils en fonction du projet que vous réalisez et d’éviter d’utiliser une multitude d’outils puissants, souvent lourds à mettre en place et qui nuisent à la productivité.

d. Disposer d’un environnement de développement similaire à la production

La mise en production d’un projet informatique est une étape très sensible. Elle donne souvent lieu à des erreurs inattendues.
Ces erreurs sont issues généralement d’un module manquant, d’une version incompatible, d’une bibliothèque non installée.
Ces problèmes sont généralement dus au fait d’avoir un environnement de production différent à celui du développement. Par exemple, lorsque vous faites le développement de votre projet sur Windows et puis le déploiement sur Ubuntu Server, vous rencontrez des problèmes d’encodage, de chemin, de variables d’environnement.
Disposer d’un environnement de développement identique à celui de la production est un élément essentiel pour garantir une production sans problème.
Pour cela, nous suggérons la mise en place un système qui automatise la création des environnements de travail par devSpace.io. Bien évidemment on utilise les Dockers, c’est un conteneur semblable à une machine virtuelle dans lequel on peut installer tout l’environnement et par la suite profiter d’un environnement 100% identique et quelle que soit la machine que vous utiliserez, le code s’exécutera de la même manière.

e. Don’t repeat yourself

Comme son nom l’indique, la technique du “Don’t Repeat Yourself”, souvent abrégée DRY suppose que ses utilisateurs évitent au maximum de se répéter. Il s’agit d’une des bonnes pratiques de développement. Notre approche consiste à développer, puis à utiliser des “Library” qui permettent de gagner du temps dans le développement des logiciels.
Notre objectif est de préparer une collection de fonctions fournies en développement, que ce soient des classes ou un ensemble de fichiers objets. Les bibliothèques de programmes comprennent toujours des sous-programmes qui facilitent le travail avec des outils d’aide à la programmation.
La plateforme DevFactory permet de partager ces collections de Library avec l’IDE (environnement de développement) et d’intégrer un assistant AI qui proposera des codes pour optimiser la durée de développement.
L’IDE est synchronisé dans le Cloud pour faciliter la tâche de développement et utiliser un environnement de travail similaire aux productions.

Vous avez un projet de développement web et mobile et vous souhaitez bénéficier de notre expertise et des avantages que procure Devfactory?