# General Translation Integrations: Localisation des Databricks Apps avec React et Node.js
URL: https://generaltranslation.com/fr/docs/integrations/databricks/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Traduisez une Databricks App créée avec AppKit, de son interface React jusqu’aux résultats de requête, avec gt-react et gt-node.

AppKit est le SDK TypeScript de Databricks pour créer des Databricks Apps. Une application AppKit est un serveur Express associé à un client React compilé par Vite. Elle comporte donc deux couches de texte, traduites chacune à un endroit différent :

* **Texte de l’interface.** Les titres, boutons et libellés de `client/`. [`gt-react`](/docs/react/react-spa-quickstart) les traduit en amont avec la CLI et intègre les traductions à votre build.
* **Données.** Les résultats de requête, les réponses de Genie et les sorties d’agents, qui n’existent qu’à l’exécution. [`gt-node`](/docs/node/quickstart) les traduit côté serveur, au fil des requêtes.

Les deux couches s’appuient sur le même paramètre régional : un visiteur qui choisit l’espagnol voit donc des libellés et des données en espagnol.

## Avant de commencer [#before-start]

Vous aurez besoin de :

* Une application AppKit, par exemple créée avec `databricks apps init`
* Un [projet](/docs/platform/dashboard/get-started) et la CLI, avec une session ouverte via [`gt login`](/docs/cli/reference/commands/login)

## Démarrage rapide [#quickstart]

### 1. Installer les paquets

Exécutez cette commande à la racine de votre application :

```bash
npm i gt-react gt-node
npm i -D gt
```

### 2. Définir vos paramètres régionaux

Créez `gt.config.json` à la racine de votre application. AppKit place le code client dans `client/src/` : pointez donc la CLI vers ce dossier :

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "ja"],
  "src": ["client/src/**/*.{ts,tsx}"],
  "files": {
    "gt": {
      "output": "client/src/_gt/[locale].json"
    }
  }
}
```

Le client et le serveur importent tous deux ce fichier : la liste des paramètres régionaux est ainsi définie en un seul endroit.

### 3. Initialiser le client

Créez un fichier JSON vide pour chaque locale cible, afin que les importations puissent être résolues avant même que vous ne génériez les traductions :

```bash
mkdir -p client/src/_gt
echo '{}' > client/src/_gt/es.json
echo '{}' > client/src/_gt/ja.json
```

Ajoutez un loader pour les fichiers de traduction :

```ts title="client/src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
}
```

Créez un fichier d'amorçage qui initialise `gt-react` avant l'affichage de votre application :

```ts title="client/src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../../gt.config.json';
import loadTranslations from './loadTranslations';

await initializeGTSPA({ ...gtConfig, loadTranslations });

await import('./main'); // n'afficher l'application qu'une fois les traductions chargées
```

Faites ensuite pointer `client/index.html` vers le nouveau fichier :

```html title="client/index.html"
<script type="module" src="/src/main.tsx"></script> <!-- [!code --] -->
<script type="module" src="/src/index.ts"></script> <!-- [!code ++] -->
```

(Voir [Configurer une SPA Vite](/docs/react/guides/spa/configuring-vite-spa).)

### 4. Traduisez votre interface

Encapsulez le texte de votre interface dans [`<T>`](/docs/react/reference/components/t), puis ajoutez un [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) :

```tsx title="client/src/components/Header.tsx"
import { T, LocaleSelector } from 'gt-react';

export function Header() {
  return (
    <header>
      <T>
        <h1>Sales dashboard</h1>
      </T>
      <LocaleSelector />
    </header>
  );
}
```

Affichez-le dans le composant racine de votre application :

```tsx title="client/src/App.tsx"
import { Header } from './components/Header';

export default function App() {
  return (
    <>
      <Header />
      {/* le reste de votre application */}
    </>
  );
}
```

Lorsqu&#39;un visiteur choisit une langue, `gt-react` l&#39;enregistre dans le cookie `generaltranslation.locale` et recharge la page. À l&#39;étape suivante, le serveur lit ce même cookie.

### 5. Traduire des données côté serveur

Initialisez `gt-node`, liez le paramètre régional de chaque requête, puis traduisez le texte à l&#39;exécution avec [`tx`](/docs/node/reference/functions/tx) :

```ts title="server/server.ts"
import type { Request } from 'express';
import { createApp, server } from '@databricks/appkit';
import { initializeGT, withGT, getRequestLocale, tx } from 'gt-node';
import gtConfig from '../gt.config.json' with { type: 'json' };

initializeGT(gtConfig);

// Le choix fait dans le sélecteur de langue, sinon la langue du navigateur
function resolveLocale(req: Request) {
  const picked = req.headers.cookie?.match(/(?:^|;\s*)generaltranslation\.locale=([^;]+)/)?.[1];
  return picked ?? getRequestLocale(req);
}

createApp({
  plugins: [server()],
  onPluginsReady(appkit) {
    appkit.server.extend((app) => {
      app.use('/api', (req, _res, next) => withGT(resolveLocale(req), () => next()));

      app.get('/api/regions', async (_req, res) => {
        const rows = [{ region: 'North America', note: 'Revenue grew in every quarter' }]; // votre requête
        const translated = await Promise.all(
          rows.map(async (row) => ({
            ...row,
            note: await tx(row.note, { $context: 'Analyst note in a sales dashboard' }),
          }))
        );
        res.json(translated);
      });
    });
  },
}).catch(console.error);
```

Conservez les plugins déjà enregistrés par votre application ; ajoutez uniquement `onPluginsReady`, ou étendez celui que vous utilisez déjà. Pour un paramètre régional non pris en charge, `defaultLocale` est utilisé à la place.

### 6. Ajouter les informations d’authentification

Créez une clé API de projet disposant de l’autorisation **Traduction à l’exécution** (`project:translations:generate`), puis ajoutez-la au fichier `.env` avec votre identifiant de projet :

```bash
echo "GT_PROJECT_ID=<project-id>" >> .env
echo "GT_API_KEY=$(npx gt api-key create --project-id <project-id> --name 'Databricks app' --permission project:translations:generate)" >> .env
```

[`gt api-key create`](/docs/cli/reference/commands/api-key-create) n&#39;affiche que la nouvelle clé : vous pouvez donc la rediriger directement dans le fichier. AppKit charge `.env` en développement, et la CLI le lit également.

<Callout type="warn">
  **Attention :** ne versionnez jamais `.env`, et n&#39;importez jamais ces valeurs dans `client/`. Tout ce qui se trouve dans `client/` est envoyé au navigateur.
</Callout>

### 7. Générer des traductions et lancer l&#39;application

Traduisez le texte de votre interface dans chaque locale cible :

```bash
npx gt translate
```

La CLI génère `client/src/_gt/es.json` et `client/src/_gt/ja.json`. Relancez-la à chaque modification du texte de l&#39;interface.

Démarrez l&#39;application avec `npm run dev`, puis choisissez **español** dans le sélecteur de langue. Une fois la page rechargée, le titre s&#39;affiche en espagnol et `/api/regions` renvoie sa note en espagnol.

## FAQ [#faqs]

### Quel texte passe par gt-react et lequel passe par gt-node ?

Le texte écrit dans votre code, comme les titres et les libellés, passe par `gt-react`. Il est traduit une seule fois avec la CLI et ne coûte donc rien à l&#39;exécution. Le texte issu des données, comme les tables, Genie ou les agents, passe par [`tx`](/docs/node/reference/functions/tx) côté serveur, car il n&#39;est connu qu&#39;au moment de l&#39;exécution d&#39;une requête. (Voir [Traduire des données](/docs/integrations/databricks/guides/translating-data).)

### Ai-je besoin d&#39;un plugin Databricks ?

Non. `gt-react` et `gt-node` sont des paquets npm classiques, et AppKit les exécute comme n&#39;importe quelle autre dépendance.

### En quoi est-ce différent de la fonction ai_translate de Databricks ?

[`ai_translate`](https://docs.databricks.com/aws/en/sql/language-manual/functions/ai_translate) est une fonction SQL, actuellement en préversion publique, qui traduit du texte dans une langue cible indiquée dans une requête. Elle est adaptée à la traduction de données de tables en SQL, vers les langues répertoriées dans sa documentation.

Cette configuration, elle, adapte l&#39;application à chaque visiteur. La langue du visiteur est déterminée par le sélecteur de langue ou par le navigateur : `gt-react` traduit l&#39;interface à l&#39;avance, et `gt-node` traduit le contenu dynamique dans la même langue, à chaque requête. Les deux approches sont complémentaires : vous pouvez traduire une colonne avec `ai_translate` en SQL, et l&#39;application avec `gt-react` et `gt-node`.

## Next steps

- /docs/integrations/databricks/guides/translating-data
- /docs/integrations/databricks/guides/deploying

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.