Criando um aplicativo de consultas médicas tipo Zocdoc com o Bubble

Aprenda como criar seu app para agendamento de consultas grátis usando o editor visual web do Bubble.

Como criar um aplicativo para agendamento de consultas médicas tipo Zocdoc.

Quando estiver se sentindo mal, um aplicativo de consultas médicas como o Zocdoc simplifica o processo de encontrar especialistas adequados.

Se você está por dentro do movimento sem código, no entanto, familiarizar-se com ferramentas como o Bubble costuma ser a melhor receita.

Ferramentas sem código têm se tornado cada vez mais poderosas, tornando mais fácil para qualquer pessoa criar software sem qualquer experiência em desenvolvimento. Ferramentas como o Bubble são a vanguarda da indústria sem código, capacitando os criadores de todas as origens a iniciar sua jornada de desenvolvimento. Sem tocar em uma única linha de código, podemos usar o Bubble para criar diretórios, redes sociais e até mesmo aplicativos móveis sob demanda, como Airbnb e Instacart.

Vamos descobrir o processo de usar o Bubble para criar seu próprio aplicativo de consultas médicas, assim como o Zocdoc.

Se você está procurando criar um dedicado aplicativo de consultas médicas ou apenas interessado em utilizar alguns dos principais recursos do Zocdoc, este guia compartilhará uma visão interna da criação de um MVP sem usar código.

As etapas para criar uma plataforma de agendamento de consultas médicas grátis sem precisar programar incluem:

Faça seu cadastro gratuito no Bubble.

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito.

Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design da plataforma ou criando os campos necessários em seu banco de dados.

Nesse caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso aplicativo de consultas médicas. Se você está replicando uma versão do Zocdoc, algumas das páginas principais que desejará incluir são:

  • Criar página de perfil: onde os médicos podem criar seus perfis em destaque
  • Página inicial: Permitindo que os usuários pesquisem médicos em destaque
  • Página de resultados: Exibindo uma lista de médicos relevantes para a pesquisa de um usuário
  • Página de perfil: exibição de todos os detalhes do perfil de um médico
Crie um aplicativo de consultas médicas de maneira fácil e gratuita.

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 aplicativo de consultas médicas tipo Zocdoc, você só precisará criar uma página para hospedar seus perfis de médico. Podemos então criar a lógica necessária para exibir apenas o médico relevante em cada página quando eles forem necessários.

Após mapear a exibição da plataforma, podemos nos concentrar na criação dos campos de dados necessários para alimentar o aplicativo. Contaremos com esses campos para conectar os workflows por trás de sua plataforma.

Tipos de dados e campos em um app para agendamento de consultas:

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao criar o seu MVP Zocdoc, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos:

  • Nome
  • Número de telefone
  • Consultas – Lista de consultas. 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.
Aplicativo para consultas médicas Zocdoc sem codar - tipo de dados usuário e campos

Tipo de dados: Médico

Campos:

  • Nome
  • Bio
  • Foto
  • Código postal
  • Especialização
  • Endereço de escritório
  • consultas marcados – Lista de consultas
  • Avaliações – Lista de avaliações
Aplicativo para consultas médicas Zocdoc sem codar - tipo de dados médico e campos

Tipo de dados: Intervalo de tempo

Campos:

  • Data (texto)
  • Médico
  • Horário (texto)
  • Horário (número)
Aplicativo para consultas médicas Zocdoc sem codar - tipo de dados intervalo de tempo e campos

Tipo de dados: Consulta

Campos:

  • Data (texto)
  • Médico
  • Localização
  • Paciente
  • Intervalo de tempo preenchido (número)
Aplicativo para consultas médicas Zocdoc sem codar - tipo de dados consulta e campos

Tipo de dados: Avaliação

Campos:

  • Conteúdo
  • Médico
  • Avaliação
Aplicativo para consultas médicas Zocdoc sem codar - tipo de dados avaliação e campos

Criando workflows para o aplicativo de consultas médicas

Agora que você estruturou o design e o banco de dados do seu aplicativo, é hora de começar a juntar tudo e tornar sua plataforma 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: “cadastrar o usuário”, “fazer uma alteração no banco de dados”, etc.)

Criar um perfil de médico

O primeiro recurso principal que criaremos é uma página de back-end para que os médicos criem e listem seus perfis em nosso diretório.

Na página de criar perfil , você pode começar a criar esse recurso usando uma combinação de inputs, incluindo: campos de texto livre, uploaders de imagens e caixas de pesquisa.

Perfil para um aplicativo de consultas médicas tipo Zocdoc

Também precisaremos adicionar duas linhas separadas de inputs para os médicos enviarem seus horários de consulta disponíveis.

Nossa primeira linha de inputs será usada para listar o número do intervalo de tempo para um tempo de sessão. Como esse valor precisará permanecer fixo, selecionaremos desabilitar esse input, mas definiremos o conteúdo inicial como uma lista numerada.

Perfil para um aplicativo de consultas médicas tipo Zocdoc

A segunda linha de input permitirá que os médicos adicionem o horário de início de cada sessão disponível.

Depois que os médicos adicionarem os detalhes relevantes em cada entrada, eles clicarão no ‘botão enviar’ para criar uma nova entrada no banco de dados. Este clique de botão será a ação necessária para acionar seu workflow.

Perfil para um aplicativo de consultas médico tipo Zocdoc

Usando o editor de workflow, selecione para criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo médico.

Adicionando um novo médico ao aplicativo de consultas médicas tipo Zocdoc

Você precisará então começar a adicionar dados aos campos relevantes em seu banco de dados. Mapeie cada input que deseja criar em relação ao campo de dados correspondente.

Adicionando dados ao aplicativo de consultas médicas tipo Zocdoc

Depois de criar um novo médico, também precisaremos criar um novo intervalo de tempo para cada sessão disponível que eles listaram.

Também adicionaremos uma condição a esse evento, garantindo que um horário seja adicionado apenas quando um input de sessões não estiver vazio.

Esses horários de sessão também estarão vinculados ao nosso novo médico.

Adicionando intervalos de tempo ao aplicativo de consultas médicas tipo Zocdoc

Em seguida, replicaremos esse evento para cada intervalo de tempo da sessão.

Workflow para um aplicativo de consultas médicas Sem Codar

Assim que esse workflow for executado, um novo médico será adicionado ao aplicativo para consultas.

Crie uma navegação de pesquisa

Uma vez que adicionamos ao nosso aplicativo os médicos disponíveis para consulta, podemos criar uma função de pesquisa em nossa página inicial, permitindo que os usuários descubram um especialista relevante.

Na página inicial da plataforma, adicionaremos dois elementos de caixa de pesquisa separados, e um seletor de data / hora.

Função de pesquisa para aplicativo de consultas médicas Sem Codar

Depois precisaremos configurar nossos elementos de caixa de pesquisa, para combinarem com os mesmos campos que os elementos de busca na página de criar perfil.

Configurações de pesquisa com o Bubble

Daqui, criaremos um novo workflow que analisa os parâmetros de pesquisa de um usuário e, em seguida, envia esses dados para nossa página de resultados da pesquisa.

Para potencializar esse workflow, criaremos um disparador de evento quando o botão de pesquisa for clicado.

Workflow - encontre médicos utilizando o aplicativo.

Como precisaremos adicionar uma consulta de pesquisa única à string do nosso URL, não enviaremos um usuário a uma página com este workflow, em vez disso, abriremos um site externo. Isso nos permitirá personalizar o caminho do URL entre as páginas.

Evento do workflow - encontre médicos utilizando o aplicativo.

A URL para a qual enviaremos o usuário será a URL inicial do site atual + o caminho da URL de nossa página de resultados da pesquisa + o valor dos seletores de data / hora + o valor da barra de busca por especialidade + o valor do código postal na caixa de pesquisa.

Parâmentros de URL customizáveis com o Bubble

Nota: Ao adicionar o valor dos seletores de data / hora, precisaremos personalizar a formatação em que estruturamos a data. Por padrão, as datas são separadas por barras, o que indica uma página separada em seu URL. Para resolver isso, formataremos nossa data como um estilo personalizado: dd-mm-aaaa.

Formatando a data para nosso aplicativo de consultas médicas.

Este workflow enviará agora todos os dados relevantes para a página de resultados da pesquisa.

Exibir uma lista dinâmica de médicos

Depois que um usuário pesquisar médicos por um critério único, podemos exibir uma lista de resultados, em nossa página de resultados da pesquisa. 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 de conteúdo como médico.

Displaying a list of doctors in Bubble’s no-code Zocdoc clone

Também atualizaremos a fonte de dados de nosso grupo repetidor para exibir apenas os médicos que atendem aos parâmetros de nossa string de URL única. Obteremos uma lista de entradas relevantes de nosso banco de dados com base nos dados do caminho do URL.

Bubble no code Zocdoc clone tutorial doctor search

Depois de selecionado, você também precisará configurar essa fonte de dados segmentando os caminhos como lista, não como parâmetro.

Bubble no code Zocdoc clone tutorial URL path configuration

Depois que essa fonte de dados for configurada, 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.

Displaying dynamic doctor profiles in Bubble’s no-code Zcodoc clone

Criar no aplicativo a função de agendar consultas médicas

Ter a capacidade de agendar consultas com médicos é um dos principais recursos do Zocdoc.

Usando o Bubble, é possível criar essa experiência usando uma combinação de grupos repetidores e elementos pop-up.

Começaremos adicionando um grupo repetidor em nossa página de resultados dentro de nosso grupo repetidor de médicos existente. Como esse elemento será usado para exibir horários de consultas, configuraremos o tipo de dados como intervalo de tempo.

Na fonte de dados, procuraremos todos os intervalos de tempo em que o médico é o mesmo que o médico da célula atual.

Displaying a list of doctor appointment times in a no-code Zocdoc clone

A seguir, exibiremos cada um dos horários disponíveis dos médicos em nossos botões amarelos.

Creating application buttons to schedule appointments in Bubble’s Zocdoc clone

Dentro desse grupo repetidor, também precisaremos extrair a data que foi passada para nossa página de resultados, permitindo-nos armazenar essa informação com um consulta quando for agendado.

Usando um input, podemos atualizar o conteúdo inicial para exibir a data do caminho de URL das páginas atuais.

Bubble no code Zocdoc clone tutorial appointment reference dates

Não queremos mostrar esse elemento aos usuários finais, vamos desmarcar a caixa que exibe esse input ao carregar a página.

Creating invisible elements in Bubble’s no-code Zocdoc clone

Inserindo detalhes da consulta

Com o layout do grupo repetidor configurado, adicionaremos um elemento pop-up à página, permitindo que os usuários insiram seus detalhes para um consulta.

Ao criar o pop-up, configuraremos o conteúdo como um intervalo de tempo, mas deixaremos a fonte de dados vazia.

Displaying a popup to schedule an appointment in a no-code Zocdoc clone

Depois de criar o elemento pop-up, podemos começar a criar o workflow para agendar um consulta.

Quando um botão amarelo de intervalo de tempo é clicado em nosso grupo repetidor inicial, acionaremos um novo workflow.

Displaying a list of appointment times in Bubble’s no-code Zocdoc application

Nesse workflow, precisaremos começar alterando um item no banco de dados. O que queremos mudar são os intervalos de tempo da célula atual, data (texto) – atualizando-os com o mesmo valor do nosso input de data oculto.

Bubble no code Zocdoc clone tutorial updating appointment dates

Em seguida, precisaremos exibir todos os dados do intervalo de tempo selecionado em nosso elemento pop-up.

Bubble no code Zocdoc clone appointment walkthrough

Depois de enviar os dados para este pop-up, finalmente mostraremos o próprio elemento.

Bubble no code Zocdoc clone workflow events

Após o usuário inserir seus detalhes nos inputs do pop-up, teremos todos os dados necessários para criar um novo consulta.

Vamos então criar um novo workflow quando o botão de agendamento for clicado em nosso pop-up.

Creating a new workflow in Bubble’s no-code development tool

Dentro deste workflow, começaremos criando um novo item – uma nova consulta.

Bubble no code Zocdoc clone tutorial appointment booking configurations

Depois de criar a consulta, precisaremos adicioná-la a uma lista de consultas agendadas de um médico.

Ao fazer alterações em um item, podemos atualizar os grupos pais, médicos, intervalos de tempo – adicionando a eles a nova consulta.

Bubble no code Zocdoc clone tutorial appointment scheduling workflow

Em seguida, replicaremos o mesmo evento, só que desta vez adicionaremos a consulta à lista de consultas reservadas do usuário atual.

Updating user profiles using Bubble’s no-code development tool

Por fim, fecharemos o elemento pop-up.

Displaying popup elements in Bubble’s no-code development platform

A última coisa que precisamos fazer é atualizar as restrições de nosso grupo repetidor de intervalo de tempo, removendo todos os horários que já foram agendados em uma lista de consultas médicas agendadas.

Configuring a dynamic repeating group in a no-code Zocdoc clone

Visualizando o perfil de um médico

Como a página de resultados de pesquisa do Zocdoc exibe apenas uma visão geral de cada médico (incluindo seu nome, imagem e horários de consulta), também queremos exibir todos os detalhes de seu perfil em uma página separada.

Este conteúdo adicional precisará ser hospedado em sua página de perfil dedicada.

Para criar esse evento em nosso aplicativo de consultas médicas, você precisará começar fazendo um workflow que redirecione um usuário para a página de perfil quando a imagem do médico for clicada.

Bubble no code Zocdoc clone tutorial page navigation event

Nesse workflow, use um evento de navegação para enviar um usuário a outra página. A partir daqui, selecione o tipo da página de destino como a página de perfil.

E então você precisará enviar dados adicionais para esta página para que o editor do Bubble saiba qual médico específico exibir. Os dados que você precisa exibir são os do médico da célula atual.

Sending dynamic data between pages in Bubble’s no-code development tool

Em nossa página de perfil, precisaremos atualizar o tipo de página para refletir os dados enviados por meio deste workflow.

Nesse caso, você definirá a página de perfil como uma propriedade médico.

Bubble no code Zocdoc clone tutorial page setup

Daqui, você pode começar a adicionar conteúdo dinâmico aos elementos de sua página, exibindo as informações do médico que foram enviadas em seu workflow.

Exibir localizações no Google Maps usando a ferramenta de desenvolvimento sem código Bubble.

Criar e exibir análises de usuários

O recurso final que precisaremos criar para nosso aplicativo de consultas médicas é uma função para suportar análises geradas por usuários para cada médico.

Começaremos adicionando os input necessários em nossa página de perfil do médico.

Configurações para avaliar o médico em nosso aplicativo de consultas

Clicar no botão enviar abaixo desses inputs acionará nosso workflow. Dentro deste workflow, queremos criar um novo item no banco de dados – uma nova avaliação.

Mapeie cada um dos inputs na página com os campos de dados para sua avaliação.

Criando uma avalição do usuário no aplicativo de consultas médicas.

Uma vez que a avaliação foi criada, usaremos o elemento de grupo repetidor para exibir cada entrada.

Agora a fonte de dados do grupo repetidor procurará por avaliações onde o médico seja o mesmo da página atual.

Exibindo avaliações em nosso aplicativo de consultas.

Mais uma vez, mapearemos a célula superior do grupo repetidor para exibir o conteúdo relevante – incluindo o conteúdo  da avaliação, a classificação, e a data de criação.

Configurações para avaliar o médico em nosso aplicativo de consultas

Adicionando novos recursos ao nosso app para agendamento de consultas

Depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, podemos criar novas funcionalidades em nosso aplicativo de consultas médicas.

Posteriormente, você pode:

  • Enviar lembretes / notificações ao usuário sobre consultas
  • Criar um painel para que os médicos revisem suas próximas consultas.

Se você gostou desse artigo sobre como criar um aplicativo de consultas médicas e tem interesse em saber mais sobre o movimento sem codar, confira também os posts sobre Quanto cobrar por um aplicativo? e Preciso saber programar para criar um aplicativo do ZERO?

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-zocdoc-clone-no-code/

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

Inscreva-se na Comunidade Sem Codar, um curso online com mais de 300 aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble e desenvolvimento No-Code:

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