Aprenda a criar seu próprio aplicativo gerenciador de projetos tipo Trello sem programar, usando o editor visual web do Bubble.
As ferramentas de gerenciamento de projetos são apps essenciais que podem ajudá-lo a ficar por dentro de qualquer criação no code. Ferramentas como Trello, Monday, e Asana se tornaram onipresentes, pois ajudam a coordenar nossas vidas ocupadas.
Mas e se você quiser criar um aplicativo gerenciador de projetos tipo Trello?
Bem, usando a ferramenta de desenvolvimento no code do Bubble, nunca foi tão fácil para alguém começar a criar um software poderoso – tudo sem escrever uma única linha de código. Podemos usar o Bubble para criar sites, aplicativos móveis e até redes sociais.
Ao longo deste guia, descobriremos o processo de uso do Bubble para criar sua própria ferramenta de produtividade como o Trello. Este guia o guiará pelo processo passo a passo de projetar seu app e criar a lógica subjacente para um MVP.
As etapas para criar um aplicativo tipo Trello sem codar incluem:
Índice
Faça seu cadastro gratuito no Bubble.
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Em seguida, você pode acompanhar enquanto criamos nosso app juntos.
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do programa tipo Trello, ou criando os campos necessários em seu banco de dados.
Neste caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso produto. Se você estiver fazendo seu app baseado do Trello, algumas das páginas principais que precisará incluir são:
- Página do painel de controle – Uma página onde os usuários podem criar e ver uma lista de seus painéis
- Página do projeto – Uma página do painel, incluindo listas individuais e tarefas
Um dos principais recursos do Bubble é a capacidade de enviar dados entre páginas. Isso permite que você crie uma versão genérica de uma página e, em seguida, exiba dinamicamente o conteúdo relevante de seu banco de dados quando for necessário.
No caso do seu programa tipo Trello, você só precisará criar uma página para hospedar seus painéis individuais. Podemos então criar os workflows necessários para exibir apenas os cartões relevantes em cada página do painel, quando forem necessários (abordaremos isso com mais detalhes em breve).
Configurando o banco de dados do seu gerenciador de projetos
Depois de mapear a exibição de seu app, você pode se concentrar na criação dos campos de dados necessários para alimentar seu aplicativo. Contaremos com esses campos para conectar os workflows por trás de seu programa.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Ao usar o Trello como um MVP, precisaremos criar os seguintes 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 que você integre perfeitamente todos os seus campos de dados relevantes sem ter que 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 criar um banco de dados no Bubble. A resposta para “qual é a maneira correta de estruturar meu aplicativo?” é frequente: depende para que você está otimizando. Para saber mais sobre estruturas de dados alternativas para otimizar aplicativos em escala, verifique nossa entrada manual em Conectando tipos de dados entre si.
Workflows necessários para criar um aplicativo tipo Trello
Agora que você estruturou o design e o banco de dados para seu aplicativo, é hora de começar a juntar tudo e tornar seu programa funcional.
No Bubble, a principal maneira de fazer isso é com workflows. Cada workflow acontece quando ocorre um evento (ex: um usuário clica em um botão) e, em seguida, executa uma série de “ações” em resposta (ex: “cadastre o usuário”, “faça uma alteração no banco de dados”, etc.)
Criando um novo painel
O primeiro recurso-chave que precisaremos criar é uma função que permite aos usuários criar um novo painel. Em nossa página do painel, começaremos adicionando um elemento de ícone e um pop-up.
Em nosso elemento pop-up, adicionaremos uma entrada de texto, um uploader de imagem e um elemento de botão. Quando o elemento de botão for clicado, criaremos nosso primeiro workflow.
Este workflow será usado para criar um novo item no banco de dados – um novo painel.
Ao criar um novo painel, combinaremos nossos elementos na página com seus campos correspondentes em nosso banco de dados.
Depois, vamos adicionar o usuário atual a este painel, alterando um item no banco de dados.
Queremos mudar o usuário atual, adicionando este novo painel à sua lista de painéis participados.
Assim que tivermos criado esse workflow usando nosso pop-up, precisaremos voltar à nossa página inicial e criar um evento adicional em nosso gerenciador de projetos usando nosso elemento de ícone.
Quando este ícone for clicado, precisaremos exibir nosso pop-up, permitindo que os usuários sigam o workflow anterior para criar um novo painel.
Agora, esse workflow permitirá que os usuários criem um novo painel sem ter que sair da página inicial.
Exibir uma lista de painéis
Agora que é possível criar novos painéis, é hora de exibir cada item em um feed na página inicial. Isso pode ser obtido utilizando nosso elemento de grupo repetidor.
Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.
Ao usar um grupo repetidor, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo como um painel.
Você também precisará definir a fonte de dados como uma lista de todos os painéis que contêm o usuário atual.
Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido nesta grade. Simplesmente mapeie a primeira coluna com o conteúdo relevante que você gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes, com base em seus dados existentes.
Enviando dados entre as páginas
Enviar dados entre páginas é uma função essencial para a maioria dos produtos dinâmicos.
Dentro de um grupo repetidor, também é possível criar eventos que são acionados de cada coluna individual.
Este recurso será útil ao criar funções de navegação em seu produto. Vamos criar em nosso aplicativo tipo Trello um recurso de navegação que redireciona um usuário para a nossa página do projeto quando um painel individual é clicado.
Para este workflow, use um evento de navegação para enviar um usuário a outra página. A partir daqui, selecione o tipo de página de destino como a página do projeto.
Em seguida, você precisará enviar dados adicionais para esta página para que o editor do Bubble saiba qual projeto específico exibir. Os dados que você precisa exibir são os do painel da célula atual.
Exibir conteúdo dinâmico na página do painel
Quando um usuário é direcionado a uma página do painel específica, você pode facilmente obter dados de evento do seu workflow para exibir o conteúdo relevante.
Antes de criarmos esse workflow, primeiro você precisa garantir que o tipo da página corresponda à propriedade de dados que você está enviando por meio da lógica de eventos. Nesse caso, você precisará definir a página do projeto como uma propriedade do projeto.
A partir daqui, você pode começar a adicionar conteúdo dinâmico aos elementos da sua página, exibindo as informações do painel que foram enviadas em seu workflow.
Como criar uma nova lista em nosso aplicativo tipo Trello
Assim que um usuário puder acessar um painel, precisaremos criar o próximo recurso-chave – permitindo que ele crie uma nova lista. Desta vez, usaremos um input de texto e um botão para dar suporte a esse workflow.
Quando o botão criar é clicado, acionaremos um novo workflow.
Dentro deste workflow, você precisará criar um novo item no banco de dados. O item que queremos criar é uma nova lista. Ao configurar o campo de dados da lista, começaremos adicionando nosso valor de inputs de texto como o nome da lista.
Em seguida, precisaremos adicionar essa lista ao painel das páginas atuais. Mais uma vez, isso pode ser alcançado adicionando uma etapa extra em nosso workflow que altera um item no banco de dados.
O item que queremos alterar é o painel da página atual, adicionando nossa nova lista ao seu campo de listas totais.
Exibindo listas em um painel
Agora que criamos uma nova lista, precisaremos começar a exibi-la em nosso painel. Isso pode ser facilmente alcançado utilizando nosso elemento de grupo repetidor mais uma vez.
Nesse caso, nosso grupo repetidor será configurado como uma lista, e a fonte de dados será configurada como os painéis da página atual e listas.
Criar e exibir tarefas no gerenciador de projetos
Uma vez que o usuário pode criar listas, precisaremos criar um recurso onde ele possa adicionar tarefas dentro de cada lista.
Ao exibir um cartão dentro de uma lista, precisaremos adicionar outro grupo repetidor dentro da primeira coluna de nosso grupo repetidor de lista.
Nota: Este novo grupo repetidor terá apenas uma coluna e uma linha, portanto, pode aparecer apenas como um grupo regular.
O grupo repetidor será configurado como uma tarefa, dentro da fonte de dados, vamos procurar por tarefas onde a lista de tarefas é a lista da célula atual.
Mais uma vez, você precisará mapear os elementos dinâmicos dentro do grupo repetidor que deseja exibir. Isso pode incluir a imagem e o título das tarefas atuais.
Depois de mapear onde nossos cartões de tarefas serão colocados, criaremos um workflow para criar uma nova tarefa em cada lista. Esse recurso pode ser facilmente adicionado usando outro input de texto (localizado abaixo de nosso grupo repetidor de tarefa).
Para iniciar este workflow, precisaremos acionar um evento quando o valor de um elemento mudar. O elemento ao qual vincularemos isso é nosso input adicional na parte inferior de cada lista.
Quando este elemento de entrada de texto for alterado, precisaremos criar um novo item no banco de dados – uma nova tarefa.
Ao criar uma nova tarefa, usaremos o valor de nossa entrada de texto para atualizar o campo de nome da tarefa. Também definiremos a lista atual de tarefas para a lista da célula atual.
Movendo cartões entre listas
Um dos recursos mais populares de qualquer painel digital kanban é a função de mover itens entre listas. Usando os plugins de elementos arrastáveis (Draggable Elements) gratuitos do Bubble, podemos criar facilmente esse recurso e criar uma experiência de usuário intuitiva em seu app.
Este plugin adicionará dois novos elementos ao seu editor do Bubble – um elemento arrastável e uma área para soltar.
Para começar a criar esse recurso, primeiro precisamos mover nosso grupo repetidor de tarefa para o novo elemento de arrastar e soltar.
Nota: Para ajudar a visualizar esse recurso, definimos a cor do nosso elemento da área de soltar como preto.
Também precisaremos configurar este elemento de área de soltar para extrair os dados da lista atual em que ele está.
Nosso grupo repetidor (destacado em vermelho) agora puxará os dados da fonte de dados do elementos de ‘área de soltar’. A origem deste grupo repetidor permanecerá a mesma, só que agora ele reconhecerá a lista de tarefas atual como a lista de grupo pai (elemento de ‘área de soltar’).
Finalmente, vamos adicionar um elemento de arrastar (roxo) dentro deste grupo repetidor.
Ao adicionar um elemento arrastável, você precisará selecionar a caixa que ‘torna este elemento ‘soltável’’, e também definir o comportamento para ‘mover de volta’ (Move back).
A fonte de dados deste elemento permanecerá como a tarefa de célula atual.
Depois de terminar de configurar cada um desses elementos, você adicionará o mesmo conteúdo dinâmico em seu cartão como fizemos antes.
Embora esses cartões agora possam ser movidos, precisaremos criar um workflow adicional que atualize a lista atual do cartão quando é colocada em uma nova coluna.
Em seu editor de workflow, agora você será capaz de acionar um evento quando uma área de soltar contiver um grupo.
Em seguida, precisaremos alterar um item no banco de dados, atualizando a lista de tarefas atuais para a lista onde está a ‘área de soltar’.
Editando o conteúdo de um cartão
Quando uma tarefa é criada, os usuários também precisam ser capazes de editar o conteúdo em cada cartão. Isso permitirá que eles atualizem o título da tarefa e até mesmo adicionem uma descrição mais detalhada. Usando estados personalizados no Bubble, podemos facilmente adicionar essa função ao seu programa.
Para começar, adicionaremos outro pop-up na página do nosso projeto, desta vez definindo-o como um tipo de conteúdo tarefa.
Neste pop-up, adicionaremos uma combinação de elementos, incluindo: uma input de texto, input multilinha, botões e um uploader de imagem.
Em vez de exibir o conteúdo como campos de texto simples, usaremos nossos inputs, definindo seu conteúdo inicial como propriedade das tarefas dos grupos pai (pop-up).
Por padrão, os inputs de texto podem ser editados pelos usuários. Precisamos desabilitar esse recurso, garantindo que ele só possa ser editado depois que o botão ‘editar’ for clicado.
Agora, criaremos um novo workflow quando nosso botão editar for clicado.
Dentro deste workflow, queremos definir um estado (set a state).
Este novo estado será baseado em nosso elemento pop-up e precisará ser um valor ‘sim / não’. Chamaremos esse estado de ‘estado de edição’. Isso nos permitirá determinar se nossa tarefa está em modo de edição.
Em seguida, precisaremos adicionar uma condição aos elementos de input em nosso pop-up. As condições são uma forma poderosa de definir regras para os elementos.
Neste caso, definiremos uma condição que reconhece se o estado do pop-up é ‘sim’, se for, esse elemento de input não será desabilitado.
No momento, nossos usuários estarão livres para fazer alterações nos inputs. Em seguida, precisaremos criar uma função que salve os novos valores quando o ‘botão editar’ for clicado novamente.
De volta ao nosso editor de workflow, criaremos outro evento que é disparado quando o botão editar é clicado. Desta vez, adicionaremos uma condição a este acionador de evento, permitindo que ele seja executado apenas quando o estado atual do pop-up for ‘sim’.
Dentro deste workflow, mais uma vez vamos alterar um item no banco de dados, atualizando os dados para a tarefa atual do pop-ups (grupos pais).
Em seguida, combinaremos nossos inputs com os campos relevantes em nosso banco de dados.
Finalmente, adicionaremos uma etapa extra que define o estado do nosso pop-up como ‘não’ – fechando nosso recurso de edição.
Agora que nosso pop-up foi criado e configurado, precisaremos voltar atrás e criar um workflow que exiba esse pop-up. Ele pode ser acionado quando um elemento em nosso grupo repetidor de tarefas é clicado.
Começaremos este workflow exibindo dados em um elemento.
O elemento de que precisaremos exibir esses dados será, é claro, nosso pop-up de tarefa. Esses dados precisarão incluir a tarefa da célula atual.
A última etapa neste workflow mostrará nosso elemento pop-up.
Excluindo uma tarefa
Ao editar uma tarefa, os usuários também podem precisar excluir um cartão na circunstância de ele não ser mais necessário.
Ao adicionar um botão de exclusão em nosso pop-up de tarefa, podemos criar facilmente um workflow para executar este evento.
Basta começar criando um workflow quando o botão excluir for clicado.
A seguir, vamos selecionar para excluir um item.
O item que queremos excluir é a tarefa do grupos pais.
Depois que uma tarefa for excluída, precisaremos fechar nosso pop-up. Basta usar o evento ocultar elemento para criar essa função.
Ao excluir qualquer tipo de dados em seu produto, você pode seguir este workflow simples.
Recursos adicionais que você pode criar em seu aplicativo tipo Trello
Depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, você pode começar a ser criativo com as experiências criadas no seu aplicativo de gerenciamento de projetos tipo Trello.
Adicionalmente, você pode:
- Adicionar suporte para arquivos e etiquetas aos cartões
- Criar uma função para adicionar vários usuários a um painel
- Criar um recurso para os usuários comentarem em cartões individuais.
- GATEWAYS DE PAGAMENTO: As melhores taxas para pagamentos online (2020)
- Novo Recurso Bubble – Importe arquivos Figma ou Sketch
ATENÇÃO: Este é um tutorial traduzido para Português a partir do original em Inglês. O Bubble possui dezenas de tutoriais ensinando a criar aplicativos de forma 100% visual, sem precisar programar.
Acesse aqui todos os tutoriais: https://bubble.io/how-to-build
Acesse aqui a versão original deste tutorial em inglês: https://bubble.io/blog/build-trello-clone-no-code/
