upstream-twenty/packages/twenty-docs/l/ro/developers/extend/apps/getting-started/quick-start.mdx

---
title: Pornire rapidă
icon: rocket
description: Creați prima dvs. aplicație Twenty în câteva minute.
---

## Cerințe

* **Node.js 24.5+** — [Descărcați](https://nodejs.org/)
* **Yarn 4** — vine împreună cu Node prin Corepack. Activați-l: `corepack enable`
* **Docker** — [Descărcați](https://www.docker.com/products/docker-desktop/). Necesar pentru a rula un server Twenty local. Omiteți dacă rulați deja Twenty în altă parte.

Crearea unei aplicații Twenty are trei faze. Generatorul le reunește într-o singură comandă pe calea optimă, dar fiecare fază este un concept separat — când ceva eșuează, dacă știți în ce fază sunteți, știți ce trebuie să corectați.

| Fază                    | Ce faceți                                        | Instrument                          | Rezultat                       |
| ----------------------- | ------------------------------------------------ | ----------------------------------- | ------------------------------ |
| **1. Creați scheletul** | Generați codul sursă al aplicației               | `npx create-twenty-app`             | Un proiect TypeScript pe disc  |
| **2. Rulați un server** | Porniți un server Twenty cu care să sincronizați | Docker + `yarn twenty docker:start` | O instanță Twenty care rulează |
| **3. Sincronizați**     | Sincronizați în timp real codul cu serverul      | `yarn twenty dev`                   | Modificările apar în UI        |

---

## Faza 1 — Creați scheletul proiectului

Creați o nouă aplicație din șablon:

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

Generatorul este neinteractiv: numele directorului devine numele aplicației. Transmite `--display-name` și `--description` pentru a personaliza metadatele generate (le poți edita și mai târziu în `src/constants/universal-identifiers.ts`). Aceasta generează un proiect TypeScript în `my-twenty-app/` cu un fișier inițial `application-config.ts`, un rol implicit, fluxuri de lucru CI/CD și un test de integrare.

**După această fază:** aveți codul sursă al aplicației pe mașina dvs. Încă nu rulează — aceasta este Faza 2.

---

## Faza 2 — Rulați un server Twenty local

Aplicația are nevoie de un server Twenty cu care să se sincronizeze. Serverul este o instanță Twenty completă — UI, API GraphQL, PostgreSQL — care rulează local în Docker. Codul local încarcă definițiile pe acel server, făcându-le să apară în UI.

Generatorul de proiecte pornește unul pentru tine: cu Docker rulând, descarcă imaginea `twentycrm/twenty-app-dev`, o pornește pe portul `2020` și autentifică CLI-ul față de spațiul de lucru demo preconfigurat (`tim@apple.dev`) — fără a fi necesară autentificarea.

Pentru a te conecta în schimb la un server Twenty existent, treci argumentul `--url \<your-server-url>`. Serverele la distanță se autentifică prin OAuth: se deschide un browser astfel încât să te poți autentifica și să dai clic pe **Authorize**, ceea ce oferă CLI-ului acces la spațiul tău de lucru. (Poți opta pentru OAuth și local cu `--authentication-method oauth` — autentifică-te cu `tim@apple.dev` / `tim@apple.dev`.)

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/login.png" alt="Ecranul de autentificare Twenty" />
</div>

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/authorize.png" alt="Ecranul de autorizare Twenty CLI" />
</div>

Terminalul va confirma că totul este configurat.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/scaffolded.png" alt="Aplicația a fost creată cu succes" />
</div>

**După această fază:** aveți un server Twenty care rulează la [http://localhost:2020](http://localhost:2020), iar CLI-ul dvs. este autorizat să sincronizeze cu acesta.

<Note>
Dacă Docker nu este instalat sau nu rulează, generatorul de schelet vă va indica comanda corectă de pornire pentru sistemul dvs. de operare. După ce Docker rulează, puteți continua cu `yarn twenty docker:start` — nu este nevoie să recreați scheletul.
</Note>

---

## Faza 3 — Sincronizați modificările

Aceasta este bucla internă în care veți petrece cea mai mare parte a timpului.

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

Aceasta monitorizează `src/`, reconstruiește la fiecare modificare și sincronizează rezultatul pe server. Editați un fișier, salvați, iar în câteva secunde serverul reflectă modificarea. Veți vedea în terminal un panou de stare în timp real.

Pentru o ieșire mai detaliată (jurnale de build, cereri de sincronizare, urme ale erorilor), adăugați `--verbose`.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/dev.png" alt="Ieșirea terminalului în modul de dezvoltare" />
</div>

Deschideți [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer). Ar trebui să vedeți aplicația dvs. listată la **Your Apps**.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-1.png" alt="Lista Your Apps care afișează My twenty app" />
</div>

Faceți clic pe **My twenty app** pentru a vedea **înregistrarea aplicației** — o înregistrare la nivel de server care descrie aplicația dvs. (nume, identificator, credențiale OAuth, sursă). O singură înregistrare poate fi instalată în mai multe spații de lucru pe același server.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-2.png" alt="Detalii despre înregistrarea aplicației" />
</div>

Faceți clic pe **View installed app** pentru a vedea instalarea în spațiul de lucru. Fila **About** afișează versiunea și opțiunile de administrare.

<div style={{textAlign: 'center'}}>
  <img src="/images/docs/developers/extends/apps/app-in-ui-3.png" alt="Aplicație instalată" />
</div>

**După această fază:** aveți o buclă de dezvoltare în timp real. Editați orice fișier în `src/` și acesta apare în UI.

### Sincronizare unică pentru CI și scripturi

Folosește `plan` și `apply` pentru a rula același pipeline o singură dată, fără watcher:

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

| Comandă             | Comportament                                                                                                                                                              | Când se folosește                                                                     |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| `yarn twenty dev`   | Monitorizează și resincronizează la fiecare modificare. Rulează până când îl opriți.                                                                                      | Dezvoltare locală interactivă.                                                        |
| `yarn twenty apply` | Un singur build + sync, iese cu `0` la succes, `1` la eșec. Solicită confirmare pentru modificările distructive (treci argumentul `--force` pentru a sări peste aceasta). | CI, hook-uri pre-commit, agenți AI, fluxuri de lucru scriptate.                       |
| `yarn twenty plan`  | Construiește și afișează modificările de metadate **fără a le aplica**.                                                                                                   | Inspectarea modificărilor pe care le-ar face o sincronizare înainte de a le confirma. |

Toate modurile necesită o conexiune la distanță autentificată. Vezi [Sincronizare și recuperare](/l/ro/developers/extend/apps/operations/sync-and-recovery#previewing-changes-plan) pentru mai multe detalii despre `plan`.

<Note>
`yarn twenty dev --once` și `yarn twenty dev --once --dry-run` sunt aliasuri depreciate pentru `yarn twenty apply` și `yarn twenty plan`.
</Note>

### Opțiuni pentru modul de dezvoltare

| Opțiune                               | Descriere                                                                                        |
| ------------------------------------- | ------------------------------------------------------------------------------------------------ |
| `--force`                             | Aplică modificările distructive (ștergeri) fără confirmare.                                      |
| `--debounceMs \<ms>` | Setează întârzierea de debounce pentru modificarea fișierului în milisecunde (implicit: `1000`). |
| `--verbose` / `--debug`               | Afișează jurnale detaliate de construire, cereri de sincronizare și urme ale erorilor.           |

## Ce puteți construi

Aplicațiile sunt compuse din **entități** — fiecare definită într-un fișier TypeScript cu un singur `export default`:

| Entitate                    | Ce face                                                                                         |
| --------------------------- | ----------------------------------------------------------------------------------------------- |
| **Obiecte și câmpuri**      | Modele de date personalizate (carte poștală, factură etc.) cu câmpuri tipizate                  |
| **Funcții logice**          | TypeScript pe server declanșat de rute HTTP, programări cron sau evenimente din baza de date    |
| **Componente front-end**    | Componente React care se afișează în UI-ul Twenty (panou lateral, widgeturi, meniul de comenzi) |
| **Abilități și agenți**     | Capabilități AI — instrucțiuni reutilizabile și asistenți autonomi                              |
| **Vizualizări și navigare** | Vizualizări de listă preconfigurate și elemente de meniu în bara laterală                       |
| **Layouturi de pagină**     | Pagini personalizate de detalii ale înregistrărilor cu file și widgeturi                        |

Referință completă: [Concepte](/l/ro/developers/extend/apps/getting-started/concepts).

## Pașii următori

<CardGroup cols={2}>
  <Card title="Configurare" icon="screwdriver-wrench" href="/l/ro/developers/extend/apps/config/overview">
    Identitatea aplicației, rolul implicit, hook-urile de instalare și dezinstalare, resursele publice.
  </Card>
  <Card title="Date" icon="database" href="/l/ro/developers/extend/apps/data/overview">
    Obiecte, câmpuri și relații bidirecționale.
  </Card>
  <Card title="Logică" icon="bolt" href="/l/ro/developers/extend/apps/logic/overview">
    Funcții logice, abilități, agenți și conexiuni OAuth.
  </Card>
  <Card title="Aspect" icon="table-columns" href="/l/ro/developers/extend/apps/layout/overview">
    Vizualizări, navigare, layouturi de pagină, componente front-end.
  </Card>
  <Card title="Operațiuni" icon="rocket" href="/l/ro/developers/extend/apps/operations/overview">
    CLI, testare, remote-uri, CI și publicarea aplicației.
  </Card>
</CardGroup>