> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Créer un tableau de bord API en temps réel

> Transformez une API publique en tableau de bord toujours à jour.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Créez un tableau de bord en temps réel avec les indicateurs clés, des graphiques et des
filtres à partir d'une API. Il se rafraîchit automatiquement, prend en charge l'export, et
n'affiche que ce que les données contiennent réellement. Stockez tout ce qui doit persister
dans Replit Database.

## Idéal pour

* Les chefs de produit qui ont besoin d'un tableau de bord que les gens peuvent consulter, pas d'une capture d'écran.
* Les responsables opérations et data qui ont besoin d'un tableau de bord privé toujours à jour à partir d'une API.

## Avant de commencer

Notez la décision que le tableau de bord doit permettre de prendre. Ayez l'URL de l'API sous
la main, ou utilisez les points de terminaison DummyJSON ci-dessous.

<Info>
  À des fins de test, vous pouvez essayer avec ces points de terminaison gratuits de l'API DummyJSON :

  * Commandes : `https://dummyjson.com/carts?limit=0`
  * Clients : `https://dummyjson.com/users?limit=0`
  * Catalogue : `https://dummyjson.com/products?limit=0`
  * Catégories : `https://dummyjson.com/products/categories`
</Info>

## Invite à l'Agent

<AiPrompt>
  Crée un tableau de bord en temps réel à partir de cette API \[URL]. Affiche
  les indicateurs clés, des graphiques et des filtres qui répondent à
  \[la décision]. Rafraîchis automatiquement et prends en charge l'export.
  Stocke tout ce qui doit persister dans Replit Database. N'affiche que ce que
  les données contiennent réellement.
</AiPrompt>

## À quoi s'attendre

L'Agent charge les données, choisit des indicateurs et graphiques de synthèse, et ajoute des
filtres. Vérifiez au moins un chiffre par rapport à la source. Si vous avez utilisé
DummyJSON, choisissez une commande et ouvrez `https://dummyjson.com/carts/{id}` pour
confirmer que les totaux correspondent. Activez un filtre et vérifiez que chaque carte et
graphique se met à jour. Exportez une fois et vérifiez une ligne par rapport à l'API.

## Adaptez-le à vos besoins

<AiPrompt>
  Ajoute un filtre par catégorie qui recalcule chaque chiffre de la page.
</AiPrompt>

<AiPrompt>Mets en cache les réponses de l'API pour que le tableau de bord reste rapide au chargement.</AiPrompt>

## Dépannage

* **L'API est indisponible ou la structure semble incorrecte :** vérifiez l'URL et que la réponse contient les champs attendus. Pour un test rapide, utilisez les points de terminaison DummyJSON ci-dessus.
* **Les chiffres semblent différents de ce qui est attendu :** demandez à l'Agent d'afficher la requête ou la transformation, puis vérifiez au moins un chiffre par rapport à la source.
* **Les filtres ne mettent pas à jour les graphiques :** demandez à l'Agent de connecter chaque filtre aux cartes de synthèse et aux données des graphiques. Si le tableau de bord est lent, mettez en cache les réponses de l'API ou réduisez le nombre d'enregistrements chargés au démarrage.

## Voir aussi

<CardGroup cols={2}>
  <Card title="Générer un rapport de ventes hebdomadaire" href="/fr/use-cases/weekly-pipeline-report">
    Un instantané hebdomadaire au lieu d'un tableau de bord en temps réel.
  </Card>

  <Card title="Lancer un site web d'événement payant" href="/fr/use-cases/launch-event-website">
    Une autre application Replit en temps réel à partir de données que vous avez déjà.
  </Card>
</CardGroup>