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

> Embeddable est un kit de développement permettant de créer directement dans votre application des expériences d’analytics rapides, interactives et entièrement personnalisées.

# Connecter Embeddable à ClickHouse

export const CommunityMaintainedBadge = () => {
  return <div className="CommunityMaintainedBadge">
            <div className="CommunityMaintainedIcon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
                <path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path>
            </svg>
        </div>
            Géré par la communauté
        </div>;
};

<CommunityMaintainedBadge />

Dans [Embeddable](https://embeddable.com/), vous définissez des [Modèles de données](https://docs.embeddable.com/data-modeling/introduction) et des [Composants](https://docs.embeddable.com/development/introduction) dans le code (stocké dans votre propre repository de code) et utilisez notre **SDK** pour les mettre à la disposition de votre équipe dans le puissant **builder no-code** d’Embeddable.

Le résultat final vous permet de proposer rapidement des analytics interactives orientées client directement dans votre produit ; conçues par votre équipe produit ; développées par votre équipe d’ingénierie ; maintenues par vos équipes en contact avec les clients et vos équipes data. Exactement comme il se doit.

La sécurité intégrée au niveau des lignes signifie que chaque utilisateur ne voit que les données qu’il est autorisé à voir. Et deux niveaux de mise en cache entièrement configurables vous permettent de fournir des analytics rapides en temps réel à grande échelle.

<Steps>
  <Step title="Rassemblez vos informations de connexion" id="1-gather-your-connection-details">
    Pour vous connecter à ClickHouse via HTTP(S), vous avez besoin des informations suivantes :

    | Paramètre(s)              | Description                                                                                                                                    |
    | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
    | `HOST` and `PORT`         | En général, le port est 8443 lors de l’utilisation de TLS, ou 8123 sans TLS.                                                                   |
    | `DATABASE NAME`           | Par défaut, une base de données nommée `default` est disponible ; utilisez le nom de la base de données à laquelle vous voulez vous connecter. |
    | `USERNAME` and `PASSWORD` | Par défaut, le nom d’utilisateur est `default`. Utilisez le nom d’utilisateur adapté à votre cas d’usage.                                      |

    Les informations de votre service ClickHouse Cloud sont disponibles dans la console ClickHouse Cloud.
    Sélectionnez un service, puis cliquez sur **Connect** :

    <div className="ch-image-md">
      <Frame>
        <img src="https://mintcdn.com/private-7c7dfe99/CFFsa2agBPbviR4r/images/_snippets/cloud-connect-button.webp?fit=max&auto=format&n=CFFsa2agBPbviR4r&q=85&s=ec0a298a33ca841e947fa5e8bae47362" alt="Bouton Connect du service ClickHouse Cloud" width="998" height="932" data-path="images/_snippets/cloud-connect-button.webp" />
      </Frame>
    </div>

    Choisissez **HTTPS**. Les détails de connexion s’affichent dans un exemple de commande `curl`.

    <div className="ch-image-md">
      <Frame>
        <img src="https://mintcdn.com/private-7c7dfe99/CFFsa2agBPbviR4r/images/_snippets/connection-details-https.webp?fit=max&auto=format&n=CFFsa2agBPbviR4r&q=85&s=cb0fbd98aa2b5b7ca484c9f53395ee07" alt="Détails de connexion HTTPS ClickHouse Cloud" width="1320" height="1184" data-path="images/_snippets/connection-details-https.webp" />
      </Frame>
    </div>

    Si vous utilisez ClickHouse autogéré, les détails de connexion sont définis par votre administrateur ClickHouse.
  </Step>

  <Step title="Créer un type de connexion ClickHouse" id="2-create-a-clickhouse-connection-type">
    Ajoutez une connexion à une base de données à l’aide de l’Embeddable API. Cette connexion permet de vous connecter à votre service ClickHouse. Vous pouvez ajouter une connexion à l’aide de l’appel d’API suivant :

    ```javascript title="Query" theme={null}
    // for security reasons, this must *never* be called from your client-side
    fetch('https://api.embeddable.com/api/v1/connections', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        Authorization: `Bearer ${apiKey}` /* keep your API Key secure */,
      },
      body: JSON.stringify({
        name: 'my-clickhouse-db',
        type: 'clickhouse',
        credentials: {
          host: 'my.clickhouse.host',
          user: 'clickhouse_user',
          port: 8443,
          password: '*****',
        },
      }),
    });
    ```

    ```text title="Response" theme={null}
    Status 201 { errorMessage: null }
    ```

    Ce qui précède correspond à une action `CREATE`, mais toutes les opérations `CRUD` sont disponibles.

    La `apiKey` se trouve en cliquant sur "**Publish**" dans l’un de vos dashboards Embeddable.

    Le `name` est un nom unique permettant d’identifier cette connexion.

    * Par défaut, vos modèles de données rechercheront une connexion appelée "default", mais vous pouvez fournir à vos modèles différents noms `data_source` afin de connecter différents modèles de données à différentes connexions (il suffit de spécifier le nom de data\_source dans le modèle)

    Le `type` indique à Embeddable quel pilote utiliser.

    * Ici, vous devrez utiliser `clickhouse`, mais vous pouvez connecter plusieurs sources de données différentes à un même espace de travail Embeddable, vous pouvez donc aussi en utiliser d’autres, comme : `postgres`, `bigquery`, `mongodb`, etc.

    Le `credentials` est un objet JavaScript contenant les identifiants nécessaires attendus par le pilote.

    * Ceux-ci sont chiffrés de manière sécurisée et utilisés uniquement pour récupérer exactement les données que vous avez décrites dans vos modèles de données.
      Embeddable vous recommande vivement de créer un utilisateur de base de données en lecture seule pour chaque connexion (Embeddable lira uniquement les données de votre base de données, sans jamais y écrire).

    Pour permettre la connexion à différentes bases de données pour la prod, la QA, le test, etc. (ou pour prendre en charge différentes bases de données pour différents clients), vous pouvez attribuer chaque connexion à un environnement (voir [Environments API](https://docs.embeddable.com/data/environments)).
  </Step>
</Steps>
