Como Criar um Aplicativo CRUD Simples no Appsmith

Construir ferramentas internas do zero desperdiça tempo que você não tem. Você precisa de um painel administrativo rápido ou uma interface de gerenciamento de dados, não de um projeto de desenvolvimento de três meses. O Appsmith permite conectar uma fonte de dados, arrastar widgets e configurar operações de Criar, Ler, Atualizar e Excluir em menos de uma hora.

Este tutorial percorre o fluxo de trabalho padrão de um aplicativo CRUD no Appsmith: conectar seu banco de dados, exibir dados em um widget Table, gerenciar a criação e atualização de registros por meio de formulários e atualizar os dados após mutações.

Conecte Sua Fonte de Dados

Comece criando um novo aplicativo no Appsmith. Na barra lateral esquerda, clique no + ao lado de Datasources e selecione o tipo de banco de dados—PostgreSQL, MySQL ou uma API REST.

Para bancos de dados SQL, insira suas credenciais de conexão: host, porta, nome do banco de dados, nome de usuário e senha. Armazene valores sensíveis na configuração criptografada de fonte de dados do Appsmith e nas configurações de ambiente, em vez de codificá-los diretamente em consultas ou widgets. As consultas são executadas no lado do servidor, portanto as credenciais nunca são expostas ao navegador.

Você pode encontrar a lista completa de bancos de dados suportados e opções de configuração na documentação oficial de fontes de dados.

Teste a conexão antes de salvar. Se falhar, verifique as regras de firewall, requisitos de SSL e precisão das credenciais.

Leia Dados com uma Consulta

Crie sua primeira consulta para buscar registros. Clique em + ao lado de Queries/JS, selecione sua fonte de dados e escreva uma instrução SELECT:

SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 100;

Nomeie esta consulta como getUsers e execute-a para verificar a resposta.

Para conjuntos de dados maiores, implemente paginação do lado do servidor. O widget Table do Appsmith suporta isso nativamente—você passará parâmetros de offset e limit para sua consulta com base no estado de paginação da tabela.

Exiba Dados em um Widget Table

Arraste um widget Table para a tela. Nas propriedades do widget, defina a propriedade Table data como:

{{getUsers.data}}

A tabela gera automaticamente colunas a partir da resposta da sua consulta. Renomeie colunas, ajuste larguras e oculte campos como IDs internos conforme necessário.

Este padrão de integração de banco de dados do Appsmith—vinculação de consulta a widget—forma a base de todo frontend CRUD low-code que você construirá. As opções completas de configuração do widget Table são abordadas na documentação do widget Table.

Crie Registros com um Formulário ou Modal

Adicione um widget Button rotulado como “Adicionar Novo” e configure sua ação onClick para abrir um Modal. Dentro do modal, adicione widgets Input para cada campo: nameInput, emailInput.

Crie uma consulta INSERT chamada createUser:

INSERT INTO users (name, email) VALUES ({{nameInput.text}}, {{emailInput.text}});

Configure o botão de envio do modal para executar createUser. Em caso de sucesso, acione getUsers.run() para atualizar a tabela e, em seguida, feche o modal.

Para validação, use as propriedades de validação integradas do widget Input ou escreva um JSObject que verifique os valores dos campos antes do envio.

Atualize Registros Usando Linhas Selecionadas

Habilite a seleção de linhas no seu widget Table. Quando um usuário clica em uma linha, Table1.selectedRow expõe os dados daquele registro.

Crie uma consulta UPDATE chamada updateUser:

UPDATE users
SET name = {{nameInput.text}}, email = {{emailInput.text}}
WHERE id = {{Table1.selectedRow.id}};

Você pode reutilizar o mesmo modal para edição pré-populando os inputs com Table1.selectedRow.name como valores padrão. Alterne entre os modos “criar” e “editar” usando uma variável JSObject.

Após a atualização ser executada com sucesso, chame getUsers.run() para atualizar a exibição.

Exclua Registros com Confirmação

Adicione uma coluna Button à sua tabela para ações de exclusão. Defina o tipo da coluna como Button e configure o onClick para executar uma consulta DELETE:

DELETE FROM users WHERE id = {{Table1.triggeredRow.id}};

Note a diferença: triggeredRow captura a linha onde o botão foi clicado, enquanto selectedRow captura a linha destacada.

Habilite Request confirmation before running nas configurações da consulta para evitar exclusões acidentais. Em caso de sucesso, atualize os dados da tabela.

O Fluxo de Trabalho Table Form do Appsmith

O padrão que você construiu—widget Table exibindo resultados de consultas, Form ou Modal gerenciando entrada, consultas parametrizadas para mutações e atualização de dados em caso de sucesso—escala para qualquer caso de uso CRUD. Este fluxo de trabalho de formulário de tabela do Appsmith se aplica seja você gerenciando usuários, inventário, tickets de suporte ou quaisquer outros registros.

Para aplicativos em produção, considere:

• Controle de acesso baseado em funções: O Appsmith suporta permissões granulares no nível de aplicativo, página e fonte de dados
• Ambientes e credenciais: Armazene senhas de banco de dados e chaves de API com segurança em dev, staging e produção
• Packages: Compartilhe consultas e JSObjects reutilizáveis em múltiplos aplicativos usando Appsmith Packages
• Paginação do lado do servidor: Essencial para tabelas com milhares de registros

Conclusão

Você agora tem uma interface CRUD funcional: dados exibidos em uma tabela, formulários para criar e editar registros, funcionalidade de exclusão com confirmação e atualização automática de dados após cada mutação.

A partir daqui, estenda o aplicativo com filtros de pesquisa, páginas adicionais ou conecte aos Appsmith Workflows para automação de backend. O frontend CRUD low-code que você construiu serve como base para ferramentas internas mais complexas—sem escrever a UI e a camada de dados do zero.

Perguntas Frequentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.