# Per iniziare

Theta funziona tra la piattaforma [hosted](https://buildwiththeta.com) e la libreria client. Per iniziare:

- Iscriversi a [buildwiththeta.com](https://buildwiththeta.com) (in closed beta è necessario un invito).
- Creare un nuovo progetto e disegnare la prima interfaccia.
- Copiare la pagina con il nome che si desidera.
- Installare [Theta client library] (https://pub.dev/packages/theta) e utilizzare una `UIBox('nome della pagina')` per integrare la pagina nella propria applicazione.

## Requisiti di sistema

Theta è un'applicazione web che può essere utilizzata da un browser. Per un'esperienza ottimale, attenersi ai requisiti di sistema:

- È consigliato utilizzare un desktop o un laptop.
- Utilizzare uno schermo di almeno 12 pollici.
- Si consiglia di utilizzare Google Chrome (in caso di problemi, provare a vedere se i problemi persistono con Chrome).
- Per fare copia e incolla all'interno di un progetto, permetti l'utilizzo degli appunti (una finestra di dialogo apparirà su app.buildwiththeta.com).

## Progettazione dell'interfaccia

- Vedere [come spostare e ridimensionare gli elementi](https://docs.page/buildwiththeta/buildwiththeta/en/studio/positioning_and_resizing).
- Vedere [come impostare i limiti responsive](https://docs.page/buildwiththeta/buildwiththeta/en/studio/constraints).

## Installazione della libreria client di Theta

```
flutter pub add theta
```

### Inizializzazione

Inizializzare Theta chiamando Theta.initialize con la chiave anonima. Assicurarsi di chiamare questo metodo all'inizio dell'applicazione.

```dart
importare 'package:theta/theta.dart';

Future<void> main() async {
    await Theta.initialize(anonKey: 'thetaKey');
}
```

### Avvolgere l'applicazione con ThetaProvider

Avvolgere l'applicazione con ThetaProvider per consentire a qualsiasi UIBox di ricevere gli stili del tema e del progetto.

```dart
ThetaProvider(
    theme: ThemeMode.light,
    child: MaterialApp(
        home: // ...
    ),
)
```

### Renderizzare l'interfaccia utente remota

Tutto ciò che occorre fare è aggiungere un widget UIBox alla propria applicazione e passare il nome del componente come parametro.

```dart
/// La vostra applicazione
return Scaffold(
    body: Center(
        child: UIBox('Nome del componente'),
    ),
);
```

### Caricamento dei segnaposto e gestione degli errori

È possibile visualizzare un widget segnaposto durante il caricamento e un widget di errore.

```dart
UIBox(
    'Homepage',
    placeholder: CircularProgressIndicator(),
    errorWidget: (error) => Text(error),
)
```

### Aggiungere codice personalizzato per le azioni

Si desidera un'interfaccia utente dinamica con supporto ai gesti (onTap, doubleTap, ecc.)? È possibile aggiungere codice personalizzato, chiamato 'workflow', basato su trigger di gesti.

1. Selezionate un singolo elemento dell'interfaccia utente in base al suo id o al suo nome.
2. Scegliere il trigger per la quale si avvierà l'azione.
3. Aggiungere il codice.

```dart
UIBox(
    'CupertinoAppBar',
    workflows: [
        Workflow('Element id', Trigger.onTap, (context) {
            /// Il vostro metodo
        }),
    ]
)
```
## Sovrascrivi le proprietà del blocco

Puoi sovrascrivere le proprietà di ogni blocco UI utilizzando un widget Flutter combinando il no-code con Flutter.

```dart
UIBox(
    'Social card',
    overrides: [
        Override('Post title')
            ..setText('My beautiful cat')
            ..setColor(Colors.white, 0.5),
        Override('Cover')
            ..setImage('https://...'),
    ],
),
```

### Sovrascrittura del figlio

Se nel componente no-code l'elemento a cui si vuole sovrascrivere il figlio ne ha già uno, 
verrà rimosso e sostituito con quello inserito dall'utente tramite codice.

È possibile utilizzare la `UIBox` anche all'interno di altre `UIBox`. Ciò offre un grado di personalizzazione molto elevato.

```dart
UIBox(
    'Component name',
    overrides: [
        Override('Element id')
            ..setChild(UIBox('Other component')),
    ],
),
```

### Sovrascrittura dei figli

È possibile sovrascrivere i figli di un elemento. 

```dart
UIBox(
    'Component name',
    overrides: [
        Override('Element name')
            ..setChildren([
                Text('Child 1'), 
                Text('Child 2')
            ]),
    ],
),
```