Erstellen einer App zur Amazon-Preisverfolgung in Firebase Studio Powered by Bright Data

In diesem Tutorial werden Sie lernen:

1. Was Firebase Studio ist und welche Funktionen es bietet.
2. Warum Sie einen Amazon-Webdatenanbieter wie Bright Data benötigen, um eine CamelCamelCamel-ähnliche Webanwendung zu erstellen.
3. Wie Sie mit Firebase Studio eine Amazon-Preisverfolgungs-Webanwendung erstellen und dabei Amazon-Daten aus der Amazon Scraper API von Bright Data verwenden.

Lasst uns eintauchen!

Was ist Firebase Studio?

Firebase Studio ist eine cloudbasierte, KI-gestützte Entwicklungsumgebung, die von Google entwickelt wurde. Ihr Hauptziel ist es, die Erstellung und Bereitstellung von Anwendungen in Produktionsqualität mit KI zu beschleunigen. Insbesondere bietet es einen umfassenden Arbeitsbereich, in dem die von Gemini betriebene KI-Unterstützung während des gesamten Entwicklungszyklus integriert ist.

Wichtige Funktionen

Einige der wichtigsten Funktionen von Firebase Studio sind:

• Cloud-basierte Entwicklungsumgebung: Stellt Ihnen einen vollständigen Kodierungsarbeitsbereich mit KI-Unterstützung zur Verfügung, einschließlich Code-Vorschlägen, -Generierung und -Erklärungen.
• App-Prototyping-Agent: Unterstützt das schnelle Prototyping von Anwendungen, wie z. B. Next.js-Webanwendungen, mit KI-Unterstützung, wodurch der Bedarf an umfangreicher manueller Kodierung reduziert wird.
• Unterstützung für verschiedene Frameworks und Sprachen: Arbeiten Sie mit beliebten Technologien wie Flutter, Go, Angular, Next.js und anderen, indem Sie die von ihnen bevorzugten Frameworks verwenden.
• Integration mit Firebase-Diensten: Integration mit Diensten wie Firebase App Hosting, Cloud Firestore und Firebase Authentication.
• Tools für Entwicklung und Bereitstellung: Integrierte Unterstützung für Emulation, Tests, Debugging und Überwachung der App-Leistung.
• Import- und Anpassungsoptionen: Importieren Sie vorhandene Projekte von GitHub, GitLab, Bitbucket oder komprimierten Archiven und passen Sie sie mit KI vollständig an.

Was Sie für die Erstellung einer Amazon Price Tracker Web App benötigen

CamelCamelCamel ist ein Online-Dienst, der die Preise von Amazon-Produkten verfolgt und Preisverlaufsdiagramme und Warnungen bei Preisrückgängen bereitstellt, um den Nutzern zu helfen, die besten Angebote zu finden. Vereinfacht ausgedrückt ist die Kernfunktion des Dienstes die Amazon-Preisverfolgung, und genau darauf werden wir uns in diesem Leitfaden konzentrieren.

Die Idee dabei ist, eine Web-App zu entwickeln, die als Alternative funktioniert und die Amazon-Preisverfolgung auf vereinfachte Weise implementiert. Normalerweise würde die Entwicklung dieser Anwendung Tage (oder sogar Monate) in Anspruch nehmen, aber dank Firebase Studio können Sie innerhalb weniger Minuten einen funktionierenden Prototyp erstellen.

Eine große Herausforderung bei dieser Aufgabe ist die Beschaffung von Amazon-Produktdaten. Das Scraping von Amazon ist aufgrund der strengen Anti-Bot-Maßnahmen wie CAPTCHAs (erinnern Sie sich an das berüchtigte Amazon CAPTCHA), die die meisten automatisierten Anfragen blockieren können, bekanntermaßen schwierig:

An dieser Stelle kommt Bright Data ins Spiel!

Bright Data bietet ein komplettes Paket von Lösungen für die Beschaffung von Webdaten in rohen und strukturierten Formaten von praktisch jeder Website. Mit IP-Rotation, Browser-Fingerprinting, CAPTCHA-Lösung und vielen anderen wichtigen Aspekten, die automatisch gehandhabt werden, müssen Sie sich keine Gedanken über Sperren oder Einschränkungen machen.

Konkret werden wir die Amazon-Produktdaten verwenden, die von Bright Datas Amazon Scraper API zurückgegeben werden. Damit können Sie frische Amazon-Produktdaten durch einfachen Aufruf eines API-Endpunkts abrufen.

Sehen Sie, wie Firebase Studio und Bright Data zusammenarbeiten, um schnell ein CamelCamelCamel-ähnliches Webangebot zu erstellen!

Wie man einen Amazon Price Tracker wie CamelCamelCamel in Firebase Studio erstellt

Führen Sie die folgenden Schritte aus, um zu erfahren, wie Sie eine CamelCamelCamel-ähnliche Webanwendung erstellen, die Amazon-Preise verfolgt. Integrieren Sie Bright Data in Ihren Firebase Studio-Prototyp!

Voraussetzungen

Um diesem Tutorial folgen zu können, müssen Sie Folgendes haben

• Ein Google-Konto
• Ein Firebase Studio-Konto
• Einen Gemini-API-Schlüssel
• Eine eingerichtete Firestore-Datenbank, die über API verbunden werden kann
• Ein Bright Data-Konto mit einem konfigurierten API-Schlüssel

Hinweis: Machen Sie sich noch keine Gedanken über die Einrichtung, denn Sie werden nach und nach durch die einzelnen Schritte geführt.

Sie benötigen außerdem:

• Kenntnisse der Next.js-Entwicklung in TypeScript
• Vertrautheit mit der Funktionsweise der Bright Data Scraper API (weitere Einzelheiten finden Sie in den Bright Data-Dokumenten )

Schritt 1: Einrichten von Firebase Studio

Rufen Sie die Firebase Studio-Website auf und klicken Sie auf die Schaltfläche “Get Started”:

Sie werden aufgefordert, sich mit einem Ihrer Google-Konten anzumelden. Wählen Sie eines aus und fahren Sie fort.

Sobald Sie eingeloggt sind, gelangen Sie auf die Seite für die App-Erstellung:

Hier können Sie eine Eingabeaufforderung eingeben, um die KI zu bitten, das Projekt für Sie zu initialisieren. Großartig!

Schritt #2: Entwickeln Sie die Eingabeaufforderung

Denken Sie daran, dass Ihr Ziel darin besteht, eine CamelCamelCamel-Alternative zu erstellen. Einfach ausgedrückt, soll diese Webapplikation den Nutzern die Möglichkeit geben, die Preise von Amazon-Produkten anhand einer Liste von Artikeln zu überwachen.

Wenn Sie mit einer Lösung wie Firebase Studio(oder v0) arbeiten, ist Prompt Engineering der Schlüssel. Nehmen Sie sich also die Zeit, um die bestmögliche Eingabeaufforderung zu erstellen. Um qualitativ hochwertige Ergebnisse zu erzielen, benötigen Sie eine gut strukturierte Eingabeaufforderung. Im Folgenden finden Sie einige Best Practices:

• Konzentrieren Sie sich nur auf die Kernfunktionen. Je mehr Sie hinzufügen, desto größer ist die Gefahr, dass der Code unübersichtlich und schwer zu debuggen ist.
• Nennen Sie klar die Technologien, die Sie verwenden möchten (Frontend, Backend, Datenbank usw.).
• Erwähnen Sie, dass Sie sich später um die Integration von Bright Data kümmern werden. Für den Moment reicht eine gespiegelte Logik aus.
• Verwenden Sie eine nummerierte Liste, um die Hauptaufgaben aufzuschlüsseln.
• Halten Sie die Aufforderung detailliert, aber prägnant. Wenn sie zu lang wird, könnte die KI verwirrt werden.

Dies ist ein Beispiel für eine solide Eingabeaufforderung, die Sie verwenden können:

## Ziel
Erstellen Sie eine Next.js-Webanwendung zur Verfolgung von Amazon-Produktpreisen.

## Anforderungen

### 1. Landing Page
- Eine Indexseite mit einem sauberen UI und einem Formular, in dem die Benutzer eine Amazon-Produkt-URL eingeben können.

### 2. Datenverarbeitung
- Wenn ein Benutzer eine URL eingibt:  
  - Aufruf eines nachgebildeten API-Endpunkts (der den Amazon Scraper von Bright Data darstellt) zum Abrufen von Produktdetails:  
    - URL  
    - Titel  
    - Preis  
    - Bild  
    - ASIN  
    - ...  
  - Speichern Sie diese Produktdaten in Firestore.  
  - Fügen Sie das Produkt zu einem Produkt-Dashboard mit einer Kartenliste hinzu, die jedes Produkt zeigt. Wenn Sie darauf klicken, sollte jede Produktkarte zu einer bestimmten Produktseite führen.

### 3. Preisverfolgung
- Erstellen Sie einen geplanten Job (z. B. einmal pro Tag), der die nachgebildete Bright Data API für jedes gespeicherte Produkt erneut aufruft.  
- Speichern Sie jeden neuen Preisdatensatz in Firestore, indem Sie die Produkt-ASIN als ID verwenden und an den Preisverlauf anhängen.

### 4. Produktseite
- Zeigen Sie auf der Produktseite eine Tabelle mit:  
  - Produktinformation (Titel, Bild, URL, etc.)  
  - Aktueller Preis  
  - Preishistorie (als Zeilen in einer Tabelle oder idealerweise ein einfaches Diagramm mit der Preisentwicklung)

---

**Wichtig**:  
- Implementieren Sie die externen Bright Data API-Aufrufe als Mock-Funktionen, die statisches JSON zurückgeben. Ich werde diese später durch echte API-Integration ersetzen.

## Technischer Stack
- Next.js mit TailwindCSS für das Styling  
- Firestore als Datenbank (mit einer Sammlung namens "Produkte")  

## Aktionen
Gerüst der gesamten Projektstruktur, mit Seiten, Firestore-Schema, nachgebildeten API-Funktionen und der geplanten Funktion für tägliche Preisaktualisierungen.

Beachten Sie, dass die Eingabeaufforderung im Markdown-Format geschrieben ist, was die Organisation und Aufteilung der Aufgabe in Abschnitte erleichtert. Außerdem verstehen KI-Modelle Markdown im Allgemeinen recht gut.

Die obige Beispielaufforderung entspricht allen Best Practices und wird der KI helfen, die geplante App erfolgreich zu erstellen. Perfekt!

Schritt #3: Führen Sie die Eingabeaufforderung aus und untersuchen Sie die ersten Ergebnisse

Fügen Sie Ihre Eingabeaufforderung in den Textbereich “Prototyp einer App mit KI” in Firebase Studio ein und drücken Sie die Eingabetaste.

Der Firebase Studio App Prototyping Agent generiert einen App Blueprint mit allen wichtigen Informationen:

Sie können den Entwurf nach Belieben anpassen und verfeinern, um ihn besser an Ihre Bedürfnisse anzupassen.

Wenn Sie bereit sind, scrollen Sie nach unten und klicken Sie auf die Schaltfläche “Prototype this App”, um die KI anzuweisen, die App zu erstellen:

Firebase Studio beginnt nun mit der Erstellung der Dateien für Ihr Next.js-Projekt. Haben Sie etwas Geduld, da dies einige Minuten dauern kann.

Sobald der Prozess abgeschlossen ist, sehen Sie Ihren laufenden Prototyp in einem Vorschaufenster:

Beachten Sie, dass die Benutzeroberfläche der Anwendung genau der Struktur entspricht, die Sie in Ihrer Eingabeaufforderung beschrieben haben. Das sieht schon nach einem sehr vielversprechenden Ergebnis aus!

Schritt #4: Vervollständigen Sie die Gemini-Integration

In der linken unteren Ecke sollten Sie aufgefordert werden, die Gemini-Integration abzuschließen, indem Sie Ihren Gemini API-Schlüssel eingeben:

Rufen Sie Ihren Gemini API-Schlüssel von Google KI Studio ab, fügen Sie ihn in das Feld ein und klicken Sie auf die Schaltfläche “Weiter”. Wenn alles korrekt funktioniert, sollten Sie eine Erfolgsmeldung wie diese erhalten:

In der Zwischenzeit sollte Firebase Studio das Laden seiner Entwicklungsumgebung (basierend auf Visual Studio Code) automatisch beenden. Andernfalls klicken Sie auf die Schaltfläche “Switch to Code”. Was Sie sehen sollten, ist:

Auf der rechten Seite sehen Sie nun ein Gemini-Panel innerhalb Ihres Coding-Setups. Von hier aus können Sie Gemini um kontextbezogene Tipps, neue Funktionen, Korrekturen und Anleitungen bitten, während Sie bauen. Gut gemacht!

Schritt #5: Beheben Sie die Probleme

Wie Sie in der Vorschau-Registerkarte “Web” (in den vorherigen Screenshots) sehen können, hat die aktuelle Anwendung 2 Probleme. Das ist völlig normal, da von der KI generierter Code selten perfekt ist und in der Regel Optimierungen und Korrekturen erfordert.

Bevor Sie fortfahren, gehen Sie die gemeldeten Probleme durch. Verwenden Sie die visuellen Next.js-Elemente in der Anwendung, um die Fehler zu identifizieren und sie nach und nach zu beheben. Schließlich macht es wenig Sinn, auf einer fehlerhaften Anwendung aufzubauen.

Für die serverseitige Fehlersuche prüfen Sie die Protokolle im Bereich “OUTPUT”. Drücken Sie Strg + <Backtick>, um den Terminal-Bereich zu öffnen. Wechseln Sie dort auf die Registerkarte “OUTPUT” und wählen Sie das Element “Previews”:

Denken Sie daran: Sie können Gemini auch um Hilfe bei der Behebung dieser Probleme bitten, indem Sie es direkt mit den Fehlern konfrontieren, die Sie erhalten.

Sobald Sie alle Probleme behoben haben, sollte Ihre App so aussehen:

Beachten Sie, dass der Indikator “Probleme” in der oberen linken Ecke verschwunden ist, was bedeutet, dass alle Next.js-Probleme behoben wurden!

Schritt #6: Firestore konfigurieren

Eine der großartigen Eigenschaften von Firebase Studio ist, dass es direkt in der Firebase-Umgebung läuft, was eine einfache Integration mit allen anderen Firebase-Produkten ermöglicht.

In diesem Projekt müssen Sie eine Firestore-Datenbank einrichten, damit Ihre App Daten lesen und speichern und ihren Status verfolgen kann. Dies ist erforderlich, da in der Eingabeaufforderung Firestore als Datenbanktechnologie angegeben wurde.

Tipp: Um die Integration zu vereinfachen, können Sie Gemini bitten, Sie durch die gesamte Aufgabe zu führen.

Melden Sie sich zunächst bei Firebase an und erstellen Sie ein neues Projekt:

Geben Sie Ihrem Projekt einen Namen und folgen Sie dem Assistenten zur Projekterstellung. Firebase wird mit der Erstellung Ihres Projekts beginnen:

Klicken Sie auf die Schaltfläche “+ add app” und wählen Sie das Web-App-Symbol, um eine neue Firebase-Web-App zu initialisieren:

Geben Sie Ihrer Web-App einen Namen und folgen Sie den Anweisungen. Am Ende erhalten Sie ein Verbindungs-Snippet mit der Firebase-Konfiguration:

Speichern Sie diese Anmeldedaten aus dem firebaseConfig-Objekt an einem sicheren Ort, da Sie sie benötigen, um Ihre Prototyp-App mit Firebase zu verbinden.

Als nächstes wählen Sie auf Ihrer Projektseite der Firebase Console unter dem Abschnitt “Build” die Option “Firestore Database”:

Klicken Sie auf die Schaltfläche “Datenbank erstellen” und initialisieren Sie eine Standarddatenbank im Produktionsmodus:

Gehen Sie oben auf der Firestore-Seite auf die Registerkarte “Regeln”. Fügen Sie die folgenden Regeln hinzu, um das Lesen und Schreiben zu ermöglichen:

rules_version = '2';

Dienst cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      Lesen und Schreiben erlauben: wenn true;
    }
  }
}

Klicken Sie dann auf “Veröffentlichen”, um Ihre Regeln zu aktualisieren:

Hinweis: Diese Regeln machen Ihre Datenbank öffentlich, so dass jeder die Daten lesen, ändern oder löschen kann. Für einen Prototyp ist das in Ordnung, aber in der Produktion müssen Sie sicherere, genauere Regeln konfigurieren.

Erstellen Sie eine neue Sammlung mit dem Namen products (derselbe Name wie in der Eingabeaufforderung angegeben):

Legen Sie einen neuen Eintrag an und setzen Sie das Feld asinc als String-Schlüssel. Nachdem Sie getestet haben, dass Ihre Anwendung erfolgreich in Firestore schreiben kann, vergessen Sie nicht, diesen Beispieleintrag zu löschen.

Navigieren Sie nun in der Google Cloud Console zur Seite “Google Cloud Firestore API“. Aktivieren Sie hier Ihre API:

Das im firebaseConfig-Objekt angegebene apiKey-Feld kann nun für die Verbindung zu Ihrer Firestore-Datenbank verwendet werden.

Das war’s! Sie haben nun eine Firestore-Datenbank, die Sie in Ihre Firebase Studio-App integrieren können.

Schritt #7: Mit Firestore verbinden

Zurück in Firebase Studio, überprüfen Sie Ihr Projekt. Irgendwo in Ihrer Dateistruktur sollten Sie eine Datei für die Firestore-Verbindung finden. In diesem Fall ist es src/lib/firebase.ts:

Wie Sie sehen können, erwartet diese Datei, dass die Firebase-Verbindungsdaten in den öffentlichen Umgebungsvariablen von Next.js definiert werden. Fügen Sie sie der .env-Datei hinzu (die von der KI erstellt worden sein sollte; andernfalls erstellen Sie sie selbst):

NEXT_PUBLIC_FIREBASE_API_KEY="<IHR_FIREBASE_API_KEY>"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="<IHRE_FIREBASE_AUTH_DOMAIN>"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="<FIREBASE_PROJECT_ID>"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="<IHR_FIREBASE_STORAGE_BUCKET>"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="<IHRE_FIREBASE_MESSAGING_SENDER_ID>"
NEXT_PUBLIC_FIREBASE_APP_ID="<IHRE_FIREBASE_APP_ID>"

Hinweis: Diese Werte stammen aus dem firebaseConfig-Objekt, das Sie zuvor erhalten haben.

Führen Sie auf der Registerkarte “Web” einen harten Neustart durch, um sicherzustellen, dass alle Änderungen ordnungsgemäß neu geladen werden. Ihre Firebase-Anwendung sollte nun in der Lage sein, sich mit Firestore zu verbinden.

Wenn Sie überprüfen möchten, ob die Anwendung korrekt mit der Produktsammlung arbeitet, untersuchen Sie den Code. Sie sollten etwa so etwas sehen:

Beachten Sie, dass die Anwendung wie vorgesehen mit der Produktsammlung arbeitet.

Super! Sie sind der Fertigstellung Ihres Prototyps einen Schritt näher gekommen.

Schritt Nr. 8: Integrieren Sie Bright Data

Derzeit ist die Logik für den Abruf von Amazon-Produktdaten und -Preisen gespottet (in diesem Fall in einer src/lib/mock-api.ts-Datei ):

Diese Datei enthält die beiden wichtigsten Low-Level-Datenabfragefunktionen, die in der Geschäftslogik der Schaltflächen “Preis verfolgen” und “Alle Preise aktualisieren” aufgerufen werden:

Insbesondere definiert die Datei mock-api.ts die beiden Funktionen:

• fetchProductFromUrl(): Spottet das Abrufen von Amazon-Produktinformationen von einer gegebenen Produkt-URL.
• getLatestPriceForProduct(): Spottet das Abrufen des letzten Preises für ein bestimmtes Amazon-Produkt.

Als Nächstes müssen Sie diese Mock-Logik durch echte Aufrufe an den Amazon Scraper von Bright Data über die API ersetzen.

Melden Sie sich zunächst bei Ihrem Bright Data-Konto an oder erstellen Sie ein neues, falls Sie dies noch nicht getan haben. Navigieren Sie zur Registerkarte “API Request Builder” für den Scraper “Amazon Products – Collect by URL“. Wählen Sie die Option “Node (Axios)”, um ein Codeschnipsel zu erhalten, das zeigt, wie die API zum Abrufen von Produktdaten aufgerufen wird:

Wenn Sie mit der Funktionsweise der Web Scraper APIs von Bright Data nicht vertraut sind, finden Sie hier eine kurze Erklärung.

Sie beginnen mit dem Auslösen einer Scraping-Aufgabe über den Endpunkt /trigger, der einen Scraping-Snapshot für die angegebene Produkt-URL erstellt. Sobald der Snapshot initiiert wurde, überprüfen Sie regelmäßig seinen Status mithilfe des Endpunkts snapshot/{snapshot_id}, um festzustellen, ob die gescrapten Daten bereit sind. Wenn sie bereit sind, rufen Sie dieselbe API auf, um die gescrapten Daten abzurufen.

Diese Web Scraper-APIs können programmatisch aufgerufen werden, indem Sie sich mit Ihrem Bright Data-API-Schlüssel authentifizieren. Folgen Sie der offiziellen Anleitung, um den Schlüssel zu erhalten, und fügen Sie ihn wie folgt zu Ihrer .env-Datei hinzu:

BRIGHT_DATA_API_KEY="<IHR_BRIGHT_DATA_API_KEY>"

Grundsätzlich müssen Sie Folgendes tun:

1. Rufen Sie den Endpunkt /trigger mit der Produkt-URL auf, um eine neue Scraping-Aufgabe zu starten, und authentifizieren Sie sich mit dem Bright Data API-Token.
2. Starten Sie einen Abfrageprozess für snapshot/{snapshot_id}, um regelmäßig zu prüfen, ob der Snapshot mit den abgefragten Daten bereit ist.
3. Sobald der Snapshot bereit ist, greifen Sie auf die Amazon-Produktdaten zu.

Um zu beginnen, installieren Sie den Axios HTTP-Client in Ihrem Projekt mit:

npm install axios

Als nächstes ersetzen Sie den Inhalt von src/lib/mock-api.ts durch die folgende Logik:

'use server'

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

// Zugriff auf den API-Schlüssel von Bright Data über die Umgebungsvariablen 
const BRIGHT_DATA_API_KEY = process.env.BRIGHT_DATA_API_KEY;

// Erstellen Sie einen benutzerdefinierten Axios-Client für die Verbindung mit dem
// Bright Data Amazon Scraper
const client = axios.create({
  headers: {
    Autorisierung: `Bearer ${BRIGHT_DATA_API_KEY}`,
    Content-Type': 'application/json',
  },
});

async function triggerAndPoll(url: string): Promise<Product> {
  // Auslösen eines neuen Snapshots
  const triggerRes = await client.post(
    'https://api.brightdata.com/datasets/v3/trigger',
    [{
      'url': url
    }],
    {
      params: {
        dataset_id: 'gd_l7q7dkf244hwjntr0', // Amazon-Datensatz-ID
        include_errors: true, // für die Fehlersuche
      },
    }
  );

  // Ermitteln der Snapshot-ID
  const snapshotId = triggerRes.data?.snapshot_id;

  // bis zu 600 Mal versuchen, die Schnappschussdaten abzurufen
  const maxAttempts = 600;
  let attempts = 0;
  while (attempts < maxAttempts) {
    try {
      // prüfen, ob die Daten verfügbar sind
      const snapshotRes = await client.get(
        `https://api.brightdata.com/datasets/v3/snapshot/${snapshotId}`,
        {
          params: { format: 'json' },
        }
      );

      // wenn die Daten nicht verfügbar sind (die Scraping-Aufgabe ist noch nicht beendet)
      const status = snapshotRes.data?.status;
      if (['running', 'building'].includes(status)) {
        Versuche++;
        // für 1 Sekunde warten
        await new Promise((resolve) => setTimeout(resolve, 1000));
        fortfahren;
      }

      // wenn die Daten verfügbar sind
      return snapshotRes.data[0] as Product;
    } catch (err) {
      Versuche++;
      // für 1 Sekunde warten
      await new Promise((resolve) => setTimeout(resolve, 1000));
    }
  }

  throw new Error(
    `Timeout nach ${maxAttempts} Sekunden beim Warten auf Snapshot-Daten`
  );
}

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

  return productData
}

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

  return productData.final_price || null
}

Die neue Implementierung verwendet Axios, um eine Verbindung zu Bright Data herzustellen, löst einen Snapshot für eine bestimmte URL aus, fragt ab, bis die Daten bereit sind, und gibt die Produktinformationen zurück.

Das Dienstprogramm triggerAndPoll() wickelt die gesamte Datenabruflogik von der Bright Data Scraper API ab. fetchProductFromUrl() gibt das vollständige Produktobjekt mit einem anfänglichen Preisverlauf zurück, während getLatestPriceForProduct() nur den aktuellen Preis aus dem Feld final_price zurückgibt.

Um zu verstehen, welche Felder von der Bright Data Amazon Scraper API zurückgegeben werden, sehen Sie sich den Abschnitt “Overview” in Ihrem Dashboard an:

Geben Sie das JSON-Beispiel in Gemini ein und bitten Sie die KI, den TypeScript-Produkttyp entsprechend zu aktualisieren:

Fantastisch! Es sind keine weiteren Schritte erforderlich. An diesem Punkt sollte Ihre Anwendung voll funktionsfähig und testbereit sein, wobei die Produktdaten live abgerufen und angezeigt werden.

Schritt #9: Testen Sie die Prototyp-Anwendung

Ihre CamelCamelCamel-Alternative ist nun fertig. Sie finden den kompletten Code im GitHub-Repository, das diesen Artikel unterstützt. Klone es mit:

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

Dies ist nicht mehr als ein MVP(Minimal Viable Product), aber es ist voll funktionsfähig genug, um Ihre Ideen zu erforschen und es sogar zu einer produktionsreifen Anwendung zu erweitern.

Um sicherzustellen, dass alle Aktualisierungen in Ihrer Codebasis übernommen werden, führen Sie einen harten Neustart durch:

Klicken Sie dann auf das Symbol “In neuem Fenster öffnen”:

Sie sollten nun Zugriff auf Ihren Firebase Studio-Prototypen in einem eigenen Browser-Tab haben:

Testen Sie die CamelCamelCamel-ähnliche Web-App, indem Sie eine Amazon-Produkt-URL einfügen und auf die Schaltfläche “Preis verfolgen” klicken:

Das Produkt wird zum Abschnitt “Verfolgte Produkte” hinzugefügt und zeigt die Daten genau so an, wie sie auf der Amazon-Seite erscheinen.

Hier zeigt sich die Leistungsfähigkeit der Bright Data Web Scraper API, die die Produktdaten innerhalb von Sekunden erfolgreich abgerufen hat.

Überprüfen Sie, dass die Produktdaten in der Firestore-Datenbank gespeichert wurden:

Angenommen, es sind einige Tage vergangen und der Preis hat sich geändert. Besuchen Sie die Produktseite, um den aktualisierten Preis zu sehen:

Beachten Sie, dass die Produktseite sowohl ein Diagramm als auch eine Tabelle enthält, die die Preisentwicklung für dieses Produkt zeigen:

Beeindruckend, nicht wahr?

Et voilà! In nur wenigen Minuten und mit sehr wenig Code haben Sie eine Web-Applikation im Stil von CamelCamelCamel für die Preisverfolgung von Amazon-Produkten erstellt. Ohne die Echtzeit-Webdatenfunktionen von Bright Data und die vereinfachte Entwicklungsumgebung von Firebase Studio wäre dies alles nicht möglich gewesen.

Nächste Schritte

Die hier erstellte Anwendung ist nur ein Prototyp. Um sie produktionsreif zu machen, sollten Sie die folgenden Schritte berücksichtigen:

• Integrieren Sie die Authentifizierung: Verwenden Sie Firebase Authentication, um schnell ein Anmeldesystem hinzuzufügen, damit jeder Benutzer seine eigenen Produkte speichern und überwachen kann.
• Fügen Sie weitere Funktionen hinzu: Setzen Sie die Iteration in Gemini fort, indem Sie neue Funktionen anfordern, oder laden Sie den Projektcode herunter und integrieren Sie zusätzliche Funktionen manuell.
• Machen Sie Ihre Anwendung öffentlich: Veröffentlichen Sie Ihre Anwendung mit einer der von Firebase Studio angebotenen Bereitstellungsoptionen.

Fazit

In diesem Blog-Beitrag haben Sie gesehen, wie die KI-gesteuerten Funktionen von Firebase Studio Ihnen helfen können, in nur wenigen Minuten eine Website zu erstellen, die mit CamelCamelCamel konkurriert. Dies wäre nicht möglich ohne eine zuverlässige, einfach zu integrierende Quelle für Amazon-Produkt- und Preisdaten, wie z. B. Bright Data’s Amazon Scraper.

Was wir hier gebaut haben, ist nur ein Beispiel dafür, was möglich ist, wenn man gescrapte Daten mit einer dynamischen, von KI generierten Web-App kombiniert. Denken Sie daran, dass sich ein ähnlicher Ansatz auf unzählige andere Anwendungsfälle anwenden lässt. Alles, was Sie brauchen, sind die richtigen Tools, um auf die Daten zuzugreifen, die Ihren Anforderungen entsprechen!

Warum hier aufhören? Entdecken Sie unsere Web Scraper APIs, die spezielle Endpunkte zum Extrahieren von frischen, strukturierten und vollständig konformen Webdaten von über 120 beliebten Websites bieten.

Melden Sie sich noch heute für ein kostenloses Bright Data-Konto an, und beginnen Sie mit KI-fähigen Lösungen zum Abrufen von Webdaten!