> ## 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 com Refine

> Adicione a Base44 ao seu projeto Refine

Siga este quickstart para adicionar a Base44 ao seu projeto Refine. Você criará um backend Base44, definirá entidades e integrará a Base44 como um data provider no Refine.

<Note>A CLI requer Node.js 20.19.0 ou superior.</Note>

## Configuração

<Steps>
  <Step title="Instale a CLI da Base44">
    Instale a CLI da Base44 globalmente:

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

  <Step title="Crie um backend Base44">
    Navegue até o diretório do seu projeto Refine e execute:

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

    Se você ainda não estiver logado, o comando vai solicitar que você autentique.

    Selecione **Create a basic project** quando solicitado. Isso cria os arquivos do backend dentro do diretório do seu projeto Refine. Em seguida, siga as instruções para configurar seu projeto.

    Quando você cria um projeto, as [Base44 skills](/developers/backend/overview/base44-skills) são incluídas automaticamente, fornecendo ao seu agente de IA instruções e contexto para tarefas da Base44.
  </Step>

  <Step title="Configure o diretório de saída">
    Atualize seu [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) para apontar para a saída do build do Refine. Adicione ou modifique o campo `site.outputDirectory`:

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist"
      }
    }
    ```
  </Step>

  <Step title="Defina entidades">
    Crie [schemas de entidade](/developers/references/entities/introduction) para definir suas estruturas de dados. Arquivos de entidade devem estar no diretório `base44/entities/`.

    Por exemplo, crie `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="Envie entidades para a Base44">
    Envie seus schemas de entidade para a Base44:

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

    Este comando sincroniza suas definições locais de entidade com seu backend Base44, tornando-as disponíveis para uso na sua aplicação. Veja [`entities push`](/developers/references/cli/commands/entities-push) para mais informações.
  </Step>

  <Step title="Instale o SDK da Base44">
    Instale o SDK da Base44 no seu projeto Refine:

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

  <Step title="Crie um cliente Base44">
    Crie um [cliente](/developers/references/sdk/getting-started/client) SDK da Base44 no seu projeto. O `appId` pode ser encontrado no seu arquivo `base44/.app.jsonc`.

    Por exemplo, crie `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="Use o SDK no seu frontend">
    Crie um componente simples para listar e adicionar tarefas. Por exemplo, crie `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>
      Use o nome exato da entidade do seu schema ao chamar o SDK, incluindo capitalização. Por convenção, os nomes de entidade começam com letra maiúscula. Por exemplo, se seu schema tem `"name": "Task"`, você acessa como `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Importe o componente no seu app">
    Atualize seu `src/App.tsx` para usar o componente TaskList:

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

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

    export default App;
    ```
  </Step>

  <Step title="Execute seu app localmente">
    Inicie seu servidor de desenvolvimento Refine para testar sua integração. A partir da raiz do projeto, execute:

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

    Seu app Refine se conectará ao seu backend Base44 através do data provider customizado, lidando automaticamente com todas as operações CRUD.
  </Step>

  <Step title="Faça build do seu frontend">
    Quando estiver satisfeito com como tudo está localmente, faça build do seu projeto Refine para produção:

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

    Isso cria arquivos de produção otimizados no seu diretório de saída (normalmente `dist`).
  </Step>

  <Step title="Implante seu frontend">
    Implante seu frontend compilado na Base44:

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

    O comando `deploy` implanta seu frontend compilado na hospedagem da Base44. Também enviará quaisquer atualizações nos seus schemas de entidade se você tiver feito mudanças desde o último push. Quando concluído, você verá o nome do seu projeto, um link para seu dashboard Base44 e a URL da sua aplicação ao vivo.
  </Step>
</Steps>

## Próximos passos

Agora que o backend Base44 está integrado ao seu projeto, você pode:

* Usar o [SDK](/developers/references/sdk/getting-started/overview) para adicionar mais funcionalidade ao seu frontend.
* Adicionar [entidades](/developers/backend/resources/entities/overview), [funções de backend](/developers/backend/resources/functions) e [agentes](/developers/backend/resources/agents-config). Se está trabalhando em TypeScript, [gere tipos](/developers/references/sdk/getting-started/dynamic-types) para obter autocomplete e segurança de tipo.
* Testar localmente executando [`base44 dev`](/developers/references/cli/commands/dev) para o backend e `npm run dev` para o frontend. Veja [Desenvolvimento local](/developers/backend/overview/local-dev/local-development-overview) para instruções de configuração.
* Continuar construindo seu frontend e implantar atualizações com [`base44 deploy`](/developers/references/cli/commands/deploy).
* Abrir seu site implantado com [`base44 site open`](/developers/references/cli/commands/site-open).

## Veja também

* [Referência de comandos da CLI](/developers/references/cli/commands/introduction): Todos os comandos da CLI disponíveis
* [Estrutura do projeto](/developers/backend/overview/project-structure): Como os arquivos do projeto são organizados
* [Documentação do SDK JavaScript](/developers/references/sdk/getting-started/overview): Conecte seu app ao backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Ensine assistentes de IA a trabalhar com a Base44

<Note>Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/). </Note>