# General Translation Integrations: Быстрый старт
URL: https://generaltranslation.com/ru/docs/integrations/rrweb/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Установите gt-rrweb, запишите пошаговый обзор продукта один раз и воспроизводите его на любой локали на основе опубликованных переводов.

`gt-rrweb` превращает один записанный пошаговый обзор продукта в воспроизведение, которое можно опубликовать на любой локали. Запишите сценарий один раз, сопоставьте его текст с вашими существующими каталогами переводов — и зрители будут смотреть его на своём языке.

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

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

* React и React DOM 18 или новее. Общая точка входа replay также требует эти peer-зависимости, даже если вы используете только её DOM API.
* Браузерное приложение, публикующее свои каталоги переводов.
* Функция, загружающая один опубликованный каталог по локали — тот же загрузчик, который использует ваше приложение.

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

### 1. Установите `gt-rrweb`

Установите `gt-rrweb` вместе с пакетами rrweb, которые он использует для записи и воспроизведения.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>
</Tabs>

### 2. Передайте хеши переводов в DOM

Рекордер сопоставляет отрисованное содержимое [`<T>`](/docs/react/reference/components/t) с его опубликованным переводом по хешу DOM. Включите параметр [`_tagIds`](/docs/react/reference/config#tag-ids) в существующем config, чтобы эти хеши попадали в DOM.

```json title="gt.config.json"
{
  "_tagIds": true
}
```

### 3. Добавьте рекордер

Один раз смонтируйте [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) внутри провайдера переводов и передайте ему загрузчик каталога, который использует ваше приложение. После этого любой вложенный компонент сможет управлять сессией с помощью [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder).

```tsx title="src/RecordingTools.tsx"
'use client';

import { GTRecorder, useRecorder, type RecorderBundle } from 'gt-rrweb';
import loadTranslations from './loadTranslations';

function download(bundle: RecorderBundle) {
  const url = URL.createObjectURL(
    new Blob([JSON.stringify(bundle)], { type: 'application/json' })
  );
  const link = document.createElement('a');
  link.href = url;
  link.download = 'walkthrough.json';
  link.click();
  URL.revokeObjectURL(url);
}

function Controls() {
  const { start, stop, status } = useRecorder();

  return (
    <div>
      <button onClick={() => start({ locales: ['en', 'es', 'fr'] })}>
        Record
      </button>
      <button onClick={stop} disabled={status !== 'recording'}>
        Stop
      </button>
    </div>
  );
}

export default function RecordingTools() {
  return (
    <>
      <Controls />
      <GTRecorder
        harvest={{ loadTranslations, sourceLocale: 'en' }}
        onComplete={download}
      />
    </>
  );
}
```

Первая локаль, переданная в `start()`, — это та, в которой ведётся запись; все остальные локали собираются из ваших каталогов. Остановка дожидается завершения этого сбора, вызывает `onComplete` с готовым бандлом и возвращает этот же бандл.

### 4. Запишите пошаговый обзор продукта

Нажмите **Record**, выполните сценарий в исходной локали, затем нажмите **Stop**. Записываются клики, переходы, изменения DOM, положение прокрутки и содержимое страницы. Значения полей форм маскируются, а телеметрия движений мыши не сохраняется. Просмотрите запись перед публикацией; см. [Сохранение бандла](/docs/integrations/rrweb/guides/recording-walkthroughs#store-bundle).

### 5. Воспроизведение бандла

Импортируйте сохранённый JSON и отрендерите [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer) там, где должен отображаться пошаговый обзор продукта.

```tsx title="src/Walkthrough.tsx"
'use client';

import { GTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

export default function Walkthrough() {
  return <GTReplayer bundle={bundle} style={{ height: '480px' }} />;
}
```

Плеер запускается в исходной локали записи и показывает элементы управления для локалей, перечисленных в бандле.

Утверждение типа описывает JSON-файл, созданный рекордером; оно не проверяет произвольный загруженный файл. Для записей без кадра захвата явно задавайте высоту воспроизведения, как в примере.

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/recording-walkthroughs
- /docs/integrations/rrweb/guides/replaying-recordings

## Sitemap

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