> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart Refine

> Aggiungi Base44 al tuo progetto Refine

Segui questa quickstart per aggiungere Base44 al tuo progetto Refine. Creerai un backend Base44, definirai entità e integrerai Base44 come data provider in Refine.

<Note>La CLI richiede Node.js 20.19.0 o superiore.</Note>

## Configurazione

<Steps>
  <Step title="Installa la CLI di Base44">
    Installa la CLI di Base44 a livello globale:

    ```bash theme={null}
    npm install -g base44@latest
    ```
  </Step>

  <Step title="Crea un backend Base44">
    Vai nella directory del tuo progetto Refine, quindi esegui:

    ```bash theme={null}
    base44 create
    ```

    Se non hai già effettuato l'accesso, il comando ti chiederà di autenticarti.

    Seleziona **Create a basic project** quando richiesto. Questo crea i file backend all'interno della directory del tuo progetto Refine. Quindi segui le richieste per configurare il tuo progetto.

    Quando crei un progetto, le [skill di Base44](/developers/backend/overview/base44-skills) sono incluse automaticamente, fornendo al tuo agente IA istruzioni e contesto per le attività Base44.
  </Step>

  <Step title="Configura il tuo sito">
    Aggiorna [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) in modo che punti all'output di build di Refine e al comando che avvia il tuo dev server. Aggiungi i campi `site.outputDirectory` e `site.serveCommand`:

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist",
        "serveCommand": "npm run dev"
      }
    }
    ```

    Con `serveCommand` impostato, [`base44 dev`](/developers/references/cli/commands/dev) avvia insieme il tuo backend e il tuo frontend da un unico terminale.
  </Step>

  <Step title="Definisci le entità">
    Crea [schemi di entità](/developers/references/entities/introduction) per definire le tue strutture di dati. I file delle entità devono essere posizionati nella directory `base44/entities/`.

    Ad esempio, crea `base44/entities/task.jsonc`:

    ```json theme={null}
    {
      "name": "Task",
      "type": "object",
      "properties": {
        "title": {
          "type": "string"
        },
        "completed": {
          "type": "boolean",
          "default": false
        }
      },
      "required": ["title"]
    }
    ```
  </Step>

  <Step title="Invia le entità a Base44">
    Invia i tuoi schemi di entità a Base44:

    ```bash theme={null}
    base44 entities push
    ```

    Questo comando sincronizza le tue definizioni di entità locali con il tuo backend Base44, rendendole disponibili per l'uso nella tua applicazione. Consulta [`entities push`](/developers/references/cli/commands/entities-push) per maggiori informazioni.
  </Step>

  <Step title="Installa l'SDK di Base44">
    Installa l'SDK di Base44 nel tuo progetto Refine:

    ```bash theme={null}
    npm install @base44/sdk
    ```
  </Step>

  <Step title="Crea un client Base44">
    Crea un [client](/developers/references/sdk/getting-started/client) SDK di Base44 nel tuo progetto. L'`appId` si trova nel tuo file `base44/.app.jsonc`.

    Ad esempio, crea `src/api/base44Client.ts`:

    ```typescript theme={null}
    import { createClient } from '@base44/sdk';

    export const base44 = createClient({
      appId: 'your-app-id-from-app.jsonc'
    });
    ```
  </Step>

  <Step title="Usa l'SDK nel tuo frontend">
    Crea un semplice componente per elencare e aggiungere attività. Ad esempio, crea `src/components/TaskList.tsx`:

    ```tsx theme={null}
    import { useState, useEffect } from 'react';
    import { base44 } from '../api/base44Client';

    export function TaskList() {
      const [tasks, setTasks] = useState<any[]>([]);
      const [newTaskTitle, setNewTaskTitle] = useState('');
      const [isLoading, setIsLoading] = useState(false);

      useEffect(() => {
        loadTasks();
      }, []);

      const loadTasks = async () => {
        setIsLoading(true);
        try {
          const taskList = await base44.entities.Task.list();
          setTasks(taskList);
        } catch (error) {
          console.error('Error loading tasks:', error);
        }
        setIsLoading(false);
      };

      const addTask = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newTaskTitle.trim()) return;

        setIsLoading(true);
        try {
          const newTask = await base44.entities.Task.create({
            title: newTaskTitle,
            completed: false
          });
          setTasks([...tasks, newTask]);
          setNewTaskTitle('');
        } catch (error) {
          console.error('Error creating task:', error);
        }
        setIsLoading(false);
      };

      return (
        <div>
          <h1>Tasks</h1>

          {isLoading && <p>Loading...</p>}

          <ul>
            {tasks.map((task) => (
              <li key={task.id}>{task.title}</li>
            ))}
          </ul>

          <form onSubmit={addTask}>
            <input
              type="text"
              value={newTaskTitle}
              onChange={(e) => setNewTaskTitle(e.target.value)}
              placeholder="New task"
              disabled={isLoading}
            />
            <button type="submit" disabled={isLoading || !newTaskTitle.trim()}>
              Add Task
            </button>
          </form>
        </div>
      );
    }
    ```

    <Note>
      Usa il nome esatto dell'entità dal tuo schema quando chiami l'SDK, comprese le maiuscole. Per convenzione, i nomi delle entità iniziano con una lettera maiuscola. Ad esempio, se il tuo schema ha `"name": "Task"`, vi accedi come `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Importa il componente nella tua app">
    Aggiorna il tuo `src/App.tsx` per usare il componente TaskList:

    ```tsx theme={null}
    import { TaskList } from './components/TaskList';

    function App() {
      return <TaskList />;
    }

    export default App;
    ```
  </Step>

  <Step title="Esegui la tua app in locale">
    Avvia il tuo server di sviluppo Refine per testare l'integrazione. Dalla root del tuo progetto, esegui:

    ```bash theme={null}
    npm run dev
    ```

    La tua app Refine si connetterà al tuo backend Base44 tramite il data provider personalizzato, gestendo automaticamente tutte le operazioni CRUD.
  </Step>

  <Step title="Compila il tuo frontend">
    Quando sei soddisfatto di come tutto appare in locale, compila il tuo progetto Refine per la produzione:

    ```bash theme={null}
    npm run build
    ```

    Questo crea file di produzione ottimizzati nella tua directory di output (tipicamente `dist`).
  </Step>

  <Step title="Distribuisci il tuo frontend">
    Distribuisci il tuo frontend compilato su Base44:

    ```bash theme={null}
    base44 deploy
    ```

    Il comando `deploy` distribuisce il tuo frontend compilato sull'hosting di Base44. Invierà anche eventuali aggiornamenti ai tuoi schemi di entità se hai apportato modifiche dall'ultimo invio. Al termine, vedrai il nome del tuo progetto, un link alla tua dashboard Base44 e l'URL della tua applicazione live.
  </Step>
</Steps>

## Passaggi successivi

Ora che il tuo backend Base44 è integrato con il tuo progetto, puoi:

* Usare l'[SDK](/developers/references/sdk/getting-started/overview) per aggiungere più funzionalità al tuo frontend.
* Aggiungere [entità](/developers/backend/resources/entities/overview), [funzioni backend](/developers/backend/resources/functions) e [agenti](/developers/backend/resources/agents-config). Se stai lavorando in TypeScript, [genera i tipi](/developers/references/sdk/getting-started/dynamic-types) per ottenere autocompletamento e sicurezza dei tipi.
* Testare in locale con [`base44 dev`](/developers/references/cli/commands/dev). Consulta [Sviluppo locale](/developers/backend/overview/local-dev/local-development-overview) per le istruzioni di configurazione.
* Continuare a sviluppare il tuo frontend e distribuire aggiornamenti con [`base44 deploy`](/developers/references/cli/commands/deploy).
* Aprire il tuo sito distribuito con [`base44 site open`](/developers/references/cli/commands/site-open).

## Vedi anche

* [Riferimento comandi CLI](/developers/references/cli/commands/introduction): tutti i comandi CLI disponibili
* [Struttura del progetto](/developers/backend/overview/project-structure): come sono organizzati i file di progetto
* [Documentazione JavaScript SDK](/developers/references/sdk/getting-started/overview): collega la tua app al backend
* [Skill Base44](/developers/backend/overview/base44-skills): insegna agli assistenti IA a lavorare con Base44

<Note>Questa pagina è stata tradotta utilizzando l'IA. Per informazioni più accurate e aggiornate, consulta la [versione inglese](/). </Note>