Aprenda como criar seu app para agendamento de consultas grátis usando o editor visual web do Bubble.
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:
Índice
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
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.
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
Tipo de dados: Intervalo de tempo
Campos:
- Data (texto)
- Médico
- Horário (texto)
- Horário (número)
Tipo de dados: Consulta
Campos:
- Data (texto)
- Médico
- Localização
- Paciente
- Intervalo de tempo preenchido (número)
Tipo de dados: Avaliação
Campos:
- Conteúdo
- Médico
- Avaliação
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.
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.
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.
Usando o editor de workflow, selecione para criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo médico.
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.
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.
Em seguida, replicaremos esse evento para cada intervalo de tempo da sessão.
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.
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.
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.
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.
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.
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.
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.
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.
Depois de selecionado, você também precisará configurar essa fonte de dados segmentando os caminhos como lista, não como parâmetro.
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.
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.
A seguir, exibiremos cada um dos horários disponíveis dos médicos em nossos botões amarelos.
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.
Não queremos mostrar esse elemento aos usuários finais, vamos desmarcar a caixa que exibe esse input ao carregar a página.
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.
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.
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.
Em seguida, precisaremos exibir todos os dados do intervalo de tempo selecionado em nosso elemento pop-up.
Depois de enviar os dados para este pop-up, finalmente mostraremos o próprio elemento.
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.
Dentro deste workflow, começaremos criando um novo item – uma nova consulta.
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.
Em seguida, replicaremos o mesmo evento, só que desta vez adicionaremos a consulta à lista de consultas reservadas do usuário atual.
Por fim, fecharemos o elemento pop-up.
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.
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.
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.
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.
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.
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.
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.
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.
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/
