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

# Interface

> Créer votre première commande en moins de 5 minutes

Une fois votre compte créé, vous arriverez sur la page principal de l'interface de Sparkle. Celle-ci est composée de 3 segments majeurs :

<CardGroup cols={3}>
  <Card title="Explorer" icon="align-left" iconType="duotone" color="#ca8b04">
    L'explorateur de fichiers
  </Card>

  <Card title="Code" icon="code" iconType="duotone" color="#ca8b04">
    L'editeur de code
  </Card>

  <Card title="Panel" icon="objects-align-right" iconType="duotone" color="#ca8b04">
    Le panel d'informations
  </Card>
</CardGroup>

*respectivement de gauche à droite.*

<Frame>
  <img src="https://mintcdn.com/irl101-69/ZrgryVZS-LS2tx0g/images/IDE.jpg?fit=max&auto=format&n=ZrgryVZS-LS2tx0g&q=85&s=ac419537311a4c5330d07e0308faaefb" style={{ borderRadius: "0.5rem" }} width="4112" height="2572" data-path="images/IDE.jpg" />
</Frame>

### L'explorateur de fichiers

L'explorateur de fichiers vous permet de naviguer dans les fichiers de votre projet. Vous pouvez créer des dossiers, des fichiers, les renommer, les supprimer, etc.

En bas de l'explorateur vous avez accès au parametres de votre comptes, vous pouvez y configurer un compte twitch d'administration utiliser pour la gestion des Hook, un compte personnaliser pour le bot ou suivre vos quota d'utilisation.

### L'éditeur de code

L'éditeur de code vous permet de modifier le code de votre projet.

<Frame>
  <img src="https://mintcdn.com/irl101-69/ZrgryVZS-LS2tx0g/images/info-bar.jpg?fit=max&auto=format&n=ZrgryVZS-LS2tx0g&q=85&s=cc9a1461919a2215983ff85d582ac121" alt="info-bar" width="1644" height="100" data-path="images/info-bar.jpg" />
</Frame>

La barre d'information en bas de l'éditeur vous permet de rapidement visualiser le nombre de déclancheurs actifs par types dans votre projet, le statut de synchronisation des fichier et l'état du bot actuellement utiliser.

## Le panel d'informations

Le panel d'informations regroupe une tas d'utilitaires qui vous permettrons de gérer vos projets.

### Le tchat

Qui vous permet de tester vos commandes, ainsi que de voir les logs de votre bot.

<img src="https://mintcdn.com/irl101-69/ZrgryVZS-LS2tx0g/images/chat.jpg?fit=max&auto=format&n=ZrgryVZS-LS2tx0g&q=85&s=d45b5efa81e3e1ee9d838b4cca224ef8" style={{ borderRadius: "0.5rem" }} width="980" height="1248" data-path="images/chat.jpg" />

### Variables

Qui vous permet de voir et manager les variables d'environnement de votre projet.

<img src="https://mintcdn.com/irl101-69/ZrgryVZS-LS2tx0g/images/variables.jpg?fit=max&auto=format&n=ZrgryVZS-LS2tx0g&q=85&s=96cddfca7683c2a3dd5f86577dea1e21" style={{ borderRadius: "0.5rem" }} width="1310" height="672" data-path="images/variables.jpg" />

### Database

Qui vous permet de voir les données stocker dans votre base de données.

<img src="https://mintcdn.com/irl101-69/ZrgryVZS-LS2tx0g/images/database.jpg?fit=max&auto=format&n=ZrgryVZS-LS2tx0g&q=85&s=61541df4cc25c6f9a3c90d8002d3ec0c" style={{ borderRadius: "0.5rem" }} width="1320" height="1234" data-path="images/database.jpg" />