Aprenda como criar um site para encontrar e avaliar restaurantes tipo Zagat, usando o editor visual web do Bubble.
Se você está procurando o restaurante ou bar perfeito, plataformas como o Yelp, Zagat ou Zomato (Urbanspoon) podem ajudá-lo a escolher entre milhares de opções de comida.
No entanto, se você está interessado em criar seu próprio site de críticas de restaurantes, o Bubble é a única plataforma que você vai precisar.
Ferramentas no code, como o Bubble, estão revolucionando a forma como os fabricantes comuns podem criar software. Com o Bubble é mais fácil do que nunca começar a criar software sem escrever uma única linha de código.
Esta ferramenta de programação visual torna possível projetar e criar rapidamente um software funcional que vai além das experiências estáticas. Os criadores estão usando o Bubble para criar lojas virtuais, diretórios e até redes sociais.
Cobriremos o processo passo a passo de criar um site para encontrar e avaliar restaurantes no code usando o Bubble. Esteja você procurando replicar o produto inteiro ou apenas interessado em utilizar alguns dos principais recursos da plataforma. Este guia compartilhará como criar os workflows necessários para colocar seu projeto em funcionamento.
A etapas para criar um site para avaliar restaurantes estilo Yelp, Zagat ou Zomato no code incluem:
Índice
Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito.
Faça seu cadastro gratuito no Bubble.
Recomendamos também entender como criar e editar contas de usuário. Já cobrimos isso com mais detalhes em nossos outros Guias de criação.
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do site de críticas ou criando os campos necessários em seu banco de dados.
Neste guia, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso produto. Em um site para avaliar restaurantes baseado em uma versão do Yelp ou Zomato, teremos as seguintes páginas principais:
- Página de upload – um portal back-end onde você pode fazer upload de novos restaurantes
- Página inicial – exibindo uma lista de restaurantes e uma barra de pesquisa
- Página de resultados da pesquisa – exibindo uma lista de restaurantes e categorias, uma vez que um usuário procurou um local
- Página individual do restaurante – uma página exibindo as informações completas do restaurante
- Página para submeter avaliações – uma página onde os usuários podem enviar uma avaliação sobre o restaurante
Uma característica importante dentro do Bubble é o 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 do seu banco de dados quando for necessário.
Em um site para avaliar restaurantes você só precisará de uma página para mostrar seus restaurantes individuais. Podemos então criar os workflows necessários para exibir apenas o restaurante relevante em cada página quando for necessário.
Tipos de dados e campos para um site de críticas de restaurantes
Após mapear a exibição do seu site, podemos nos concentrar na criação dos campos de dados necessários para alimentá-lo. Contaremos com esses tipos de dados e campos para conectar os workflows por trás da plataforma.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao criar um site para avaliar restaurantes semelhante ao Yelp como MVP, precisaremos dos seguintes tipos de dados e campos:
Tipo de dados: Usuário
Campos:
- Nome
- Foto
- Avaliações enviadas – Lista de comentários. 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. Isso evita que você tenha que recriar todos os campos de dados adicionais.
Tipo de dados: Restaurante
Campos:
- Nome
- Descrição
- Cidade
- Logotipo
- Link do site
- Número de telefone
- Categorias de comidas – Lista
- Endereço
- Fotos apresentadas – Lista
- Avaliações – Lista de avaliações
Tipo de dados: Avaliação
Campos:
- Conteúdo
- Restaurante – Restaurante
Adicionando um restaurante à plataforma
Com o banco de dados configurado, podemos começar a criar os workflows que irão potencializar seu site de críticas. O primeiro recurso que criaremos não é algo com o qual os usuários irão interagir diretamente, mas sim uma ferramenta back-end para adicionar novos restaurantes à plataforma.
Criando um portal dedicado a carregar listagens no banco de dados, podemos agilizar o processo de adicionar novos restaurantes ao seu diretório.
Em sua página de upload, usaremos uma combinação de inputs para mapear os dados necessários para cada novo restaurante. Assim que o botão criar for clicado, isso irá disparar um workflow que adicionará esses dados coletivos como um novo restaurante em seu banco de dados.
Ao criar seu workflow, precisaremos criar um novo item, configurando o tipo de dados como restaurante.
Em seguida, você combinará os elementos relevantes em sua página com os campos de dados sob o tipo ‘restaurante’ em seu banco de dados.
Exibindo conteúdo dinâmico
Depois de fazer upload de um catálogo de restaurantes, é hora de começar a exibi-los em uma página pública que os usuários possam acessar.
Usando o elemento de grupo repetidor do Bubble, você pode exibir uma lista de dados dinâmicos do seu banco de dados – como seus restaurantes existentes.
Nota: Os grupos repetidores são estruturados com um formato vertical por padrão, mas também é possível reconfigurar o elemento para exibição horizontal.
Antes de começar a adicionar conteúdo em seu grupo repetidor, você precisará vincular o elemento a um tipo de dados em seu banco de dados. Isso o ajudará a identificar o conteúdo específico que exibirá.
O tipo de conteúdo que precisaremos exibir, é claro, os restaurantes em seu banco de dados.
Em seguida, precisaremos identificar uma fonte de dados para que o editor do Bubble saiba quais restaurantes específicos exibir. Para nosso MVP, exibiremos apenas uma lista de todos os restaurantes atuais, mas você pode facilmente adicionar restrições a esta fonte de dados para filtrar restaurantes por cidade ou categorias de alimentos.
Depois de configurar corretamente o grupo repetidor, você precisará começar a adicionar quaisquer elementos de conteúdo dinâmico que gostaria de exibir dentro de cada célula. Em nosso MVP, isso incluirá o título de um restaurante e a foto em destaque.
Como um restaurante pode ter várias fotos em destaque, configuraremos o conteúdo dinâmico para exibir uma dessas fotos aleatoriamente.
Enviando dados para páginas dinâmicas
Com nossa página inicial exibindo apenas um cartão de visualização para cada restaurante, os usuários precisarão clicar em uma página da vitrine dedicada à cada restaurante para visualizar seu conteúdo completo e análises. Essas informações adicionais serão hospedadas na página do restaurante.
Do nosso grupo repetidor, é possível criar eventos com base nas ações realizadas em cada linha individual. Este recurso se tornará útil ao criar recursos de navegação em sua plataforma.
Para direcionar um usuário da página inicial para a página da vitrine de um restaurante específico, você precisará criar um workflow de navegação que é acionado quando uma imagem em destaque do restaurante é clicada.
Em seguida, você precisará enviar dados adicionais para esta página, permitindo que o editor do Bubble identifique qual restaurante específico exibir. Os dados que você vai escolher exibir serão retirados do restaurante da célula atual.
Exibir conteúdo dinâmico na página de visualização
Depois que os dados forem enviados para a página do restaurante, você pode obter facilmente as informações relevantes e exibir esse conteúdo para cada restaurante.
Primeiro, você precisará garantir que o tipo da página de destino corresponda à propriedade de dados que está enviando no workflow. Nesse caso, a página do restaurante será configurada como uma propriedade restaurante.
Ao classificar o tipo de conteúdo em uma página, o Bubble pode facilmente extrair e enviar dados relevantes de fontes existentes.
Agora você pode começar a adicionar conteúdo dinâmico aos campos que exibem informações do restaurante da página atual.
Procurando por conteúdo
Voltando para nossa página inicial, precisaremos criar um recurso que permita aos usuários pesquisar restaurantes com base em uma cidade. Isso pode ser feito adicionando um elemento de input de texto extra que trataremos como uma barra de pesquisa.
- Criaremos um novo workflow que classifica o termo da pesquisa de um usuário
- Passaremos esses dados para uma página separada dedicada a esta consulta de pesquisa.
Para potencializar esse workflow, criaremos um gatilho de evento que reconhece quando um valor de input é alterado. O elemento será, obviamente, o input de texto.
Ao enviar o usuário para nossa página de resultados da pesquisa, precisaremos adicionar uma consulta de pesquisa única à nossa string de URL, permitindo que a página seguinte recupere esses dados.
Em vez de optar por enviar um usuário a uma página específica neste workflow, escolheremos abrir 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 + a URL de nossa página de resultados de pesquisa + o valor da consulta dinâmica do nosso input de texto.
Página de resultados da pesquisa
Em seguida, terminaremos de criar nossa dedicada página de resultados da pesquisa em nosso site para encontrar e avaliar restaurantes. Ao criar esta página, precisaremos configurar o tipo da página como restaurante, pois desejaremos exibir uma lista de restaurantes correspondentes.
Ao projetar esta página, primeiro incluiremos um elemento de grupo repetidor para exibir uma lista de restaurantes. Ao contrário do nosso primeiro grupo repetidor, precisaremos atualizar a fonte de dados desse grupo repetidor para corresponder à consulta da pesquisa de nossa string de URL.
Comece configurando o tipo de conteúdo como restaurante. Em seguida, atualize a fonte de dados para exibir apenas os restaurantes que incluem nosso texto de strings de URL em seu campo de cidade.
Agora serão exibidos apenas os restaurantes que correspondem à cidade da consulta da pesquisa dos usuários.
Em seguida nesta página, vamos atualizar o marcador em nosso mapa sempre que o título de um restaurante for clicado. Isso permite que os usuários vejam visualmente seu endereço.
Para criar essa função, use o editor de workflow do Bubble para criar um evento personalizado que reconhece quando o título do restaurante é clicado.
A partir daqui, escolheremos a ação para exibir os marcadores.
Agora, vamos selecionar exibir o marcador para nosso mapa na página, configurando sua fonte de dados como o endereço do restaurante da célula atual.
O recurso principal final que precisaremos adicionar à nossa página de resultados da pesquisa é uma lista suspensa de categorias, permitindo que os usuários filtrem os restaurantes pelas categorias de alimentos que servem.
Fazendo alterações no grupo repetidor
Depois de configurar as opções do menu suspenso, precisaremos adicionar uma condição ao nosso grupo repetidor, permitindo que ele responda à seleção do menu suspenso.
A lógica para essa condição identificará quando o valor suspenso não for vazio. Quando isso ocorrer, ele atualizará a fonte de dados do grupo repetidor.
A nova fonte de dados incluirá novamente uma pesquisa por restaurantes, adicionando a mesma condição para a URL de string das cidades. Também adicionaremos outra restrição, garantindo que as categorias de alimentos do restaurante também contenham o mesmo valor da seleção de menus suspensos.
Agora, quando uma categoria de alimentos é selecionada, este grupo repetidor será atualizado automaticamente com os resultados mais relevantes.
A última função que precisaremos adicionar a esta página é outro evento de navegação que direciona um usuário para nossa página do restaurante dedicada quando a imagem do restaurante é clicada.
Vamos replicar o mesmo workflow de navegação que criamos em nosso grupo repetidor da página inicial.
Adicionando avaliações a um restaurante
Depois que um usuário encontrar um novo restaurante favorito (graças ao seu site de críticas no code), ele pode querer contribuir com uma avaliação, compartilhando sua experiência com a comunidade.
Em nossa página do restaurante, adicionaremos um grupo repetidor extra abaixo das informações do restaurante. Este grupo repetidor será usado para exibir uma lista das avaliações atuais dos restaurantes.
Ao configurar este grupo repetidor, o tipo de dados será definido como uma avaliação, e nossa fonte de dados puxará todas as avaliações do restaurante da página atual.
Daqui, criaremos um novo workflow quando o botão ‘adicionar avaliação’ for clicado.
Este workflow vai redirecionar um usuário para uma página dedicada onde ele pode criar uma nova avaliação. Ao enviar um usuário para esta página, também queremos passar os dados do restaurante da página atual.
Na página de submeter avaliação, precisaremos atualizar o tipo da página também para restaurante, o que nos permite obter os dados do restaurante atual.
Por fim, precisaremos criar outro workflow que seja acionado assim que o botão ‘postar avaliação’ for clicado.
Este workflow será usado para criar um novo item – uma nova avaliação.
Como você fez antes, combine os elementos da página com os campos de dados necessários para criar uma avaliação válida.
Assim que uma nova avaliação for criada, ela será automaticamente adicionada ao grupo repetidor na página do restaurante.
Recursos adicionais – criar um site de avaliação para restaurantes
Após criar os recursos principais para seu MVP, você se familiarizará com o processo de criação de campos de dados personalizados e exibição de conteúdo dinâmico. Se desejar continuar adicionando recursos ao seu app para encontrar e avaliar restaurantes, você pode considerar:
- Adicionar um recurso para que os usuários enviem fotos para a página de um restaurante
- Criação de perfis de usuário – exibindo uma lista dos detalhes da conta do usuário, e as avaliações criadas pela plataforma.
Seguindo nossos tutoriais você pode desenvolver qualquer aplicativo que quiser sem precisar programar uma única linha de código! Veja também:
[NOVO VIDEO] Como criar um aplicativo delivery multi-restaurantes
Como criar o melhor aplicativo Delivery de Pizzaria do Brasil 🍕
Como Criar um Aplicativo de Cardápio em Minutos (sem programar)
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-restaurant-review-site-template/
