Blog / AI
AI

Construire une application de suivi des prix Amazon avec Firebase Studio optimisé par Bright Data

Découvrez comment créer une application de suivi des prix Amazon avec Firebase Studio et l’API de Bright Data pour obtenir des données précises et en temps réel sur les produits et les prix.
8 min de lecture
Firebase Studio with Bright Data

Dans ce tutoriel, vous apprendrez

  1. Ce qu’est Firebase Studio et les fonctionnalités qu’il offre.
  2. Pourquoi vous avez besoin d’un fournisseur de données web Amazon comme Bright Data pour construire une expérience web de type CamelCamelCamel.
  3. Comment créer une application web de suivi des prix Amazon avec Firebase Studio, en utilisant les données Amazon de l’API Amazon Scraper de Bright Data.

Plongeons dans l’aventure !

Qu’est-ce que Firebase Studio ?

Firebase Studio est un environnement de développement basé sur le cloud et alimenté par l’IA, construit par Google. Son objectif principal est d’accélérer la création et le déploiement d’applications de qualité de production avec l’IA. Il fournit notamment un espace de travail complet où l’assistance de l’IA alimentée par Gemini est intégrée tout au long du cycle de développement.

Fonctionnalités clés

Voici quelques-unes des principales fonctionnalités de Firebase Studio :

  • Environnement de développement basé sur le cloud: Vous équipe d’un espace de travail de codage complet avec une assistance IA, y compris des suggestions de code, la génération et des explications.
  • Agent de prototypage d’applications: Prend en charge le prototypage rapide d’applications, telles que les web apps Next.js, avec une assistance IA, réduisant ainsi la nécessité d’un codage manuel approfondi.
  • Prise en charge de divers cadres et langages: Travaillez avec des technologies populaires comme Flutter, Go, Angular, Next.js, et plus encore, en utilisant les frameworks qu’ils préfèrent.
  • Intégration avec les services Firebase: Intégration avec des services tels que Firebase App Hosting, Cloud Firestore et Firebase Authentication.
  • Outils de développement et de déploiement: Prise en charge intégrée de l’émulation, des tests, du débogage et du contrôle des performances des applications.
  • Options d’importation et de personnalisation: Importez des projets existants depuis GitHub, GitLab, Bitbucket ou des archives compressées, et personnalisez-les entièrement avec l’IA.

Ce dont vous avez besoin pour construire une application Web de suivi des prix Amazon

CamelCamelCamel est un service en ligne qui suit les prix des produits Amazon, fournissant des graphiques d’historique des prix et des alertes pour les baisses de prix afin d’aider les utilisateurs à trouver les meilleures offres. En termes simples, sa fonctionnalité principale est le suivi des prix Amazon, et c’est exactement ce sur quoi nous allons nous concentrer dans ce guide.

A sample CamelCamelCamel page

L’idée ici est de construire une application web qui fonctionne comme une alternative, en mettant en œuvre le suivi des prix Amazon d’une manière simplifiée. Normalement, cela prendrait des jours (voire des mois) à développer, mais grâce à Firebase Studio, vous pouvez avoir un prototype fonctionnel en quelques minutes seulement.

L’un des principaux défis de cette tâche est d’obtenir des données sur les produits Amazon. Il est notoirement difficile de récupérer les données d’Amazon en raison des mesures anti-bots strictes telles que les CAPTCHA (souvenez-vous du fameux CAPTCHA d’Amazon) qui peuvent bloquer la plupart des requêtes automatisées :

An example of the Amazon CAPTCHA

C’est là que Bright Data intervient !

Bright Data offre un ensemble complet de solutions permettant d’obtenir des données web dans des formats bruts et structurés à partir de pratiquement n’importe quel site web. Avec la rotation des IP, l’empreinte du navigateur, la Résolution de CAPTCHA et de nombreux autres aspects essentiels gérés automatiquement, vous n’avez pas à vous soucier des blocages ou des restrictions.

Plus précisément, nous utiliserons les données de produits Amazon renvoyées par l’API Amazon Scraper de Bright Data. Celle-ci vous permet de récupérer des données fraîches sur les produits Amazon en appelant simplement un point d’extrémité de l’API.

Découvrez comment Firebase Studio et Bright Data travaillent ensemble pour créer rapidement une expérience web de type CamelCamelCamel !

Comment construire un traqueur de prix Amazon comme CamelCamelCamel dans Firebase Studio

Suivez les étapes ci-dessous pour apprendre à créer une application Web semblable à CamelCamelCamel qui suit les prix d’Amazon. Intégrez Bright Data dans votre prototype Firebase Studio !

Conditions préalables

Pour suivre ce tutoriel, assurez-vous d’avoir :

  • Un compte Google
  • Un compte Firebase Studio
  • Une clé API Gemini
  • Une base de données Firestore configurée et prête à être connectée via l’API.
  • Un compte Bright Data avec une clé API configurée.

Remarque: ne vous préoccupez pas encore de tout configurer, car nous vous guiderons au fur et à mesure des étapes.

Vous aurez également besoin de

  • Connaissance du développement Next.js en TypeScript
  • Connaissance du fonctionnement de l’API Scraper de Bright Data (voir la documentation de Bright Data pour plus de détails).

Étape 1 : Configurer Firebase Studio

Rendez-vous sur le site Web de Firebase Studio et cliquez sur le bouton “Get Started” :

Clicking on "Get started" on Firebase Studio

Il vous sera demandé de vous connecter avec l’un de vos comptes Google. Sélectionnez-en un et continuez.

Une fois connecté, vous arrivez sur la page de création d’applications :

The Firebase Studio prompt-based app building page

Ici, vous pouvez saisir une invite pour demander à l’IA d’initialiser le projet pour vous. C’est génial !

Étape 2 : Concevoir l’invite

Rappelez-vous que votre but ici est de construire une alternative à CamelCamelCamel. En termes simples, cette web app doit permettre aux utilisateurs de surveiller les prix des produits Amazon à partir d’une liste d’articles.

Lorsque vous travaillez avec une solution comme Firebase Studio(ou v0), l’ingénierie rapide est la clé. Prenez donc le temps de créer la meilleure invite possible. Pour obtenir des résultats de haute qualité, vous aurez besoin d’une invite bien structurée. Voici quelques bonnes pratiques :

  • Concentrez-vous uniquement sur les fonctionnalités essentielles. Plus vous en ajoutez, plus vous risquez d’avoir un code désordonné et difficile à déboguer.
  • Indiquez clairement les technologies que vous souhaitez utiliser (frontend, backend, base de données, etc.).
  • Mentionnez que vous vous occuperez de l’intégration de Bright Data plus tard. Pour l’instant, une logique simulée suffit.
  • Utilisez une liste numérotée pour décomposer les tâches principales.
  • Le message doit être détaillé mais concis. Si elle est trop longue, l’IA risque d’être désorientée.

Voici un exemple d’invite solide que vous pouvez utiliser :

## Objectif
Construire une application web Next.js pour suivre les prix des produits Amazon.

## Exigences

### 1. Page d'atterrissage
- Une page d'index avec une interface utilisateur claire et un formulaire où les utilisateurs peuvent soumettre l'URL d'un produit Amazon.

### 2. Traitement des données
- Lorsqu'un utilisateur soumet une URL :  
  - Appeler un point d'extrémité API simulé (représentant le Scraper Amazon de Bright Data) pour récupérer les détails du produit :  
    - URL  
    - Titre  
    - Prix  
    - Image  
    - ASIN  
    - ...  
  - Stocker les données de ce produit dans Firestore.  
  - Ajoutez le produit à un tableau de bord avec une liste de fiches présentant chaque produit. Lorsqu'on clique dessus, chaque fiche produit doit mener à une page produit spécifique.

### 3. Suivi des prix
- Créez une tâche programmée (par exemple, une fois par jour) qui rappelle l'API Bright Data simulée pour chaque produit enregistré.  
- Enregistrez chaque nouvel enregistrement de prix dans Firestore, en utilisant l'ASIN du produit comme ID et en l'ajoutant à son historique de prix.

### 4. Page produit
- Sur la page du produit, affichez un tableau avec :  
  - Informations sur le produit (titre, image, URL, etc.)  
  - Dernier prix  
  - Historique des prix (sous forme de lignes dans un tableau, ou idéalement un simple graphique montrant l'évolution des prix)

---

**Important** :  
- Mettez en œuvre les appels à l'API Bright Data externe en tant que fonctions fictives renvoyant du JSON statique. Je les remplacerai plus tard par une véritable intégration de l'API.

## Pile technologique
- Next.js avec TailwindCSS pour le style  
- Firestore comme base de données (avec une collection appelée "products")  

## Actions
Échafaudez la structure complète du projet, avec les pages, le schéma Firestore, les fonctions API simulées et la fonction programmée pour les mises à jour quotidiennes des prix.

Remarquez que l’invite est rédigée au format Markdown, ce qui facilite l’organisation et la décomposition de la tâche en plusieurs sections. De plus, les modèles d’IA comprennent généralement assez bien le format Markdown.

L’exemple d’invite ci-dessus suit toutes les meilleures pratiques et aidera l’IA à construire avec succès l’application prévue. C’est parfait !

Étape 3 : Exécuter l’invite et explorer les premiers résultats

Collez votre invite dans la zone de texte “Prototype an app with IA” dans Firebase Studio et appuyez sur Entrée.

L’agent de prototypage d’applications de Firebase Studio génère un modèle d’application contenant toutes les informations principales :

The resulting app blueprint

N’hésitez pas à le personnaliser et à l’affiner pour qu’il réponde mieux à vos besoins.

Lorsque vous êtes prêt, faites défiler vers le bas et cliquez sur le bouton “Prototype this App” pour demander à l’IA de générer l’app :

Pressing the “Prototype this App” button

Firebase Studio commence alors à créer les fichiers de votre projet Next.js. Soyez patient, cela peut prendre quelques minutes.

Une fois le processus terminé, vous verrez votre prototype en cours d’exécution dans une fenêtre de prévisualisation :

The running prototype

Remarquez que l’interface utilisateur de l’application correspond étroitement à la structure que vous avez décrite dans votre message. C’est déjà un résultat très prometteur !

Étape 4 : Compléter l’intégration de Gemini

Dans le coin inférieur gauche, vous devriez voir une invite vous demandant de compléter l’intégration Gemini en entrant votre clé API Gemini :

Entering your Gemini API key and pressing “Continue"

Récupérez votre clé API Gemini depuis Google IA Studio, collez-la dans le champ et appuyez sur le bouton “Continuer”. Si tout fonctionne correctement, vous devriez obtenir un message de réussite comme celui-ci :

The Gemini integration success message

Pendant ce temps, Firebase Studio devrait automatiquement terminer le chargement de son environnement de développement (basé sur Visual Studio Code). Sinon, accédez-y en cliquant sur le bouton “Switch to Code”. Voici ce que vous devriez voir :

The Firebase Studio cloud IDE

Sur le côté droit, vous verrez maintenant un panneau Gemini à l’intérieur de votre configuration de codage. De là, vous pouvez demander à Gemini des conseils contextuels, de nouvelles fonctionnalités, des corrections et des conseils pendant que vous construisez. Bien joué !

Étape 5 : Corriger les problèmes

Comme vous pouvez le voir dans l’onglet de prévisualisation “Web” (montré dans les captures d’écran précédentes), l’application actuelle a 2 problèmes. C’est tout à fait normal, car le code généré par l’IA est rarement parfait et nécessite généralement des ajustements et des corrections.

Avant d’aller plus loin, passez en revue les problèmes signalés. Utilisez les éléments visuels Next.js dans l’application pour identifier ce qui est cassé et corrigez-les un par un. Après tout, construire sur une application défectueuse n’a pas beaucoup de sens.

Pour le débogage côté serveur, vérifiez les journaux dans le panneau “OUTPUT”. Appuyez sur Ctrl + <backtick> pour ouvrir la section Terminal. Passez ensuite à l’onglet “OUTPUT” et sélectionnez l’élément “Previews” :

Accessing the server logs

N’oubliez pas: vous pouvez également demander à Gemini de vous aider à résoudre ces problèmes en lui indiquant directement les erreurs que vous rencontrez.

Une fois que vous avez résolu tous les problèmes, votre application devrait ressembler à ceci :

Note that the issues have disappeared

Remarquez que l’indicateur “Issues” dans le coin supérieur gauche a disparu, ce qui signifie que tous les problèmes de Next.js ont été résolus !

Etape 6 : Configurer Firestore

L’une des grandes caractéristiques de Firebase Studio est qu’il fonctionne directement dans l’environnement Firebase, ce qui facilite l’intégration avec tous les autres produits Firebase.

Dans ce projet, vous devrez configurer une base de données Firestore afin que votre application puisse lire et stocker des données, tout en gardant une trace de son état. Cela est nécessaire car Firestore a été spécifié comme technologie de base de données dans l’invite.

Conseil: Pour une intégration simplifiée, vous pouvez demander à Gemini de vous guider tout au long de la tâche.

Commencez par vous connecter à Firebase et créez un nouveau projet :

Creating a new Firebase project

Donnez un nom à votre projet et suivez l’assistant de création de projet. Firebase va commencer à créer votre projet :

The Firebase creation loading page

Appuyez sur le bouton “+ add app” et sélectionnez l’icône web app pour initialiser une nouvelle web app Firebase:

Pressing the web app icon

Donnez un nom à votre web app et suivez les instructions. À la fin, vous recevrez un extrait de connexion avec la configuration Firebase :

The Firebase connection credentials

Sauvegardez ces informations d’identification de l’objet firebaseConfig dans un endroit sûr, car vous en aurez besoin pour connecter votre prototype d’application à Firebase.

Ensuite, sur la page de votre projet dans la console Firebase, dans la section “Build”, sélectionnez l’option “Firestore Database” :

Selecting the “Firestore Database” option

Cliquez sur le bouton “Create database” et initialisez une base de données standard en mode production :

Pressing the “Create database” button

En haut de la page Firestore, accédez à l’onglet “Rules”. Ajoutez les règles suivantes pour autoriser la lecture et l’écriture :

rules_version = '2' ;

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      autoriser la lecture, l'écriture : si vrai ;
    }
  }
}

Cliquez ensuite sur “Publier” pour mettre à jour vos règles :

Clicking the “Publish” button

Remarque: ces règles rendent votre base de données publique, de sorte que n’importe qui peut lire, modifier ou supprimer des données. Cela convient pour un prototype, mais en production, vous devez configurer des règles plus sûres et plus granulaires.

Créez une nouvelle collection appelée produits (le même nom que celui indiqué dans l’invite) :

The products collection in the database

Créez une nouvelle entrée et définissez le champ asinc comme une clé de type chaîne. Après avoir testé que votre application peut écrire avec succès dans Firestore, n’oubliez pas de supprimer cet exemple d’entrée.

Dans la Google Cloud Console, accédez à la page “Google Cloud Firestore API“. Activez votre API :

Enabling API connection to Firestore

Le champ apiKey fourni dans l’objet firebaseConfig peut maintenant être utilisé pour se connecter à votre base de données Firestore.

Nous y voilà ! Vous disposez désormais d’une base de données Firestore prête à être intégrée à votre application Firebase Studio.

Etape 7 : Connexion à Firestore

De retour dans Firebase Studio, inspectez votre projet. Quelque part dans votre structure de fichiers, vous devriez voir un fichier pour la connexion à Firestore. Dans ce cas, il s’agit de src/lib/firebase.ts :

The src/lib/firebase.ts file

Comme vous pouvez le constater, ce fichier s’attend à ce que les informations d’identification de la connexion Firebase soient définies dans les variables d’environnement publiques de Next.js. Ajoutez-les au fichier .env (qui devrait avoir été créé par l’IA ; sinon, créez-le vous-même) :

NEXT_PUBLIC_FIREBASE_API_KEY="<VOTRE_CLÉ_API_FIREBASE>"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="<YOUR_FIREBASE_AUTH_DOMAIN>"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="<FIREBASE_PROJECT_ID>"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="<VOTRE_BUCKET_DE_STOCKAGE_DE_LA_BASE_DE_FEU>"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="<YOUR_FIREBASE_MESSAGING_SENDER_ID>"
NEXT_PUBLIC_FIREBASE_APP_ID="<YOUR_FIREBASE_APP_ID>"

Note: Ces valeurs proviennent de l’objet firebaseConfig que vous avez obtenu précédemment.

Dans l’onglet “Web”, effectuez un redémarrage complet pour vous assurer que tous les changements sont correctement rechargés. Votre application Firebase devrait maintenant être capable de se connecter à Firestore.

Si vous souhaitez vérifier que l’application fonctionne correctement sur la collection de produits, explorez le code. Vous devriez voir quelque chose comme ceci :

Note that the collection name is ‘products’

Remarquez que l’application fonctionne sur la collection de produits comme prévu.

C’est super ! Un pas de plus vers l’achèvement de votre prototype.

Étape 8 : Intégrer les données de Bright

Actuellement, la logique d’extraction des informations et des prix des produits Amazon est simulée (dans ce cas, dans un fichier src/lib/mock-api.ts ) :

The src/lib/mock-api.ts file

Ce fichier contient les deux principales fonctions de récupération de données de bas niveau qui sont appelées dans la logique commerciale des boutons “Suivre le prix” et “Mettre à jour tous les prix” :

The “Track Price” and Update All Prices” buttons

Plus précisément, le fichier mock-api.ts définit les deux fonctions :

  • fetchProductFromUrl(): Elle simule la récupération d’informations sur un produit Amazon à partir d’une URL de produit donnée.
  • getLatestPriceForProduct(): Réalise une simulation de récupération du dernier prix d’un produit Amazon donné.

Vous devez ensuite remplacer cette logique fictive par des appels réels au Scraper Amazon de Bright Data via l’API.

Commencez par vous connecter à votre compte Bright Data ou créez-en un nouveau si vous ne l’avez pas encore fait. Accédez à l’onglet ” API Request Builder ” pour le scraper “Amazon Products – Collect by URL“. Sélectionnez l’option “Node (Axios)” pour obtenir un extrait de code montrant comment appeler l’API pour récupérer les données produit :

The “API Request Builder” section for the required scraper

Si vous n’êtes pas familier avec le fonctionnement des API Web Scraper de Bright Data, passons à une brève explication.

Vous commencez par déclencher une tâche de scraping à l’aide du point d’extrémité /trigger, qui crée un instantané de scraping pour l’URL de produit spécifiée. Une fois l’instantané lancé, vous vérifiez périodiquement son état à l’aide du point de terminaison snapshot/{snapshot_id} pour voir si les données scannées sont prêtes. Lorsqu’elles sont prêtes, vous appelez la même API pour obtenir les données extraites.

Ces API de scraper Web peuvent être appelées de manière programmatique en vous authentifiant à l’aide de votre clé d’API Bright Data. Suivez le guide officiel pour obtenir la clé, puis ajoutez-la à votre fichier .env comme suit :

BRIGHT_DATA_API_KEY="<VOTRE_CLÉ_D'API_DE_BRIGHT_DATA>"

Fondamentalement, ce que vous devez faire est le suivant :

  1. Appeler le point de terminaison /trigger avec l’URL du produit pour démarrer une nouvelle tâche de scraping, en vous authentifiant à l’aide de la clé API de Bright Data.
  2. Lancer un processus d’interrogation sur snapshot/{snapshot_id} pour vérifier périodiquement si l’instantané contenant les données scannées est prêt.
  3. Une fois l’instantané prêt, accédez aux données des produits Amazon.

Pour commencer, installez le client HTTP Axios dans votre projet avec :

npm install axios
Installing Axios in your project

Ensuite, remplacez le contenu de src/lib/mock-api.ts par la logique suivante :

'use server'

import axios from 'axios' ;
import type { Product } from './types' ;

// accédez à votre clé d'API Bright Data à partir des envs 
const BRIGHT_DATA_API_KEY = process.env.BRIGHT_DATA_API_KEY ;

// créer un client Axios personnalisé pour se connecter à l'API Amazon Scraper de
// Bright Data Amazon Scraper
const client = axios.create({
  headers : {
    Authorization : `Bearer ${BRIGHT_DATA_API_KEY}`,
    'Content-Type' : 'application/json',
  },
}) ;

async function triggerAndPoll(url : string) : Promise<Produit> {
  // déclenche un nouvel instantané
  const triggerRes = await client.post(
    'https://api.brightdata.com/datasets/v3/trigger',
    [{
      'url' : url
    }],
    {
      params : {
        dataset_id : 'gd_l7q7dkf244hwjntr0', // identifiant du jeu de données Amazon
        include_errors : true, // pour le débogage
      },
    }
  ) ;

  // obtenir l'ID de l'instantané
  const snapshotId = triggerRes.data ?.snapshot_id ;

  // tenter jusqu'à 600 fois de récupérer les données de l'instantané
  const maxAttempts = 600 ;
  let attempts = 0 ;
  while (attempts < maxAttempts) {
    try {
      // vérifie si les données sont disponibles
      const snapshotRes = await client.get(
        `https://api.brightdata.com/datasets/v3/snapshot/${snapshotId}`,
        {
          params : { format : 'json' },
        }
      ) ;

      // si les données ne sont pas disponibles (la tâche de scraping n'est pas terminée)
      const status = snapshotRes.data ?.status ;
      if (['running', 'building'].includes(status)) {
        tentatives++ ;
        // attendez 1 seconde
        await new Promise((resolve) => setTimeout(resolve, 1000)) ;
        continue ;
      }

      // si les données sont disponibles
      return snapshotRes.data[0] as Product ;
    } catch (err) {
      tentatives++ ;
      // attendez 1 seconde
      await new Promise((resolve) => setTimeout(resolve, 1000)) ;
    }
  }

  throw new Error(
    `Timeout après ${maxAttempts} secondes d'attente des données de l'instantané`
  ) ;
}

export async function fetchProductFromUrl(url : string) : Promise<Produit | null> {
  const productData = await triggerAndPoll(url) ;
  const timestamp = Date.now() ;
  const initialPrice = productData.final_price ;
  if (initialPrice) {
    productData['priceHistory'] = [{ price : initialPrice, timestamp }]
  }

  return productData
}

export async function getLatestPriceForProduct(url : string) : Promise<nombre | null> {
  const productData = await triggerAndPoll(url) ;

  return productData.final_price || null
}
The new code in src/lib/mock-api.ts

La nouvelle implémentation utilise Axios pour se connecter à Bright Data, déclenche un instantané pour une URL donnée, interroge jusqu’à ce que les données soient prêtes et renvoie les informations sur le produit.

L’utilitaire triggerAndPoll() gère l’ensemble de la logique de récupération des données à partir de l’API Scraper de Bright Data. fetchProductFromUrl() renvoie l’objet produit complet avec un historique des prix initiaux, tandis que getLatestPriceForProduct() renvoie uniquement le prix actuel lu à partir du champ final_price.

Pour comprendre quels champs sont renvoyés par l’API Amazon Scraper de Bright Data, explorez la section “Vue d’ensemble” de votre tableau de bord :

The “Overview” section for the selected Bright Data Web Scraper API

Alimentez l’échantillon JSON à Gemini et demandez à l’IA de mettre à jour le type TypeScript Product en conséquence :

The updated Product type

Fantastique ! Aucune autre étape n’est nécessaire. À ce stade, votre application devrait être entièrement fonctionnelle et prête à être testée, avec des données de produits en direct qui sont récupérées et affichées.

Étape #9 : Tester l’application prototype

Votre alternative CamelCamelCamel est maintenant prête. Vous pouvez trouver le code complet dans le dépôt GitHub supportant cet article. Clonez-le avec :

git clone https://github.com/Tonel/price-wise

Ce n’est rien de plus qu’un MVP(Minimal Viable Product), mais il est suffisamment fonctionnel pour explorer vos idées et même les étendre à une application prête pour la production.

Pour vous assurer que toutes les mises à jour de votre base de code sont appliquées, effectuez un redémarrage complet :

Performing a hard restart

Cliquez ensuite sur l’icône “Ouvrir dans une nouvelle fenêtre” :

Clicking the “Open in New Window” icon

Vous devriez maintenant avoir accès à votre prototype Firebase Studio dans un onglet de navigateur dédié :

Your Firebase Studio prototype on a dedicated browser tab

Testez l’application web CamelCamelCamel en collant l’URL d’un produit Amazon et en appuyant sur le bouton “Suivre le prix” :

Your web application in action at Amazon product info retrieval

Le produit sera ajouté à la section “Produits suivis”, affichant les données exactement comme il apparaît sur sa page Amazon.

Cela démontre la puissance de l’API Bright Data Web Scraper, qui a réussi à récupérer les données du produit en quelques secondes.

Vérifiez que les données produit ont été stockées dans la base de données Firestore :

Note the new entry in your Firestore database

Supposons maintenant que quelques jours se sont écoulés et que le prix a fluctué. Visitez la page du produit pour voir le prix mis à jour :

Visiting the product page

Plus en détail, remarquez que la page du produit contient à la fois un graphique et un tableau montrant l’évolution du prix de ce produit :

The product page

Impressionnant, non ?

Et voilà ! En quelques minutes et avec très peu de code, vous avez construit une application web de type CamelCamelCamel pour le suivi des prix des produits Amazon. Rien de tout cela n’aurait été possible sans les capacités de données Web en temps réel de Bright Data et l’environnement de développement simplifié de Firebase Studio.

Prochaines étapes

L’application créée ici n’est qu’un prototype. Pour qu’elle soit prête pour la production, envisagez les étapes suivantes :

  • Intégrer l’authentification: Utilisez Firebase Authentication pour ajouter rapidement un système de connexion afin que chaque utilisateur puisse enregistrer et contrôler ses propres produits.
  • Ajoutez des fonctionnalités supplémentaires: Poursuivez l’itération dans Gemini en demandant de nouvelles fonctionnalités, ou téléchargez le code du projet et intégrez manuellement des fonctionnalités supplémentaires.
  • Rendez votre application publique: Publiez votre application en utilisant l’une des options de déploiement proposées par Firebase Studio.

Conclusion

Dans cet article de blog, vous avez vu comment les capacités de construction d’apps pilotées par l’IA de Firebase Studio peuvent vous aider à créer un site concurrent de CamelCamelCamel en quelques minutes seulement. Cela ne serait pas possible sans une source fiable et facile à intégrer de données sur les produits et les prix Amazon, comme Amazon Scraper de Bright Data.

Ce que nous avons construit ici n’est qu’un exemple de ce qui est possible lorsque vous combinez des données Scraping avec une application web dynamique générée par l’IA. N’oubliez pas qu’une approche similaire peut être appliquée à d’innombrables autres cas d’utilisation. Tout ce dont vous avez besoin, ce sont les bons outils pour accéder aux données qui correspondent à vos besoins !

Pourquoi s’arrêter ici ? Explorez nos API Web Scraper, qui fournissent des points de terminaison dédiés à l’extraction de données Web fraîches, structurées et entièrement conformes à partir de plus de 120 sites Web populaires.

Créez un compte Bright Data gratuit dès aujourd’hui et commencez à construire avec des solutions d’extraction de données web prêtes pour l’IA !