---
title: Быстрый старт
icon: rocket
description: Создайте своё первое приложение Twenty за считанные минуты.
---

## Требования

* **Node.js 24+** — [Скачать здесь](https://nodejs.org/)
* **Yarn 4** — поставляется вместе с Node.js через Corepack. Включите его, выполнив `corepack enable`
* **Docker** — [Скачать здесь](https://www.docker.com/products/docker-desktop/). Требуется для запуска локального экземпляра Twenty. Пропустите, если у вас уже запущен Twenty в другом месте.

Создание приложения Twenty включает три фазы. Генератор каркаса объединяет их в одну команду для идеального сценария (happy path), но каждая фаза — отдельная концепция: когда что-то идёт не так, понимание того, на какой фазе вы находитесь, подскажет, что исправить.

| Фаза                    | Что вы делаете                                    | Инструмент                    | Результат                              |
| ----------------------- | ------------------------------------------------- | ----------------------------- | -------------------------------------- |
| **1. Создание каркаса** | Сгенерировать исходный код приложения             | `npx create-twenty-app`       | Проект TypeScript на диске             |
| **2. Запустить сервер** | Запустить сервер Twenty для синхронизации         | Docker + `yarn twenty server` | Запущенный экземпляр Twenty            |
| **3. Синхронизация**    | Синхронизируйте код с сервером в реальном времени | `yarn twenty dev`             | Ваши изменения появляются в интерфейсе |

---

## Фаза 1 — Сгенерируйте каркас проекта

Создайте новое приложение из шаблона:

```bash filename="Terminal"
npx create-twenty-app@latest my-twenty-app
```

Вам будет предложено ввести имя и описание — нажмите **Enter**, чтобы принять значения по умолчанию. Это создаст проект TypeScript в `my-twenty-app/` с начальным файлом `application-config.ts`, ролью по умолчанию, рабочим процессом CI и интеграционным тестом.

**После этой фазы:** у вас есть исходный код приложения на вашем компьютере. Он ещё не запущен — это фаза 2.

---

## Фаза 2 — Запустите локальный сервер Twenty

Вашему приложению нужен сервер Twenty для синхронизации. Сервер — это полноценный экземпляр Twenty — UI, GraphQL API, PostgreSQL — работающий локально в Docker. Ваш локальный код загружает свои определения на этот сервер, благодаря чему они появляются в интерфейсе.

Генератор каркаса предложит запустить его за вас:

> **Хотите настроить локальный экземпляр Twenty?**

* **Да (рекомендуется)** — скачивает Docker-образ `twentycrm/twenty-app-dev` и запускает его на порту `2020`. Сначала убедитесь, что Docker запущен.
* **Нет** — выберите это, если у вас уже есть сервер Twenty, к которому вы хотите подключиться. Позже вы можете подключить его с помощью `yarn twenty remote add`.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/start-instance.png" alt="Запустить локальный экземпляр?" />
</div>

Когда сервер будет запущен, откроется браузер для входа. Используйте предварительно созданную демонстрационную учётную запись:

* **Электронная почта:** `tim@apple.dev`
* **Пароль:** `tim@apple.dev`

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/login.png" alt="Экран входа в Twenty" />
</div>

На следующем экране нажмите **Authorize** — это даст CLI доступ к вашему рабочему пространству.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/authorize.png" alt="Экран авторизации Twenty CLI" />
</div>

В вашем терминале появится подтверждение, что всё настроено.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/scaffolded.png" alt="Каркас приложения успешно создан" />
</div>

**После этой фазы:** у вас запущен сервер Twenty на [http://localhost:2020](http://localhost:2020), а ваш CLI авторизован для синхронизации с ним.

<Note>
Если Docker не установлен или не запущен, генератор каркаса подскажет правильную команду запуска для вашей ОС. Когда Docker будет запущен, вы можете продолжить с `yarn twenty server start` — заново генерировать каркас не нужно.
</Note>

---

## Фаза 3 — Синхронизируйте свои изменения

Это внутренний цикл, в котором вы проведёте большую часть времени.

```bash filename="Terminal"
cd my-twenty-app
yarn twenty dev
```

Эта команда отслеживает `src/`, пересобирает при каждом изменении и синхронизирует результат с сервером. Отредактируйте файл, сохраните — и через несколько секунд сервер отразит изменения. В терминале появится панель текущего статуса.

Для более подробного вывода (журналы сборки, запросы синхронизации, трассировки ошибок) добавьте `--verbose`.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/dev.png" alt="Вывод терминала в режиме разработки" />
</div>

Откройте [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer). Вы должны увидеть своё приложение в разделе **Your Apps**.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-1.png" alt="Список Your Apps с приложением My twenty app" />
</div>

Нажмите **My twenty app**, чтобы открыть его регистрацию приложения — запись на уровне сервера, описывающую ваше приложение (имя, идентификатор, учётные данные OAuth, источник). Одну и ту же регистрацию можно установить в нескольких рабочих пространствах на одном сервере.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-2.png" alt="Сведения о регистрации приложения" />
</div>

Нажмите **View installed app**, чтобы посмотреть установку в рабочем пространстве. Вкладка **About** показывает версию и параметры управления.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-3.png" alt="Установленное приложение" />
</div>

**После этой фазы:** у вас есть интерактивный цикл разработки. Отредактируйте любой файл в `src/`, и он появится в интерфейсе.

### Разовая синхронизация для CI и скриптов

Передайте `--once`, чтобы выполнить одну сборку и синхронизацию и завершить работу — тот же конвейер, без наблюдателя:

```bash filename="Terminal"
yarn twenty dev --once
```

| Команда                  | Поведение                                                                                                   | Когда использовать                                           |
| ------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| `yarn twenty dev`        | Отслеживает и повторно синхронизирует при каждом изменении. Продолжает работать, пока вы его не остановите. | Интерактивная локальная разработка.                          |
| `yarn twenty dev --once` | Одна сборка и синхронизация, завершает работу с кодом `0` при успехе и `1` при ошибке.                      | CI, хуки pre-commit, AI-агенты, скриптовые рабочие процессы. |

Оба режима требуют аутентифицированного удалённого репозитория.

### Параметры режима разработки

| Флаг                                  | Описание                                                                              |
| ------------------------------------- | ------------------------------------------------------------------------------------- |
| `--once`                              | Выполнить сборку и синхронизацию один раз, затем завершить работу.                    |
| `--debounceMs \<ms>` | Установить задержку дебаунса изменений файлов в миллисекундах (по умолчанию: `2000`). |
| `--verbose` / `--debug`               | Показывать подробные журналы сборки, запросы синхронизации и трассировки ошибок.      |

## Что вы можете создать

Приложения состоят из **сущностей** — каждая определена как файл TypeScript с одним `export default`:

| Сущность                      | Что делает                                                                                                |
| ----------------------------- | --------------------------------------------------------------------------------------------------------- |
| **Объекты и поля**            | Пользовательские модели данных (почтовая открытка, счёт и т. д.) с типизированными полями                 |
| **Логические функции**        | Серверный TypeScript, запускаемый HTTP-маршрутами, расписаниями cron или событиями базы данных            |
| **Фронтенд-компоненты**       | React-компоненты, которые отображаются внутри интерфейса Twenty (боковая панель, виджеты, командное меню) |
| **Навыки и агенты**           | Возможности ИИ — многократно используемые инструкции и автономные помощники                               |
| **Представления и навигация** | Предварительно настроенные представления списков и элементы бокового меню                                 |
| **Макеты страниц**            | Пользовательские страницы сведений о записи с вкладками и виджетами                                       |

Полная справка: [Концепции](/l/ru/developers/extend/apps/getting-started/concepts).

## Следующие шаги

<CardGroup cols={2}>
  <Card title="Конфигурация" icon="screwdriver-wrench" href="/l/ru/developers/extend/apps/config/overview">
    Идентификация приложения, роль по умолчанию, хуки установки, публичные ресурсы.
  </Card>
  <Card title="Данные" icon="database" href="/l/ru/developers/extend/apps/data/overview">
    Объекты, поля и двунаправленные связи.
  </Card>
  <Card title="Логика" icon="bolt" href="/l/ru/developers/extend/apps/logic/overview">
    Логические функции, навыки, агенты и OAuth-подключения.
  </Card>
  <Card title="Макет" icon="table-columns" href="/l/ru/developers/extend/apps/layout/overview">
    Представления, навигация, макеты страниц, фронтенд-компоненты.
  </Card>
  <Card title="Операции" icon="rocket" href="/l/ru/developers/extend/apps/operations/overview">
    CLI, тестирование, удалённые серверы, CI и публикация вашего приложения.
  </Card>
</CardGroup>
