github-actions[bot]
a3a6a55051
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
167 lines
11 KiB
Plaintext
167 lines
11 KiB
Plaintext
---
|
|
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>
|