DEV Community: lawalalao

Plongez dans le Monde de l'Architecture Logicielle : Découvrez mon Nouveau Livre !

lawalalao — Sat, 02 Sep 2023 09:08:58 +0000

Introduction :

Bonjour à tous les passionnés de codage et d'architecture logicielle, je suis ravi de vous annoncer la sortie de mon tout premier livre, "Architecture Logicielle". Dans cet ouvrage, je vous emmène dans un voyage fascinant à travers le vaste et complexe domaine de l'architecture logicielle.

Pourquoi ce livre ?

Lorsque j'ai commencé ma carrière dans le codage, l'architecture logicielle m'est apparue comme un labyrinthe déroutant. Les concepts semblaient complexes, les choix étaient nombreux, et je me sentais souvent perdu. C'est pourquoi j'ai entrepris de créer ce livre : pour vous épargner la confusion que j'ai ressentie.

Ce que vous trouverez dans le livre :

Dans ce manuel, je m'efforce de vous offrir une introduction simple, superficielle et facile à comprendre à l'architecture logicielle. Nous explorerons ensemble :

Qu'est-ce que l'architecture dans le monde du logiciel ?
Les principaux concepts que vous devez maîtriser.
Les modèles d'architecture les plus utilisés aujourd'hui.

Chaque sujet est présenté avec une brève introduction théorique, suivie d'exemples de code concrets pour vous donner une idée claire de leur fonctionnement.

Mises à jour gratuites à vie :

Je m'engage à rendre cet ouvrage évolutif. Vous n'aurez à payer qu'une seule fois, mais vous bénéficierez de mises à jour gratuites à vie. Le monde de l'architecture logicielle évolue constamment, et je veux m'assurer que ce livre reste actuel et informatif pour vous.

Comment obtenir votre exemplaire :

Pour acheter votre exemplaire dès maintenant et plonger dans l'univers de l'architecture logicielle, suivez simplement ce lien : https://2238383009561.gumroad.com/l/larchitecturelogiciel .

J'espère que ce livre vous aidera à éclaircir les mystères de l'architecture logicielle tout en stimulant votre passion pour le codage.

Merci pour votre soutien et votre intérêt pour ce projet. Ensemble, nous continuons à apprendre et à grandir dans ce domaine en constante évolution.

Conclusion

En conclusion, "Architecture Logicielle" est bien plus qu'un simple livre. C'est un voyage à travers un monde fascinant de concepts, de modèles et de pratiques qui façonnent notre paysage numérique. J'ai conçu ce livre avec l'espoir de simplifier ce domaine parfois intimidant et de vous donner la confiance nécessaire pour explorer l'architecture logicielle avec curiosité et assurance.

N'oubliez pas que l'apprentissage est un voyage continu. Mon engagement envers ce projet est de le maintenir à jour et de vous offrir des mises à jour gratuites à vie. Parce que, tout comme vous, je continue à apprendre et à grandir dans ce domaine en constante évolution.

Je vous encourage à plonger dans les pages de "Architecture Logicielle" et à explorer les concepts qui vous intriguent. Que ce livre soit un tremplin vers de nouvelles opportunités, une ressource précieuse pour résoudre des problèmes complexes ou simplement une source d'inspiration pour votre parcours de développement logiciel, je suis honoré de vous accompagner dans cette aventure.

Alors, qu'attendez-vous ? Obtenez votre exemplaire dès maintenant en suivant ce https://2238383009561.gumroad.com/l/larchitecturelogiciel.

Merci d'avoir choisi de m'accompagner dans cette exploration de l'architecture logicielle. Je suis impatient de connaître vos réflexions, vos réalisations et vos découvertes à mesure que vous avancez dans votre propre voyage.

Bonnes lectures et bon codage !

De l'idée à l'app: Un parcours de développement de produit digital.

lawalalao — Wed, 12 Jul 2023 08:50:15 +0000

Introduction
D'applications mobiles aux plateformes web, les produits numériques servent de points de contact clés entre les entreprises et leurs clients, facilitant les interactions, les transactions et la fourniture de valeur. Toutefois, le passage d'une idée à un produit numérique pleinement fonctionnel est semé d'embûches. Ce guide a pour but de vous guider dans ce processus complexe, en vous donnant un aperçu de chaque étape du développement d'un produit numérique.

L'importance du développement de produits numériques
Le développement de produits numériques va au-delà de la création d'une application ou d'un site web. Il s'agit de concevoir une solution qui apporte une valeur ajoutée aux utilisateurs et favorise la croissance de l'entreprise. Dans le monde actuel, centré sur le numérique, les entreprises de divers secteurs tirent parti des produits numériques pour s'engager auprès de leurs clients, rationaliser leurs opérations et créer de nouveaux canaux de revenus.

Un produit numérique bien conçu peut améliorer l'expérience du client, renforcer la visibilité de la marque et fournir des informations précieuses sur le comportement du client. Il peut également ouvrir de nouvelles perspectives d'innovation et de croissance. Par exemple, une application mobile peut constituer une plateforme permettant d'offrir des services personnalisés, d'envoyer des notifications en temps opportun et de recueillir des commentaires en temps réel. De même, une plateforme web peut servir de solution unique permettant aux clients d'explorer, d'acheter et d'évaluer des produits ou des services. Le développement d'un produit numérique n'est pas une tâche simple. Il nécessite une connaissance approfondie du marché, des besoins des utilisateurs et des dernières tendances technologiques.

Les défis du développement de produits numériques
Le chemin qui mène d'une idée à un produit numérique pleinement fonctionnel est semé d'embûches. Ceux-ci vont de la définition du concept du produit à la conception d'une interface utilisateur intuitive, en passant par le développement du produit à l'aide des technologies appropriées, les tests d'assurance qualité et enfin le déploiement réussi du produit.

L'un des principaux défis du développement d'un produit numérique est de comprendre précisément les besoins des utilisateurs. Sans une compréhension claire de ce que veulent les utilisateurs, les entreprises risquent de développer un produit qui ne répond pas à la demande du marché.

Un autre défi consiste à choisir la bonne pile technologique pour le développement. Le choix des technologies peut avoir un impact significatif sur les performances, l'évolutivité et les coûts de maintenance du produit.

D'autres défis consistent à garantir l'achèvement du processus de développement dans les délais impartis, à gérer les coûts de développement et à naviguer dans un paysage technologique en constante évolution.

Dans les lignes suivantes, nous allons approfondir chaque étape du développement d'un produit numérique et fournir des indications sur la manière de relever ces défis.

What is Ideation? - Smartpedia - t2informatik

L'idéation
Comprendre le marché et les besoins des utilisateurs
Le marché
Avant de vous lancer dans le développement d'un produit numérique, il est essentiel de comprendre le paysage du marché. Cela implique d'étudier vos concurrents, d'identifier les tendances du marché et de comprendre les besoins et les préférences de votre public cible.

L'étude de marché peut fournir des informations précieuses sur ce que font vos concurrents, sur ce qui fonctionne pour eux et sur les lacunes que votre produit pourrait combler. Elle peut également vous aider à comprendre les tendances actuelles de votre secteur, ce qui peut éclairer votre stratégie de conception et de développement de produits.

En outre, il est essentiel d'analyser la taille du marché potentiel et les perspectives de croissance de votre produit. Pour ce faire, il convient d'étudier les rapports sectoriels, les prévisions de marché et les données démographiques. Comprendre la taille du marché peut vous aider à estimer le chiffre d'affaires potentiel de votre produit et à élaborer votre stratégie de mise sur le marché.

Fort de ces informations, vous pouvez commencer à conceptualiser votre produit, en définissant ses caractéristiques, ses fonctionnalités et l'expérience globale de l'utilisateur.

Les besoins de l'utilisateur

L'identification des besoins des utilisateurs est une étape essentielle du processus de développement d'un produit numérique. Il s'agit de comprendre qui sont les utilisateurs, quels sont les problèmes auxquels ils sont confrontés et comment votre produit peut résoudre ces problèmes.

Les besoins des utilisateurs peuvent être identifiés à l'aide de différentes méthodes.

Les enquêtes et les entretiens peuvent fournir des informations directes sur les utilisateurs potentiels.

Les tests d'utilisation des produits existants peuvent révéler les points douloureux et les domaines à améliorer.

L'analyse des données peut fournir des informations sur le comportement et les préférences des utilisateurs.

Une fois que vous avez identifié les besoins de vos utilisateurs, vous pouvez commencer à concevoir votre produit pour répondre à ces besoins. Il peut s'agir de développer des fonctionnalités spécifiques, de créer une interface conviviale ou de veiller à ce que votre produit soit accessible à tous les utilisateurs. Mais avant cela, n'oubliez pas la conceptualisation de votre produit.

Conceptualiser le produit
La conceptualisation du produit est le moment où votre idée commence à prendre forme. Il s'agit de définir les caractéristiques du produit, ses fonctionnalités et l'expérience globale de l'utilisateur. C'est également à ce stade que vous réfléchissez à la manière dont votre produit se distinguera de la concurrence.

Lors de la conception de votre produit, il est important de garder l'utilisateur au centre de votre processus de conception. Cela signifie qu'il faut concevoir des caractéristiques et des fonctionnalités qui répondent aux besoins de l'utilisateur et améliorent son expérience. Cela signifie également qu'il faut tenir compte de la manière dont les utilisateurs interagiront avec votre produit, depuis le premier point de contact jusqu'au point de conversion et au-delà.

À ce stade, il est important d'examiner la faisabilité technique de votre produit. Il s'agit d'examiner les technologies et les ressources nécessaires au développement de votre produit et d'évaluer si elles correspondent à votre budget et à votre calendrier.

N'oubliez pas de créer une feuille de route pour votre produit. Il s'agit d'un document stratégique qui décrit les principales étapes du processus de développement du produit, de l'idéation et de la conception au développement et au lancement. Une feuille de route bien définie peut guider votre équipe tout au long du processus de développement et aider à gérer les attentes des parties prenantes.

A closer look at UX and UI design in V6 - Soft Tech

Conception
Conception de l'expérience utilisateur (UX) : Assurer la satisfaction des utilisateurs

Alors que la conception de l'interface utilisateur se concentre sur l'aspect et la convivialité de votre produit, la conception de l'expérience utilisateur (UX) s'intéresse à l'expérience globale d'utilisation de votre produit. Cela inclut des aspects tels que la facilité d'utilisation, la performance et la réponse émotionnelle suscitée par votre produit. Une bonne conception UX garantit que les utilisateurs peuvent atteindre leurs objectifs facilement et efficacement lorsqu'ils utilisent votre produit.

La conception UX implique de comprendre le parcours de l'utilisateur à travers votre produit, depuis l'interaction initiale jusqu'à la réalisation de l'objectif final. Il s'agit de créer un produit qui ne soit pas seulement fonctionnel et facile à utiliser, mais aussi agréable et satisfaisant.

Le design UX est un domaine multidisciplinaire qui implique des aspects de la psychologie, du design et de la technologie. Il nécessite une compréhension approfondie du comportement des utilisateurs et une approche de la conception centrée sur l'utilisateur. Il s'agit de créer un produit qui répond aux besoins de l'utilisateur et dépasse ses attentes.

Une bonne conception UX peut avoir un impact significatif sur le succès de votre produit numérique. Elle peut améliorer la satisfaction des utilisateurs, les fidéliser et favoriser la croissance de l'entreprise.

Conception de l'interface utilisateur (IU): L'art de créer des applications attrayantes.

L'interface utilisateur (IU) est la partie de votre produit numérique avec laquelle les utilisateurs interagissent. Une interface utilisateur bien conçue est intuitive, facile à utiliser et visuellement attrayante. Elle doit guider les utilisateurs à travers les fonctionnalités du produit de manière transparente et agréable.

La conception de l'interface utilisateur implique la création des éléments visuels de votre produit, tels que les boutons, les icônes et les menus. Elle consiste également à concevoir la disposition de ces éléments afin de garantir un flux logique et efficace pour l'utilisateur. Une bonne conception de l'interface utilisateur peut améliorer l'expérience de l'utilisateur, accroître son engagement et, en fin de compte, favoriser les conversions.

Le rôle du design UX/UI dans les produits numériques.
La conception UX/UI joue un rôle crucial dans le développement des produits numériques. Elle détermine non seulement l'aspect et la sensation de votre produit, mais aussi son fonctionnement et la façon dont les utilisateurs le perçoivent. Un produit numérique bien conçu peut améliorer la satisfaction des utilisateurs, accroître leur engagement et, en fin de compte, favoriser la réussite de l'entreprise.

La conception UX/UI n'est pas un processus ponctuel, mais un processus continu. Il implique de tester et d'affiner continuellement votre produit en fonction des commentaires des utilisateurs et de l'évolution des tendances du marché. Cette approche itérative garantit que votre produit reste pertinent et continue de répondre aux besoins des utilisateurs.

Intégrer la conception UX/UI dans votre processus de développement de produits numériques peut vous aider à créer un produit qui se démarque sur le marché et apporte une réelle valeur ajoutée aux utilisateurs.

Design-development GIFs - Get the best GIF on GIPHY

Développement
Développement Agile : Une approche moderne du développement de logiciels

Le développement agile met l'accent sur la flexibilité, la collaboration et la satisfaction du client. Il implique de travailler en cycles courts et itératifs, ce qui permet des retours d'information et des ajustements fréquents. Cette approche peut améliorer la qualité de votre produit numérique et réduire le risque d'échec du projet.

Le développement agile se caractérise par son approche itérative et incrémentale. Au lieu de planifier et d'exécuter l'ensemble du projet en une seule fois, l'approche Agile décompose le projet en morceaux plus petits et plus faciles à gérer, appelés "sprints". Chaque sprint comprend la planification, la conception, le codage et les tests, afin d'aboutir à un logiciel fonctionnel.

L'un des principaux avantages du développement agile est sa flexibilité. Il permet aux équipes de s'adapter rapidement et efficacement aux changements, qu'il s'agisse des exigences du projet, des tendances du marché ou de la technologie.

Un autre avantage est l'accent mis sur la satisfaction du client. En impliquant le client dans le processus de développement et en livrant des logiciels fonctionnels rapidement et fréquemment, la méthode Agile permet de s'assurer que le produit final répond aux besoins et aux attentes du client.

Intégrer l'IA dans le développement de produits numériques
L'intelligence artificielle (IA) peut considérablement améliorer les capacités de votre produit numérique. Elle peut permettre des fonctionnalités telles que les recommandations personnalisées, la reconnaissance vocale et le service client automatisé communement appelé "CHATBOT". L'intégration de l'IA dans le processus de développement de votre produit numérique peut vous aider à créer un produit plus avancé et plus compétitif.

L'IA peut être utilisée à différents stades du processus de développement d'un produit numérique.

Au stade de l'idéation, elle peut aider à analyser les tendances du marché et le comportement des utilisateurs pour générer des idées de produits. Au stade de la conception, l'intelligence artificielle peut aider à créer des interfaces et des expériences utilisateur personnalisées.

Au stade du développement, l'IA peut automatiser certaines tâches, ce qui accélère le processus de développement.

Au stade des essais, elle peut aider à identifier les bogues et les problèmes de performance.

L'IA dans le produit numérique peut également améliorer l'expérience de l'utilisateur. Par exemple, l'IA peut permettre de personnaliser l'expérience de l'utilisateur en fonction de son comportement et de ses préférences. Elle peut également automatiser le service client par le biais de chatbots, en fournissant aux utilisateurs des réponses instantanées à leurs questions.

Toutefois, l'intégration de l'IA dans votre processus de développement de produits numériques nécessite une planification et une exécution minutieuses. Il faut comprendre clairement ce que l'IA peut et ne peut pas faire, et comment elle peut ajouter de la valeur à votre produit.

Tests et déploiement
Best Typing Test GIFs | Gfycat

L'importance de l'assurance qualité

L'assurance qualité (AQ/QA) est un élément essentiel du processus de développement d'un produit numérique. Elle consiste à tester votre produit pour s'assurer qu'il fonctionne correctement et qu'il répond aux normes de qualité définies. L'AQ peut vous aider à identifier et à corriger les bogues, à améliorer les performances du produit et l'expérience de l'utilisateur.

L'AQ implique différents types de tests. Chaque type de test a un objectif spécifique et permet de s'assurer que votre produit est prêt à être lancé.

En investissant dans l'AQ, vous pouvez vous assurer que votre produit est de haute qualité et qu'il répond aux attentes des utilisateurs. Cela permet d'améliorer la satisfaction des utilisateurs, de les fidéliser et de stimuler la croissance de l'entreprise.

Différents types de tests dans le développement de logiciels
Il existe différents types de tests dans le développement de logiciels. Il s'agit notamment des tests fonctionnels, des tests de convivialité, des tests de performance et des tests de sécurité. Chaque type de test permet de s'assurer que votre produit numérique fonctionne correctement, qu'il est facile à utiliser, qu'il est performant et qu'il est sécurisé.

Les tests fonctionnels consistent à tester la fonctionnalité de votre produit pour s'assurer qu'il fonctionne comme prévu. Il s'agit notamment de tester les fonctions individuelles, les interactions avec l'utilisateur et le traitement des données.

Les tests d'utilisabilité consistent à tester l'interface utilisateur et l'expérience utilisateur de votre produit. Il s'agit de tester la présentation, la conception et la navigation de votre produit, ainsi que la manière dont les utilisateurs interagissent avec lui.

Les tests de performance consistent à tester la vitesse, la réactivité et la stabilité de votre produit sous différentes charges. Il s'agit notamment de tester les performances de votre produit dans des conditions normales et de pointe, ainsi que la manière dont il se rétablit en cas de défaillance.

Les tests de sécurité consistent à tester les caractéristiques de sécurité de votre produit pour s'assurer qu'il est à l'abri des menaces. Il s'agit notamment de rechercher les vulnérabilités, d'effectuer des tests de pénétration et de s'assurer de la conformité aux normes de sécurité.

Intégration continue : Garantir une qualité constante
L'intégration continue est une pratique de développement logiciel qui consiste pour les développeurs à fusionner fréquemment leurs modifications dans un référentiel central (communément branche TEST). Des constructions et des tests automatisés sont ensuite exécutés pour détecter les bogues à un stade précoce et garantir une qualité constante. Cette pratique peut vous aider à maintenir un niveau de qualité élevé tout au long du processus de développement.

L'intégration continue peut présenter de nombreux avantages. Elle permet de détecter et de corriger les bogues à un stade précoce, de réduire les problèmes d'intégration et de fournir un retour d'information immédiat aux développeurs. Cela peut améliorer la qualité de votre produit et accélérer le processus de développement. En intégrant l'intégration continue dans votre processus de développement de produits numériques, vous pouvez vous assurer que votre produit est toujours prêt à être publié. Vous pouvez ainsi améliorer votre capacité à fournir des mises à jour et de nouvelles fonctionnalités à vos utilisateurs de manière rapide et efficace.

Préparation au déploiement
Avant de déployer votre produit numérique, il est important de bien le préparer. Il s'agit de finaliser les fonctionnalités du produit, d'effectuer les derniers tests et de s'assurer que le produit est prêt à être utilisé. Il est également important de préparer votre équipe au lancement et de mettre en place un plan de gestion des problèmes éventuels.

Le processus de préparation implique de prendre en compte l'environnement de déploiement. Il s'agit notamment de l'infrastructure du serveur, des conditions du réseau et des mesures de sécurité en place. Il est important de s'assurer que votre produit est compatible avec l'environnement de déploiement et qu'il peut supporter la charge attendue.

Enfin, le plan doit décrire le processus de déploiement, y compris les étapes à suivre, les rôles et responsabilités de chaque membre de l'équipe et le calendrier du déploiement.

Lancement de l'application : À quoi s'attendre ?
Le lancement d'un produit numérique est une étape importante, mais ce n'est que le début. Après le lancement, vous devrez :

surveiller les performances du produit,

recueillir les commentaires des utilisateurs et

procéder aux ajustements nécessaires.

Vous devrez également commercialiser votre produit pour atteindre votre public cible et réaliser vos objectifs commerciaux.

Lors du lancement, vous pouvez vous attendre à une augmentation de l'activité des utilisateurs. Ce phénomène peut mettre à rude épreuve l'infrastructure de votre serveur(d'où l'importance d'une architecture adéquate pour votre produit) et entraîner des problèmes de performances s'il n'est pas géré correctement. Il est important de surveiller de près les performances de votre produit pendant cette période et de mettre en place un plan pour augmenter vos ressources si nécessaire.

Après le lancement, vous pouvez vous attendre à recevoir des commentaires de la part de vos utilisateurs. Ce retour d'information peut fournir des indications précieuses sur la manière dont votre produit est utilisé et sur les améliorations à apporter. Il est important de prendre en compte ces commentaires et d'apporter des ajustements à votre produit en fonction de ceux-ci.

Assistance et maintenance après le lancement
Après le lancement, votre produit numérique devra faire l'objet d'une maintenance continue. Il s'agit notamment de corriger les bogues, d'ajouter de nouvelles fonctionnalités et d'actualiser le produit pour qu'il suive les progrès technologiques et les attentes des utilisateurs. Une bonne maintenance après le lancement peut accroître la satisfaction et la fidélité des utilisateurs.

La correction des bogues consiste à identifier et à résoudre les problèmes qui affectent la fonctionnalité ou les performances de votre produit. Cela nécessite un processus de test et de débogage solide, ainsi qu'un système de suivi et de gestion des bogues.

L'ajout de nouvelles fonctionnalités consiste à mettre à jour votre produit pour répondre à l'évolution des besoins des utilisateurs et des tendances du marché. Cela nécessite une compréhension approfondie de vos utilisateurs et du marché, ainsi qu'un processus de développement flexible.

La mise à jour de votre produit consiste à l'adapter aux technologies et aux normes les plus récentes. Cela peut impliquer la mise à jour des langages de programmation, des librairies et des bibliothèques utilisés dans votre produit, ainsi que la mise à jour de la conception et des fonctionnalités de votre produit pour répondre aux attentes actuelles des utilisateurs.

Externalisation du développement de produits numériques
Les avantages de l'externalisation
L'externalisation du développement de produits numériques peut vous faire gagner du temps et des ressources, vous donner accès à une expertise spécialisée et vous permettre de vous concentrer sur vos activités principales.

L'externalisation peut vous permettre de disposer d'une équipe de développeurs expérimentés capables de fournir un travail de grande qualité dans les délais impartis. Elle peut également réduire vos coûts opérationnels, car vous n'aurez pas à investir dans l'embauche et la formation d'une équipe interne. En outre, l'externalisation peut vous offrir une certaine flexibilité, en vous permettant d'augmenter ou de réduire vos efforts de développement en fonction de vos besoins.

Cependant, l'externalisation s'accompagne également de ses propres défis. Il s'agit notamment de gérer une équipe à distance, d'assurer le contrôle de la qualité et de protéger la propriété intellectuelle. Il est important de choisir un partenaire ou entreprise fiable et d'établir des processus de communication et de gestion clairs.

L'importance des langages de programmation dans le développement d'un produit numérique
21 Most Popular Programming Languages in the World (and where to learn them)

Que ce soit pour les applications mobiles, les sites web, les logiciels ou même l'intelligence artificielle, le choix du langage de programmation joue un rôle crucial dans le développement d'un produit numérique de qualité.

Déterminer les besoins du produit : Avant de choisir un langage de programmation, il est essentiel de comprendre les besoins du produit. Chaque langage a ses forces et ses faiblesses, et il est important de choisir celui qui répondra le mieux aux exigences spécifiques du projet. Par exemple, si la rapidité d'exécution est primordiale, des langages de bas niveau tels que C ou C++ peuvent être préférables. Si le développement d'une application mobile est envisagé, des langages tels que Swift pour iOS ou Java pour Android seront plus appropriés.

Facilité de développement : La simplicité et la convivialité d'un langage de programmation peuvent grandement influencer le processus de développement. Certains langages sont conçus pour être plus intuitifs et offrir une syntaxe claire, ce qui facilite la tâche des développeurs et réduit le temps nécessaire à la création d'un produit numérique. Des langages comme Python, JavaScript ou Ruby sont appréciés pour leur lisibilité et leur facilité d'apprentissage, ce qui en fait des choix populaires pour les débutants.

Écosystème et disponibilité des ressources : Le choix d'un langage de programmation doit également prendre en compte l'écosystème qui l'entoure. Certains langages bénéficient d'une large communauté de développeurs actifs, ce qui signifie qu'il est plus facile de trouver des ressources, des bibliothèques et des frameworks pour accélérer le développement. Par exemple, le langage de programmation open source Python dispose d'une riche collection de bibliothèques scientifiques et d'apprentissage automatique, ce qui en fait un choix populaire pour les domaines liés à la data science.

Performances et optimisation : Dans certains cas, les performances d'un produit numérique sont essentielles, surtout lorsque des calculs complexes ou une grande quantité de données sont impliqués. Les langages de bas niveau, tels que C++ ou Rust, permettent un contrôle plus fin sur les ressources système et offrent des performances optimales. Cependant, il est important de noter que des langages de haut niveau bien optimisés, comme Java ou Go, peuvent également offrir des performances adéquates dans de nombreux cas.

Évolutivité et maintenabilité : Lorsque l'on développe un produit numérique, il est important de prendre en compte l'évolutivité et la maintenabilité à long terme. Certains langages, comme Java et C#, sont appréciés pour leur architecture orientée objet, qui facilite la modularité et permet une évolution plus fluide du code. D'autres langages, comme JavaScript avec l'utilisation de frameworks tels que React ou Angular, permettent la création d'interfaces utilisateur évolutives et interactives.

Conclusion
Le passage de l'idée à l'application est un processus complexe qui comporte plusieurs étapes, de l'idéation et de la conception au développement, aux tests et au déploiement. Chaque étape nécessite une planification et une exécution minutieuses, et l'utilisation de méthodologies et de technologies modernes peut grandement améliorer le résultat.

Malgré les difficultés, le développement d'un produit numérique peut être une expérience enrichissante. Il vous permet de donner vie à vos idées, de créer de la valeur pour les utilisateurs et de stimuler la croissance de votre entreprise. Avec la bonne approche et le bon partenaire, vous pouvez parcourir ce chemin avec succès.

Comment je peux vous aider dans votre parcours de développement de produits numériques
Je suis Lawal ALAO, ingénieur logiciel, spécialisé dans le développement de produits numériques. Je peux vous guider à chaque étape du processus de développement de produit, vous aidant à transformer votre idée en un produit numérique réussi.

Que vous cherchiez à externaliser le développement de votre produit numérique ou à obtenir des conseils sur votre prochain projet, je suis là pour vous aider.N'hésitez à me contacter sur les réseaux sociaux, twitter et linkedin.

Dans le monde du développement de produits numériques, le passage de l'idée à l'application est à la fois difficile et gratifiant. Avec la bonne approche et le bon partenaire, vous pouvez transformer votre idée en un produit numérique réussi qui répond aux besoins de vos utilisateurs et fait progresser votre entreprise.

N'hésitez pas à partager cet article et à rajouter en commentaire vos apports. Merci.

Devenez Un Dompteur Du Cors 🧙‍♀️

lawalalao — Tue, 13 Jun 2023 12:33:33 +0000

Yeah, c'est enfin arrivé ! 😲 Vous avez bossé dur pour développer votre application web frontend, mais dès que vous tentez d'accéder à une ressource sur un autre serveur pour l'afficher dans votre appli, vous vous tapez l'erreur CORS de l'enfer. Mais no soucis, je vais vous remettre tout ça d'équerre en vous expliquant ce que c'est que le CORS, pourquoi vous vous tapez toujours ces erreurs CORS et quelques astuces pour les résoudre. Bien sûr, y'a sûrement d'autres alternatives, alors hésitez pas à les partager avec moi et tous les autres lecteurs... Let'ssss gooooo !

Terminologie CORS

Avant d'entrer dans le vif du sujet, passons en revue quelques termes importants.

L'origine est une url composée de trois parties :
- Schéma URI: par exemple http:// ou https://
- Nom d'hôte: comme twitter.com
- Numéro de port: par exemple 80 pour HTTP et 443 pour HTTPS. Vous ne les verrez jamais dans votre barre d'adresse, car cela est pris en charge en background, mais essayez de coller https://twitter.com:443 dans votre barre d'adresse et vous allez remarquer qu'il vous dirige automatiquement vers le site web attendu.
Les requêtes HTTP sont des requêtes qu'une application web effectue pour accéder aux ressources d'une application. Il existe différents types de requêtes HTTP, notamment GET (qui vous permet d'obtenir des ressources), DELETE (qui vous permet de supprimer des ressources), etc. Vous trouverez ci-dessous un exemple de requête GET :,
- lorsque vous utilisez twitter dans votre navigateur pour cliquer sur le profil d'une personne et que vous souhaitez voir ses tweets. L'application web envoie une requête HTTP au serveur à l'adresse http://twitter-api.com qui répond avec les tweets de cette personne pour que vous puissiez les voir.

Demande d'origine croisée 🤣🤣😂 (Cross-Origin Request) c'est lorsqu'une demande est faite à partir d'une origine vers une autre origine. Exemple ? Vous recherchez des images de chats sur https://flikr.com et cette application interroge https://image.com/api pour demander que des photos de chats soient affichées pour vous.
Les en-têtes HTTP (HTTP HEADERS) sont des données qui décrivent la requête ou la réponse envoyée. Ils fournissent des informations supplémentaires, un peu comme la bio de votre profil Twitter. Des exemples d'en-têtes tels que Host et access-control-allow-origin sont présentés dans l'image ci-dessous.

Un proxy est un serveur qui sert d'intermédiaire entre un client (votre navigateur) et un autre serveur.

Qu'est-ce que CORS ?

CORS (Cross Origin Resource Sharing) est un ensemble de règles que tous les navigateurs mettent en place pour sécuriser les applications web contre les accès indésirables (+1 pour la sécurité 🥳). (+1 pour la sécurité 🥳) L'une des méthodes utilisées par les navigateurs consiste à vérifier la présence d'informations spécifiques dans une réponse HTTP, qui lui permettent de savoir que l'application web qui demande une ressource a reçu l'autorisation de le faire. C'est le comportement par défaut du navigateur, sauf s'il sait déjà qu'une application web a accès à une ressource.

Comment fonctionne CORS ?

À un niveau élevé, selon le type de requête effectuée, CORS fonctionne de deux manières. Examinons les deux dans le contexte de l'obtention ou de la modification d'un tweet (oui, ça existe maintenant).

Lorsque votre application web veut récupérer un tweet SANS le modifier, le navigateur vérifie que la réponse contient un en-tête access-control-allow-origin qui correspond à l'origine de l'application twitter requérante (par exemple, https://twitter.com), ou un * pour indiquer au navigateur que toutes les origines sur le web y ont accès. C'est le comportement typique des requêtes GET.
Lorsque votre application web souhaite METTRE À JOUR un tweet, plusieurs choses se produisent.

* Le navigateur envoie une pré-requête, qui est une petite requête de type **OPTIONS**, qui donne au serveur des informations sur la requête que vous essayez d'envoyer pour mettre à jour votre tweet. L'application backend examine les **en-têtes** fournis dans la pré-requête afin de déterminer si la requête que vous souhaitez effectuer est autorisée. Certains des en-têtes ajoutés à la pré-requête sont [**Access-Control-Request-Method**](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Request-Method) et [**Access-Control-Request-Headers.**](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Request-Headers) Ils donnent au serveur des informations telles que la méthode de la requête, etc. Cette couche supplémentaire de protection est utile car les requêtes qui peuvent modifier les ressources sont plus susceptibles d'avoir des effets néfastes que les requêtes qui ne le peuvent pas.

* Une fois que le serveur a reçu la demande (pré-requête), il répond et vous fait savoir s'il a accepté une demande ou pas selon les paramètres que vous lui avez donnés dans les en-têtes . Vous trouverez ci-dessous une explication simplifiée de la conversation entre le navigateur et le serveur backend.

    ![Conversation between browser and server, but make them both toddlers](https://cdn.hashnode.com/res/hashnode/image/upload/v1666772758378/xVPfKzFuc.png?auto=compress,format&format=webp align="left")

Pourquoi obtenez-vous une erreur CORS ? 🙄

L'une des principales raisons des erreurs CORS dans le développement est que le serveur auquel vous envoyez une requête peut ne pas inclure l'en-tête access-control-allow-origin dans les réponses qu'il vous renvoie. Ou s'il le fait, il n'inclut pas l'URL de votre application frontend dans la liste des origines approuvées. Les solutions ci-dessous visent à remédier à ce problème. Vous pouvez trouver une longue liste d'autres causes d'erreurs CORS ici.

Quelques moyens de résoudre les erreurs CORS

Activer CORS sur le backend : A quoi cela ressemble-t-il ? L'activation de CORS et l'ajout de l'origine de votre application frontend à la liste des origines approuvées pour l'API.

* **Avantage** : vous pouvez résoudre le problème en interne en quelques lignes de code.

* **Inconvénient** : Vous devez faire des mises à jour dans le backend, ce à quoi vous n'avez pas forcément accès.

* **Exemple** : Voici comment j'ai procédé pour un projet récent sur lequel je travaillais en utilisant le framework Phoenix elixir pour mon backend. Tout d'abord, j'ai trouvé une bibliothèque CORS appelée **Corsica** qui ajouterait l'origine de mon front-end à la liste des origines approuvées. Ensuite, je l'ai ajoutée en tant que dépendance (une dépendance est un code tiers dont votre code a besoin pour fonctionner) à mon projet de backend. Dans elixir, vous ajoutez une nouvelle dépendance dans votre fichier mix.exs comme indiqué ci-dessous.

*

            defp deps do 
            [
             ...
             {:corsica, "~> 1.1.3"} 
            ] 
            end
        ```



        Ensuite, j'ai ajouté l'origine de mes applications web frontend à la liste des origines approuvées en ajoutant Corsica, et en plaçant l'origine de mon frontend dans la liste des origines approuvées pour accéder aux ressources de mon backend.




```erb
plug Corsica, origins: ["http://localhost:3000"]

En fonction du backend que vous choisissez, vous pouvez définir l'URL d'origine en fonction de l'environnement dans lequel vous vous trouvez. Vous suivrez une approche similaire pour activer CORS sur le backend dans de nombreux frameworks backend.

Envoyez vos requêtes à un proxy qui ajoute les en-têtes attendus à la réponse. Le code pour cela se trouve dans votre application frontend. Mais qu'est-ce que cela signifie exactement ? Au lieu que votre application envoie des requêtes à https://twitter.com/, vous pouvez utiliser un proxy CORS comme CORS anywhere qui est situé à https://cors-anywhere.herokuapp.com/ comme ceci -> https://cors-anywhere.herokuapp.com/https://twitter.com.

Avantage : vous n'obtenez plus l'erreur CORS et vous avez désormais accès aux ressources que vous demandiez, car l'en-tête attendu a été ajouté par le proxy CORS.
Inconvénient : La demande peut potentiellement prendre plus de temps à être satisfaite car vous serez à la merci de la vitesse à laquelle le proxy externe envoie, reçoit et met à jour la réponse pour inclure l'en-tête dont CORS a besoin pour être satisfait. De plus, vous devez faire confiance à 100% au proxy, car il peut lire et faire n'importe quoi avec la réponse que vous attendez en retour. Je déconseille fortement l'utilisation d'un proxy pour tout ce qui n'est pas des données triviales.

Envoyez vos requêtes à votre propre proxy afin de réduire les lenteurs potentielles liées à l'attente d'un proxy externe qui ajouterait les en-têtes pour vous.

Avantage : vous n'avez pas besoin d'apporter de modifications au back-end. Vous pouvez allouer autant de ressources que vous le souhaitez à votre proxy pour réduire les lenteurs.
Inconvénient : Vous devrez gérer les ressources de votre proxy, mais il est probable que si vous hébergez une application back-end, cet inconvénient ne soit pas si important. Vous pouvez voir un exemple de comment faire ici.

Désactiver temporairement CORS sur votre navigateur

* Avantage : vous pouvez développer et tester immédiatement les requêtes de votre navigateur vers des sources croisées.



Inconvénient : Cette méthode ne doit être utilisée que temporairement et ne fonctionne qu'en phase de développement.

L'erreur CORS subsistera lorsque vous déployerez votre application en production. Selon le navigateur que vous utilisez, vous pouvez soit installer une extension pour contourner CORS, OU si vous utilisez Safari, vous pouvez manuellement désactiver CORS temporairement en activant le menu développeur et en cliquant sur l'option ci-dessous :

Récapitulatif

Pour faire court, CORS est un ensemble de règles que chaque navigateur a universellement mis en place pour assurer la sécurité d'une application web et de ses utilisateurs. Et comme la plupart des choses dans le monde du développement, il existe plusieurs méthodes pour corriger toute erreur CORS potentielle. Je sais qu'elles peuvent être un casse-tête, mais maintenant que vous savez de quoi il s'agit et que vous connaissez quelques méthodes pour les résoudre, c'est gagné !

Maintenant, allez, donnez à ces erreurs CORS une bonne correction 💪

Vous voulez descendre dans le trou du lapin ? Voici quelques lectures complémentaires en anglais :

Alors vous aimé cet article ? n'hésitez pas à le partager autour de vous et abonnez-vous ... Surtout n'hésitez pas à partager avec moi et d'autres lecteurs d'autres moyens pour résoudre les erreurs CORS. Merci

PoC vs Prototype vs MVP

lawalalao — Mon, 07 Nov 2022 14:43:53 +0000

Qu'est-ce qu'un POC, un prototype et un MVP - Explication des différences
Pour créer de bons produits numériques, il faut à la fois être innovant et suivre des méthodes éprouvées de développement d'applications mobiles. Une preuve de concept (POC), un prototype et un produit minimum viable (MVP) permettent de tester une idée de produit avant de dépenser des fonds pour son développement.

Quelles sont les différences entre un POC, un prototype et un MVP, et comment choisir celui qui convient le mieux à votre projet ?

POC vs. MVP vs. Prototype : Brève définition

Preuve de concept - Un POC est une méthode permettant de valider des hypothèses auprès des utilisateurs cibles et de vérifier si votre idée est techniquement réalisable.

Prototype - Un prototype d'application mobile évalue la "forme" générale de votre idée (par exemple, l'aspect, le flux, l'interaction avec l'utilisateur).

Produit minimum viable - Un produit minimum viable (MVP) est une version entièrement fonctionnelle de votre produit, mais avec seulement les fonctionnalités de base qui vous permettent de recueillir les premiers commentaires des utilisateurs.

J'explique en détail comment créer un MVP dans cet article.

Vous avez besoin d'aide pour transformer votre idée en application mobile ?
Contactez-moi sur twitter. c'est bon rentrons dans le vif du sujet.

Qu'est-ce qu'une preuve de concept ?

Dans le monde du développement d'applications mobiles, un POC est un projet simple qui valide ou démontre une idée. Le but d'un POC est de vérifier si une idée peut être développée et ne consommera pas trop de ressources ou de temps.

Avec un POC, vous évaluez essentiellement les fonctionnalités de base. Si votre idée d'application est complexe, vous pouvez avoir plusieurs POC pour tester chaque fonctionnalité.

L'expérience utilisateur est mise de côté lorsque vous construisez un POC. En effet, il faut beaucoup de temps et de travail pour créer une expérience utilisateur optimale, et ce n'est pas l'objectif de la création d'un POC. L'objectif est de valider la capacité technique.

Caractéristiques d'une preuve de concept

Susciter l'intérêt des premiers investisseurs. Vous pouvez créer un POC pour présenter votre idée aux investisseurs afin d'obtenir des fonds de démarrage pour poursuivre le développement.
Innover. L'innovation se produit à l'intersection de la viabilité technologique et de la demande du marché. Un POC vous aidera à vérifier si votre idée peut être construite en utilisant la technologie actuelle.
Gagnez du temps. Lorsque vous vérifiez si votre idée peut être construite, vous gagnez automatiquement du temps qui serait perdu si vous deviez résoudre les problèmes de viabilité technique une fois que vous avez engagé des développeurs et consacré des ressources et du temps considérables.
Choisir la technologie. La création de nombreux POC à l'aide de différentes technologies peut vous aider à décider quelle pile technologique est la plus adaptée à votre projet. Ainsi, vous saurez très tôt ce qui est possible à mesure que vous avancez et comment structurer la feuille de route de votre produit.
Comparez avec la concurrence. Si vous prévoyez de lancer une application mobile sur un marché fortement concurrentiel, un POC vous aidera à valider les caractéristiques uniques de votre offre. Votre produit devra inclure une approche unique pour résoudre le même problème afin de constituer une meilleure alternative à ce qui existe déjà.

Exemple de preuve de concept

Les entreprises du monde entier adoptent de plus en plus les solutions de travail à distance et les méthodes de collaboration. Des entreprises ont travaillé avec PONS - une maison d'édition internationale pour créer une preuve de concept pour une solution de communication interlinguistique XR soutenue par l'IA.

Le POC a permis de valider si XR Interpreter pouvait être utilisé dans un environnement professionnel pour faciliter la communication.

validation du produit réalité augmentée
Le POC a été construit pour prouver que les professionnels pouvaient communiquer dans différentes langues en temps réel pour discuter de problèmes mécaniques complexes. Source : nomtek

Qu'est-ce qu'un prototype ?

Un prototype est l'endroit où la conception de votre produit commence à prendre forme.

Si une preuve de concept évalue l'aspect technique, un prototype vise à répondre à la question de savoir à quoi ressemblera le produit.

La création d'un prototype repose sur l'effort d'une équipe interfonctionnelle au sein de laquelle les concepteurs, les développeurs et les responsables du produit s'accordent sur la conception du produit.

Les prototypes vous aident à déterminer quels éléments de l'interface utilisateur doivent être inclus et comment l'utilisateur interagira avec eux.

Les prototypes peuvent prendre de nombreuses formes - du simple fil conducteur sur papier aux versions interactives "cliquables" développées dans Figma.

Prototype interactif dans le développement de produits

Un prototype interactif dans Figma. Le prototype interactif n'a pas de backend et n'implique aucun codage. Source : Figma
L'avantage de créer un prototype dans Figma est que le logiciel produit un code HTML et CSS prêt à l'emploi qui peut être injecté dans un site Web ou une application mobile. Il existe également un plugin qui s'intègre à Flutter et convertit les composants Figma en widgets Flutter.

L'inconvénient est que la création d'un prototype peut parfois prendre beaucoup de temps, surtout si le design du produit est façonné et remodelé plusieurs fois.

Caractéristiques d'un prototype

Convaincre les investisseurs. Un prototype est un excellent moyen d'amener les investisseurs à considérer et à soutenir votre produit, en particulier dans la phase ultérieure de la collecte de fonds.

Optimiser les ressources. Lorsque vous commencez avec un prototype, vous pouvez identifier les éléments de l'interface utilisateur de l'application qui présentent des défauts et doivent être supprimés avant le début du développement.

Itérer les conceptions. Les outils de prototypage interactif tels que Figma aident les concepteurs à créer de nombreuses itérations de conception en un temps relativement court. Vous pouvez ainsi choisir la conception la plus performante et réaliser des expériences internes.

Recueillir des commentaires. Un prototype vous permet d'envoyer votre produit à des utilisateurs test pour obtenir un premier retour. Les tests effectués par les utilisateurs au cours de cette phase peuvent grandement contribuer à l'amélioration et à la mise au point de la conception, tout en laissant suffisamment de temps pour corriger les défauts.

Perfectionnez l'idée commerciale. Avec un prototype, vous pouvez simplifier votre idée de produit et la transformer en un format visuellement attrayant. Si une preuve de concept a confirmé que l'idée peut être construite, un prototype lui donnera une forme plus raffinée.

Exemple de prototype

Richardo.ch est l'un des plus grands magasins d'occasion de Suisse, traitant plus de 5 millions de transactions par an.

Nous avons travaillé avec mon équipe sur Richardo sur une refonte de l'application mobile de leur marketplace . Le prototype de la refonte de l'application était prêt en quatre semaines. Le prototype nous a permis de recueillir la première série de commentaires des utilisateurs, ce qui nous a fourni tous les renseignements nécessaires pour la suite du développement.

Une interface utilisateur simple et intuitive
Le nouveau design de Ricardo. Source : Nomtek

Qu'est-ce qu'un produit minimum viable ?

Il existe de nombreuses définitions d'un produit minimum viable et, à vrai dire, il n'y en a pas une seule qui soit définitive. Un MVP pour un projet peut avoir une définition différente pour un autre.

différents éléments d'une bonne et d'une mauvaise approche de la création d'un mvp
Bien que ce graphique soit souvent utilisé pour illustrer ce qu'est un MVP, même la ligne inférieure n'explique pas correctement ce qu'est un produit minimum viable. Source : Interaction Design Foundation

En d'autres termes, un MVP dépend du contexte de votre produit et de votre organisation. L'ensemble minimal de fonctionnalités d'une entreprise peut représenter une application complexe pour une autre.

**
Cela dit, la clé de la création d'un MVP est de commencer à apprendre avec une version de votre produit qui ne contient que les fonctionnalités de base mais qui vous permet de valider votre hypothèse.**

Un produit minimum viable vous aide à évaluer la demande et l'adéquation produit-marché, c'est-à-dire à déterminer si votre produit attire les premiers utilisateurs et les satisfait.

Un MVP doit contenir le nombre minimum de fonctionnalités qui rendent votre produit commercialisable. N'oubliez pas que l'objectif est de recueillir et d'analyser les données et les commentaires des utilisateurs.

Chaque itération de votre MVP vous permet de mieux connaître les problèmes de vos utilisateurs et d'affiner votre solution. Vous itérez jusqu'à ce que votre MVP devienne un produit à part entière qui répond aux besoins et aux difficultés de votre public.

Mais minimal ne signifie pas inférieur ou simple. C'est souvent mal compris. Bien qu'un MVP ne comporte que les fonctionnalités de base, il doit être une version de haute qualité, unique et performante de votre produit, mais jamais inférieure.

Caractéristiques d'un MVP

Obtenez les commentaires des utilisateurs. Un MVP est un excellent outil pour savoir ce que vos premiers utilisateurs pensent de votre produit - et tirer des leçons de leurs commentaires pour améliorer les prochaines itérations du produit.

Économisez des ressources et de l'argent. Comme vous n'avez pas à mettre en œuvre toutes les fonctionnalités de votre MVP, le travail de développement est réduit. De plus, lorsque vous analysez les commentaires des utilisateurs, vous pouvez établir une feuille de route et un chemin de développement clairs pour le produit - le risque de créer trop de fonctionnalités sera minimisé.

Un produit minimum viable vous donne également la possibilité d'introduire une expansion progressive du produit, ce qui signifie que vous commencez à travailler sur une autre version après avoir obtenu un financement.

Attirer les investisseurs. Alors qu'un POC et un prototype peuvent vous aider à obtenir des fonds de démarrage, un MVP peut vous aider à obtenir des investissements plus importants - après tout, si votre MVP gagne en popularité et recueille des commentaires positifs, les investisseurs sont plus susceptibles d'être convaincus de soutenir votre idée commerciale avec de l'argent.

Faites entrer l'argent. Avec un MVP sur le marché et un marketing suffisant, vous pouvez commencer à acquérir des utilisateurs payants qui soutiendront votre croissance.

Exemple de produit minimum viable

Lighticians Apollo Control

Le projet Apollo Control de Lighticians visait à permettre la communication avec Apollo Bridge - un routeur sans fil qui se connecte aux appareils d'éclairage. En collaboration avec Lighticians, nous avons travaillé sur un MVP qui permettrait de connecter le matériel aux appareils mobiles.

Le produit minimum viable pour iOS que nous avons créé permet aux professionnels de l'éclairage de gérer les lumières sur le plateau de tournage à partir d'une application mobile.

Il est intéressant de noter que le MVP a été développé à partir d'une preuve de concept fournie par Lighticians - dans la preuve de concept, la société a confirmé que la connexion avec le routeur sans fil pouvait être établie.

un produit minimum viable pour le contrôle de la lumière sur le plateau de tournage
Le MVP pour les Lighticiens comprend des fonctionnalités qui apportent de la valeur aux utilisateurs. Source : nomtek

Quelle est la différence entre un POC et un prototype ?

Une preuve de concept répond essentiellement à la question de la faisabilité - à savoir qu'une certaine idée peut être réalisée avec une technologie spécifique.

Habituellement, un POC sert de projet interne tandis qu'un prototype peut être expédié pour un premier retour d'information afin d'en savoir plus sur le flux et la conception.

Quelle est la différence entre un MVP et un prototype ?

Un MVP est essentiellement un produit fini, même s'il lui manque certaines fonctionnalités. Avec un MVP, vous pouvez commencer à recueillir des analyses d'utilisateurs et ajouter ou affiner des fonctionnalités dans les itérations suivantes.

Un prototype ne contient pas la logique commerciale de votre produit et aborde les questions de conception et d'UX.

POC vs. prototype vs. MVP : comment choisir la meilleure approche ?

Chaque projet est différent et nécessite une approche personnalisée. Cela dit, une idée commerciale perturbatrice ou complexe peut nécessiter de passer par les trois étapes du développement pour garantir une approche rentable de la livraison.

Il peut également être nécessaire de passer d'un POC à un prototype et à un MVP pour valider votre idée en profondeur et n'investir des ressources qu'après avoir confirmé que votre produit a des chances de s'imposer sur le marché.

L'approche exacte du développement d'un logiciel dépend de la quantité de données et de ressources dont vous disposez lorsque vous commencez à le construire.

Un guide rapide pour vous aider à vous repérer :

Pourquoi avez-vous besoin d'une preuve de concept ?

Attirer des investisseurs de démarrage
Valider la faisabilité de l'idée
Choisir la bonne technologie

Pourquoi avez-vous besoin d'un prototype ?

Recueillir les premiers commentaires des utilisateurs
Convaincre les investisseurs du premier tour
Réduire le nombre de modèles

Pourquoi avez-vous besoin d'un MVP ?

Obtenir les premiers utilisateurs pour un feedback plus approfondi et plus perspicace
Économiser et optimiser les ressources
Commencer à monétiser votre idée

Devez-vous toujours coder votre POC, votre prototype ou votre MVP ?

De nombreuses agences de logiciels vous inciteront à dépenser beaucoup d'argent et de temps pour préparer un POC, un prototype ou un MVP. En réalité, pour tester votre idée avec de vrais utilisateurs, vous n'avez pas besoin d'une seule ligne de code. Mais même après avoir validé que votre idée a du sens et confirmé qu'il s'agit d'un modèle économique durable, vous pouvez encore faire de la découverte de produit qui ne finira pas par vous coûter une fortune ou prendre six mois à construire.

Par exemple, pour créer une application mobile simple contenant votre offre principale, vous pouvez essayer de la créer dans l'une des solutions no-code ou low-code. Ainsi, vous disposerez d'une application fonctionnelle prête à être testée en deux semaines seulement. Cependant, même un outil à code réduit nécessite une expérience relativement bonne du développement d'applications mobiles et une expertise du produit pour créer un logiciel fiable.

L'avantage des outils à code réduit est qu'ils constituent une méthode extrêmement puissante pour accélérer vos efforts de découverte de produits. Une fois que votre idée suscite l'intérêt, vous pouvez déployer le développement d'une application mobile à part entière qui résoudra tous les problèmes éventuels d'évolutivité et de limites d'intégration.

Comprendre la blockchain

lawalalao — Mon, 11 Apr 2022 20:56:45 +0000

Hello , j'espère que vous allez bien. Bienvenu dans cette nouvelle série d'articles concernant la blockchain. Vous avez été si nombreux à m'écrire suite à l'article concernant le WEB 3.0 pour creuser un peu plus le sujet. Alors j'ai décidé de faire une série d'articles sur cette nouvelle technologie qu'est la blockchain. Dans ce premier article je vais essayer de vous expliquer en terme simple c'est quoi la blockchain. Alors let's go…

Alors c'est quoi ?

Une blockchain est une série de transactions immuables horodatées qui est gérée par un groupe d'ordinateurs utilisant des algorithmes informatiques spéciaux. Ces enregistrements immuables ne sont pas la propriété d'une seule entité. Une blockchain est un réseau P2P décentralisé de nœuds. Chaque nœud d'une blockchain partage la même copie des données, également appelée grand livre numérique. Chaque nœud présent dans le réseau utilise le même algorithme pour atteindre un consensus.

Une blockchain, de par sa conception, est résistante à la modification des données. Le grand livre peut enregistrer les transactions entre deux parties de manière vérifiable et permanente. Chaque fois qu'un changement est apporté au grand livre à l'aide de transactions, les changements sont distribués à tous les nœuds, qui vérifient et mettent à jour leur propre copie du grand livre. Une fois qu'une transaction est stockée et vérifiée par tous les nœuds du réseau, il n'est pas possible de la modifier sans altérer tous les blocs précédents et suivants. C'est pourquoi les transactions de la blockchain sont irréversibles, car les transactions de la blockchain et leurs données sont uniquement ajoutées.

Chaque ordinateur qui participe à ce réseau P2P est appelé un nœud. Chaque nœud conserve les enregistrements des transactions dans les multiples blocs consécutifs. Le réseau P2P est également utilisé dans les torrents tels que BitTorrent … Cependant, les réseaux torrents ne sont pas comme les blockchains car ils sont conçus pour partager des fichiers uniquement.

La technologie blockchain est également appelée technologie de grand livre décentralisé Decentralized ledger Technology (DLT), car chaque nœud du réseau conserve la même copie du grand livre. Veuillez consulter le diagramme suivant:

Dans le diagramme précédant, chaque bloc est relié par un lien (également appelé chaîne). La chaîne est généralement reconnue comme la chaîne de tous les blocs. Le lien entre deux blocs est implémenté en ayant un enregistrement du hachage cryptographique du bloc précédent dans chaque bloc, de sorte que vous pouvez visiter la chaîne dans l'ordre chronologique inverse.

Vous devriez être entrain de vous poser une question la:

Quelle est la différence entre une application traditionnelle qui effectue des transactions et une blockchain qui effectue elle aussi une transaction? Donc pourquoi avons nous besoin d'une technologie blockchain?

Bien, la technologie blockchain résout un problème plus difficile de l'informatique: le problème des doubles dépenses. Dans mon prochain article , j'essayerai d'expliquer le mieux possible ce problème qu'est le problème de la double dépense.

il est extrêmement difficile d'annuler une transaction blockchain. Cependant, il est arrivé que l'attaque à 51 % permette à un hackeur de dépenser deux fois des pièces/jetons. C'est le cas de l'Ethereum classique (symbole : ETC), qui a été attaqué par une attaque à 51 %, ce qui a entraîné la perte d'environ 1,1 million de dollars d'ETC.

Pour savoir c'est quoi une attaque à 51% => attaque 51%

Merci d'avoir lu , et rendez vous dans le prochain article. N'oubliez pas de partager autour de vous. A bientôt.

Le nuage/ Cloud ?

lawalalao — Mon, 28 Feb 2022 08:00:44 +0000

Il y a quelques jours, j'ai parlé avec un ami non informaticien des termes techniques et du jargon dont il pourrait avoir besoin d'apprendre pour changer de carrière ou travailler efficacement dans le domaine de la technologie. Et pendant que cette conversation se poursuivait, il m'a demandé si je pouvais expliquer certains termes techniques. Tout se passait bien jusqu'à ce qu'il mentionne 'Cloud'. Et juste à ce moment-là, j'ai réalisé que je ne savais pas grand-chose non plus.

Cet article est un effort pour expliquer le terme "Cloud" à mon ami non-informaticien et, je l'espère, à vous.

Les gens disent souvent "Mon espace de stockage iCloud est plein". J'ai besoin d'en acheter plus. Et nous savons tous les deux que ces personnes ne font pas référence au cloud (nuage)*.

Il y a peut-être 100 ans, lorsque le terme "Cloud" est mentionné, nous regardons tous le ciel. Mais maintenant? quelqu'un pourrait faire référence à son téléphone portable, à son ordinateur ou à un serveur d'entreprise quelque part.

Cet article vous expliquera le terme "Cloud" dans les termes les plus simples et peut-être une analogie. Cela va être très conversationnel. Allons-y !

Qu'est-ce que le cloud (nuage) ?

masse visible de vapeur d'eau condensée flottant dans l'atmosphère, généralement bien au-dessus du niveau général du sol

Oh non ! pas celui là.

Oh! ma faute.

Wikipédia définit "le cloud" comme

une métaphore d'Internet, basée sur le dessin en nuage utilisé dans le passé pour représenter le réseau téléphonique, et plus tard pour représenter Internet dans des diagrammes de réseau informatique comme une abstraction de l'infrastructure sous-jacente qu'il représente.

Cloudflare le définit comme

les serveurs accessibles via Internet et les logiciels et bases de données qui s'exécutent sur ces serveurs. Les serveurs cloud sont situés dans des centres de données partout dans le monde.

Tout d'abord, le Cloud dans notre contexte n'est pas dans le ciel comme vous auriez pu le penser. 😎

Le Cloud est un ensemble/réseau d'ordinateurs interconnectés et stockés ailleurs (sur terre) pour stocker des données. Par exemple, lorsque vous enregistrez une photo sur votre téléphone portable, elle est enregistrée dans la mémoire du téléphone. Cependant, lorsque vous l'enregistrez sur Google Cloud, il le conserve sur un ordinateur quelque part géré et géré par Google.

Un autre exemple sera lorsque vous téléchargez un film en ligne à partir de chaînes YouTube ou de télégram, et qu'il enregistre sur le disque dur de votre PC ou sur le stockage de votre téléphone portable. Mais lorsque vous téléchargez un film à l'aide de l'application Netflix, il n'est pas enregistré sur votre téléphone ou votre PC. Il enregistre à l'intérieur du stockage cloud de l'application, qui est l'ordinateur de quelqu'un d'autre.

En Français facile s'il vous plait? explique moi comme si j'avais 5 ans

Vous vous souvenez quand vous deviez acheter des CD pour écouter de la musique ou même acheter des films au format DVD, n'est-ce pas ? À l'époque, pour regarder un film, il fallait l'acheter. La même chose s'applique à l'écoute d'une chanson. Pour écouter de la musique ou regarder un film, il fallait aller dans un magasin, acheter une cassette physique, un CD ou un DVD, rentrer chez soi, l'insérer dans le lecteur DVD pour regarder un film ou écouter la dernière chanson de Rihanna.

Mais maintenant, c'est différent. Pour regarder un film, il vous suffit de le rechercher sur Netflix, Disney, Xbox ou tout autre service de streaming vidéo. La même chose s'applique aux mélomanes. Pour écouter de la bonne musique, il vous suffit d'ouvrir votre lecteur de musique préféré comme Spotify, Boomplay, Audiomack etc. pour jouer votre musique préférée.

Bon nombre d'entre nous se souviennent que nous devions épousseter des étagères de DVD tous les samedis, et ils étaient tellement à épousseter et à ranger. Mais maintenant? Vous achetez rarement des CD physiques pour regarder vos films, dessins animes préférées. Tout ce que vous avez à faire est d'ouvrir Netflix et regarder un film comme Mission impossible 3.😉

Donc, c'est juste stocker des données sur Internet ?

Oui! Imaginez maintenant

Vous deviez acheter un CD pour chaque saison ou épisode de Game of thrones.
Nous utilisions encore des disquettes pour stocker des choses. Imaginez votre étagère remplie de disquettes😏
La mémoire de votre téléphone devait tout contenir, y compris les e-mails, la musique et les films ?

Le fait de pouvoir enregistrer certaines de vos données - vidéos, photos, projets, articles, etc. sur l'ordinateur de quelqu'un d'autre vous aide à juste garder quelques éléments enregistrés sur votre téléphone. Imaginez avoir accès à des millions de chansons qui consomment des téraoctets de stockage, mais vous n'avez pas à vous inquiéter car les données ne sont pas stockées dans votre téléphone. Toute la musique est stockée sur l'ordinateur de Spotify quelque part dans le monde.

Alors, qui gère mes données dans le Cloud ?

Des entreprises comme

AWS
Microsoft, et
Le cloud de Google
Apple

Il existe des fournisseurs de solutions cloud avec des solutions de messagerie comme Gmail et Outlook.
Ce sont solutions de stockage telles que Google Cloud, Microsoft Azure et les services cloud AWS.

Le Cloud a-t-il quelque chose à voir avec le Cloud Computing ?

Oui! Je pensais que vous ne demanderiez jamais.

Le cloud computing est cette facette de l'informatique (technologie de l'information) qui gère tous les logiciels et le matériel que vous utilisez. Le cloud computing est un système qui vous donne accès à des services sur Internet. Ces services peuvent aller du stockage externe, des bases de données, des logiciels et même des serveurs.

Pour les particuliers, cela peut signifier simplement utiliser le stockage en nuage comme iCloud, Cloudinary, Amazon cloud drive ou Google photos pour enregistrer vos photos, afin de ne pas utiliser la mémoire de votre téléphone.

Pour les entreprises qui n'ont pas les moyens de construire et de maintenir leur infrastructure interne, l'adoption du cloud computing signifie qu'elles n'auront peut-être pas besoin de mettre à jour leurs serveurs, car le fournisseur de cloud qu'elles utilisent s'occupera de tout cela.

Le Cloud est bénéfique pour le monde actuel dans lequel nous vivons, car le fait d'avoir la ressource sur un serveur quelque part permet à une équipe de travailler à distance tout en accédant aux fichiers ensemble. Par exemple, les documents Google vous permettent de collaborer et de reprendre là où vous êtes parti tant que vous avez accès au fichier et à Internet.

Comment débuter avec le Cloud computing ?

Je vous ai eu !😉 Il existe quelques ressources pour commencer. Cependant, cet article suppose que vous ne travaillez pas dans l'informatique ou que vous etes un enfant, je recommanderai donc des ressources adaptées aux débutants pour vous aider à démarrer.

Adaora vient de publier un livre - "L'ingénierie du cloud pour les débutants". Adaora est un ingénieur logiciel basé à Lagos. Elle travaille actuellement chez Microsoft où elle développe des services cloud liés à l'intelligence artificielle et à la réalité mixte.
Lien pour acheter le livre : amazon.com/dp/B09HLBMT69
Kodekloud

Cet article de JavaRevisited sur medium vous donne 10 ressources différentes pour en savoir plus sur le Cloud computing.

Bonne chance !✋

En résumé, le « Cloud » nous permet, à vous et à moi, d'accéder aux données, aux fichiers et aux bases de données à partir de presque tous les appareils connectés à Internet.

Cependant, même si cela semble formidable et que les sociétés de cloud computing mettent en place des mesures de sécurité pour assurer la sécurité de tout ce qui leur est confié, il est toujours conseillé de faire attention à la diffusion d'informations.

J'espère que cet article a pu répondre à vos questions de base. Si vous avez d'autres questions, préoccupations ou ce qui, selon vous, devrait être abordé ; veuillez me contacter en laissant un commentaire ou en envoyant un dm sur Twitter.

Merci d'avoir lu et n'oubliez pas de partager autour de vous!

Algorithmes

lawalalao — Thu, 24 Feb 2022 13:31:23 +0000

Qu'est-ce qu'un algorithme ? Pourquoi est-ce si vital pour vous en tant que développeur ou quelqu'un qui cherche à entrer dans la technologie ?

Avant mon premier cours à l'université, j'avais déjà acheté mes manuels et étudié, et pour être honnête, rien n'avait de sens pour moi.

Après l'introduction habituelle de mon professeur, il a demandé si quelqu'un savait ce qu'étaient les algorithmes. Nous avions des gens brillants qui ont déjà bourré le mot et l'ont juste recraché. Il a ri et a fait une déclaration que je ne pourrai jamais oublier. Il a dit: "Une chose que vous devez tous garder à l'esprit est que les algorithmes sont différents pour différentes personnes et différents cas, tout ce qui compte, c'est que vous résolviez le problème correctement et efficacement".

Vous n'avez peut-être pas de formation en technologie. Vous avez peut-être étudié l'informatique, mais le terme Algorithme n'avait pas tellement de sens pour vous, et c'est pourquoi vous êtes ici pour apprendre le mot le plus simplement.

Je sais que tu as des questions; allons droit au but

Définir un algorithme

De manière informelle, un algorithme est une procédure de calcul bien définie qui prend une valeur ou un ensemble de valeurs en entrée et produit une valeur ou un ensemble de valeurs en sortie.

Par : Introduction à l'algorithme du MIT

Cependant, les algorithmes ne se limitent pas aux seuls ordinateurs. Chaque jour, en tant qu'humains et même robots, vous utilisez des algorithmes. Les algorithmes sont des étapes bien définies nécessaires pour accomplir une tâche.

Vous pouvez y penser de cette façon : si vous avez déjà préparé une tasse de café, de thé, de chocolat chaud, suivi les instructions de Google Maps, ou même une nouvelle recette de crêpes, alors vous avez utilisé un algorithme.

Un algorithme est juste un nom fantaisiste et ringard pour une recette ou un guide étape par étape pour accomplir une tâche.

Essayons un exemple : comment allez-vous préparer une tasse de café ?

J'irai en premier :

Étape 1 : Prenez une tasse à café .
Étape 2 : Lavez la tasse.
Étape 3 : Procurez-vous une bouilloire.
Étape 4 : Mettez de l'eau dans la bouilloire.
Étape 5 : Branchez la bouilloire et portez l'eau à ébullition.
Étape 6 : Éteignez la prise et débranchez la bouilloire.
Étape 7 : Mettez deux cuillerées de café dans une tasse.
Étape 8 : Versez de l'eau pour remplir ⅔ de la tasse.
Étape 9 : Servez votre café.

Notez que vous devez également garder à l'esprit si la personne a une cafetière, si la personne a besoin d'utiliser des grains de café ou si elle a juste dû verser de la poudre dans une tasse et faire une tasse. Dans ce cas, votre algorithme peut avoir des boucles car toute personne l'utilisant peut avoir besoin de répéter certaines étapes ou de revenir en arrière pour vérifier certaines étapes avant de continuer.

Cependant, comme mentionné précédemment, de nombreux éléments doivent être pris en compte avant d'écrire un algorithme. Les algorithmes sont plus efficaces lorsqu'ils sont choisis spécifiquement pour un problème spécifique.

Ok, c'est assez de grands mots; décomposons-le.

Algorithmes comme si j'avais 5 ans

Lors de l'écriture d'algorithmes, il est essentiel de savoir que vous pourriez avoir besoin d'outils, de systèmes et d'autres approches supplémentaires pour atteindre votre objectif pour différents problèmes. Par exemple, vous aurez besoin de farine pour faire un gâteau, mais que se passe-t-il si vous utilisez de la farine à gâteau et que vous ne spécifiez pas le type de farine à utiliser dans votre recette et qu'un débutant prend cette recette et utilise de la farine de haricots ?

Ce qui est bien, mais cela a-t-il résolu le problème de la personne : préparer un délicieux gâteau d'anniversaire ? Non! Oui, ils peuvent se retrouver avec quelque chose de comestible, mais ce n'est pas le gâteau qu'ils voulaient.

Un algorithme est comme un plan esquissé. Un plan détaillé vous donne une idée de ce que devrait être votre appartement de rêve. Cela facilite la tâche de dessiner le plan réel.

Algorithmes en technologie

Imaginez un monde où les ordinateurs seraient infiniment rapides, et vous pourriez utiliser autant d'espace, et cela n'aurait pas d'importance. Maintenant, si nous avions un tel luxe de temps, de vitesse et d'espace, peut-être que les algorithmes n'auraient pas autant d'importance. Vous pouvez choisir l'algorithme le plus pratique que vous pouvez implémenter et exécuter avec lui.

Parce qu'après tout, peu importe l'algorithme que vous utilisiez, et la mémoire n'était pas un problème.

Mais nous vivons dans un monde où les ordinateurs sont rapides mais pas infiniment rapides, la mémoire peut être peu coûteuse, mais elle n'est pas exactement gratuite. Par conséquent, le temps de calcul et l'espace en mémoire sont des ressources que vous devez utiliser à bon escient, et des algorithmes efficaces en termes d'espace et de vitesse de temps vous aideront à y parvenir.

Pourquoi les algorithmes sont-ils si importants ?

Oui, presque toutes les entreprises veulent que vous passiez des tests sophistiqués d'algorithmes et de structure de données sur Turing, hacker midi ou Leetcode avant de vous embaucher. Parler à certains recruteurs m'a aidé à comprendre pourquoi c'est essentiel pour eux. Comprendre les algorithmes et les structures de données aide le développeur à former une excellente base de bonnes pratiques d'ingénierie logicielle et un aperçu de l'approche des problèmes techniques.

Prenons un exemple : considérons un produit numérique comme Bolt qui détermine comment se déplacer d'un endroit à un autre. Oui, la carte montre les itinéraires disponibles et met parfois en évidence certains défis. Cependant, un algorithme est requis pour certaines opérations telles que "trouver l'itinéraire le plus court" vers votre destination (probablement en utilisant un algorithme de chemin le plus court) et le rendu des cartes en fonction de facteurs tels que le trafic, etc.

Un autre exemple peut être lorsque vous décidez de conduire de l'île de Lagos au continent ; vous voudrez peut-être trouver des itinéraires à partir d'un site Web ou même utiliser un GPS ou Google Maps pour trouver votre itinéraire le plus court et éviter le trafic de Lagos.

La mesure de l'efficacité d'un algorithme est la vitesse, c'est-à-dire le temps qu'il faut à un algorithme pour produire son résultat. Il est également essentiel de savoir qu'il existe certains problèmes pour lesquels aucune solution efficace n'est connue, et dans ce cas, vous voudrez peut-être essayer et être le prochain grand nom de la technologie lorsque vous trouverez un moyen efficace.

Une liste de mes ressources préférées pour apprendre les algorithmes :

Il existe quelques ressources sur Internet pour vous aider à démarrer avec les algorithmes. Cependant, je recommande les ressources suivantes que j'ai utilisées.

Algorithme pour les nuls de John Paul Mueller et Luca Massaron

Cours CS50 sur l'algorithme, et

Substack de Richards et newsletter hebdomadaire. Richard est un ingénieur chevronné de l'ingénierie logicielle chez SEND Freight. Dans ces newsletter hebdomadaire, Richard prend le temps d'expliquer les algorithmes et les structures de données à ses lecteurs comme s'ils avaient 5 ans.

En résumé, un algorithme peut être défini comme un processus étape par étape de réalisation d'une tâche.

Les développeurs utilisent des algorithmes et des structures de données tous les jours de leur vie professionnelle. Et si, comme moi, vous avez été assez curieux pour ouvrir cet article et essayer de comprendre le terme, j'espère que cela vous a facilité la compréhension.

Avoir une bonne compréhension des algorithmes, de ce qu'ils sont et savoir quand les appliquer et comment les appliquer est essentiel pour produire un logiciel qui fonctionne avec précision et efficacité.

DApps: C'est quoi?

lawalalao — Thu, 18 Nov 2021 13:48:46 +0000

Qu'est-ce qu'une dApp ?

Une application décentralisée (dApp) est une application numérique ou un programme qui réside et s'exécute sur une blockchain ou un réseau d'ordinateurs pair-à-pair plutôt que sur un seul ordinateur et qui est indépendant du contrôle de toute autorité.

DApps est l'abréviation de Decentralized applications, ce qui signifie qu'elle n'est pas contrôlée par une seule organisation et qu'elle joue un rôle essentiel dans le monde de la blockchain. Ces applications décentralisées fonctionnent sur un réseau blockchain dans un environnement public, open-source et décentralisé, libre de tout contrôle ou influence centrale.

Vous pouvez créer une dApp de type Twitter et la déployer sur une blockchain, permettant à tout utilisateur de publier des tweets. Une fois qu'ils ont été téléchargés, personne, même vous (le créateur de l'application), ne peut supprimer ces tweets.

Voici quelques caractéristiques des dApps

Il s'agit d'un logiciel libre, ce qui signifie que son code source est disponible pour les utilisateurs ordinaires.
Lorsque les mineurs contribuent avec succès à l'écosystème, ils sont récompensés par des jetons.
Elle est décentralisée et adopte la technologie blockchain.

Maintenant que vous avez une bonne connaissance des dApps, voyons quels sont leurs avantages.

Avantages des dApps

Les dApps présentent de nombreux avantages, cependant, dans cet article, je n'en ai mentionné que quelques-uns, tels que

Pas de temps d'arrêt
Il n'y aura pas de temps d'arrêt ou de restrictions car elle ne dépend pas d'un point de défaillance unique comme un serveur d'hébergement, mais fonctionne sur un réseau d'ordinateurs de pair à pair.

Transparence

Les données des applications décentralisées sont stockées sur un grand livre public, qui garde la trace de tout d'une manière sûre et transparente, ce qui garantit que personne ne peut l'altérer.

Source ouverte

Le code des dApps est open-source donc disponible pour critique. Parce que plus de contributions peuvent être offertes, et l'ensemble de l'écosystème peut être plus adaptable, progresser plus rapidement et évoluer de manière plus sûre.

Et oui, nous savons tous que tout a des avantages et des inconvénients, alors voici quelques inconvénients des dApps.

Inconvénients des dApps

UX/expérience utilisateur

Il peut être plus difficile de créer des expériences conviviales, car la mise en place de la pile d'outils nécessaire pour communiquer avec la blockchain de manière sécurisée peut être trop difficile pour l'utilisateur final moyen.

Maintenance

Étant donné que chaque pair du réseau doit mettre à jour le logiciel de son nœud, l'exécution dans un environnement compliqué et dispersé parmi les pairs rend la maintenance, le débogage et les mises à jour plus difficiles.

Moins d'applications DApp tierces

Dans le cadre de la structure actuelle d'applications centralisées, nous devons parfois faire appel à des API tierces pour collecter certaines informations de tiers. Nous n'avons pas cet avantage avec les DApps car il n'y a pas encore d'écosystème DApps tiers important en place.

Comme les DApps ne peuvent pas accéder aux API par le biais d'une application centralisée, elles doivent s'engager auprès d'autres DApps pour leurs besoins en API, ce qui constitue également un inconvénient.

Conclusion

C'est tout pour cet article. J'espère que vous avez trouvé cet article utile, si vous avez des questions, s'il vous plaît laissez-moi savoir dans la section des commentaires.

Si vous voulez m'offrir un café, vous pouvez le faire ici.

👋 Merci d'avoir lu, et à la prochaine.

Quelle est la différence entre un site Web et une application Web?

lawalalao — Wed, 21 Apr 2021 08:44:49 +0000

Il est généralement difficile pour un utilisateur final de faire la différence entre une application Web et un site Web. Ils tapent simplement l'URL et boum, les résultats sont là.

Et c'est ce qui compte vraiment pour l'utilisateur: obtenir les résultats pour ce qu'il recherche. Si cela se produit, c'est essentiellement ce dont ils se soucient.

Mais pour vous en tant que développeur, c'est vous qui devez créer ces produits pour l'utilisateur. Vous devez donc bien connaître leurs différences. Connaissez-vous les principales différences entre un site Web et une application Web?

Nous adopterons une approche technique de base dans cet article. Et bien qu'il y ait des opinions contradictoires parmi certains développeurs, je vais essayer de mettre en évidence certaines des différences clés qui m'ont aidé à comprendre en quoi les sites Web et les applications Web diffèrent.

Commençons.

Qu'est-ce qu'un site Web?

Un site Web est un ensemble de pages Web associées contenant des images, du texte, de l'audio, de la vidéo, etc. Il peut se composer d'une page ou de plusieurs pages, et il fournit à la fois un contenu visuel et textuel.

Il existe de nombreux types de sites Web, par exemple:

Sites de rencontre
Sites de blogs
Sites communautaires
Sites pédagogiques
Moteurs de recherche
Et plus...

Voici quelques exemples de sites Web: Wikipedia, Google, Amazon et Craigslist.

Caractéristiques d'un site Web.

C'est convivial
Il peut être facilement recherché à l'aide d'un moteur de recherche
Il affiche un contenu de qualité
Il devrait avoir une mise en page pour une facilite de naviguation

Pourquoi vous pourriez avoir besoin d'un site Web.

Vous aurez peut-être besoin d'un site Web pour présenter vos produits

Un site Web vous aide à établir une marque pour votre entreprise
Cela aide à créer une preuve sociale afin que les autres puissent voir ce que vous faites et avez fait
Il vous donne une présence en ligne afin que vos clients puissent vous trouver
Vous pouvez l'utiliser pour faire de la publicité et faire connaître votre marque

Qu'est-ce qu'une application Web?

Une application Web est un logiciel accessible par le navigateur. En d'autres termes, nous pouvons dire que les applications Web sont des sites Web dotés de fonctionnalités et d'éléments interactifs.

Les applications Web sont extrêmement personnalisables et peuvent effectuer un large éventail de tâches et de fonctionnalités. Ils sont généralement plus complexes et difficiles à construire, et ils nécessitent une équipe expérimentée de développeurs de logiciels pour les créer.
Quelques exemples d'applications Web populaires sont Twitter, Facebook, Gmail, Adobe CC et Youtube.

Caractéristiques d'une application Web.

Ils sont pour la plupart multiplateformes, ce qui signifie qu'ils devraient pouvoir travailler sur n'importe quelle plateforme

Ils sont facilement testés avec des tests automatisés
Ils sont hébergés dans le cloud

Pourquoi vous pourriez avoir besoin d'une application Web

Ils peuvent être utilisés sur n'importe quelle plate-forme car ils prennent en charge tous les navigateurs modernes
Vous n'avez pas besoin de l'approbation de l'App Store pour avoir une application Web
Les utilisateurs peuvent y accéder à tout moment depuis n'importe où
Ils peuvent être utilisés à la fois sur des appareils mobiles ou des ordinateurs de bureau pour accéder aux données
Ils sont plus faciles à gérer car ils utilisent le même code dans toute l'application

Différences clés entre site Web et application Web

Résumons quelques-unes des principales différences entre les deux:

1. INTERACTION DE L'UTILISATEUR

Un site Web fournit un contenu visuel et textuel que l'utilisateur peut voir et lire, mais cela n'affecte pas le fonctionnement du site.

Dans une application Web, l'utilisateur n'affiche pas seulement le contenu de la page, mais manipule également les données. L'utilisateur peut interagir individuellement en remplissant des formulaires ou en fournissant les données requises pour interagir avec l'application.

2. AUTHENTIFICATION

L'authentification n'est pas toujours nécessaire pour les sites Web basés sur des informations. L'utilisateur peut être invité à s'inscrire pour obtenir des mises à jour régulières pour accéder à des options supplémentaires, et c'est tout.

Les applications Web ont besoin d'une authentification car elles offrent un éventail d'options et de fonctionnalités/interactivité beaucoup plus large qu'un site Web. Cela signifie que vous devez avoir un nom d'utilisateur et un mot de passe pour accéder à votre compte.

3. TÂCHES ET COMPLEXITÉ

Un site Web n'affichera que les données et informations collectées sur une page spécifique telle que recherchée par l'utilisateur.

Dans une application Web, les fonctions sont plus élevées et plus complexes par rapport à celles d'un site Web.

4. CRÉÉ POUR

Un site Web se compose principalement de contenu statique. Cela signifie que les informations sont accessibles publiquement à tous les visiteurs.

Une application Web est conçue pour interagir avec l'utilisateur final. Cela signifie que sans les informations d'identification requises, vous ne pourrez peut-être pas accéder aux données.

5. DÉPLOIEMENT

Lorsqu'il s'agit d'un site Web, les petits changements ne nécessitent jamais une recompilation et un déploiement complets. Il vous suffit de mettre à jour le code HTML et tout sera mis à jour.

Désormais, lorsqu'il s'agit d'une application Web, vous devez recompiler et redéployer l'application chaque fois que vous apportez des modifications.

Conclusion

Le développement d'un site Web est un processus relativement simple. Mais la création d'une application Web nécessite des connaissances plus approfondies, plus d'expérience et plus de planification.

Maintenant que vous avez une compréhension plus claire des différences entre les sites Web et les applications Web, vous devriez également avoir une meilleure compréhension de celle dont vous avez vraiment besoin. Vous devriez également être en mesure de dire avec quoi vous interagissez quotidiennement.

Si vous avez lu jusqu'ici, je l'apprécie vraiment!

Vous pouvez me contacter sur Twitter | LinkedIn | GitHub

Partagez votre opinion, j'apprécierai vos honnêtes commentaires !

Profitez du codage ❤

Utiliser les expressions régulières pour effectuer des recherches et remplacements en JavaScript

lawalalao — Wed, 24 Mar 2021 08:22:59 +0000

Dans ce nouveau billet, nous allons passer en revue les différentes méthodes des objets String et RegExp qu’on va pouvoir utiliser avec nos expressions régulières afin d’effectuer des recherches ou des remplacements dans des chaines de caractères.
Nous allons pour le moment nous contenter d’utiliser ces méthodes avec des expressions régulières très simples. Nous apprendrons à créer des masques de recherche plus complexes dans les articles suivants.

La méthode match() de l’objet String

La méthode match() de l’objet String va nous permettre de rechercher la présence de caractères ou de séquences de caractères dans une chaine de caractères.

Pour cela, nous allons lui passer un objet représentant une expressions régulière en argument et match() va renvoyer un tableau avec les correspondances entre notre masque et la chaine de caractères c’est-à-dire un tableau contenant des caractères ou séquences de caractères trouvés dans la chaine de caractères qui satisfont à notre masque de recherche.

Dans le cas où aucune correspondance n’est trouvée, match() renverra la valeur null.

Notez que la méthode match() ne renvoie par défaut que la première correspondance trouvée. Pour que match() renvoie toutes les correspondances, il faudra utiliser l’option ou « drapeau » g qui permet d’effectuer des recherches globales.

Dans le cas où le drapeau g est utilisé, match() ne renverra alors pas les groupes capturants. Nous verrons plus tard exactement ce que sont les drapeaux et les groupes capturants.

<!DOCTYPE html>
<html>
    <head>
        <title>Cours JavaScript</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="cours.css">
        <script src='cours.js' async></script>
    </head>

    <body>
        <h1>Titre principal</h1>
        <p>Un premier paragraphe</p>

        <p id='p1'></p>
        <p id='p2'></p>
        <p id='p3'></p>
    </body>
</html>

javscript

let chaine = 'Bonjour, je m\'appelle lawal et vous ?';

let masque1 = /lawal/;

/*Intervalle ou "classe" de caractères permettant de trouver n'importe quelle
 *lettre majuscule de l'alphabet classique (sans les accents ou cédille)*/
let masque2 = /[A-Z]/;
let masque3 = /[A-Z]/g; //Ajout d'une option ou drapeau "global" 

//Recherche "lawal" dans let chaine et renvoie la première correspondance
document.getElementById('p1').innerHTML = 'Trouvé : ' + chaine.match(masque1);

//Recherche toute majuscule dans chaine et renvoie la première correspondance
document.getElementById('p2').innerHTML = 'Trouvé : ' + chaine.match(masque2);

//Recherche toute majuscule dans chaine et renvoie toutes les correspondances
document.getElementById('p3').innerHTML = 'Trouvé : ' + chaine.match(masque3);

Ici, notre deuxième masque utilise un intervalle ou une classe de caractères. Cette expression régulière va permettre de rechercher toute lettre majuscule qui se situe dans l’intervalle « A-Z », c’est-à-dire en l’occurrence n’importe quelle lettre majuscule de l’alphabet (lettres accentuées ou avec cédille exclues). Nous étudierons les classes de caractères dans la prochaine article.

Notre troisième masque utilise en plus l’option ou le drapeau g qui permet d’effectuer une recherche dite globale et qui demande à match() de renvoyer toutes les correspondances. Notez que les drapeaux sont les seules entités dans les expressions régulières qui vont se placer à l’extérieur des délimiteurs.

La méthode search() de l’objet String

La méthode search() permet d’effectuer une recherche dans une chaine de caractères à partir d’une expression régulière fournie en argument.

Cette méthode va retourner la position à laquelle a été trouvée la première occurrence de l’expression recherchée dans une chaîne de caractères ou -1 si rien n’est trouvé.

<!DOCTYPE html>
<html>
    <head>
        <title>Cours JavaScript</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="cours.css">
        <script src='cours.js' async></script>
    </head>

    <body>
        <h1>Titre principal</h1>
        <p>Un premier paragraphe</p>

        <p id='p1'></p>
        <p id='p2'></p>
        <p id='p3'></p>
    </body>
</html>

let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;
let masque2 = /[A-Z]/;

let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');

p1.innerHTML = 'Trouvé en position : ' + chaine.search(masque1);
p2.innerHTML = 'Trouvé en position : ' + chaine.search(masque2);

La méthode replace() de l’objet String

La méthode replace() permet de rechercher un caractère ou une séquence de caractères dans une chaine et de les remplacer par d’autres caractère ou séquence. On va lui passer une expression régulière et une expression de remplacement en arguments.

Cette méthode renvoie une nouvelle chaine de caractères avec les remplacements effectués mais n’affecte pas la chaine de caractères de départ qui reste inchangée.

Tout comme pour match(), seule la première correspondance sera remplacée à moins d’utiliser l’option g dans notre expression régulière.

<!DOCTYPE html>
<html>
    <head>
        <title>Cours JavaScript</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="cours.css">
        <script src='cours.js' async></script>
    </head>

    <body>
        <h1>Titre principal</h1>
        <p>Un premier paragraphe</p>

        <p id='p1'></p>
        <p id='p2'></p>
        <p id='p3'></p>
    </body>
</html>

let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;
let masque2 = /e/;
let masque3 = /ou/g;

let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');

p1.innerHTML = chaine.replace(masque1, 'Mathilde');
p2.innerHTML = chaine.replace(masque2, 'E');
p3.innerHTML = chaine.replace(masque3, 'OU');

La méthode split() de l’objet String

La méthode split() permet de diviser ou de casser une chaine de caractères en fonction d’un séparateur qu’on va lui fournir en argument.

Cette méthode va retourner un tableau de sous chaines créé à partir de la chaine de départ. La chaine de départ n’est pas modifiée.

<!DOCTYPE html>
<html>
    <head>
        <title>Cours JavaScript</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="cours.css">
        <script src='cours.js' async></script>
    </head>

    <body>
        <h1>Titre principal</h1>
        <p>Un premier paragraphe</p>

        <p id='p1'></p>
        <p id='p2'></p>
        <p id='p3'></p>
    </body>
</html>

let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /[ ,']/;
let masque2 = /e/;
let masque3 = /ou/g;

let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');

/*Dès qu'une espace, une virgule ou une apostrophe est rencontrée, la chaine de
 *départ est découpée en une nouvelle sous chaine qui est placée dans un tableau*/
let sousChaine = chaine.split(masque1);

p1.innerHTML = 'Premier élément du tableau : ' + sousChaine[0] +
               '<br>Deuxième élément du tableau : ' + sousChaine[1] +
               '<br>Troisième élément du tableau : ' + sousChaine[2];

Dans l’exemple ci-dessus, on utilise un masque de recherche d’expression régulière comme séparateur. Ce masque permet de trouver une espace, une virgule ou une apostrophe qui vont donc servir de séparateur.

Dès que l’un de ces trois symbole est rencontré dans la chaine de départ, la méthode split() crée une nouvelle sous chaîne et la stocke dans un tableau.

Ici, le deuxième élément du tableau crée est vide car nous avons une virgule et une espace qui se suivent. En effet, split() découpe la chaine dès qu’elle rencontre la virgule puis elle la découpe à nouveau dès qu’elle rencontre l’espace. L’élément crée ne contient ici aucun caractère.

La méthode exec() de l’objet RegExp

La méthode exec() de RegExp va rechercher des correspondances entre une expression régulière et une chaine de caractères.

Cette méthode retourne un tableau avec les résultats si au moins une correspondance a été trouvée ou null dans le cas contraire.

Pour être tout à fait précis, le tableau renvoyé contient le texte correspondant en premier élément. Les éléments suivants sont composés du texte correspondant aux parenthèses capturantes éventuellement utilisées dans notre expression régulière (une nouvelle fois, nous verrons ce que sont les parenthèses capturantes plus tard).

<!DOCTYPE html>
<html>
    <head>
        <title>Cours JavaScript</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="cours.css">
        <script src='cours.js' async></script>
    </head>

    <body>
        <h1>Titre principal</h1>
        <p>Un premier paragraphe</p>

        <p id='p1'></p>
        <p id='p2'></p>
        <p id='p3'></p>
    </body>
</html>

let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;


let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');

let resultat = masque1.exec(chaine);
p1.textContent = 'Résultat : ' + resultat[0];

La méthode test() de l’objet RegExp

La méthode test() de RegExp va également rechercher des correspondances entre une expression régulière et une chaine de caractères mais va cette fois-ci renvoyer le booléen true si au moins une correspondance a été trouvée ou false dans le cas contraire.

let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;


let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');

if(masque1.exec(chaine)){
    p1.textContent = '"lawal" trouvé dans la chaine';
}

merci d'avoir lu et n'oubliez pas de partager autour de vous.. je suis disponible sur presaue tous les reseaux sociaux , envoyez moi un message des que vous pouvez

Vous utilisez mal `useState`

lawalalao — Wed, 24 Mar 2021 08:21:49 +0000

L'une des raisons pour lesquelles nous pouvons utiliser des composants fonctionnels comme composant principal est qu'il peut désormais contenir son propre «état» en utilisant des Hooks tels que useState. Pour cette raison, il est possible d'abandonner complètement les composants basés sur les classes.

Malgré cet avantage donné par Hooks, il est toujours possible de cultiver de mauvaises pratiques en utilisant useState dans nos composants fonctionnels. Nous ne sommes toujours pas à l'abri des pièges potentiels que nous pourrions introduire lors de la construction de nos composants sous forme fonctionnelle.

Comment savoir si vous utilisez useState de manière incorrecte? la suite dans les lignes suivantes.

État mutant au lieu d'utiliser `setState` fourni par `useState`.

Tout d'abord, l'état en mutation est un grand non-non dans l'écosystème React en raison du fait qu'il pratique fortement le concept d'immuabilité. Pour montrer comment vous pouvez faire muter l'état sans le savoir, considérez l'extrait de code suivant:

const [MyValue, setMyValue] = useState(0);

MyValue = 55;

Ceci est considéré comme la mutation directe d'un état. Nous violons gravement la règle empirique en manipulant correctement notre état, car il était censé être traité comme immuable à moins que nous n'appelions le deuxième élément du tableau, setMyValue.

Étant donné que la valeur de l'état est «en lecture seule», vous ne pouvez pas la modifier de cette façon. Cela lancera une erreur:

L'exemple suivant peut également vous permettre de muter par erreur un état:

const [myValues, setMyValues] = useState([1,2,3,4,5]);

myValues[2] = 55;
const [myValues, setMyValues] = useState([1,2,3,4,5]);

//map crée un nouveau tableau. Mais il fait toujours référence à l'ancien tableau, donc dans ce cas, nous sommes toujours en train de muter le tableau myValues.
const newValues = myValues.map((item, idx) => {
        if(idx === 2) item = 55;

        return item;
});

Dans cet exemple, vous essayez de muter une valeur d'état, qui est un tableau. Vous pourrez peut-être le faire muter, mais cela n'émettra pas de «re-rendu» dans votre composant, ce qui signifie que la nouvelle valeur ne sera pas affichée dans votre interface utilisateur.

Pour le montrer en temps réel, laissez-moi vous donner un exemple de mutation d'un tableau :

let count = 0;
const App = () => {

  const [stateVal, setStateVal] = React.useState([1,2,3,4,5]);

  const onChangeArrayValues = () => {
    stateVal[count] = "Changed";

    count += 1;

    alert("updated array: " + stateVal);
  }

  return (
    <div>
      <h1>Changing array state values</h1>
      <h2>Array values: {stateVal}</h2>
      {/* <h2>Sum result: {multiplyByThree(5, 5)}</h2> */}


      <button onClick={() => onChangeArrayValues()}>Click to change</button>
    </div>
  );
}

Ainsi, comme nous pouvons le voir dans cet exemple, même si nous avons muté le tableau d'état, il ne reflète pas notre interface utilisateur. React est suffisamment intelligent pour savoir si l'état est défini ou simplement «muté». S'il est muté, il n'émettra pas de "re-rendu" dans ses composants pour refléter la nouvelle valeur d'état dans notre interface utilisateur.

La même chose peut être dite avec l'état basé sur les objets:

const App = () => {

  const [stateVal, setStateVal] = useState({ val1: "Hello world!" });

  return (
    <div>
      <h1 onClick={() => stateVal.val1 = "Mutated value..."}>
                                Test state: {stateVal.val1}
                        </h1>
    </div>
  )
}

https://codepen.io/reciosonny/pen/ExNaagg

Nous pourrons peut-être le faire muter sans que React ne remarque que vous l'avez muté. Le même problème se produira que le dernier exemple avec la mutation d'un tableau: la nouvelle valeur ne sera pas reflétée dans notre interface utilisateur.

Dans cet exemple, l'état doit toujours être défini correctement à l'aide de la fonction setState fournie par useState.

Ce n'est pas uniquement le cas des hooks d'état. En fait, vous pouvez faire la même erreur de gestion des états dans un composant basé sur des classes.

Comment définir l'état?

Une façon de résoudre ce problème est de nous assurer que nous utilisons une approche immuable comme la définition de valeurs d'état à l'aide d'un deuxième élément de useState, comme ceci:

const [myValues, setMyValues] = useState(0);

setMyValues(55);

Il s'agit de la méthode officielle de définition d'une valeur d'état de manière immuable. Nous utilisons le deuxième élément, qui est une fonction pour définir l'état.

Nous pouvons toujours utiliser cette approche pour les états basés sur des objets. Cependant, nous devons toujours observer le concept d'immuabilité lors de la modification d'un tel état. Cet exemple d'extrait de code vous aidera à faire l'affaire:

// En utilisant la méthode Object.assign:
const newState = Object.assign({}, state, {[item.id]: item});

// Ou en utilisant la syntaxe de diffusion ES6:
const newState = { ...oldState, prop1: "modified value" };

Lors de la définition d'un état pour les tableaux, le meilleur moyen est de recréer le tableau que vous vouliez modifier avec ses modifications. C'est l'un des meilleurs moyens que je connaisse pour modifier le tableau:

const [myValues, setMyValues] = useState ([1,2,3,4,5]);

// Copie d'un nouvel ensemble de tableaux à l'aide de la syntaxe de diffusion ES6
const newItems = [... mesValeurs];
newItems [2] = 55; // modification d'un élément de tableau spécifique

setMyValues (newItems); // définit le nouveau tableau avec des valeurs modifiées

Voici à quoi cela ressemblerait en temps réel.

Dans cet exemple d'extrait de code, nous nous assurons effectivement de recréer ce tableau, puis d'appliquer les modifications dans l'élément spécifique que nous voulions modifier. Avec cette méthode, nous faisons savoir à React qu'un état est modifié de manière immuable. Cela déclenchera le «re-rendu» du composant .

Passer `useState` dans les accessoires (props) de composants enfants pour l'utiliser

Passer useState comme accessoire dans un autre composant est tout à fait possible. Mais cela n’a aucun avantage, car vous pouvez toujours appeler useState en important React en haut de votre code JavaScript et en l’appelant dans tous vos composants.

Voici l'exemple d'extrait de code pour illustrer ceci:

import React, {Component, useState} de 'react';
import {hot} de "react-hot-loader";

const NewComponent = ({useStateFn}) => {

   const [val, setVal] = useStateFn (0); // nous avons utilisé useState à partir des accessoires passés à ce composant

   revenir (
                 <div>

             <h2> Valeur: {val} </h2>
             <br/> <br/>
             <button onClick = {() => setVal (25)}> Modifier la valeur </button>
           </div>
         );
}

const App = () => {

   revenir (
     <div>
       <h1> Bonjour tout le monde! </h1>

                         {/ * Nous avons transmis useState dans le composant enfant pour qu'ils soient consommés * /}
       <NewComponent useStateFn = {useState} />
     </div>
   )
}

C'est une mauvaise pratique, et vous ne devriez jamais utiliser useState comme ça. En outre, cela pourrait potentiellement introduire du code spaghetti (rire) qui pourrait rendre l'application beaucoup plus difficile à corriger. Évitez cela comme la peste.

Ne pas mettre `useState` en haut du corps du composant ou des fonctions

Selon la documentation officielle de React :

N'appelez pas les Hooks dans des boucles, des conditions ou des fonctions imbriquées. Au lieu de cela, utilisez toujours Hooks au niveau supérieur de votre fonction React

Parce que useState est un hook, nous devons le placer au niveau supérieur de notre composant, donc le placer sur des zones autres que le niveau supérieur peut potentiellement introduire une confusion dans la structure de notre composant.

Au lieu de cela:

const App = () => {

  const onValueChanged = (input) => {
    setVal(input);
  }

  const [val, setVal] = useState(0);

  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  )
}

faire ceci

const App = () => {

  const [val, setVal] = useState(0);


  const onValueChanged = (input) => {
    setVal(input);
  }

  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  )
}

L'utilisation de cette meilleure pratique nous permettra d'éviter les bogues potentiels liés à l'appel d'un état lorsque notre application s'agrandit.

Utilisation de `useState` dans des composants de classe ou des fonctions JavaScript classiques

Si vous avez lu les règles des hooks dans la documentation officielle de React, elles vous encouragent à ne pas mettre de hooks tels que useState dans la classe ou les fonctions JavaScript classiques. En effet, les hooks ne fonctionnent pas très bien avec ceux-ci, en particulier dans les structures de composants basées sur les classes.

Supposons que vous insistiez toujours sur l'utilisation de useState sur des composants basés sur des classes, comme dans cet exemple:

class App extends Component {

  render() {

    const [inputVal, setInputVal] = useState("");

    return (
      <div>
        <input type="text" onChange={(e) => setInputVal(e.target.value)} />

        <h1>Input value: {inputVal}</h1>
      </div>
    );
  }
}

Voici ce que vous verrez:

Dans ce cas, React vous informera immédiatement qu’il s’agit d’un cas d’utilisation non valide d’utilisation de hooks sur un composant basé sur une classe. Cela signifie que vous ne pouvez pas utiliser des hooks tels que useState dessus.

Il existe d'autres cas d'utilisation subtils mais utilisant la mauvaise implémentation de useState, comme son utilisation dans des expressions de fonction simples. Voici un exemple.

const maFonction = (arg1, arg2, arg3) => {
   const [myStateValue, setMyStateValue] = useState ("");

   // faire la logique ici ...
}

Si vous vous souvenez, les règles des crochets disent le long de ces lignes:

N'appelez pas les Hooks à partir des fonctions JavaScript classiques

Il s'agit alors d'une utilisation non valide de useState, sauf si nous utilisons cette fonction comme un hook personnalisé . Un hook personnalisé n'est également qu'une fonction JavaScript, mais cette fois, il a son propre cycle de vie, comme l'ajout de useEffect pour suivre les changements de son état.

Ainsi, au lieu d'une fonction normale, vous faites un meilleur usage de useState en construisant un hook personnalisé:

function useUpdateUserAccount(updatedUserAccount) {
  const [userState, setUserState] = useState(null);

  useEffect(() => {
    function handleStatusChange(user) {
                        setUserState(user);
    }

    UserAPI.updateAccount(updatedUserAccount, handleUserChange);
    return () => {

    };
  }, []);

  return userState;
}

Dans ce scénario, nous avons maintenant un cycle de vie complet d'une fonction, grâce à des hooks supplémentaires comme useEffect. Cela peut maintenant être utilisé comme un hook personnalisé entre différents composants que vous pouvez avoir. Cela pourrait même être un début pour créer votre propre store plutôt que de compter sur Redux pour des cas d'utilisation plus simples.

Et n'oubliez pas d'ajouter une utilisation comme préfixe au nom de votre fonction afin de suivre les règles des hooks!

Transmission de la fonction `setState` aux composants enfants pour définir l'état parent

C'est fondamentalement la même mauvaise pratique que de passer useState dans le composant enfant. Cette fois, nous transmettons uniquement la fonction setState pour définir l'état de notre composant parent.

C'est possible de le faire. Mais c'est une mauvaise pratique et peut potentiellement introduire des effets secondaires involontaires au fur et à mesure que l'application évolue.

Il n’est pas non plus facile à lire et peut prêter à confusion, en particulier lorsque les composants s’intègrent dans des cas d’utilisation compliqués.

Donc, au lieu de faire ça:

const NewComponent = ({ setValFn }) => {

  return (<div>
    <button onClick={() => setValFn(25)}>Change value</button>
  </div>);
}

const App = () => {
  const [val, setVal] = useState(0);

  return (
    <div>
      <h2>Value: {val}</h2>
      <br/><br/>

      <NewComponent setValFn={setVal} />      
    </div>
  )
}

faites plutot ceci

const NewComponent = ({ onChangeValue }) => {

  return (<div>
    <button onClick={() => onChangeValue(25)}>Change value</button>
  </div>);
}

const App = () => {

  const [val, setVal] = useState(0);

  const onValueChanged = (input) => {
    setVal(input);
  }

  return (
    <div>
      <h2>Value: {val}</h2>
      <br/><br/>

      <NewComponent onChangeValue={onValueChanged} />      
    </div>
  )
}

Vous faites essentiellement la même chose qu'avant, où nous avons l'intention de définir l'état d'un composant parent. Seulement cette fois, la dernière approche émet des événements du composant enfant au composant parent. Ensuite, vous laissez le composant parent faire le réglage de l'état.

Ne pas utiliser de tableau de destructure pour utiliser `useState`

Vous n'en avez peut-être pas conscience, mais vous pouvez utiliser useState de cette façon:

const count = useState[0];
const setCount = useState[1];

En effet, les hooks comme useState sont en fait un tableau qui renvoie les implémentations suivantes dans chaque élément:

Valeur d'état initialisée: la valeur que vous avez passée dans sa fonction. Cela peut être une valeur, une chaîne, un objet, un tableau, etc.)
Fonction pour définir votre état

Les documents officiels React préfèrent que vous utilisiez plutôt la destructuration de tableau, car elle est plus propre et plus facile à lire chaque fois que vous déclarez un hook d'état. De plus, ils utilisent la déstructuration des tableaux, ce qui convient à leur cas d'utilisation consistant à déclarer l'état avec élégance.

Cela ne signifie pas que vous utilisez useState de manière incorrecte, mais que le fait de ne pas utiliser la destructure ES6 vous enlève le sucre syntaxique de la façon dont useState est censé être déclaré, sans oublier que vous avez également ajouté une ligne de code supplémentaire pour les déclarer tous les deux.

Nous pouvons voir la documentation officielle de React sur la façon dont ils préfèrent que useState soit appelé à l'aide de la destructuration de tableau ES6, comme ceci:

const [count, setCount] = useState(0); //Déstructuration du tableau

S'appuyer uniquement sur useState pour gérer l'état dans les applications à plus grande échelle

Il ne devrait y avoir aucun problème en s'appuyant sur useState pour des cas isolés dans la logique des composants et des cas d'utilisation simples. Mais si l'ensemble de notre application se compose uniquement de useState pour gérer l'état, nous pourrions avoir un problème à long terme en raison de la complexité et d'un cas d'utilisation impliquant plus de deux composants.

Les cas d'utilisation qui nécessitent plus que la simple utilisation de useState incluent:

Si un état est nécessaire dans quelques composants
Si une application évolue
Si nous avons besoin d'un store global

Si nous nous appuyons uniquement sur useState et passons l'état aux seuls accessoires de composants, nous pourrions nous retrouver avec le problème «Prop Drilling». De plus, si nous allons ajouter une logique liée à l'authentification et à la sécurité (ce qui sera nécessaire pour exiger le maintien de la session utilisateur dans un état à un moment donné), alors nous aurons besoin d'une meilleure gestion de l'état pour stocker et utiliser correctement la logique sur différentes pages contenant différents composants.

Les bibliothèques de gestion d'état telles que Redux ou même l'API context offrent un avantage significatif sur les applications à plus grande échelle, car elles peuvent partager l'état entre différents composants. Ils viennent souvent avec des outils de navigateur pour suivre l'état qui est passé dans quelques composants.

Cela facilite le partage et la vérification de la logique grâce aux outils sophistiqués activés par l'utilisation de solutions de gestion d'état telles que Redux.

Donc, pour les applications et l'état à plus grande échelle, qu'est-ce qui est nécessaire dans plusieurs composants?

Optez pour une gestion d'état telle que Redux. Mais il existe quelques solutions de gestion d'état parmi lesquelles vous pouvez choisir, allant de Flux ou simplement de l'API context.

Que diriez-vous d'utiliser des hooks personnalisés? Possible. Mais pour être sûr, il est préférable de s'appuyer sur Redux pour des cas d'utilisation plus importants.

Conclusion

React est désormais flexible grâce aux Hooks. Plus particulièrement, c'est grâce à useState que nous n'avons plus besoin de s'appuyer sur des composants basés sur des classes uniquement pour construire nos composants d'interface utilisateur.

Visibilité totale sur les applications de production React

Le débogage des applications React peut être difficile, en particulier lorsque les utilisateurs rencontrent des problèmes difficiles à reproduire. Si vous souhaitez surveiller et suivre l'état de Redux, faire apparaître automatiquement les erreurs JavaScript et suivre les requêtes réseau lentes et le temps de chargement des composants, essayez LogRocket .

Pourquoi GraphQL est le futur? Une introduction claire à GraphQL

lawalalao — Tue, 23 Feb 2021 08:29:37 +0000

GraphQL est un langage de requête open-source développé par Facebook en 2015 et il est construit sur la structure de données graphiques. De nombreuses grandes entreprises adoptent GraphQL en plus de Facebook, notamment GitHub, Pinterest, Twitter, Sky, The New York Times, Shopify, Yelp et bien d'autres.

Dans cet article, nous allons apprendre ce qu'est GraphQL et comment il pourrait remplacer entièrement les API REST. Nous verrons également comment fonctionne GraphQL et ses principales fonctionnalités.

Revenons aux bases avant de plonger dans le monde de GraphQL.

API REST

REST (Representational state transfer) est l'architecture Web largement utilisée car elle est flexible et simple à utiliser. C'est une convention utilisée pour manipuler la collecte de données hébergées sur le serveur. Avec des règles communes autour des méthodes de requête HTTP et une structure d'URL uniforme, il est utilisé pour créer, mettre à jour, lire et supprimer les données sur un serveur.

Méthodes HTTP

Le protocole HTTP (HyperText Transfer Protocol) est un protocole sans état, ce qui signifie que le client et le serveur savent comment gérer les données pour chaque instance individuelle d'une demande. Une fois que le navigateur lance la requête, le serveur renvoie une réponse au client. A chaque requête initialisée, une nouvelle connexion est établie entre le client et le serveur. Les methodes HTTP sont GET, POST, PUT, PATCH, DELETE.

GET: Il est utilisé pour récupérer toutes les informations du serveur en utilisant l'URI et ne doit modifier aucune des données
POST: Il est utilisé pour envoyer des données au serveur et pour créer de nouvelles ressources
PATCH: il est utilisé pour mettre à jour et modifier partiellement la ressource
PUT: Il est utilisé pour remplacer entièrement la ressource, contrairement à la méthode PATCH
SUPPRIMER: cela supprime une ressource

En visuel..

Comme le montre le graphique, nous avons un utilisateur Twitter. Cet utilisateur a un nom d'utilisateur, une image, un lieu, des tweets, des abonnés et des abonnements. Nous aurons une API et des routes pour récupérer les ressources pour divers scénarios.

Considérons ci-dessous les routes qui seront accessibles par l'utilisateur:

Follower d'un utilisateur: /user/1/followers
Tweets d'un suiveur de l'utilisateur: /utilisateur/1/followers/suiveurNo1/tweet/content
Tweets des personnes que l'utilisateur suit: /utilisateur/1/followers/suiveurNo1/tweet/content
Utilisateur qu'il suit: /utilisateur/following

Nous pourrions avoir un routage interne encore plus compliqué avec divers points de terminaison pour accéder aux ressources, ce qui peut augmenter la complexité de la compréhension d'une API pour le développeur.

Tout en déterminant combien d'API l'application consomme, vous allez:

vous retrouver avec beaucoup de points de terminaison (endpoints)
Créer une application lourde
Pourrait ne pas avoir de séparation des préoccupations
Les points de terminaison d'API créeront une structure REST complexe
Une fiabilité lâche sur les résultats qu'elle fournit

Voyons maintenant l’avantage de l’architecture GraphQL par rapport aux API REST et comment GraphQL peut nous aider à lutter contre le routage reposant ci-dessus.

Qu'est-ce que GraphQL?

Un graphe est une structure de données qui contient des nœuds et une relation entre deux nœuds appelée arêtes.

Examinons quelques-unes des principales fonctionnalités de GraphQL:

GraphQL est fortement typé, ce qui garantit que la requête est valide dans le système de type GraphQL avant son exécution, c'est-à-dire qu'au moment du développement, le serveur peut apporter certaines garanties sur la structure de la réponse, ce qui rend GraphQL puissant.
GraphQL fournit un moyen efficace (pas de surextraction et de sous-extraction des données) et plus compréhensible de consommer APIS
Il peut être utilisé avec n'importe quel framework backend ou langage de programmation
Il permet d'ajouter de nouveaux champs et types à l'API GraphQL sans impact sur vos requêtes existantes et sans créer plusieurs versions de la même API
GraphQL expose un seul point de terminaison
GraphQL est auto-documenté

L'image ci-dessus est un graphique qui montre toutes les relations de notre application et comment les données sont structurées dans le graphique. Cela nous aidera à comprendre comment GraphQL fonctionne avec la structure de données du graphique.

Nous pouvons utiliser toutes les bases de données comme MongoDB, MySQL, PostgreSQL sans changer aucune structure de données

Comment accéder au graphique via GraphQL?

GraphQL traversera jusqu'à un enregistrement particulier qui est appelé comme nœud racine et lui demandera d'obtenir tous les détails de cet enregistrement.

Exemple:

Nous pouvons prendre n'importe quel utilisateur, par exemple un utilisateur avec l'ID1 et obtenir les données de son abonné associé (par exemple, un utilisateur avec l'ID2). Écrivons un morceau de requête GraphQL pour montrer comment y accéder.

query{
 user(id:"1"){
   users{
   tweet{
   content
   }
  }
 }
}

Ici, nous demandons à GraphQL de marcher jusqu'au graphe à partir du nœud racine qui est l'objet utilisateur avec un argument comme id:1 et d'accéder au contenu du tweet du follower.

Requêtes GraphQL

Dans cette section, vous apprendrez de quoi une requête GraphQL est composée.

Les concepts que je vais présenter sont les suivants:

Des champs
Arguments
Alias
Fragments
Variables
Directives
Des champs

Examinons une simple requête GraphQL:

{
  user {
    name
  }
}

{
  "data": {
    "user": {
      "name": "foo"
    }
  }
}

Dans cette requête, vous voyez 2 champs. L'utilisateur du champ renvoie un objet contenant un autre champ, un type String.
Nous avons demandé au serveur GraphQL de renvoyer l'objet utilisateur avec son nom mais nous pourrions également avoir un champ followers dans l'utilisateur qui répertorie les followers de cet utilisateur.

Arguments

Vous pouvez passer l'argument pour spécifier l'utilisateur auquel nous voulons faire référence.

Exemple:

{
  user(id: "1") {
    name
  }
}

Nous passons un identifiant, mais nous pourrions aussi passer un argument de nom, en supposant que l'API a la fonctionnalité à renvoyer avec ce type de réponse. Nous pourrions également avoir un argument de limite, pour spécifier le nombre d'abonnés que nous voulons que l'API renvoie.

{
  user(id: "1") {
    name
    followers(limit: 50)
  }
}

Alias

Vous pouvez demander à l'API GraphQL de renvoyer un champ avec un nom différent.

Exemple:

{
  accholder: user(id: "1") {
    firstname: name
  }
}

{
  "data": {
    "accholder": {
      "firstname": "lawal"
    }
  }
}

{
  first_user: tweet(id: "1") {
     tweet_content: content
  }
  second_user: tweet(id: "2") {
    tweet_content: content
  }
}

Les deux champs de tweet auraient été en conflit, mais comme nous pouvons les aliaser avec des noms différents, nous pouvons obtenir les deux résultats en une seule requête du même point de terminaison endpoint.

Fragments.

Dans la requête ci-dessus, nous avons répliqué la structure du tweet. Les fragments nous permettront de spécifier la structure avec de nombreux champs.
Le concept de fragments est fréquemment utilisé pour diviser les exigences de données d'application complexes en segments plus petits, en particulier lorsque vous devez combiner de nombreux composants d'interface utilisateur avec différents fragments en une seule extraction de données initiale.

Exemple:

{
  leftComparison: tweet(id: 1) {
    ...comparisonFields
  }
  rightComparison: tweet(id: 2) {
    ...comparisonFields
  }
}

fragment comparisonFields on tweet {
  userName
  userHandle
  date
  body
  repliesCount
  likes
}

L'API ci-dessus renverra la réponse suivante:

{
  "data": {
    "leftComparison": {
      userName: "foo",
      userHandle: "@foo",
      date: "2021-02-20",
      body: "Life is good",
      repliesCount: 10,
      tweetsCount: 200,
      likes: 500,
    },
    "rightComparison": {
      userName: "boo",
      userHandle: "@boo",
      date: "2020-02-18",
      body: "This blog is awesome",
      repliesCount: 15,
      tweetsCount: 500,
      likes: 700 
  }
}

Variables

Les variables GraphQL permettent de spécifier dynamiquement une valeur utilisée dans une requête. Ce sera bien car cela remplacera la valeur statique dans la requête. Comme vous l'avez vu ci-dessus, nous avons passé nos arguments dans la chaîne de requête. Nous passerons les arguments avec une variable $.

Exemple:

Nous avons ajouté l'ID utilisateur comme chaîne à l'intérieur de la requête

{
  accholder: user(id: "1") {
    fullname: name
  }
}

Nous ajouterons la variable et remplacerons la valeur statique. La même chose peut être écrite comme ceci:

query GetAccHolder($id: String) {
  accholder: user(id: $id) {
    fullname: name
  }
}

{
  "id": "1"
}

Ici, GetAccHolder est la fonction nommée. Il est utile de donner une fonction nommée lorsque vous recevez de nombreuses requêtes dans votre application.

Variable par défaut:

Nous pouvons spécifier la valeur par défaut d'une variable

Exemple

query GetAccHolder($id: String = "1") {
  accholder: user(id: $id) {
    fullname: name
  }
}

Variable requise

Nous pouvons créer la variable selon les besoins en ajoutant ! au type de données

query GetAccHolder($id: String!) {
  accholder: user(id: $id) {
    fullname: name
  }

Directives

Nous avons déjà vu comment nous pouvons passer la variable dynamique dans nos requêtes. Maintenant, nous pouvons voir comment générer dynamiquement la structure de requête à l'aide de directives.

Les directives aident à modifier dynamiquement la structure et la forme de nos requêtes à l'aide de variables.

@include et @skip sont les deux directives disponibles dans GraphQL

Exemple de directives:

@include(if: Boolean) - Inclut les champs s'il est vrai

query GetFollowers($id: String) {
  user(id: $id) {
    fullname: name,
    followers: @include(if: $getFollowers) {
      name
      userHandle
      tweets
    }
  }
}

{
  "id": "1",
  "$getFollowers": false
}

Ici, $getFollowers est faux, donc les abonnés au nom de champ ne seraient pas inclus dans la réponse @skip(si: Boolean) -> Ignore les champs si c'est vrai.

query GetFollowers($id: String) {
  user(id: $id) {
    fullname: name,
    followers: @skip(if: $getFollowers) {
      name
      userHandle
      tweets
    }
  }
}

{
  "id": "1",
  "$getFollowers": true
}

Ici, $getFollowers est vrai, donc les abonnés au nom de champ seraient ignorés (exclus) de la réponse.

Ressources.

GraphQL - Le site officiel

Conclusion.

Dans cet article, nous avons appris ce qu'est GraphQL et comment composer diverses requêtes avec.

Si vous avez aimé, laissez un coeur pour montrer votre soutien. Aussi, laissez vos réponses ci-dessous et contactez-moi si vous rencontrez des problèmes.

DEV Community: lawalalao

Plongez dans le Monde de l'Architecture Logicielle : Découvrez mon Nouveau Livre !

Introduction :

Pourquoi ce livre ?

Ce que vous trouverez dans le livre :

Mises à jour gratuites à vie :

Comment obtenir votre exemplaire :

Conclusion

De l'idée à l'app: Un parcours de développement de produit digital.

Devenez Un Dompteur Du Cors 🧙‍♀️

Terminologie CORS

Qu'est-ce que CORS ?

Comment fonctionne CORS ?

Pourquoi obtenez-vous une erreur CORS ? 🙄

Quelques moyens de résoudre les erreurs CORS

Récapitulatif

Vous voulez descendre dans le trou du lapin ? Voici quelques lectures complémentaires en anglais :

PoC vs Prototype vs MVP

POC vs. MVP vs. Prototype : Brève définition

Qu'est-ce qu'une preuve de concept ?

Caractéristiques d'une preuve de concept

Prototype interactif dans le développement de produits

Caractéristiques d'un prototype

Qu'est-ce qu'un produit minimum viable ?

Caractéristiques d'un MVP

Exemple de produit minimum viable

Quelle est la différence entre un POC et un prototype ?

Quelle est la différence entre un MVP et un prototype ?

POC vs. prototype vs. MVP : comment choisir la meilleure approche ?

Un guide rapide pour vous aider à vous repérer :

Pourquoi avez-vous besoin d'une preuve de concept ?

Pourquoi avez-vous besoin d'un prototype ?

Pourquoi avez-vous besoin d'un MVP ?

Devez-vous toujours coder votre POC, votre prototype ou votre MVP ?

Comprendre la blockchain

Alors c'est quoi ?

Quelle est la différence entre une application traditionnelle qui effectue des transactions et une blockchain qui effectue elle aussi une transaction? Donc pourquoi avons nous besoin d'une technologie blockchain?

Le nuage/ Cloud ?

Qu'est-ce que le cloud (nuage) ?

Oui! Imaginez maintenant

Oui! Je pensais que vous ne demanderiez jamais.

Comment débuter avec le Cloud computing ?

Algorithmes

Définir un algorithme

Algorithmes en technologie

DApps: C'est quoi?

Qu'est-ce qu'une dApp ?

Avantages des dApps

Transparence

Source ouverte

Inconvénients des dApps

UX/expérience utilisateur

Maintenance

Moins d'applications DApp tierces

Conclusion

Quelle est la différence entre un site Web et une application Web?

Qu'est-ce qu'un site Web?

Caractéristiques d'un site Web.

Pourquoi vous pourriez avoir besoin d'un site Web.

Qu'est-ce qu'une application Web?

Caractéristiques d'une application Web.

Pourquoi vous pourriez avoir besoin d'une application Web

Différences clés entre site Web et application Web

Conclusion

Utiliser les expressions régulières pour effectuer des recherches et remplacements en JavaScript

La méthode match() de l’objet String

La méthode search() de l’objet String

La méthode replace() de l’objet String

La méthode split() de l’objet String

La méthode exec() de l’objet RegExp

La méthode test() de l’objet RegExp

Vous utilisez mal `useState`

État mutant au lieu d'utiliser setState fourni par useState.

Comment définir l'état?

Passer useState dans les accessoires (props) de composants enfants pour l'utiliser

Ne pas mettre useState en haut du corps du composant ou des fonctions

Utilisation de useState dans des composants de classe ou des fonctions JavaScript classiques

Transmission de la fonction setState aux composants enfants pour définir l'état parent

Ne pas utiliser de tableau de destructure pour utiliser useState

S'appuyer uniquement sur useState pour gérer l'état dans les applications à plus grande échelle

État mutant au lieu d'utiliser `setState` fourni par `useState`.

Passer `useState` dans les accessoires (props) de composants enfants pour l'utiliser

Ne pas mettre `useState` en haut du corps du composant ou des fonctions

Utilisation de `useState` dans des composants de classe ou des fonctions JavaScript classiques

Transmission de la fonction `setState` aux composants enfants pour définir l'état parent

Ne pas utiliser de tableau de destructure pour utiliser `useState`