MeshScraper - La stack technique

Introduction

Suite au premier article sur MeshScraper, je souhaite partager la stack technique que j’ai utilisé pour développer ce projet.

Hands-On et IA

J’ai découpé mon projet en deux parties :

Un front que je développe moi-même et un back pour lequel je me suis lancé le défi de ne faire confiance qu’à l’IA ! Interdiction de toucher à une ligne de code à ce niveau ! Et ce n’est pas une mince affaire…

Pour le front, je me suis appuyé sur Nuxt et Vue.js. Légers, SEO-friendly et relativement faciles à prendre en main, ces outils me permettent de monter en compétence sur cette stack, notamment Nuxt, que je ne maîtrisais pas auparavant.

Pour la visualisation des graphes, j’ai utilisé D3.js ! C’est un outil puissant, bien que sa prise en main ne soit pas des plus simples. Il permet de créer des graphes diversifiés et très soignés.

Pour le back, j’ai opté pour Python. Reconnu pour ses outils de scraping (BeautifulSoup, Scrapy…), Python est également facile à prendre en main et flexible, offrant des fonctions asynchrones qui optimisent les ressources nécessaires à la génération des graphes que je souhaite proposer.

J’ai ajouté une couche API avec FastAPI. Simple et rapide à mettre en place, FastAPI m’a permis de transformer rapidement mon script en un outil accessible via une requête HTTP.

Enfin, pour rendre le tout agréable pour l’utilisateur, j’ai utilisé TailwindCSS pour peaufiner l’apparence de mon projet.

Qu’ai-je appris de tout cela ?

Énormément de choses, parmi lesquelles :

• L’arborescence d’un projet Nuxt
• L’utilisation de ref dans Vue.js
• La maîtrise de Python
• L’utilisation de FastAPI et de Scrapy
• L’exploitation de D3.js
• La dockerisation de cette partie et la mise en place d’une communication entre un projet sous Docker et un projet lancé en local
• La création d’un environnement virtuel en Python avec venv
• La complexité du métier de SEO et la conceptualisation d’un cocon sémantique

La suite ?

Je parlerai peut-être plus en détail de la création de mon système de scraping, en partageant mon retour d’expérience sur le fait de l’avoir conçu uniquement via l’IA. Le projet est presque prêt ! Et ce n’est que la version 1. J’ai déjà eu quelques retours de consultants SEO, et parmi les axes d’amélioration, il y aura entre autres :

• La possibilité de gérer le graphe (gestion des forces, du zoom, etc.)
• La possibilité de cacher ou rendre visibles certains nœuds/relations
• L’inclusion du calcul du PageRank
• Etc.

Un conseil en passant…

Angular, React, Vue, Python, Node.js… J’aurais pu choisir différents langages, bibliothèques ou frameworks, et obtenir le même résultat. On lit beaucoup de choses sur les cas d’utilisation de chacun, leurs performances et leurs atouts.

Il est vrai que chaque outil peut se démarquer selon le contexte, mais lorsque vous souhaitez développer une idée, ne vous fiez pas uniquement à cela. Utilisez d’abord des outils qui vous plaisent, que vous maîtrisez bien et qui ne vous frustrent pas.

Cela vous permettra de vous concentrer sur l’essentiel : livrer rapidement, obtenir des retours utilisateurs, rendre le développement agréable et vous concentrer sur les ajustements fonctionnels à apporter à votre projet. C’est, selon moi, ce qui permet de monter en compétence rapidement et de manière ludique.