Vai al contenuto principale
Segui questa quickstart per aggiungere Base44 al tuo progetto Refine. Creerai un backend Base44, definirai entità e integrerai Base44 come data provider in Refine.
La CLI richiede Node.js 20.19.0 o superiore.

​
Configurazione

1

Installa la CLI di Base44

Installa la CLI di Base44 a livello globale:
npm install -g base44@latest
2

Crea un backend Base44

Vai nella directory del tuo progetto Refine, quindi esegui:
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 sono incluse automaticamente, fornendo al tuo agente IA istruzioni e contesto per le attività Base44.
3

Configura il tuo sito

Aggiorna 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:
{
  "site": {
    "outputDirectory": "dist",
    "serveCommand": "npm run dev"
  }
}
Con serveCommand impostato, base44 dev avvia insieme il tuo backend e il tuo frontend da un unico terminale.
4

Definisci le entità

Crea schemi di entità 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:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
5

Invia le entità a Base44

Invia i tuoi schemi di entità a Base44:
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 per maggiori informazioni.
6

Installa l'SDK di Base44

Installa l’SDK di Base44 nel tuo progetto Refine:
npm install @base44/sdk
7

Crea un client Base44

Crea un client SDK di Base44 nel tuo progetto. L’appId si trova nel tuo file base44/.app.jsonc.Ad esempio, crea src/api/base44Client.ts:
import { createClient } from '@base44/sdk';

export const base44 = createClient({
  appId: 'your-app-id-from-app.jsonc'
});
8

Usa l'SDK nel tuo frontend

Crea un semplice componente per elencare e aggiungere attività. Ad esempio, crea src/components/TaskList.tsx:
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>
  );
}
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().
9

Importa il componente nella tua app

Aggiorna il tuo src/App.tsx per usare il componente TaskList:
import { TaskList } from './components/TaskList';

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

export default App;
10

Esegui la tua app in locale

Avvia il tuo server di sviluppo Refine per testare l’integrazione. Dalla root del tuo progetto, esegui:
npm run dev
La tua app Refine si connetterà al tuo backend Base44 tramite il data provider personalizzato, gestendo automaticamente tutte le operazioni CRUD.
11

Compila il tuo frontend

Quando sei soddisfatto di come tutto appare in locale, compila il tuo progetto Refine per la produzione:
npm run build
Questo crea file di produzione ottimizzati nella tua directory di output (tipicamente dist).
12

Distribuisci il tuo frontend

Distribuisci il tuo frontend compilato su Base44:
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.

​
Passaggi successivi

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

​
Vedi anche

Questa pagina è stata tradotta utilizzando l’IA. Per informazioni più accurate e aggiornate, consulta la versione inglese.