Como criar um aplicativo tipo Trello, usando a plataforma no code Bubble

Aprenda a criar um aplicativo gerenciador de projetos tipo Trello sem programar, usando o editor visual web do Bubble.

---

Configurando o banco de dados do seu gerenciador de projetos

Depois de mapear a exibição do seu app, você pode se concentrar na criação dos campos de dados necessários para alimentar seu aplicativo. O Bubble facilita a criação de diferentes tipos de dados com campos únicos. Ao usar o Trello como MVP, será necessário estruturar alguns tipos de dados e campos.

Tipo de dados: Usuário

Campos

• Nome
• Imagem
• Painéis participados — Lista de painéis. Nota: Criar um campo baseado em lista, em um tipo de dados separado, permite integrar todos os campos relevantes sem criar pontos de dados adicionais.

Tipo de dados: Painel

Campos

• Título do painel
• Imagem apresentada
• Lista — Lista de listas

Tipo de dados: Lista

Campos

• Nome

Tipo de dados: Tarefa

Campos

• Nome
• Descrição
• Imagem
• Lista atual — Lista

DICA AVANÇADA DE DADOS: Não existe uma única maneira “certa” de estruturar o banco de dados no Bubble. A melhor forma depende do que você está otimizando. Considerações sobre estruturas de dados alternativas ajudam a escalar o aplicativo.

---

Workflows necessários para criar um aplicativo tipo Trello

Agora que o design e o banco de dados estão estruturados, é hora de unir tudo e tornar o programa funcional. No Bubble, a principal forma de fazer isso é por meio de workflows. Um workflow dispara ações em resposta a eventos (por exemplo, clicar em um botão) e executa tarefas como cadastrar usuários ou atualizar o banco de dados.

Criando um novo painel

O recurso principal é permitir que usuários criem um painel. Na página do painel, adicione um ícone e um pop-up com uma entrada de texto, uploader de imagem e um botão. Ao clicar no botão, crie um workflow que cadastra um novo item no banco de dados (painel). Em seguida, combine esse workflow com a página inicial para exibir o novo painel.

Ao acionar o pop-up, o usuário poderá enviar o conteúdo (nome, imagem) e o painel será adicionado à lista de painéis participados pelo usuário atual.

Exibir uma lista de painéis

Com os painéis criados, exiba cada item em um feed na página inicial. Utilize um grupo repetidor vinculado ao tipo de dados Painel e defina a fonte de dados como a lista de painéis que contém o usuário atual. Em seguida, mapeie dinamicamente conteúdo relevante para cada célula do grupo repetidor.

Enviando dados entre as páginas

Enviar dados entre páginas é essencial para apps dinâmicos. Dentro do grupo repetidor, crie eventos que enviem dados da célula atual para a página do projeto (quando um painel é clicado, por exemplo). Na navegação para a página do projeto, encaminhe os dados do painel atual para que o editor saiba qual projeto exibir.

Exibir conteúdo dinâmico na página do painel

Ao chegar à página do painel específico, utilize os dados enviados para exibir conteúdos relevantes — informações do painel passado pelo workflow.

Criar e exibir listas no painel

Assim que o usuário puder acessar um painel, permita criar uma nova lista. Use um input de texto e um botão para acionar o workflow que cria a nova Lista no banco de dados e a associa ao painel atual.

Exibindo listas em um painel

Mostre listas no painel usando um grupo repetidor configurado para o tipo de dados Lista, com a fonte de dados sendo as listas do painel atual.

Criar e exibir tarefas

Para cada lista, permita adicionar tarefas com um input de texto, que criará uma nova Tarefa associada à lista atual. Mapear dinamicamente o conteúdo da tarefa (nome, descrição, imagem) dentro do grupo repetidor de tarefas.

Movendo cartões entre listas

Utilize plugins de drag-and-drop para arrastar cartões entre listas. Configure o drop area para extrair os dados da lista na qual o cartão está e atualize o campo da tarefa correspondente para a nova lista.

Editando conteúdo de um cartão

Adicione um pop-up para edição de tarefa, definindo o conteúdo inicial a partir da tarefa existente. Use estados para gerenciar o modo de edição (sim/não). Atualize os campos da tarefa quando o usuário confirmar as alterações.

Excluindo uma tarefa

Inclua um botão de exclusão no pop-up de tarefa. Crie um workflow que exclua a tarefa do banco de dados e feche o pop-up.

---

Links úteis

• Bubble – Tutoriais e referências oficiais.