---
title: Rychlý start
icon: rocket
description: Vytvořte svou první aplikaci Twenty během několika minut.
---

## Předpoklady

* **Node.js 24.5+** — [Stáhnout](https://nodejs.org/)
* **Yarn 4** — je součástí Node.js prostřednictvím Corepacku. Povolte jej: `corepack enable`
* **Docker** — [Stáhnout](https://www.docker.com/products/docker-desktop/). Nutné pro spuštění lokálního serveru Twenty. Přeskočte, pokud už máte Twenty spuštěné jinde.

Vytváření aplikace Twenty má tři fáze. Generátor kostry je spojuje do jediného příkazu pro ideální scénář, ale každá fáze je samostatný koncept — když se něco nepovede, znalost aktuální fáze napoví, co opravit.

| Fáze                   | Co děláte                                                | Nástroj                             | Výsledek                                     |
| ---------------------- | -------------------------------------------------------- | ----------------------------------- | -------------------------------------------- |
| **1. Vytvořit kostru** | Vygenerovat zdrojový kód aplikace                        | `npx create-twenty-app`             | Projekt v TypeScriptu na disku               |
| **2. Spustit server**  | Spustit server Twenty, do kterého se bude synchronizovat | Docker + `yarn twenty docker:start` | Běžící instance Twenty                       |
| **3. Synchronizovat**  | Živě synchronizovat kód na server                        | `yarn twenty dev`                   | Vaše změny se objeví v uživatelském rozhraní |

---

## Fáze 1 — Vytvořte kostru projektu

Vytvořte novou aplikaci ze šablony:

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

Generátor kostry je neinteraktivní: název adresáře se stane názvem aplikace. Předejte `--display-name` a `--description` pro přizpůsobení vygenerovaných metadat (později je můžete také upravit v `src/constants/universal-identifiers.ts`). Tím se v `my-twenty-app/` vytvoří projekt v TypeScriptu se startovacím `application-config.ts`, výchozí rolí, pracovními postupy CI/CD a integračním testem.

**Po této fázi:** máte na svém počítači zdrojový kód aplikace. Zatím neběží — to je předmětem Fáze 2.

---

## Fáze 2 — Spusťte lokální server Twenty

Vaše aplikace potřebuje server Twenty, do kterého se bude synchronizovat. Server je plnohodnotná instance Twenty — UI, GraphQL API, PostgreSQL — běžící lokálně v Dockeru. Váš lokální kód nahrává své definice na tento server, díky čemuž se objeví v UI.

Nástroj pro vytváření projektů to spustí za vás: při spuštěném Dockeru stáhne image `twentycrm/twenty-app-dev`, spustí ji na portu `2020` a autentizuje CLI vůči předpřipravenému demo workspace (`tim@apple.dev`) — není vyžadováno žádné přihlášení.

Chcete-li se místo toho připojit k existujícímu serveru Twenty, předejte `--url \<your-server-url>`. Vzdálené servery se ověřují pomocí OAuth: otevře se prohlížeč, abyste se mohli přihlásit a kliknout na **Authorize**, čímž udělíte nástroji CLI přístup k vašemu pracovnímu prostoru. (Můžete se také rozhodnout pro OAuth lokálně pomocí `--authentication-method oauth` — přihlaste se pomocí `tim@apple.dev` / `tim@apple.dev`.)

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/login.png" alt="Přihlašovací obrazovka Twenty" />
</div>

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/authorize.png" alt="Autorizační obrazovka Twenty CLI" />
</div>

Váš terminál potvrdí, že je vše nastaveno.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/scaffolded.png" alt="Aplikace byla úspěšně vygenerována" />
</div>

**Po této fázi:** máte spuštěný server Twenty na [http://localhost:2020](http://localhost:2020) a vaše CLI má oprávnění se k němu synchronizovat.

<Note>
Pokud Docker není nainstalovaný nebo neběží, generátor kostry vám sdělí správný příkaz pro spuštění ve vašem operačním systému. Jakmile Docker poběží, můžete pokračovat pomocí `yarn twenty docker:start` — není potřeba znovu vytvářet kostru.
</Note>

---

## Fáze 3 — Synchronizujte své změny

Toto je vnitřní smyčka, ve které strávíte většinu času.

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

Tento proces sleduje `src/`, při každé změně znovu sestaví a synchronizuje výsledek na server. Upravte soubor, uložte a během několika vteřin se změna projeví na serveru. V terminálu uvidíte panel se stavem v reálném čase.

Pro podrobnější výstup (protokoly sestavení, požadavky na synchronizaci, stopy chyb) přidejte `--verbose`.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/dev.png" alt="Výstup terminálu ve vývojovém režimu" />
</div>

Otevřete [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer). Vaše aplikace by měla být uvedena v části **Your Apps**.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-1.png" alt="Seznam Your Apps se zobrazenou aplikací My twenty app" />
</div>

Klikněte na **My twenty app** a zobrazí se jeho **registrace aplikace** — záznam na úrovni serveru, který popisuje vaši aplikaci (název, identifikátor, přihlašovací údaje OAuth, zdroj). Jedna registrace může být nainstalována ve více pracovních prostorech na stejném serveru.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-2.png" alt="Podrobnosti registrace aplikace" />
</div>

Klikněte na **View installed app**, abyste zobrazili instalaci v pracovním prostoru. Karta **About** zobrazuje verzi a možnosti správy.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-3.png" alt="Nainstalovaná aplikace" />
</div>

**Po této fázi:** máte průběžný vývojový cyklus. Upravte libovolný soubor v `src/` a projeví se to v UI.

### Jednorázová synchronizace pro CI a skripty

Použijte `plan` a `apply` ke spuštění stejné pipeline jednorázově, bez watcheru:

```bash filename="Terminal"
yarn twenty plan   # preview the metadata changes without applying them
yarn twenty apply  # show the plan, then apply it
```

| Příkaz              | Chování                                                                                                                                                                | Kdy použít                                                               |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `yarn twenty dev`   | Sleduje změny a při každé změně znovu synchronizuje. Běží, dokud jej nezastavíte.                                                                                      | Interaktivní lokální vývoj.                                              |
| `yarn twenty apply` | Jedno sestavení + synchronizace, ukončí se s kódem `0` při úspěchu, `1` při chybě. Vyžádá si potvrzení destruktivních změn (předejte `--force`, abyste to přeskočili). | CI, pre-commit hooky, AI agenti, skriptované pracovní postupy.           |
| `yarn twenty plan`  | Sestaví a vypíše změny metadat **bez jejich použití**.                                                                                                                 | Kontrola toho, co by synchronizace změnila, ještě před jejím potvrzením. |

Všechny režimy vyžadují autentizovaný vzdálený server. Více informací o `plan` najdete v části [Synchronizace a obnovení](/l/cs/developers/extend/apps/operations/sync-and-recovery#previewing-changes-plan).

<Note>
`yarn twenty dev --once` a `yarn twenty dev --once --dry-run` jsou zastaralé aliasy pro `yarn twenty apply` a `yarn twenty plan`.
</Note>

### Možnosti vývojového režimu

| Přepínač                              | Popis                                                                                         |
| ------------------------------------- | --------------------------------------------------------------------------------------------- |
| `--force`                             | Aplikuje destruktivní změny (mazání) bez potvrzení.                                           |
| `--debounceMs \<ms>` | Nastaví prodlevu pro potlačení zákmitů při změnách souborů v milisekundách (výchozí: `1000`). |
| `--verbose` / `--debug`               | Zobrazí podrobné protokoly sestavení, požadavky synchronizace a trasování chyb.               |

## Co můžete vytvořit

Aplikace se skládají z **entit** — každá je definována jako soubor TypeScriptu s jediným `export default`:

| Entita                     | K čemu slouží                                                                                                       |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **Objekty a pole**         | Vlastní datové modely (pohlednice, faktura apod.) s typovanými poli                                                 |
| **Logické funkce**         | Serverový TypeScript spouštěný HTTP trasami, plánovačem cron nebo událostmi databáze                                |
| **Frontendové komponenty** | Komponenty Reactu, které se vykreslují v uživatelském rozhraní Twenty (postranní panel, widgety, příkazová nabídka) |
| **Dovednosti a agenti**    | Schopnosti AI — opakovaně použitelné pokyny a autonomní asistenti                                                   |
| **Pohledy a navigace**     | Předkonfigurované seznamové pohledy a položky postranní nabídky                                                     |
| **Rozvržení stránek**      | Vlastní stránky detailu záznamu s kartami a widgety                                                                 |

Úplná reference: [Koncepty](/l/cs/developers/extend/apps/getting-started/concepts).

## Další kroky

<CardGroup cols={2}>
  <Card title="Konfigurace" icon="screwdriver-wrench" href="/l/cs/developers/extend/apps/config/overview">
    Identita aplikace, výchozí role, instalační i odinstalační hooky, veřejná aktiva.
  </Card>
  <Card title="Data" icon="database" href="/l/cs/developers/extend/apps/data/overview">
    Objekty, pole a obousměrné relace.
  </Card>
  <Card title="Logika" icon="bolt" href="/l/cs/developers/extend/apps/logic/overview">
    Logické funkce, dovednosti, agenti a připojení přes OAuth.
  </Card>
  <Card title="Rozvržení" icon="table-columns" href="/l/cs/developers/extend/apps/layout/overview">
    Zobrazení, navigace, rozvržení stránek, frontendové komponenty.
  </Card>
  <Card title="Operace" icon="rocket" href="/l/cs/developers/extend/apps/operations/overview">
    CLI, testování, vzdálené repozitáře, CI a publikování vaší aplikace.
  </Card>
</CardGroup>
