Cerințe
- Node.js 24+ — Descărcați
- Yarn 4 — vine împreună cu Node prin Corepack. Activați-l:
corepack enable - Docker — Descărcați. Necesar pentru a rula un server Twenty local. Omiteți dacă rulați deja Twenty în altă parte.
| 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 server | 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:my-twenty-app/ cu un fișier inițial application-config.ts, un rol implicit, un flux de lucru CI ș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 schelet vă propune să pornească unul pentru dvs.:Doriți să configurați o instanță Twenty locală?
- Yes (recomandat) — descarcă imaginea Docker
twentycrm/twenty-app-devși o pornește pe portul2020. Asigurați-vă mai întâi că Docker rulează. - No — alegeți această opțiune dacă aveți deja un server Twenty la care doriți să vă conectați. Îl puteți conecta ulterior cu
yarn twenty remote:add.
- E-mail:
tim@apple.dev - Parolă:
tim@apple.dev
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.Faza 3 — Sincronizați modificările
Aceasta este bucla internă în care veți petrece cea mai mare parte a timpului.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.
src/ și acesta apare în UI.
Sincronizare unică pentru CI și scripturi
Adăugați--once pentru a rula un singur build + sync și a ieși — același flux, fără watcher:
| 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 dev --once | Un singur build + sync, iese cu 0 la succes, 1 la eșec. | CI, hook-uri pre-commit, agenți AI, fluxuri de lucru scriptate. |
yarn twenty dev --once --dry-run | 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. |
--dry-run.
Opțiuni pentru modul de dezvoltare
| Opțiune | Descriere |
|---|---|
--once | Construiește și sincronizează o singură dată, apoi iese. |
--dry-run | Cu --once, poți previzualiza modificările de metadate fără a le aplica. Nu scrie nimic. |
--debounceMs \<ms> | Setează întârzierea de debounce pentru modificarea fișierului în milisecunde (implicit: 2000). |
--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 singurexport 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 |
Pașii următori
Configurare
Identitatea aplicației, rolul implicit, hook-urile de instalare, resursele publice.
Date
Obiecte, câmpuri și relații bidirecționale.
Logică
Funcții logice, abilități, agenți și conexiuni OAuth.
Aspect
Vizualizări, navigare, layouturi de pagină, componente front-end.
Operațiuni
CLI, testare, remote-uri, CI și publicarea aplicației.