(2/3) - Comment créer un produit : Guide étape par étape
Publié le - 8 février 2025 par Andy Cinquin
Cet article suppose que vous avez un MVP et une idée "relativement" claire de ce que vous voulez réaliser. On ne parle pas de technique, de code ou quoi que ce soit pour le moment, c'est juste l'idée de ce que vous voudriez faire !
Si vous n'avez pas lu le premier article, vous le trouverez ici :
Guide complet pour créer un produit avec succès (fr)
ou :
A complete guide to creating a successful product (en)
Récapitulatif
- On trouve une idée ✅
- On en parle, on la valide ✅
- On définit un MVP (Minimum Viable Product), en gros la version la plus petite possible qui répond au besoin ✅
- On réalise ce MVP
- Design simple
- Fonctionnalités simples
- Hébergement simple
- On le fait tester
- On continue à l'améliorer
- On fait la communication autour
- Et voilà !
La suite
À ce stade, nous avons plusieurs possibilités pour la suite du projet. Si vous n'aimez pas ma solution, vous pouvez faire sans ou faire autrement, rien ne vous en empêche. La bonne solution est celle qui vous convient, et rien d'autre !
MVP
Une fois notre MVP en tête, nous allons faire une maquette plus propre. Un wireframe pourrait convenir, mais nous allons faire les choses correctement et réaliser la maquette elle-même.
Plusieurs possibilités s'offrent à vous :
-
Si vous avez l'âme d'un designer :
- Faites tout à la main avec Figma, créez un moodboard avec Figjam par exemple, et lancez-vous dans la réalisation d'une belle maquette avec votre créativité !
-
Si vous avez quelques compétences en design mais manquez d'inspiration :
- Visitez des sites comme :
- Dribbble
- Behance
- Awwwards
- Le but est de trouver des inspirations pour vos écrans, basées sur l'existant, des designs que vous appréciez, et des approches que vous pourriez adapter. Appropriez-vous ces éléments, adaptez-les, et créez votre propre style.
- Visitez des sites comme :
-
Si vous n'avez aucune compétence en design et que vous détestez ça :
- V0 est une solution très efficace !
- (Guide complet pour créer une maquette d'application avec l'IA) Dans ce tutoriel, j'explique tout le processus si on n'est pas créatif et qu'on a besoin de résultats attrayants et cohérents.
- L'idée est de fournir des photos et des inspirations à l'IA qui créera notre maquette et notre première version côté front-end.
Validation du MVP et de la maquette
À ce stade, nous avons une maquette et un début de design prometteurs. Il faut maintenant ajuster les éléments qui ne sont pas optimaux et recueillir des avis. Personnellement, j'utilise beaucoup Figma pour ce genre de choses. Il est possible de partager une maquette et donc de recevoir des commentaires et des retours. C'est très efficace, et l'outil est gratuit en plus ! :D
Si vous voulez approfondir cette partie, il est possible de faire des animations et des transitions. Il existe de nombreuses règles et astuces à suivre. On peut faire des choses très complexes, mais restons simples et convenons qu'on n'a pas besoin de faire de la 3D, etc.
Je ferai sûrement un article sur la partie animations et motion design dans quelque temps. ;)
La suite ?
Nous avons une maquette et une vision du produit. Maintenant que nous avons la conception, il ne manque plus que la réalisation de l'outil.
Nous allons séparer cela en trois grandes étapes :
- Le choix des technologies
- Back-end
- Front-end
- Le choix du déploiement
- Infrastructure serveur
Le choix des technologies et langages
Ah, cette fameuse question ! Vous trouverez TOUTES les réponses possibles : vous êtes un peu fou ? Faites du Rust. Vous êtes un peu old school ? Faites du Java (😋). Vous codez de manière non conventionnelle ? Faites du JavaScript.
... Soyons plus sérieux...
En réalité, la réponse est simple :
Faites ce qui vous plaît
Vous aimez Go ? Faites du Go.
Vous aimez JavaScript ? Faites du JavaScript.
Vous aimez C# ? Faites du C#.
C'est aussi simple que ça. L'idée est de choisir le langage qui vous permettra d'aller au bout du projet.
Si vous voulez apprendre de nouvelles technologies et que vous n'avez pas peur d'apprendre, PERSONNELLEMENT, voici mon choix :
Si vous voulez apprendre une des technologies citées sur Developer Roadmaps - roadmap.sh, c'est un excellent point de départ ! (⚠️ Le but n'est pas de suivre des tutoriels aveuglément, mais de prendre UNIQUEMENT ce qui vous intéresse et d'être efficace. Apprenez sur le tas avec votre projet, c'est ainsi que vous acquerrez le plus de compétences et de plaisir en un minimum de temps !)
Back-end :- CMS Headless // BaaS :
- Payload
- Strapi
- PocketBase
- Directus
L'avantage de ces technologies côté back-end est qu'elles permettent d'avoir l'authentification, la génération des endpoints API et la gestion des données en 15 minutes maximum, juste le temps de créer son schéma de données dans l'application. Ensuite, TOUS les endpoints sont fonctionnels.
J'ai choisi cette approche car elle fait gagner un temps considérable et que nous n'avons pas de gros besoins en termes de charge. Les outils que nous utilisons et le volume de données ne dépassent jamais le million, nous sommes donc à peine à 5% de la capacité de ce genre d'outil. Si nous rencontrons des problèmes de performance, nous pouvons optimiser de nombreux aspects avant et après. À mon avis, le gestionnaire d'API ne sera pas un problème, sauf si nous commençons à gérer des millions d'utilisateurs.
(Mais à ce moment-là, nous aurons le budget pour tout refaire en Rust)
MAIS si vous voulez vous amuser à créer une API propre, faites-le. Je parle ici uniquement d'un avis personnel et de gain de temps, ce n'est qu'un point de vue subjectif.
Conseil le plus simple et rapide à mettre en place : Introduction - Docs - PocketBase
(Nous ne parlerons pas de base de données ici, cela dépendra uniquement de vos choix technologiques, que ce soit PostgreSQL, MariaDB, ou même SQLite. Aujourd'hui, les performances que nous pouvons obtenir avec des outils et des index bien placés sont incroyables, pas besoin de se prendre la tête.)
Front-end- NextJS // React // VueJS // NestJS // Astro // Angular // Svelte... Peu importe la technologie que vous choisissez, vous pouvez même développer en HTML/CSS/JS natif, ou avec du PHP, etc. Bref, vous pouvez utiliser Django si cela vous chante. Le front-end est la technologie la plus libre : 99% des outils vont finalement générer du HTML/CSS/JS. On peut utiliser des frameworks ou non, des langages et architectures complexes ou non. Ici, c'est totalement libre. Personnellement, je maîtrise bien NextJS, c'est donc le choix que j'utilise dans tous mes projets récemment, mais cela n'engage que moi.
Un point important à noter : on se dirigera vers telle ou telle technologie de préférence en fonction des besoins. Si on a besoin d'avoir une application mobile iOS et Android, on peut tout à fait se diriger vers Flutter pour ne développer l'application qu'une seule fois. D'autant plus que depuis peu, il existe des bibliothèques comme FlutterFlow, qui permettent de créer graphiquement vos composants pour accélérer drastiquement votre développement.
FlutterFlow - Build high quality, customized apps quickly!
En fin de compte, choisissez, encore une fois, la technologie qui vous passionne.
(Personnellement, c'est NextJS, un framework basé sur React. :D)
Serveur- Tout ce système devra être hébergé. Les solutions les plus économiques sont les VPS (serveurs privés virtuels), qui offrent le meilleur rapport qualité/prix. Vous pouvez également héberger une machine chez vous. Personnellement, je recommande Contabo et Netcup, deux hébergeurs allemands vraiment abordables. Vous pouvez choisir l'hébergeur de votre choix ; en général, un serveur à 5$/mois devrait largement suffire (sauf chez OVH, où cela coûtera 25€ pour les mêmes prestations).
Personnellement, j'ai un VPS chez Netcup, et Bréval, mon associé, en a un chez Contabo.
Une fois votre VPS (ou machine) en main, vous pouvez directement installer tout ce que vous voulez en ligne de commande.
Si vous voulez avoir de la flexibilité et que vous avez de bonnes bases en réseaux, ainsi qu'une certaine maîtrise de Docker et Linux, je vous conseille TRÈS FORTEMENT d'installer "Coolify" sur votre machine. C'est un orchestrateur qui vous permettra en quelques clics d'avoir l'équivalent de Vercel (pour ceux qui connaissent). En gros, c'est un outil qui permet de déployer une base de données ou un WordPress en quelques clics et quelques secondes. (Pas mal, non ?) Et bien sûr, avec tous les certificats configurés et des conteneurs Docker parfaitement paramétrés !
Vous avez même du monitoring et des alertes !
Exemple ?
Nous verrons dans le prochain article tout cela mis en œuvre, avec un exemple concret de ce qu'il faut faire à quel moment, les choix que j'ai faits personnellement, et surtout pourquoi ! :D
🚀 Merci d'avoir lu jusqu'ici !
Si cet article vous a plu, partagez-le autour de vous.
💡 Une idée en tête ? Discutons-en !☕