Aprenda como criar seu próprio aplicativo de calendário e agenda tipo Google Calendar, usando o editor visual da web do Bubble.
Existem muitos aplicativos de calendário excelentes para atender às amplas necessidades dos usuários no dia-a-dia. Mas e se você quiser criar seu próprio aplicativo de calendário? Felizmente, é mais fácil do que nunca começar a desenvolver seu próprio aplicativo personalizado com ferramentas sem código como o Bubble. Criadores de qualquer origem podem fazer rapidamente um software poderoso para atender às suas necessidades específicas.
A plataforma única da Bubble simplificou o processo de desenvolvimento de software sem ter que escrever uma única linha de código. Usamos o Bubble para criar lojas virtuais, diretórios e até redes sociais.
Ao longo deste guia, abordaremos como criar seu próprio aplicativo de agenda – como o Google Calendar. Nossas instruções passo a passo tornarão mais fácil para você acompanhar e criar seu próprio aplicativo exclusivo do zero e gratuito.
As etapas para criar um aplicativo de calendário tipo Google Calendar sem precisar programar, e gratuito, incluem:
Índice
Fazer cadastro gratuito no Buble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Agora você pode acompanhar enquanto fazemos nosso app juntos.
Configurando o banco de dados
Ao criar nosso aplicativo de calendário, a primeira coisa que precisamos fazer é configurar nosso banco de dados para oferecer suporte ao conteúdo que irá alimentar nosso app.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Para nosso MVP Google Calendar, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Evento do calendário
Campos:
- Nome
- Descrição
- Data / Hora de início
- Data / Hora de término
Criando um Google Calendar sem programar
O primeiro recurso principal que criaremos em nosso aplicativo é, obviamente, o próprio calendário. Usando o editor do Bubble, você pode ter um calendário instalado e funcionando em questão de segundos.
Um dos principais recursos do Bubble é a biblioteca de plugins que podem se integrar perfeitamente ao seu aplicativo. Os plugins são uma forma poderosa de agilizar o tempo de criação de recursos comuns, permitindo que você trabalhe naqueles que são únicos do seu aplicativo.
Para o nosso MVP, usaremos nosso plugin de calendário gratuito para começar.
Depois de instalar o plugin, você pode adicionar um calendário a qualquer página usando o elemento de calendário.
Agora que adicionou o elemento de calendário à sua página, você precisará configurar sua fonte de dados para corresponder ao seu banco de dados. Nesse caso, queremos que o calendário exiba o tipo de dados eventos do calendário que você criou. Também adicionaremos uma restrição extra para exibir apenas os eventos criados pelo usuário atual.
Também precisaremos configurar os campos de horário de início e término da propriedades de dados relevantes que criamos para cada evento.
Depois, combinaremos o campo legenda do evento em nosso campo de dados nome do evento, para cada evento.
Finalmente, configuraremos nossos elementos de input de data para dividir entre data e hora. Isso será necessário para anexar horários específicos a cada evento que criamos.
Criando novos eventos
Depois de configurar a IU / UI (interface de usuário / user interface) do seu calendário, é hora de começar a criar os principais workflows que você esperaria em qualquer aplicativo de calendário.
O primeiro workflow que faremos é uma função para criar novos eventos. Em nosso editor de workflow, criaremos um gatilho quando um usuário clicar em um dia do calendário.
A próxima etapa em nosso workflow será exibir um elemento pop-up. Popups são uma maneira útil de exibir informações ou criar eventos sem direcionar o usuário para fora da página atual.
Em nosso elemento pop-up, usaremos uma combinação de elementos de input de texto, input multilinha e data / hora. Isso permitirá que um usuário adicione os detalhes específicos ao seu novo evento.
Em seguida, criaremos um novo workflow assim que o botão criar for clicado.
Dentro deste workflow, queremos criar um novo item no banco de dados. O item que queremos criar é um evento.
Em seguida, você combinará os elementos na página aos campos de dados que criamos para nossos eventos de calendário.
Finalmente, adicionaremos uma etapa extra ao nosso workflow, ocultando o elemento pop-up assim que um novo evento for criado.
Visualizando detalhes de eventos e fazendo edições
Usando outro elemento pop-up, criaremos um recurso que permite aos usuários visualizar os detalhes de um evento, assim como fazer alterações em qualquer um dos campos de dados.
Comece criando um workflow que é acionado quando um usuário clica em um evento existente no calendário.
Em seguida, queremos exibir um pop-up separado onde os usuários podem revisar o conteúdo existente de um evento específico. Antes de mostrar este pop-up, primeiro precisamos enviar os dados para este evento escolhido.
O conteúdo que queremos exibir é o evento atual do calendário.
Depois que esse conteúdo for enviado para nosso novo pop-up de visualização, precisaremos criar uma etapa adicional em nosso workflow para mostrar esse elemento pop-up.
O design deste pop-up pode ser replicado de nossa primeira versão, mas desta vez, precisaremos configurar a fonte de dados para este elemento.
Como queremos exibir os dados existentes, atualizaremos o tipo de dados como evento, depois adicionaremos a fonte de dados para ser nosso evento atual do calendário.
Também precisaremos dos inputs do evento para exibir o conteúdo existente que foi adicionado quando o evento foi criado.
Faremos isso configurando o campo de conteúdo inicial para cada elemento. O conteúdo que queremos exibir também é aquele do evento atual do calendário.
Após o usuário alterar um input, precisaremos criar um workflow adicional que atualize esse evento no calendário quando o botão atualizar for clicado.
Este workflow será semelhante à criar o evento no calendário, mas desta vez faremos alterações em um item, em vez de criar um novo item no banco de dados.
Mais uma vez, você mapeará cada um dos elementos na página com campos de dados relevantes no banco de dados.
Por fim, adicionaremos uma nova etapa para fechar esse elemento pop-up assim que as alterações forem feitas neste evento.
Excluindo um evento no aplicativo de calendário
O último recurso que adicionaremos é uma função para excluir eventos, porque às vezes as coisas nem sempre saem como planejado.
Criando a partir do mesmo pop-up de visualização / edição, faremos um workflow quando o botão excluir for clicado.
Em seguida, vamos selecionar excluir o item.
O item que queremos excluir é evento atual do calendário..
Não se esqueça de adicionar uma etapa extra para ocultar esse elemento pop-up assim que o evento for excluído.
Recursos adicionais para um Google Calendar no code
Assim que estiver familiarizado 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 os recursos que adiciona ao seu aplicativo tipo Google Calendar. Para alguns recursos adicionais, você pode:
- Adicionar conteúdo extra para cada evento da agenda – mapas, links, fotos;
- Permitir que usuários convidem outras pessoas para participar de seus eventos;
- Criar integrações com aplicativos de terceiros e workflows por meio da API Bubble.
Veja tmabém nossos Tutoriais em Vídeo:
Login Social Facebook e Google (TUTORIAL NO CODE)
Como integrar sua Google Planilha via API ao Bubble com Sheety.co
Como Criar um Aplicativo Guia Comercial integrado com Google Locais
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-google-calendar-clone-no-code/
