# General Translation Integrations: Localizzazione delle Databricks Apps con React e Node.js
URL: https://generaltranslation.com/it/docs/integrations/databricks/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Traduci una Databricks App creata con AppKit, dall'interfaccia React ai risultati delle query, con gt-react e gt-node.

AppKit è l'SDK TypeScript di Databricks per creare Databricks Apps. Un'app AppKit è un server Express con un client React compilato da Vite: il testo si divide quindi in due livelli, ciascuno tradotto in un punto diverso:

* **Testo dell'interfaccia.** Titoli, pulsanti ed etichette in `client/`. [`gt-react`](/docs/react/react-spa-quickstart) li traduce in anticipo tramite la CLI e include le traduzioni nella build.
* **Dati.** Risultati delle query, risposte di Genie e output degli agenti, che esistono solo a runtime. [`gt-node`](/docs/node/quickstart) li traduce sul server man mano che arrivano le richieste.

Entrambi i livelli usano la stessa impostazione regionale, così un visitatore che sceglie lo spagnolo vede sia le etichette sia i dati in spagnolo.

## Prima di iniziare [#before-start]

Ti servono:

* Un'app AppKit, ad esempio una creata con `databricks apps init`
* Un [progetto](/docs/platform/dashboard/get-started) e la CLI, con accesso effettuato tramite [`gt login`](/docs/cli/reference/commands/login)

## Avvio rapido [#quickstart]

### 1. Installa i pacchetti

Esegui questo comando dalla radice della tua app:

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

### 2. Definisci le impostazioni regionali

Crea `gt.config.json` nella radice della tua app. AppKit tiene il codice client in `client/src/`, quindi fai puntare lì la CLI:

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

Questo file viene importato sia dal client sia dal server, così l'elenco delle impostazioni regionali è definito in un unico punto.

### 3. Inizializza il client

Crea un file JSON vuoto per ogni impostazione regionale di destinazione, così che le importazioni vengano risolte prima di generare le traduzioni:

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

Aggiungi un loader per i file di traduzione:

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

Crea un file di bootstrap che inizializzi `gt-react` prima del rendering della tua app:

```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'); // renderizza l'app solo dopo il caricamento delle traduzioni
```

Quindi fai puntare `client/index.html` al nuovo file:

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

(Vedi [Configurare una SPA con Vite](/docs/react/guides/spa/configuring-vite-spa)).

### 4. Traduci l&#39;interfaccia

Racchiudi il testo dell&#39;interfaccia in [`<T>`](/docs/react/reference/components/t) e aggiungi 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>
  );
}
```

Renderizzalo nel componente radice della tua app:

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

export default function App() {
  return (
    <>
      <Header />
      {/* il resto della tua app */}
    </>
  );
}
```

Quando un visitatore sceglie una lingua, `gt-react` la salva nel cookie `generaltranslation.locale` e ricarica la pagina. Nel passaggio successivo, il server legge questo stesso cookie.

### 5. Traduci i dati sul server

Inizializza `gt-node`, associa l&#39;impostazione regionale a ogni richiesta e traduci il testo a runtime con [`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);

// Prima la lingua scelta nel selettore della lingua, poi quella del browser
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' }]; // la tua query
        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);
```

Mantieni i plugin già registrati dalla tua app; aggiungi solo `onPluginsReady` oppure estendi quello che hai già. Per un&#39;impostazione regionale non supportata viene usato come fallback `defaultLocale`.

### 6. Aggiungi le credenziali

Crea una chiave API di progetto con il permesso **Runtime translation** (`project:translations:generate`) e aggiungila al file `.env` insieme al tuo ID progetto:

```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) stampa solo la nuova chiave, quindi l&#39;output può essere scritto direttamente nel file. AppKit carica `.env` in fase di sviluppo e lo legge anche la CLI.

<Callout type="warn">
  **Attenzione:** escludi `.env` dal controllo di versione e non importare mai questi valori in `client/`. Tutto ciò che si trova in `client/` finisce nel browser.
</Callout>

### 7. Genera le traduzioni ed esegui

Traduci il testo dell&#39;interfaccia in tutte le impostazioni regionali di destinazione:

```bash
npx gt translate
```

La CLI genera `client/src/_gt/es.json` e `client/src/_gt/ja.json`. Eseguila di nuovo ogni volta che modifichi i testi dell&#39;interfaccia.

Avvia l&#39;app con `npm run dev`, quindi seleziona **español** nel selettore della lingua. Dopo il ricaricamento della pagina, l&#39;intestazione viene mostrata in spagnolo e `/api/regions` restituisce la nota in spagnolo.

## Domande frequenti [#faqs]

### Quale testo passa per gt-react e quale per gt-node?

Il testo scritto nel codice, come titoli ed etichette, passa per `gt-react`. Viene tradotto una sola volta con la CLI, quindi non comporta alcun costo a runtime. Il testo che proviene dai dati, come tabelle, Genie o agenti, passa invece per [`tx`](/docs/node/reference/functions/tx) sul server, perché diventa noto solo durante l&#39;esecuzione di una richiesta. (Vedi [Tradurre i dati](/docs/integrations/databricks/guides/translating-data)).

### Serve un plugin per Databricks?

No. `gt-react` e `gt-node` sono comuni pacchetti npm e AppKit li esegue come qualsiasi altra dipendenza.

### In cosa differisce da ai_translate di Databricks?

[`ai_translate`](https://docs.databricks.com/aws/en/sql/language-manual/functions/ai_translate) è una funzione SQL, attualmente in Public Preview, che traduce il testo nella lingua di destinazione indicata in una query. È pensata per tradurre i dati delle tabelle direttamente in SQL, nelle lingue elencate nella sua documentazione.

Questa configurazione, invece, traduce l&#39;app in base a ciascun visitatore. La lingua del visitatore viene ricavata dal selettore della lingua o dal browser: `gt-react` traduce l&#39;interfaccia in anticipo, mentre `gt-node` traduce i contenuti a Runtime nella stessa lingua a ogni richiesta. Puoi usare entrambi: traduci una colonna con `ai_translate` in SQL e l&#39;app con `gt-react` e `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.