# General Translation Integrations: Локализация Databricks Apps с React и Node.js
URL: https://generaltranslation.com/ru/docs/integrations/databricks/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Переведите приложение Databricks App, созданное на AppKit, — от интерфейса на React до результатов запросов — с помощью gt-react и gt-node.

AppKit — это TypeScript SDK от Databricks для создания Databricks Apps. Приложение на AppKit — это сервер Express с React-клиентом, который собирается с помощью Vite. Поэтому текст в нём находится на двух уровнях, и каждый из них переводится в своём месте:

* **Текст интерфейса.** Заголовки, кнопки и подписи в `client/`. [`gt-react`](/docs/react/react-spa-quickstart) переводит их заранее с помощью CLI и поставляет переводы вместе со сборкой.
* **Данные.** Результаты запросов, ответы Genie и вывод агентов, которые появляются только во время выполнения. [`gt-node`](/docs/node/quickstart) переводит их на сервере по мере поступления запросов.

Оба уровня используют одну и ту же локаль, поэтому посетитель, выбравший испанский язык, видит на испанском и подписи, и данные.

## Перед началом работы [#before-start]

Вам понадобятся:

* Приложение AppKit, например созданное командой `databricks apps init`
* [Проект](/docs/platform/dashboard/get-started) и CLI с выполненным входом через [`gt login`](/docs/cli/reference/commands/login)

## Быстрый старт [#quickstart]

### 1. Установите пакеты

Выполните эту команду в корневом каталоге приложения:

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

### 2. Определите локали

Создайте `gt.config.json` в корневом каталоге приложения. AppKit хранит клиентский код в `client/src/`, поэтому направьте CLI туда:

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

Этот файл импортируют и клиент, и сервер, поэтому список локалей задаётся в одном месте.

### 3. Инициализируйте клиент

Создайте пустой JSON-файл для каждой целевой локали, чтобы инструкции импорта разрешались ещё до того, как вы создадите переводы:

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

Добавьте загрузчик для файлов перевода:

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

Создайте bootstrap-файл, который инициализирует `gt-react` до рендеринга приложения:

```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'); // рендерим приложение только после загрузки переводов
```

Затем подключите новый файл в `client/index.html`:

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

(См. [Настройка Vite SPA](/docs/react/guides/spa/configuring-vite-spa)).

### 4. Переведите интерфейс

Оберните текст интерфейса в [`<T>`](/docs/react/reference/components/t) и добавьте [`<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>
  );
}
```

Отрендерите его в корневом компоненте приложения:

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

export default function App() {
  return (
    <>
      <Header />
      {/* остальной код приложения */}
    </>
  );
}
```

Когда посетитель выбирает язык, `gt-react` сохраняет его в cookie-файле `generaltranslation.locale` и перезагружает страницу. На следующем шаге сервер считывает этот же cookie-файл.

### 5. Перевод данных на сервере

Инициализируйте `gt-node`, привяжите локаль к каждому запросу и переводите текст во время выполнения с помощью [`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);

// Сначала язык, выбранный в элементе выбора языка, затем язык браузера
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' }]; // ваш запрос
        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);
```

Оставьте плагины, которые ваше приложение уже регистрирует: добавьте только `onPluginsReady` или расширьте уже имеющийся. Вместо неподдерживаемой локали используется `defaultLocale`.

### 6. Добавьте учётные данные

Создайте ключ API проекта с разрешением **Перевод во время выполнения** (`project:translations:generate`) и добавьте его в `.env` вместе с идентификатором проекта:

```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) выводит только новый ключ, поэтому его можно сразу записать в файл. AppKit загружает `.env` в режиме разработки, а CLI тоже читает этот файл.

<Callout type="warn">
  **Предупреждение:** Не добавляйте `.env` в систему контроля версий и никогда не импортируйте эти значения в `client/`. Всё содержимое `client/` попадает в браузер.
</Callout>

### 7. Создайте переводы и запустите приложение

Переведите текст интерфейса на все целевые локали:

```bash
npx gt translate
```

CLI создаёт файлы `client/src/_gt/es.json` и `client/src/_gt/ja.json`. Запускайте его повторно при каждом изменении текста интерфейса.

Запустите приложение командой `npm run dev`, затем выберите **español** в элементе выбора языка. После перезагрузки страницы заголовок отобразится на испанском, а `/api/regions` вернёт заметку тоже на испанском.

## Часто задаваемые вопросы [#faqs]

### Какой текст обрабатывается через gt-react, а какой — через gt-node?

Текст, который задан прямо в коде, например заголовки и подписи, обрабатывается через `gt-react`. Он переводится один раз с помощью CLI, поэтому во время выполнения не создаёт никаких затрат. Текст, поступающий из данных, например из таблиц, Genie или от агентов, обрабатывается на сервере через [`tx`](/docs/node/reference/functions/tx), поскольку он становится известен только при выполнении запроса. (См. [Перевод данных](/docs/integrations/databricks/guides/translating-data)).

### Нужен ли плагин для Databricks?

Нет. `gt-react` и `gt-node` — обычные npm-пакеты, и AppKit работает с ними так же, как с любыми другими зависимостями.

### Чем это отличается от ai_translate в Databricks?

[`ai_translate`](https://docs.databricks.com/aws/en/sql/language-manual/functions/ai_translate) — это SQL-функция (в статусе Public Preview), которая переводит текст на язык перевода, переданный в запросе. Она подходит для перевода табличных данных средствами SQL на языки, перечисленные в её документации.

Эта же настройка переводит само приложение под каждого посетителя. Язык посетителя определяется по элементу выбора языка или настройкам браузера: `gt-react` заранее переводит интерфейс, а `gt-node` при каждом запросе переводит на тот же язык контент, формируемый во время выполнения. Оба подхода можно совмещать: переводить столбец с помощью `ai_translate` в SQL, а приложение — с помощью `gt-react` и `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.