# Edita tu primer esquema

<PageBadges />

import { Callout } from "zudoku/ui/Callout"
import { Stepper } from "zudoku/ui/Stepper"

## Flujo de edición en vivo

Esta página asume que ya ejecutaste `serve` y tienes la vista previa abierta en `http://localhost:3030`.

<Stepper>

1. Entra en el modo de edición del esquema:

   ```ansi
   form0(server)> schema edit
   ```

   {/* prettier-ignore */}
   <Callout type="caution" title="Editor requerido">

   El modo de edición de esquemas abre tu editor. Asegúrate de que la variable `EDITOR` o `VISUAL` esté configurada:

   - **Linux/macOS**: Añade `export EDITOR=nano` a `~/.bashrc`, `~/.zshrc` o `~/.profile`, luego reinicia tu terminal o ejecuta `source ~/.bashrc`.
   - **Windows (PowerShell)**: Ejecuta `$env:EDITOR = "notepad"` para la sesión actual, o añádelo a tu perfil de PowerShell (`$PROFILE`).
   - **Windows (CMD)**: Usa `set EDITOR=notepad` para la sesión, o configúralo de forma permanente en _Propiedades del sistema → Variables de entorno_.

   Para usar VS Code, configura `EDITOR` como `code --wait`, no `code`. Sin `--wait`, la CLI continúa antes de que guardes y tus cambios se pierden. Otros editores gráficos necesitan el mismo flag (por ejemplo, `subl -w`, `zed --wait`).

   </Callout>

1. Previsualiza el esquema del formulario:

   ```ansi
   form0(server,schema)> preview
   ```

1. Añade un _NumericField_ después de un campo de tu elección, usando el número de fila que aparece al inicio de cada línea (por ejemplo, `2` en `2 | TextField ...`) en la vista previa del esquema:

   ```ansi
   form0(server,schema)> add NumericField after <id>
   ```

   La CLI abrirá una plantilla JSON en tu editor. Mantén los valores por defecto y modifica algunos campos, por ejemplo:

   ```json
   {
     "data_name": "quantity",
     "label": "Quantity",
     "min": 1,
     "max": 100,
     "format": "integer"
   }
   ```

1. Añade un _CalculatedField_ después del campo `quantity` que acabas de crear:

   ```ansi
   form0(server,schema)> add CalculatedField after <new-id>
   ```

   Modifica el estilo de visualización y la expresión de cálculo:

   ```json
   {
     "data_name": "total",
     "label": "Total",
     "display": { "style": "numeric" },
     "calculate": "$quantity * 2"
   }
   ```

1. Guarda y cierra tu editor.

   El esquema se guarda y se valida automáticamente. Cualquier advertencia aparecerá en la CLI.

1. Revisa la vista previa en vivo.

   Tus nuevos campos deberían aparecer inmediatamente en el navegador.

1. Sal del modo de edición del esquema:

   ```ansi
   form0(server,schema)> q
   ```

   Y detén el servidor de desarrollo:

   ```ansi
   form0(server)> serve stop
   ```

</Stepper>