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

Confira neste artigo:

Compartilhe

Google Calendar Sem Codar

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.

aplicativo de calendário

Depois de instalar o plugin, você pode adicionar um calendário a qualquer página usando o elemento de calendário.

aplicativo 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.

aplicativo de calendário

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.

aplicativo de calendário

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.

aplicativo de 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.

aplicativo de calendário

O conteúdo que queremos exibir é o evento atual do calendário.

aplicativo de 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.

aplicativo de calendário

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.

aplicativo de 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.

aplicativo de 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.

aplicativo de calendário

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.

aplicativo de calendário

Mais uma vez, você mapeará cada um dos elementos na página com campos de dados relevantes no banco de dados.

aplicativo de calendário

Por fim, adicionaremos uma nova etapa para fechar esse elemento pop-up assim que as alterações forem feitas neste evento.

aplicativo de calendário

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/

Quer aprender mais sobre

Desenvolvimento de Aplicativos No-Code?

Comece por essa
Masterclass Gratuita

Uma aula gratuita onde você irá aprender tudo sobre o que No Code, Low Code, Bubble, FlutterFlow, programação visual, desenvolvimento sem código, quais as melhores ferramentas, o que é possível criar, e muito mais. Clique no botão abaixo para acessar essa aula 100% online e 100% gratuita: QUERO ASSISTIR A MASTER CLASS GRATUITA

Me Siga no Youtube @RenatoAsse

Me siga no YouTube para receber toda semana novos vídeos ensinando tudo sobre desenvolvimento visual de aplicativos e No-Code. SIGA O CANAL NO YOUTUBE

Inscreva-se na
Comunidade Sem Codar

Um curso online com centenas de aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble, FlutterFlow, AppGyver e desenvolvimento No Code e Low Code: ENTRAR NA COMUNIDADE SEM CODAR

Junte-se a nós e fique por dentro

Assine a News SemCodar