Quando descobri que podia criar aplicativos sem escrever uma única linha de código, pensei que isso significava criar aplicativos simples sem muita profundidade. Imaginei que conseguiria fazer coisas básicas, mas o projeto ficaria desafiador e eu teria que aprender a programar para fazê-lo funcionar.
A verdade é que, apesar da minha falta de habilidades técnicas — e do meu ceticismo — criei alguns aplicativos muito legais, e levou apenas algumas semanas para chegar a um resultado funcional.
Mas como? Ferramentas sem código simplificam conceitos avançados de programação, tornando-os mais fáceis de entender e usar. Em vez de ter que escrever código ou digitar comandos manualmente, você pode usar interfaces visuais, elementos de arrastar e soltar e assistentes para configurar tudo do jeito que quiser.
Neste guia, vou orientá-lo passo a passo na criação de um aplicativo simples com uma ferramenta sem código chamada Bubble. Quando terminar, você entenderá os princípios básicos da criação de aplicativos sem necessidade de programação avançada e estará no caminho certo para criar coisas novas e interessantes sem necessidade de programação avançada.
Uma introdução ao meu aplicativo de lista de tarefas a fazer
Things To Do é o aplicativo modelo que recriaremos hoje. É um aplicativo de lista de tarefas a fazer onde você pode:
Veja as tarefas que você precisa fazer hoje
Adicionar e excluir novas tarefas da lista
Marcar tarefas como concluídas
Ver uma lista de tarefas concluídas
Aqui está um exemplo de design:
Você pode explorar a funcionalidade visitando o site do aplicativo. Faça o registro com as credenciais de teste fornecidas na página e testar. Mas tenha cuidado: outras pessoas podem estar testando ao mesmo tempo, então você pode ver muitas tarefas indo e voltando.
Seguir este guia até o final levará cerca de duas horas.
Antes de começarmos
Antes de começarmos a criar nossa própria versão do Things To Do, você precisará criar uma conta gratuita no Bubble.
Se desejar, você também pode fazer o curso intensivo, um conjunto de 10 lições que explicam os principais conceitos em uma série de instruções etapa a etapa. Mas você pode pular essa parte por enquanto, pois explicarei o que estamos fazendo à medida que avançamos.
Depois de criar uma conta, clique no botão Novo aplicativo , preencha as informações na caixa de diálogo e escolha Começar com uma página em branco.
Parte 1: Configurando o banco de dados
A maioria dos aplicativos modernos depende de um banco de dados para funcionar. Um banco de dados permite que você armazene, mantenha e acesse dados, ao mesmo tempo em que possibilita criar relacionamentos entre diferentes elementos de dados.
Vamos acessar a parte do Bubble que lida com dados. Clique na aba Dados na barra de navegação à esquerda da tela.
Ao criar um aplicativo, armazenaremos dados de nossos usuários em nosso banco de dados. Dependendo do que precisamos para alimentar os recursos do aplicativo, você precisará de diferentes tipos de dados.
No momento, há apenas o tipo de dados Usuário. Ele é configurado por padrão e monitora os usuários do aplicativo, seus endereços de e-mail, senhas, a data em que foi criado ou modificado, quem criou o usuário e o slug.
Como estamos criando uma lista de tarefas a fazer, precisaremos de uma maneira de armazenar as tarefas que cada usuário criará para preencher sua lista. No campo de entrada Novo tipo , digite "Tarefa" e clique em Criar.
Agora que temos um tipo de dados para tarefas, precisamos armazenar mais informações sobre cada tarefa. Precisamos ter uma descrição da tarefa para que os usuários possam registrar que precisam passear com o cachorro ou arrumar a cama; também precisamos de uma maneira de armazenar o status da tarefa, se ela ainda precisa ser feita ou se já foi concluída.
Vamos criar esses campos agora. Clique em Criar um novo campo.
Na caixa de diálogo Nome do campo que aparece, digite "descrição". Os campos de dados também precisam de um tipo. Clique no menu suspenso Tipo de campo e escolha texto. Quando terminar, clique em Criar.
Vamos repetir o processo para o status da tarefa. Clique em Criar um novo campo, digite "status" em Nome do campo e defina o Tipo de campo como número.
Por que o tipo de número? Usaremos um sistema numérico para monitorar o status da nossa tarefa. Tarefas com o número 0 serão tratadas como não concluídas, e tarefas com o número 5 serão consideradas concluídas. O motivo pelo qual escolhemos 0 e 5 (e não 0 e 1, por exemplo) é para permitir algum espaço para criar status de tarefas adicionais no futuro. Afinal, do backlog à lista de concluídos, também poderíamos adicionar um status "agendado" ou "em andamento".
Agora temos as informações básicas necessárias para que o tipo de dados Tarefas seja útil. Há apenas um pequeno problema: quando tivermos nossos primeiros 10 usuários no aplicativo e todos esses usuários começarem a criar suas tarefas, teremos dificuldade em atribuir cada tarefa ao seu legítimo proprietário. Isso pode deixar as coisas agitadas no longo prazo, então adicionaremos um campo de dados adicional para registrar quem é o proprietário de cada tarefa.
Clique em Criar um novo campo. Na caixa de diálogo, defina o Nome do campo como proprietário. Para Tipo de campo, abra o menu suspenso e escolha Usuário na parte inferior. Por fim, clique em Criar.
Os campos de dados para o tipo de dados Tarefa estão todos definidos. Sua tela deverá ficar assim:
Ao criar o aplicativo posteriormente, será útil fixar cada tarefa para cada usuário no banco de dados também. Vamos configurar isso agora. Clique no tipo de dados do usuário .
Clique em Criar um novo campo. Nomeie-o como "tarefas", defina o Tipo de campo como Tarefa e, antes de clicar em Criar, lembre-se de marcar Este campo é uma lista (várias entradas). Isso garante que cada usuário possa adicionar quantas tarefas forem necessárias neste campo.
Agora estamos prontos para encaminhar. (Observação: se você quiser adicionar mais recursos ao seu aplicativo, será necessário revisitar a guia de dados no futuro.)
Digamos que você gostaria de adicionar uma maneira para cada usuário rastrear projetos. Isso significa que você teria que criar um tipo de dado Projetos e fornecer todos os campos relevantes para identificar o proprietário do projeto, os participantes e as tarefas. O mesmo se aplicaria se você quisesse permitir que os usuários formulassem equipes.
Lembre-se de que sempre que precisar armazenar mais tipos de dados em seu aplicativo, você terá que expandir seu banco de dados. Por enquanto, vamos prosseguir com a criação da interface do usuário.
Parte 2: Criando a interface do usuário
A interface do usuário (IU) é com o que seus usuários interagem para escrever e recuperar informações do banco de dados, além de executar as operações lógicas que tornam seu aplicativo útil — neste caso, o aplicativo de lista a fazer.
Primeiro, precisamos adicionar uma nova página. Uma página de aplicativo funciona de maneira muito semelhante a uma página de site: você pode usá-la para separar diferentes atividades ou painéis. Clique no menu suspenso que exibe a página atual no canto superior esquerdo da tela.
Clique em Adicionar uma nova página.
Defina o nome da página como lista e deixe o menu suspenso em branco. Clique em Criar.
É hora de começar a projetar. Observe o construtor de IU na parte esquerda da tela:
A árvore Elementos exibirá uma lista de todos os elementos que você adicionou à página até o momento. Tudo abaixo desta seção são os elementos que você pode adicionar à página, que são divididos em categorias.
Vamos adicionar um grupo que conterá nossa lista de a fazer. Na seção Contêineres , clique em Grupo.
Agora, desenhe um retângulo largo na tela.
Quando terminar, a caixa de diálogo de edição aparecerá. Este tipo de diálogo permitirá que você edite os detalhes de cada elemento adicionado à página. Vamos começar alterando o nome do elemento para manter as coisas organizadas. Clique no cabeçalho desta caixa de diálogo e renomeie-a como "Listas de Grupos".
Vamos dar uma borda. Clique em Remover estilo para desbloquear a edição de estilo individual para este grupo.
Agora, defina o Estilo da borda - todas as bordas como Sólido, Arredondamento como 10 e Largura como 2.
Vamos ajustar o tamanho e a posição deste grupo para garantir que ele possa conter tudo o que precisamos. Clique na aba Layout na janela de edição.
Preencha a largura (L), altura (A), posição X (X) e posição Y (Y) com os seguintes valores:
O 731
H 393
X 114
E 134
Este grupo servirá apenas como um elemento visual, então não vamos mais mexer nele.
É hora de adicionar um grupo de repetição para mostrar a lista de tarefas a fazer. Um grupo de repetição é um tipo especial de grupo que exibe dados em uma série de linhas e colunas, permitindo que você visualize muitos dados de maneira simples.
No menu esquerdo do UI Builder , em Contêineres, clique em Grupo de Repetição.
Desenhe o grupo de repetição dentro das Listas de Grupos que acabamos de configurar. Certifique-se de que ele cubra a maior parte da área interna.
Quando a caixa de diálogo de edição do grupo de repetição aparecer, você notará que estamos na guia Layout . Insira os seguintes valores de largura, altura, X e Y:
O 671
H 346
X 28
E 16
Vamos manter as coisas organizadas. Renomeie este grupo de repetição para "Lista de Tarefas a Fazer do Grupo de Repetição" clicando no cabeçalho do diálogo de edição.
Vamos editar um pouco mais a aparência deste grupo. Clique na aba Aparência .
Defina o número de linhas como 6.
Vamos também nos livrar do separador de linhas. Clique em Remover estilo como antes para editar o estilo deste elemento de forma independente. Nas novas configurações que aparecem, clique no menu suspenso em frente ao Separador e defina-o como Nenhum.
Hora de configurar algumas funcionalidades. Precisamos avisar ao Bubble que esse grupo repetidor mostrará nossas tarefas a fazer. Clique no menu suspenso Tipo de conteúdo e escolha Tarefa.
Mas isso não é suficiente para exibir as tarefas — também precisamos dizer onde obter as tarefas que queremos exibir. Na entrada Fonte de dados, você notará um pequeno retângulo convidando você a "clique". Clique aqui para acionar um menu suspenso.
No menu suspenso, escolha Fazer uma pesquisa por.
Na nova caixa de diálogo à esquerda, no menu suspenso Tipo , clique em Tarefa.
Mas não queremos exibir todas as tarefas, certo? Queremos apenas exibir as tarefas que ainda estão incompletas e as tarefas que pertencem ao usuário atual. Clique em Adicionar uma nova restrição.
Clique no pequeno retângulo dentro do campo de entrada que aparece.
No menu suspenso, clique em status.
Clique novamente e escolha =.
Por fim, clique novamente, digite 0 (zero) e pressione enter. Essa restrição fará o filtro dos resultados, exibindo apenas as tarefas com status 0 (não concluídas).
Clique abaixo para adicionar outra restrição. Então:
clique no campo de entrada
escolher proprietário
clique novamente para selecionar =
e clique uma última vez para escolher Usuário atual
Essa expressão garante que os resultados conterão apenas tarefas criadas pelo usuário atual, não tarefas que pertencem a outros usuários no aplicativo. O resultado final deve ficar assim:
Nossa Lista de Tarefas a fazer do RepeatingGroup está extraindo informações corretamente do banco de dados, mas não há como nossos usuários vê-las. Você pode fechar a caixa de diálogo de edição pressionando o ícone X no canto superior direito.
Agora, precisamos adicionar elementos de texto dentro do grupo de repetição e configurá-los para mostrar os dados corretos.
Antes de começar, lembra que o grupo de repetição tem várias linhas? Uma grande vantagem desse elemento é que, quando você configura a primeira linha, todas as outras linhas terão o mesmo design e funcionalidade. Isso permite que você crie recursos como um feed de mídias sociais, uma lista de produtos em uma loja online ou — você adivinhou — tarefas em uma lista de tarefas a fazer.
No menu UI Builder à esquerda, arraste um elemento Texto dos Elementos visuais e solte-o dentro da primeira linha do grupo de repetição. Se você vir uma linha vermelha aparecendo sob o cursor, você está fazendo certo.
Veja como isso está sendo replicado para as outras linhas? Esta é uma prévia de como ficará no final. Clique com o botão direito do mouse no elemento de texto e clique em Editar.
No campo de entrada superior, apague "…edite-me…" e clique no botão azul Inserir dados dinâmicos.
No menu suspenso, selecione Descrição da tarefa da célula atual.
Cada um desses elementos de texto puxará a tarefa da célula correspondente e mostrará sua descrição. Poderíamos repetir o processo para outros campos de dados — por exemplo, para mostrar o status da tarefa ou a data de criação — mas isso não será necessário por enquanto.
Uma lista a fazer também precisa de um método para marcar tarefas como concluídas. Arraste um elemento Ícone do menu Elementos visuais e solte-o dentro da primeira linha do grupo de repetição no lado direito.
O ícone padrão é uma bandeira. Escolha um ícone apropriado para a ação que queremos ilustrar. Também precisamos torná-lo menor. Arraste as alças de limite do ícone para redimensioná-lo ou clique na guia Layout e insira os seguintes valores:
O 30
H 30
X 609
E 14
Vamos continuar mantendo as coisas organizadas. Altere o nome do ícone para "Ícone Marcado como Concluído".
Se os usuários cometerem um erro ao adicionar tarefas, seria útil ter um botão para excluir a tarefa. Repita o processo para adicionar um ícone para excluir uma tarefa. Use o mesmo método para redimensionar o ícone e não se esqueça de nomeá-lo "Tarefa de exclusão de ícone".
É hora de adicionar um botão para adicionar tarefas à nossa lista. Também usaremos um ícone para esse efeito. Coloque-o no canto superior direito da lista a fazer e nomeie-o como "Ícone Nova Tarefa".
Para adicionar novas tarefas, abriremos um pop-up com um campo de entrada e um botão. No menu UI Builder à esquerda, em Contêineres, clique em Pop-up e, em seguida, clique no meio da tela para posicioná-lo.
Renomeie o pop-up na janela de edição para "Popup Nova Tarefa". Em seguida, adicione um elemento de texto ao pop-up e escreva "Criar nova tarefa" nele.
Vamos mudar o estilo deste texto para algo mais impactante. Clique no menu suspenso Estilo e escolha H2 Título - Escuro.
Use as alças do elemento para redimensioná-lo e posicioná-lo no pop-up. Para centralizar, clique com o botão direito e pressione Centralizar horizontalmente. Você também pode usar as setas do teclado para mover o elemento.
Adicione um campo de entrada sob o elemento de texto (você o encontrará no menu UI Builder , na seção Formulários de entrada ). Edite o valor do espaço reservado para "insira uma descrição aqui…"
Por fim, adicione um botão (você o encontrará em Elementos visuais no menu à esquerda) abaixo desses dois elementos e rotule-o como "criar tarefa".
O pop-up está obstruindo o resto do nosso aplicativo. Clique fora dele para ocultá-lo. Se quiser vê-lo novamente mais tarde, você pode alternar sua visibilidade no menu à esquerda, na árvore Elementos. Procure o pop-up ali e clique no pequeno ícone de olho para mostrá-lo ou ocultá-lo.
A interface do nosso aplicativo está quase completa. Vamos adicionar uma lista para permitir que nossos usuários vejam as tarefas concluídas. Usaremos outro grupo de repetição que fará o filtro de tarefas com base no status e no proprietário, muito parecido com o primeiro que criamos.
Clique com o botão direito do mouse na Lista de Tarefas a fazer do RepeatingGroup e clique em Editar.
Clique na aba Layout .
Desmarque Este elemento fica visível no carregamento da página. Usaremos essa propriedade para criar um menu mais tarde que exibirá as tarefas a fazer ou as tarefas concluídas.
Observe a largura (L), altura (A), posição X (X) e posição Y (Y) deste elemento. Neste caso, é W 675, H 347, X 22, Y 19.
Agora, feche a caixa de diálogo. Clique com o botão direito do mouse na Lista de Tarefas a fazer do RepeatingGroup e clique em Copiar.
Clique com o botão direito do mouse na região superior esquerda das Listas de Grupos e selecione Colar.
Uma cópia do grupo de repetição foi colada ligeiramente afastada do original. Você também notará que um novo elemento apareceu dentro da Árvore de elementos no menu à esquerda. Clique no pequeno olho para ocultar a Lista de tarefas a fazer do RepeatingGroup.
Agora, clique na cópia da Lista de Tarefas do RepeatingGroup para abrir o diálogo de edição.
Para manter tudo organizado, altere o nome deste grupo para RepeatingGroup Lista Concluída (para fazer isso, clique no nome no cabeçalho do diálogo de edição).
Clique na guia Layout e insira os valores L, A, X, Y que você copiou anteriormente (L 675, A 347, X 22, Y 19). Isso garantirá que ambas as listas tenham as mesmas dimensões e posição na página.
É hora de mudar o tipo de tarefas que mostraremos nesta lista. Clique na aba Aparência .
No campo Fonte de dados , clique na expressão Pesquisar tarefas. Uma nova caixa de diálogo aparecerá. Na restrição de status , altere "0" para "5" (é o número que decidimos que marcaria uma tarefa como concluída). Deixe todos os outros campos como estão.
Não precisaremos de um ícone de exclusão para tarefas concluídas dentro da lista "concluídas". Você pode clicar com o botão direito e excluí-lo.
O ícone para indicar que a tarefa foi concluída deve ser diferente daquele que temos para marcar a tarefa como concluída. Escolha um ícone mais apropriado. Depois de encontrar o caminho certo:
Mude sua cor para verde (clique com o botão direito do mouse no ícone, clique em Editar; em Estilo , clique em Remover estilo, e você verá um seletor de cores acima).
Altere o nome para "Ícone Concluído".
Agora temos dois grupos de repetição—um mostra as tarefas a fazer e o outro é uma lista de tarefas concluídas. Precisamos de uma maneira de alternar entre eles. Vamos adicionar um menu simples no topo da lista a fazer exatamente isso.
Adicione um ícone sugerindo a funcionalidade do menu no canto superior esquerdo. Nomeie-o como "Listas de Ícones".
Adicione um botão rotulado "a fazer", seguido de outro rotulado "concluído".
Usaremos algo chamado "estados de elementos personalizados" para alternar a visibilidade de cada lista. Os estados de elementos personalizados são uma maneira ágil de controlar muitos aspectos da interface do usuário no Bubble.
Clique com o botão direito do mouse nas Listas de ícones que colocamos e clique em Editar.
Clique no pequeno botão i no cabeçalho da caixa de diálogo de edição (Inspetor de elementos).
Em Estados personalizados, clique em Adicionar um novo estado personalizado.
Defina o nome do estado como "lista ativa" e o tipo de estado como "número". Finalize clicando em Criar.
Usaremos esse estado da seguinte maneira: sempre que o estado for definido como 1, a Lista de Tarefas a fazer do RepeatingGroup ficará visível; quando o estado for definido como 2, a Lista de Concluídas do RepeatingGroup ficará visível. Como queremos que nossos usuários vejam a lista a fazer sempre que abrirem a página pela primeira vez, podemos definir o valor padrão como 1.
Agora que temos esse estado personalizado, precisamos informar aos nossos grupos repetitivos quando eles devem aparecer e desaparecer. Na árvore Elementos, clique na lista de tarefas a fazer do RepeatingGroup.
Na caixa de diálogo de edição que aparece, clique na aba Condicional .
Esta aba permite que você altere as características deste elemento quando certas condições forem verdadeiras. Vamos adicionar uma nova condição. Clique em Definir outra condição.
Clique no campo de entrada na frente de Quando. No menu suspenso que aparece:
Role para baixo para encontrar as Listas de ícones e clique nelas.
Continue a expressão selecionando a lista ativa de ' s.
Em seguida, selecione é.
Digite o número 1 e pressione enter no seu teclado
O resultado deve ficar assim:
Clique no menu suspenso Selecionar uma propriedade para alterar quando verdadeiro.
Selecione Este elemento é visível.
Não se esqueça de marcar a caixa.
Veja o que está acontecendo: sempre que o estado personalizado da lista de ícones for 1, esse grupo de repetição será exibido. Vamos repetir um processo semelhante para exibir a lista de tarefas concluídas. No menu à esquerda, dentro da árvore Elementos, clique na lista RepeatingGroup concluída.
A caixa de diálogo de edição já deve estar na aba Condicionais . Clique para definir a expressão como antes:
Selecione Listas de ícones > Lista ativa de > é.
Desta vez, digite o número 2 e pressione enter.
Clique no menu suspenso Selecione uma propriedade para alterar quando verdadeiro, escolha Este elemento é visível e marque a caixa.
Agora, sempre que o estado personalizado da lista de ícones for definido como 2, este grupo de repetição será exibido. Configuraremos os meios para alterar esses estados (e alterar a visibilidade desses elementos) na seção a seguir.
A interface do usuário está pronta para uso. Temos todos os elementos extraindo informações do banco de dados e exibindo as informações da maneira que queremos, e também temos todos os botões e estados necessários para a funcionalidade. É hora de unir tudo com fluxos de trabalho.
Parte 3: Lógica e fluxos de trabalho
Agora vem a parte emocionante. É quando o aplicativo realmente fará o que queremos que ele faça. Agora, configuraremos todos os botões e ícones para executar as ações corretas.
Clique com o botão direito do mouse no ícone para adicionar uma nova tarefa e clique em Iniciar/Editar fluxo de trabalho.
Usaremos este botão para exibir um pop-up. Clique Clique aqui para adicionar uma nova ação…
Passe o mouse sobre Ações do elemento e clique em Mostrar.
Uma nova caixa de diálogo aparece. Clique no menu suspenso Elemento e selecione Nova tarefa pop-up.
Agora, sempre que o usuário clicar nesse botão, será exibido o pop-up Nova tarefa. Vamos voltar para a aba Design para encontrar o próximo elemento que iremos configurar.
Vamos configurar o botão para criar tarefas que colocamos dentro do pop-up. Torne o pop-up visível clicando no pequeno ícone de olho no menu da árvore Elementos, no lado esquerdo da tela.
Clique com o botão direito do mouse no botão criar tarefa e clique em Iniciar/Editar fluxo de trabalho.
Esse fluxo de trabalho será mais longo. Clique para adicionar uma nova ação. Passe o mouse sobre Dados (Coisas) e clique em Criar uma nova coisa.
O tipo de coisa que queremos criar é Tarefa. Selecione-o no menu suspenso.
Queremos preencher alguns campos de dados da tarefa. Clique em Definir outro campo.
Clique no campo de entrada e selecione descrição no menu suspenso.
Clique na área em frente ao sinal =. No menu suspenso que aparece, clique em Entrada e insira uma descrição.
Isso permitirá que o Bubble saiba que ele deve preencher o campo de dados "descrição" com o que estiver dentro do campo de entrada que colocamos dentro do elemento pop-up anteriormente. Conclua a expressão selecionando o valor de.
Quando uma tarefa é criada, é provável que ela não esteja concluída. Clique para definir outro campo. Selecione o status no menu suspenso.
Clique na área em frente ao sinal =. Não escolheremos nada no menu suspenso. Basta digitar o número "0" e pressionar enter no seu teclado.
Por fim, precisamos definir um proprietário para esta tarefa. Repita o processo para definir outro campo e escolha proprietário como o campo a ser definido. Clique na área em frente ao sinal =. Selecione Usuário atual no menu suspenso.
A etapa 1 foi concluída. Agora, associaremos esta tarefa à conta do usuário atual. Clique para adicionar uma nova ação.
Em Conta, clique em Fazer alterações no usuário atual.
Clique em Alterar outro campo.
Clique no campo de entrada e escolha tarefas no menu suspenso.
Clique novamente e selecione adicionar.
Clique novamente e selecione Resultado da etapa 1 (Criar uma nova tarefa…).
A etapa 2 foi concluída. Ele associará cada tarefa que o usuário criar à sua própria conta. Isso economizará tempo e recursos quando o aplicativo procurar no banco de dados para mostrar todas as tarefas de um usuário específico. É por isso que é crucial concluir esta etapa.
A etapa 3 redefinirá o campo de entrada, limpando a caixa de descrição. Se a ação ainda não tiver sido sugerida pelo Bubble, clique para adicionar uma nova ação, passe o mouse sobre Ações do Elemento e clique em Redefinir Entradas.
Por fim, vamos ocultar o pop-up depois que a tarefa for adicionada. Clique para adicionar uma nova ação, passe o mouse sobre Ações do Elemento e clique em Ocultar.
Clique no menu suspenso de elementos e escolha Nova Tarefa Pop-up.
Este fluxo de trabalho está completo. Vamos configurar nosso menu com estados de elementos personalizados. Clique na aba Design para ver a interface do nosso aplicativo novamente.
Clique com o botão direito do mouse no botão a fazer e clique em Iniciar/Editar fluxo de trabalho.
Clique para adicionar uma nova ação. Passe o mouse sobre Ações do elemento e clique em Definir estado.
No Elemento, encontre o ícone chamado Listas de Ícones e clique nele.
Clique no menu suspenso Estado personalizado e escolha active-list.
Clique na entrada Valor , digite 1 e pressione Enter.
Veja o que fizemos aqui: sempre que o usuário clicar no botão "a fazer", o estado personalizado armazenado dentro das Listas de ícones mudará para 1, exibindo a Lista de tarefas pendentes do RepeatingGroup e ocultando a Lista de tarefas concluídas do RepeatingGroup.
Volte para a aba Design . Clique com o botão direito do mouse no botão Concluído e clique em Iniciar/Editar fluxo de trabalho.
Clique para adicionar uma nova ação. Em Ações do elemento, clique em Definir estado.
Repetiremos o mesmo processo de antes. Escolha Listas de ícones como o elemento e active-list como o estado personalizado, mas desta vez, defina o valor como 2 e pressione Enter.
Quando o usuário clique neste botão, o estado armazenado dentro do elemento Listas de ícones muda para 2, ocultando a Lista de tarefas a fazer do RepeatingGroup e mostrando a Lista de tarefas concluídas do RepeatingGroup.
Vamos voltar para a aba Design . Cuidaremos dos fluxos de trabalho dos ícones dentro da Lista de Tarefas a fazer do RepeatingGroup usando uma abordagem um pouco diferente. No menu da árvore Elementos à esquerda, clique no ícone + para expandir o conteúdo da Lista de Tarefas do RepeatingGroup.
Clique no ícone Excluir tarefa . Isso abrirá a caixa de diálogo de edição. Clique na aba Aparência se ela ainda não estiver sendo exibida e depois clique no botão Iniciar/Editar fluxo de trabalho (é outra maneira de acessar a página do fluxo de trabalho).
Clique para adicionar uma nova ação. Em Dados (Coisas), clique em Excluir coisa.
No campo de entrada Para excluir , escolha Tarefa da célula atual.
Lembra como associamos cada tarefa ao seu proprietário? Precisamos remover essa tarefa da conta do proprietário também. Clique para adicionar uma nova ação. Passe o mouse sobre Conta e clique em Fazer alterações no usuário atual.
Clique em Alterar outro campo. Então:
Clique no campo de entrada e escolha tarefas.
Clique novamente e escolha remover.
Clique uma terceira vez e escolha Tarefa da célula atual.
Agora, os usuários podem excluir tarefas. Vamos voltar para a aba Design . Na árvore Elementos, clique no ícone Marcar como Concluído para abrir a janela de edição. Clique em Iniciar/Editar fluxo de trabalho.
Quando os usuários clicam neste ícone, significa que a tarefa passará de incompleta para concluída. Decidimos que incompleto é representado por 0 e completo é 5. Clique para adicionar uma nova ação. Em Dados (Coisas), clique em Fazer alterações em uma coisa.
Em Coisa a ser alterada, clique em Tarefa da célula atual.
Clique em Alterar outro campo. Clique no campo de entrada para escolher o status e digite o número 5.
Quando um usuário clique neste ícone, o campo de dados de status da tarefa muda de 0 para 5, passando de incompleto para concluído.
Parte 4: Teste
É hora de testar e ver se tudo está funcionando bem. Clique no botão Visualizar no canto superior direito da tela.
Uma nova aba no seu navegador será aberta, mostrando uma prévia do aplicativo final. Use esta janela de visualização para testar seu aplicativo. O menu está funcionando bem? Você pode adicionar, excluir e marcar tarefas como concluídas? Se sim, você concluiu todas as etapas com sucesso. Parabéns!
(Procure o depurador na parte inferior da tela. Você pode usá-lo para solução de problemas em seu aplicativo.)
Próximas etapas
Esta é apenas a base para um pequeno aplicativo de produtividade. A partir daqui, você pode adicionar quantos recursos novos quiser, enquanto personaliza a aparência conforme avança.
Não importa se você está criando algo para si mesmo, algo para sua empresa ou um produto ou serviço totalmente novo, o Bubble e outros criadores de aplicativos sem necessidade de programação avançada no mercado oferecem as ferramentas necessárias para criar um aplicativo da web poderoso e refinado sem uma única linha de código.
Quer saber mais? Explore a série Como construir do Bubble e pratique suas habilidades de criação de aplicativos enquanto replica aplicativos populares.
Leitura relacionada:
Nós não codificamos. Mas construímos nosso MVP por $100/mês.
Como lancei um aplicativo usando ferramentas sem necessidade de programação avançada
Relatório de dados Zapier: A ascensão do sem necessidade de programação avançada
Começando com sem necessidade de programação avançada: um curso gratuito da Makerpad e Zapier
