Como criar um app de calendário e agenda como o Google Calendar

Aprenda como criar seu próprio aplicativo de calendário e agenda tipo Google Calendar, usando o editor visual da web do Bubble.

Criar aplicativo Google Calendar Agenda no 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:

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
Criar aplicativo Google Calendar Agenda no Bubble

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.

Criar aplicativo Google Calendar Agenda no Bubble

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.

Criar aplicativo Google Calendar Agenda no Bubble
Bubble No Code Tutorial Calendar App Clone Walkthrough Workflow

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.

Criar aplicativo Google Calendar Agenda no Bubble

Em seguida, criaremos um novo workflow assim que o botão criar for clicado.

Criar aplicativo Google Calendar Agenda no Bubble

Dentro deste workflow, queremos criar um novo item no banco de dados. O item que queremos criar é um evento.

Criar aplicativo Google Calendar Agenda no Bubble

Em seguida, você combinará os elementos na página aos campos de dados que criamos para nossos eventos de calendário.

Criar aplicativo Google Calendar Agenda no Bubble

Finalmente, adicionaremos uma etapa extra ao nosso workflow, ocultando o elemento pop-up assim que um novo evento for criado.

Criar aplicativo Google Calendar Agenda no Bubble

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.

Criar aplicativo Google Calendar Agenda no Bubble

Em seguida, vamos selecionar excluir o item.

Criar aplicativo Google Calendar Agenda no Bubble

O item que queremos excluir é evento atual do calendário..

Criar aplicativo Google Calendar Agenda no Bubble

Não se esqueça de adicionar uma etapa extra para ocultar esse elemento pop-up assim que o evento for excluído.

Criar aplicativo Google Calendar Agenda no Bubble

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/

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email

FIQUE POR DENTRO DAS NOVIDADES

Cadastre-se Gratuitamente