# General Translation Integrations: Localización de Databricks Apps con React y Node.js
URL: https://generaltranslation.com/es/docs/integrations/databricks/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Traduce una Databricks App creada con AppKit, desde su interfaz de React hasta los resultados de las consultas, con gt-react y gt-node.

AppKit es el SDK de TypeScript de Databricks para crear Databricks Apps. Una app de AppKit es un servidor Express con un cliente React compilado con Vite, así que tiene dos capas de texto y cada una se traduce en un sitio distinto:

* **Texto de la interfaz.** Encabezados, botones y etiquetas en `client/`. [`gt-react`](/docs/react/react-spa-quickstart) los traduce de antemano con la CLI e incluye las traducciones en tu compilación.
* **Datos.** Resultados de consultas, respuestas de Genie y salidas de agentes que solo existen en tiempo de ejecución. [`gt-node`](/docs/node/quickstart) los traduce en el servidor a medida que llegan las solicitudes.

Ambas capas leen la misma configuración regional, de modo que un visitante que elige español ve tanto las etiquetas como los datos en español.

## Antes de empezar [#before-start]

Necesitas:

* Una aplicación de AppKit, por ejemplo, una creada con `databricks apps init`
* Un [proyecto](/docs/platform/dashboard/get-started) y la CLI, con la sesión iniciada mediante [`gt login`](/docs/cli/reference/commands/login)

## Inicio rápido [#quickstart]

### 1. Instala los paquetes

Ejecuta este comando desde la raíz de tu aplicación:

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

### 2. Define tus configuraciones regionales

Crea `gt.config.json` en la raíz de tu aplicación. AppKit guarda el código del cliente en `client/src/`, así que haz que la CLI apunte ahí:

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

Tanto el cliente como el servidor importan este archivo, así que la lista de configuraciones regionales se mantiene en un único lugar.

### 3. Inicializa el cliente

Crea un archivo JSON vacío para cada configuración regional de destino, para que las importaciones se resuelvan antes de generar las traducciones:

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

Agrega un cargador para los archivos de traducción:

```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 archivo de arranque que inicialice `gt-react` antes de que se renderice tu aplicación:

```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'); // renderiza la app solo cuando se hayan cargado las traducciones
```

Luego, haz que `client/index.html` apunte al nuevo archivo:

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

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

### 4. Traduce tu interfaz

Envuelve el texto de la interfaz en [`<T>`](/docs/react/reference/components/t) y añade 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>
  );
}
```

Renderízalo en el componente raíz de tu aplicación:

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

export default function App() {
  return (
    <>
      <Header />
      {/* el resto de tu aplicación */}
    </>
  );
}
```

Cuando un visitante elige un idioma, `gt-react` lo guarda en la cookie `generaltranslation.locale` y recarga la página. En el siguiente paso, el servidor lee esa misma cookie.

### 5. Traduce datos en el servidor

Inicializa `gt-node`, vincula la configuración regional de cada solicitud y traduce texto en tiempo de ejecución 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);

// Primero, la opción del selector de idioma; si no hay, el idioma del navegador
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' }]; // tu consulta
        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);
```

Conserva los plugins que tu aplicación ya registra; agrega solo `onPluginsReady` o amplía el que ya tienes. Si la configuración regional no es compatible, se usa `defaultLocale` como alternativa.

### 6. Agrega las credenciales

Crea una clave de API del proyecto con el permiso **Traducción en tiempo de ejecución** (`project:translations:generate`) y agrégala a `.env` junto con el ID de tu proyecto:

```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) imprime solo la nueva clave, por lo que se puede redirigir directamente al archivo. AppKit carga `.env` en desarrollo, y la CLI también lo lee.

<Callout type="warn">
  **Advertencia:** No incluyas `.env` en el control de versiones y nunca importes estos valores en `client/`. Todo lo que hay en `client/` se envía al navegador.
</Callout>

### 7. Generar traducciones y ejecutar

Traduce el texto de tu interfaz a todas las configuraciones regionales de destino:

```bash
npx gt translate
```

La CLI genera `client/src/_gt/es.json` y `client/src/_gt/ja.json`. Vuelve a ejecutarla cada vez que cambie el texto de la interfaz.

Inicia la aplicación con `npm run dev` y elige **español** en el selector de idioma. Al recargarse la página, el encabezado pasa a mostrarse en español, y `/api/regions` devuelve su nota en español.

## Preguntas frecuentes [#faqs]

### ¿Qué texto pasa por gt-react y cuál por gt-node?

El texto escrito en tu código, como encabezados y etiquetas, pasa por `gt-react`. Se traduce una sola vez con la CLI, así que no supone ningún coste en tiempo de ejecución. El texto que procede de datos, como tablas, Genie o agentes, pasa por [`tx`](/docs/node/reference/functions/tx) en el servidor, ya que no se conoce hasta que se procesa una solicitud. (Consulta [Traducir datos](/docs/integrations/databricks/guides/translating-data)).

### ¿Necesito un plugin de Databricks?

No. `gt-react` y `gt-node` son paquetes de npm normales, y AppKit los ejecuta como cualquier otra dependencia.

### ¿En qué se diferencia de ai_translate de Databricks?

[`ai_translate`](https://docs.databricks.com/aws/en/sql/language-manual/functions/ai_translate) es una función SQL, en versión preliminar pública, que traduce texto al idioma de destino que indiques en una consulta. Es adecuada para traducir datos de tablas en SQL a los idiomas que figuran en su documentación.

Esta configuración, en cambio, traduce la aplicación en función de cada visitante. El idioma del visitante se obtiene del selector de idioma o del navegador, `gt-react` traduce la interfaz de antemano y `gt-node` traduce el contenido en tiempo de ejecución a ese mismo idioma en cada solicitud. Puedes usar ambos: traducir una columna con `ai_translate` en SQL y traducir la aplicación con `gt-react` y `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.