--- title: "Construire une application d'extraction de données Web avec Lovable, Supabase et Bright Data" slug: lovable-with-supabase-and-bright-data date: 2025-08-12T06:51:42+00:00 modified: 2025-09-16T16:31:20+00:00 permalink: https://brightdata.fr/blog/ai/lovable-with-supabase-and-bright-data type: blog --- [ Blog ](https://brightdata.fr/blog "Blog") / [AI](https://brightdata.fr/blog/ai) [AI](https://brightdata.fr/blog/ai) # Construire une application d’extraction de données Web avec Lovable, Supabase et Bright Data Créez une application moderne pour extraire des données web propres et structurées en utilisant Lovable, Supabase, Bright Data et Gemini AI pour un flux de travail entièrement automatisé. 11 min de lecture [ ![Satyam Tripathi](https://media.brightdata.fr/2024/09/Satyam-Tripathi-50x50.png) ](https://brightdata.com/blog/authors/satyam-tripathi) [Satyam Tripathi Technical Writer ](https://brightdata.com/blog/authors/satyam-tripathi) ![Lovable + Bright Data + Supabase blog image](https://media.brightdata.fr/2025/07/Lovable-Bright-Data-Supabase-blog-image.png) La mise en place d’une solution fiable d’extraction de données web commence par une infrastructure adéquate. Dans ce guide, vous allez créer une application d’une seule page qui accepte n’importe quelle URL de page web publique et une invite en langage naturel. Elle récupère, analyse et renvoie ensuite des données JSON propres et structurées, automatisant ainsi entièrement le processus d’extraction. La pile combine l’infrastructure de scraping anti-bot de Bright Data, le backend sécurisé de Supabase et les outils de développement rapide de Lovable dans un flux de travail transparent. ## Ce que vous allez construire Voici le pipeline de données complet que vous allez construire – de l’entrée utilisateur à la sortie JSON structurée et au stockage : ```none User Input ↓ Authentication ↓ Database Logging ↓ Edge Function ↓ Bright Data Web Unlocker (Bypasses anti-bot protection) ↓ Raw HTML ↓ Turndown (HTML → Markdown) ↓ Clean structured text ↓ Google Gemini AI (Natural language processing) ↓ Structured JSON ↓ Database Storage ↓ Frontend Display ↓ User Export ``` Voici un aperçu de l’application finie : **Authentification des utilisateurs :** Les utilisateurs peuvent s’inscrire ou se connecter en toute sécurité à l’aide de l’écran d’authentification fourni par Supabase. ![web-data-extractor-signin-form](https://media.brightdata.com/2025/07/image-82-1024x537.png)**Interface d’extraction de données :** Après s’être connecté, l’utilisateur peut saisir l’URL d’une page web et une invite en langage naturel pour extraire des données structurées. ![web-data-extractor-main-dashboard](https://media.brightdata.com/2025/07/image-83-1024x591.png)## Aperçu de la pile technologique Voici la répartition de notre pile et l’avantage stratégique que chaque composant apporte. - **Bright Data :** Le scraping Web se heurte souvent à des blocages, des CAPTCHA et une détection avancée des robots. Bright Data est conçu pour relever ces défis. Il offre - Rotation automatique du proxy - Résolution des CAPTCHA et protection contre les robots - Une infrastructure mondiale pour un accès cohérent - Rendu JavaScript pour les contenus dynamiques - Gestion automatisée des limites de débit Pour ce guide, nous utiliserons le [Web Unlocker de Bright Data](/products/web-unlocker), un outil spécialement conçu pour récupérer de manière fiable le code HTML complet des pages les plus protégées. - **Supabase:**[Supabase](https://supabase.com/) fournit une base de backend sécurisée pour les applications modernes : - Gestion intégrée de l’authentification et de la session - Une base de données PostgreSQL avec support en temps réel - Fonctions Edge pour une logique sans serveur - Stockage sécurisé des clés et contrôle d’accès - **Lovable**: [Lovable](https://lovable.dev/) rationalise le développement grâce à des outils alimentés par l’IA et à l’**intégration native de Supabase**. Il offre : - Génération de code pilotée par l’IA - Echafaudage front-end/back-end transparent - React + Tailwind UI out of the box - Prototypage rapide pour des applications prêtes à la production - **Google Gemini AI:**[Gemini](https://ai.google.dev/gemini-api/docs/models) transforme du HTML brut en JSON structuré à l’aide d’invites en langage naturel. Il prend en charge : - Compréhension et analyse précise du contenu - Support d’entrée large pour un contexte pleine page - Extraction de données évolutive et rentable ## Conditions préalables et configuration Avant de commencer le développement, assurez-vous d’avoir accès aux éléments suivants : 1. **Compte Bright Data** - S’inscrire sur [brightdata.com](/) - [Créer une zone Web Unlocker](https://docs.brightdata.com/scraping-automation/web-unlocker/quickstart) - [Obtenez votre clé API](https://docs.brightdata.com/api-reference/authentication) à partir des paramètres du compte 2. **Compte Google AI Studio** - Visitez [Google AI Studio](https://aistudio.google.com/u/0/apikey) - Créer une nouvelle clé API 3. **Projet Supabase** - Inscrivez-vous sur [supabase.com](https://supabase.com/) - **Créer une nouvelle organisation**, puis un nouveau projet - Dans le tableau de bord de votre projet, allez dans *Edge Functions* → *Secrets* → **Add New Secret.** Ajoutez des secrets tels que `BRIGHT_DATA_API_KEY` et `GEMINI_API_KEY` avec leurs valeurs respectives. 4. **Compte adorable** - S’inscrire sur [lovable.dev](https://lovable.dev/) - Allez dans votre **profil** → **Paramètres** → *Intégrations* - Sous *Supabase*, cliquez sur **Connecter Supabase** - Autoriser l’accès à l’API et le lier à l’organisation Supabase que vous venez de créer ## Construire l’application étape par étape avec les invites de Lovable Vous trouverez ci-dessous un flux structuré, basé sur des invites, pour développer votre application d’extraction de données web, du front-end au back-end, à la base de données et à l’analyse intelligente. ![Chat adorable](https://media.brightdata.com/2025/07/Lovable-chat-1024x528.jpg)### Étape 1 – Configuration du frontend Commencez par concevoir une interface utilisateur propre et intuitive. ```none Build a modern web data extraction app using React and Tailwind CSS. The UI should include: - A gradient background with card-style layout - An input field for the webpage URL - A textarea for the extraction prompt (e.g., "Extract product title, price, and ratings") - A display area to render structured JSON output - Responsive styling with hover effects and proper spacing ``` ### Etape #2 – connecter Supabase et ajouter l’authentification Pour lier votre projet Supabase : 1. Cliquez sur l’**icône Supabase** dans le coin supérieur droit de Lovable 2. Sélectionnez **Connect Supabase** 3. Choisissez l’organisation et le projet que vous avez créés précédemment Lovable intégrera automatiquement votre projet Supabase. Une fois lié, utilisez l’invite ci-dessous pour activer l’authentification : ```none Set up complete Supabase authentication: - Sign up and login forms using email/password - Session management and auto-persistence - Route protection for unauthenticated users - Sign out functionality - Create user profile on signup - Handle all auth-related errors ``` Lovable générera le schéma SQL et les déclencheurs requis – revoyez-les et approuvez-les pour finaliser votre flux d’authentification. ### Étape 3 – définir le schéma de la base de données Supabase Configurez les tables nécessaires pour enregistrer et stocker l’activité d’extraction : ```none Create Supabase tables for storing extractions and results: - extractions: stores URL, prompt, user_id, status, processing_time, error_message - extraction_results: stores parsed JSON output Apply RLS policies to ensure each user can only access their own data ``` ### Étape 4 – Créer la fonction Supabase Edge Cette fonction gère la logique de base du scraping, de la conversion et de l’extraction : ```none Create an Edge Function called 'extract-web-data' that: - Fetches the target page using Bright Data's Web Unlocker - Converts raw HTML to Markdown using Turndown - Sends the Markdown and prompt to Google Gemini AI (gemini-2.0-flash-001) - Returns clean structured JSON - Handles CORS, errors, and response formatting - Requires GEMINI_API_KEY and BRIGHT_DATA_API_KEY as Edge Function secrets Below is a reference implementation that handles HTML fetching using Bright Data, markdown conversion with Turndown, and AI-driven extraction with Gemini: import { GoogleGenerativeAI } from '@google/generative-ai'; import TurndownService from 'turndown'; interface BrightDataConfig { apiKey: string; zone: string; } // Constants const GEMINI_MODEL = 'gemini-2.0-flash-001'; const WEB_UNLOCKER_ZONE = 'YOUR_WEB_UNLOCKER_ZONE'; export class WebContentExtractor { private geminiClient: GoogleGenerativeAI; private modelName: string; private htmlToMarkdownConverter: TurndownService; private brightDataConfig: BrightDataConfig; constructor() { const geminiApiKey: string = 'GEMINI_API_KEY'; const brightDataApiKey: string = 'BRIGHT_DATA_API_KEY'; try { this.geminiClient = new GoogleGenerativeAI(geminiApiKey); this.modelName = GEMINI_MODEL; this.htmlToMarkdownConverter = new TurndownService(); this.brightDataConfig = { apiKey: brightDataApiKey, zone: WEB_UNLOCKER_ZONE }; } catch (error) { console.error('Failed to initialize WebContentExtractor:', error); throw error; } } /** * Fetches webpage content using Bright Data Web Unlocker service */ async fetchContentViaBrightData(targetUrl: string): Promise { try { // Append Web Unlocker parameters to the target URL const urlSeparator: string = targetUrl.includes('?') ? '&' : '?'; const requestUrl: string = `${targetUrl}${urlSeparator}product=unlocker&method=api`; const apiResponse = await fetch('https://api.brightdata.com/request', { method: 'POST', headers: { 'Authorization': `Bearer ${this.brightDataConfig.apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ zone: this.brightDataConfig.zone, url: requestUrl, format: 'raw' }) }); if (!apiResponse.ok) { throw new Error(`Web Unlocker request failed with status: ${apiResponse.status}`); } const htmlContent: string = await apiResponse.text(); return htmlContent && htmlContent.length > 0 ? htmlContent : null; } catch (error) { console.error('Failed to fetch webpage content:', error); return null; } } /** * Converts HTML to clean Markdown format for better AI processing */ async convertToMarkdown(htmlContent: string): Promise { try { const markdownContent: string = this.htmlToMarkdownConverter.turndown(htmlContent); return markdownContent; } catch (error) { console.error('Failed to convert HTML to Markdown:', error); return null; } } /** * Uses Gemini AI to extract specific information from markdown content * Uses low temperature for more consistent, factual responses */ async extractInformationWithAI(markdownContent: string, userQuery: string): Promise { try { const aiPrompt: string = this.buildAIPrompt(userQuery, markdownContent); const aiModel = this.geminiClient.getGenerativeModel({ model: this.modelName }); const aiResult = await aiModel.generateContent({ contents: [{ role: 'user', parts: [{ text: aiPrompt }] }], generationConfig: { maxOutputTokens: 2048, temperature: 0.1, } }); const response = await aiResult.response; return response.text(); } catch (error) { console.error('Failed to extract information with AI:', error); return null; } } private buildAIPrompt(userQuery: string, markdownContent: string): string { return `You are a data extraction assistant. Below is some content in markdown format extracted from a webpage. Please analyze this content and extract the information requested by the user. USER REQUEST: ${userQuery} MARKDOWN CONTENT: ${markdownContent} Please provide a clear, structured response based on the user's request. If the requested information is not available in the content, please indicate that clearly.`; } /** * Main extraction workflow: fetches webpage → converts to markdown → extracts with AI */ async extractDataFromUrl(websiteUrl: string, extractionQuery: string): Promise { try { const htmlContent: string | null = await this.fetchContentViaBrightData(websiteUrl); if (!htmlContent) { console.error('Could not retrieve HTML content from URL'); return null; } const markdownContent: string | null = await this.convertToMarkdown(htmlContent); if (!markdownContent) { console.error('Could not convert HTML to Markdown'); return null; } const extractedInformation: string | null = await this.extractInformationWithAI(markdownContent, extractionQuery); return extractedInformation; } catch (error) { console.error('Error in extractDataFromUrl:', error); return null; } } } /** * Example usage of the WebContentExtractor */ async function runExtraction(): Promise { const TARGET_WEBSITE_URL: string = 'https://example.com'; const DATA_EXTRACTION_QUERY: string = 'Extract the product title, all available prices, ...'; try { const contentExtractor = new WebContentExtractor(); const extractionResult: string | null = await contentExtractor.extractDataFromUrl(TARGET_WEBSITE_URL, DATA_EXTRACTION_QUERY); if (extractionResult) { console.log(extractionResult); } else { console.log('Failed to extract data from the specified URL'); } } catch (error) { console.error(`Application error: ${error}`); } } // Execute the application runExtraction().catch(console.error); ``` Convertir du [HTML brut en Markdown](https://hackernoon.com/why-are-the-new-ai-agents-choosing-markdown-over-html) avant de l’envoyer à Gemini AI présente plusieurs avantages clés. Elle élimine le bruit HTML inutile, améliore les performances de l’IA en fournissant des données plus propres et plus structurées, et réduit l’utilisation de jetons, ce qui permet un traitement plus rapide et plus rentable. **Considération importante :** Lovable est très doué pour créer des applications à partir du langage naturel, mais il ne sait pas toujours comment intégrer correctement des outils externes tels que *Bright Data* ou *Gemini*. Pour garantir une mise en œuvre précise, incluez un exemple de code de travail dans vos invites. Par exemple, la méthode `fetchContentViaBrightData` The dans l’invite ci-dessus démontre un cas d’utilisation simple du Web Unlocker de Bright Data. Bright Data propose plusieurs API, notamment [Web Unlocker](/products/web-unlocker), [SERP API](/products/serp-api) et [Scraper API](/products/web-scraper), chacune avec son point de terminaison, sa méthode d’authentification et ses paramètres. Lorsque vous configurez un produit ou une zone dans le tableau de bord de Bright Data, l’onglet **Vue d’ensemble** fournit des extraits de code spécifiques au langage (Node.js, Python, cURL) adaptés à votre configuration. Utilisez ces extraits tels quels ou adaptez-les à votre logique Edge Function. ### Étape 5 – connecter le frontend à Edge Function Une fois que votre fonction Edge est prête, intégrez-la dans votre application React : ```none Connect the frontend to the Edge Function: - On form submission, call the Edge Function - Log the request in the database - Update status (processing/completed/failed) after the response - Show processing time, status icons, and toast notifications - Display the extracted JSON with loading states ``` ### Étape n° 6 – ajouter l’historique de l’extraction Fournir aux utilisateurs un moyen de revoir les demandes antérieures : ```none Create a history view that: - Lists all extractions for the logged-in user - Displays URL, prompt, status, duration, and date - Includes View and Delete options - Expands rows to show extracted results - Uses icons for statuses (completed,failed,processing) - Handles long text/URLs gracefully with a responsive layout ``` ### Étape 7 – Polissage de l’interface utilisateur et améliorations finales Affinez l’expérience grâce à des touches d’interface utilisateur utiles : ```none Polish the interface: - Add toggle between "New Extraction" and "History" - Create a JsonDisplay component with syntax highlighting and copy button - Fix responsiveness issues for long prompts and URLs - Add loading spinners, empty states, and fallback messages - Include feature cards or tips at the bottom of the page ``` ## Conclusion Cette intégration réunit le meilleur de l’automatisation web moderne : des flux d’utilisateurs sécurisés avec Supabase, un scraping fiable via Bright Data, et une analyse flexible, alimentée par l’IA avec Gemini – le tout alimenté par le constructeur intuitif de Lovable, basé sur le chat, pour un flux de travail à code zéro et à haute productivité. Prêt à créer votre propre système ? Commencez sur [brightdata.com](/) et découvrez les [solutions de collecte de données de Bright Data](/products) pour un accès évolutif à n’importe quel site, sans aucun problème d’infrastructure. Contacter ventesEssai gratuit![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) Table des matières [ ](https://news.ycombinator.com/submitlink?t=Construire+une+application+d%26%238217%3Bextraction+de+donn%C3%A9es+Web+avec+Lovable%2C+Supabase+et+Bright+Data&u=https://brightdata.fr/blog/ai/lovable-with-supabase-and-bright-data) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Construire+une+application+d%26%238217%3Bextraction+de+donn%C3%A9es+Web+avec+Lovable%2C+Supabase+et+Bright+Data&url=https://brightdata.fr/blog/ai/lovable-with-supabase-and-bright-data) [ ](http://www.reddit.com/submit?title=Construire+une+application+d%26%238217%3Bextraction+de+donn%C3%A9es+Web+avec+Lovable%2C+Supabase+et+Bright+Data&url=https://brightdata.fr/blog/ai/lovable-with-supabase-and-bright-data) ## Vous pourriez aussi être intéressé par [ ![OpenHuman with Bright Data](https://media.brightdata.fr/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.fr/blog/ai/openhuman-with-bright-data "Accès Web Prêt pour la Production dans OpenHuman via le CLI Bright Data") [AI ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Accès Web Prêt pour la Production dans OpenHuman via le CLI Bright Data Intégrez le CLI Bright Data avec OpenHuman pour permettre un accès web prêt pour la production et la collecte de données pour les agents IA. 09-Sep-2026 14 min de lecture ](https://brightdata.fr/blog/ai/openhuman-with-bright-data) [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.fr/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.fr/blog/donnees-web/multimodal-web-scraping-with-minimax "Scraping Web Multimodal avec MiniMax") [Données Web ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Scraping Web Multimodal avec MiniMax Associez Bright Data Web Unlocker avec la vision MiniMax M3 pour extraire des données structurées à partir d’images et de captures d’écran de pages web. 09-Sep-2026 5 min de lecture ](https://brightdata.fr/blog/donnees-web/multimodal-web-scraping-with-minimax) [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.fr/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.fr/blog/ai/best-cli-tools-for-codex "Les 10 meilleurs outils CLI pour Codex en 2026 – Testés & Classés") [AI ![Daniel Shashko](https://media.brightdata.fr/2022/04/Daniel-Shashko-2-50x50.png) Daniel Shashko Web Data & AI Expert ### Les 10 meilleurs outils CLI pour Codex en 2026 – Testés & Classés Les 10 outils CLI qui rendent Codex plus rapide et plus capable, en commençant par le Bright Data CLI pour un accès web réel depuis l’intérieur du sandbox. 06-Sep-2026 24 min de lecture ](https://brightdata.fr/blog/ai/best-cli-tools-for-codex)