Comment j'ai ajouté l'importation CSV dans mon projet React-Node.js

Touch Base allait bien. C'était un projet sympa. Cela a fonctionné. Mais soyons réalistes : était-il utilisable ? (Touch Base est une application complète de gestion des contacts React que j'ai créée).

J'y pensais et j'ai réalisé quelque chose d'évident. Lorsqu'un utilisateur commence à utiliser Touch Base, il doit ajouter des contacts manuellement. Ce qui pourrait convenir si vous avez 5 contacts. Si vous souhaitez ajouter 1 000 contacts, c'est nul… et vous ne voudrez probablement pas utiliser ce système. Alors bien sûr, je savais que je devais ajouter la possibilité d'importer des contacts.

Options de recherche

Ma première recherche sur Google était « importateurs csv », ou quelque chose comme ça. J'ai parcouru certaines des options disponibles et j'ai trouvé FlatFile. Leur titre principal disait « Le moyen le plus rapide de collecter, d’intégrer et de migrer des données ». Parfait… sauf que ce n'était pas tout ça pour moi. Maintenant, c'est probablement de ma faute (ils semblent être un service incroyable), mais le processus de mise en œuvre de leur importateur demandait plus d'efforts que je n'étais prêt à y consacrer. C'est le moment idéal pour un petit contexte encadré :

Dernièrement, j'accorde une grande valeur à la casse. Je veux faire avancer les choses, vite. Il ne s’agit pas de rogner sur les raccourcis, je ne veux tout simplement pas avoir d’excuses ou de retards inutiles. Après tout, je ne suis qu'un gars qui travaille sur des projets parallèles. Mon attitude actuelle est donc d’échouer, d’apprendre et d’itérer rapidement. Tout en faisant du bon travail.

Retour à FlatFile. Même si je voulais utiliser leur logiciel prometteur, je me suis demandé si j'avais vraiment besoin de toutes leurs fonctionnalités et si combattre leurs documents en valait la peine. Certainement pas. Je suis donc retourné à mes recherches et j'ai atterri sur Papa Parse. Je me souviens l'avoir vu lors de ma recherche précédente. Leur titre principal disait « Le puissant analyseur CSV intégré au navigateur pour les grands garçons et filles ». ? J'étais dedans.

Mise en œuvre

Tout d'abord, j'ai ajouté une route POST à ​​mon API.

verifyToken est une fonction que j'utilise dans toutes mes routes et qui fait exactement cela : vérifier le jeton d'identification de l'utilisateur. J'utilise multer dans mon application qui est un middleware node.js pour gérer les téléchargements de fichiers. upload.single('file') est une fonction multer qui m'aide à télécharger des fichiers dans mon compartiment s3.

À l'intérieur de l'itinéraire, je récupère l'identifiant de l'utilisateur et le classe par déstructuration.

Comme la documentation du package npm pour l'état de Papa Parse, « Papa Parse peut analyser un flux lisible au lieu d'un fichier lorsqu'il est utilisé dans des environnements Node.js (en plus des chaînes simples). »

Je me suis donc préparé à diffuser le fichier directement sur Papa Parse en créant ledit flux à partir de mon compartiment s3 ainsi qu'un tableau vide pour contenir les données de résultats. Je ne peux pas oublier la gestion des erreurs potentielles.

Ensuite, je transmets enfin le flux à Papa Parse, je définis mes options de configuration et je gère les erreurs provenant des résultats.

Dans le code ci-dessus, complete est une propriété Papa Parse qui prend une fonction de rappel. Il s'exécute une fois l'analyse terminée. Je récupère ensuite les données fournies par les résultats sous forme de parsedData.

Après cela, il est temps d'exécuter quelques requêtes sur la base de données et de traiter les contacts. Mais je dois d'abord stocker une connexion à la base de données sur laquelle exécuter les requêtes.

Cette partie suivante contient beaucoup de code dans une instruction try catch, je vais donc vous la donner directement avec quelques commentaires à ce sujet.

Comme vous pouvez le constater, je

• récupérer les contacts existants
• filtrez les contacts en double à l'aide des e-mails, car il n'y a pas deux e-mails identiques
• insérer en bloc les contacts non en double dans le tableau

Frontend

Le frontend sera en grande partie spécifique à mon approche de l'application, mais connectons les points ici.

La page Importer des contacts fait une chose, donc c'est très simple. J'utilise le bouton natif de téléchargement de fichiers qui est vraiment une entrée.

Lorsque l'entrée détecte un changement, je déclenche une fonction handleFileUpload.

À l'intérieur de la fonction handleFileUpload, je définis d'abord l'état de chargement sur true afin de pouvoir afficher mon petit spinner de chargement à l'utilisateur pendant que ce processus se déroule.

Lorsqu'un utilisateur télécharge avec succès son fichier .csv, je l'ajoute à un nouvel objet formData et l'envoie à ma route backend ci-dessus pour le traiter. J'utilise directement une demande de récupération ici car c'est le seul endroit de mon application qui va atteindre le point de terminaison / import-contacts. Si une autre partie de mon application devait suivre la route, je stockerais la demande en utilisant le contexte et l'utiliserais pour éviter de répéter le code. Vous pouvez également voir la gestion des erreurs que j’ai mise en place…

En cas de traitement réussi du fichier ou en cas d'erreur, l'état de chargement revient à faux et je déclenche une alerte toast appropriée pour informer l'utilisateur de manière agréable de ce qui s'est passé.

C'est tellement agréable de se connecter, de télécharger un fichier .csv de contacts, de recevoir une alerte toast réussie, puis de voir tous les nouveaux contacts renseignés dans votre compte. Et c'est si rapide. Vous pourriez voir la flèche de chargement pendant juste une seconde. La requête d'insertion groupée y est également très utile.

De Peut-être utilisable à Utilisable

Avant d'ajouter cette fonctionnalité, je me demandais dans quelle mesure l'application était réellement utilisable. Cela ne fait aucun doute. Même si ce n'était pas très complexe, c'est une fonctionnalité que l'on s'attend à voir dans ce type d'application, j'ai donc trouvé que c'était une exigence à mettre en œuvre. Je pense que cela rend le projet un peu plus sérieux. En dehors de cela, je n'ai jamais rien fait avec des fichiers .csv, ce qui rendait ce travail très amusant. Papa Parse s'est si bien intégré à tous les outils que j'utilisais déjà, ce qui rendait les choses très faciles. Je recommande vivement de l'utiliser.

Si vous êtes arrivé jusqu’ici, bravo d’avoir lu ceci ?...
et bravo aux logiciels qui ne sont pas nuls ?

p.s je me demande encore si mon projet est nul ?
Si vous souhaitez le consulter, voici à nouveau le lien.

À la prochaine fois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!