Articles

como construir um site de revisão de Restaurante Sem código

se você está procurando encontrar o restaurante ou bar perfeito, plataformas como Yelp, Zagat, ou Zomato (Urbanspoon) pode ajudá-lo a escolher entre milhares de opções de alimentos.

se você estava interessado em construir sua própria versão de um site de revisão de restaurante, no entanto, Bubble é a única plataforma que você vai precisar.Ferramentas de código nulo como o Bubble estão revolucionando como os fabricantes do dia-a-dia podem construir software. A poderosa plataforma da Bubble tornou mais fácil do que nunca começar a construir software sem ter que escrever uma única linha de código.

nossa ferramenta de programação visual torna possível projetar e construir rapidamente software de trabalho que vai além de experiências estáticas. Os fabricantes estão usando Bubble para construir mercados, diretórios e até mesmo redes sociais.

este post cobrirá o processo passo-a-passo de construção de um site de revisão de Restaurante Sem código usando Bubble. Se você está olhando para replicar o produto inteiro, ou você está apenas interessado em Utilizar algumas das características principais da plataforma, este guia vai compartilhar como construir os fluxos de trabalho necessários para colocar o seu produto em funcionamento.

os passos para a construção de um estilo Yelp sem Código incluem:

comece

para começar, você vai precisar registrar sua conta free Bubble.

registe a sua conta na bolha

New to Bubble? Siga em nosso curso de Crash vídeos introdutórios para se familiarizar com o básico da bolha.

também recomendamos completar as nossas lições introdutórias, que o guiará através do processo passo a passo das características mais comuns da bolha. Isto irá ajudá-lo a começar a correr ao construir a sua aplicação de revisão de Restaurante Sem código.

também recomendamos compreender como criar e editar contas de utilizador. Nós já cobrimos isso em mais detalhes em nossos outros como construir guias.

ao iniciar o seu projecto, pode optar por iniciar a sua concepção do seu produto, ou construir os campos necessários dentro da sua base de dados.

neste guia, vamos começar por usar a ferramenta de design visual da Bubble para moldar a interface de usuário do nosso produto. Se você está replicando uma versão do Yelp ou Zomato, algumas das páginas principais que você vai querer incluir São:

  • página de envio de um back-portal onde você pode fazer o upload de novos restaurantes
  • Home page – exibir uma lista de restaurantes e uma barra de pesquisa
  • página de resultados de Pesquisa – apresentação de uma lista de restaurantes e categorias, uma vez que um usuário tem procurado um local
  • Individual restaurante página, uma página apresentando a informação completa para cada um restaurante
  • Revisão página de submissão – uma página onde os usuários podem enviar uma resenha de restaurante

Um recurso importante dentro da Bolha é a capacidade de enviar dados entre páginas. Isto permite-lhe criar uma versão genérica de uma página, e depois mostrar dinamicamente o conteúdo relevante da sua base de dados quando for necessário.

no caso do seu site, você só precisa criar uma página para mostrar seus restaurantes individuais. Podemos então criar os fluxos de trabalho necessários para exibir apenas o restaurante relevante em cada página quando for necessário (vamos cobrir isso em mais detalhes em breve).

configurar o seu aplicativo

uma vez que você mapeou a exibição do seu produto, você pode se concentrar em criar os campos de dados necessários para alimentar a sua aplicação. Vamos confiar nestes tipos de dados, campos para conectar os fluxos de trabalho por trás de seu produto.

o banco de dados pré-construído da Bubble facilita a criação de diferentes tipos de dados com campos únicos. Quando a construção de um Yelp-como restaurante aplicativo como um MVP, nós vamos precisar criar os seguintes tipos de dados & campos:

tipo de Dados: Usuário

Campos:

  • Nome
  • Foto
  • Submetido comentários – Lista de comentários. Nota: criar um campo como uma lista baseada em um tipo de dados separado permite que você integre sem problemas todos os seus campos de dados relevantes. Isso poupa você de ter que recriar todos os campos de dados adicionais
Bolha nenhum código yelp clone tutorial modelo

tipo de Dados: Restaurante

Campos:

  • Nome
  • Descrição
  • Cidade
  • Logo
  • link
  • número de Telefone
  • Pé de categorias – Lista
  • Endereço
  • fotos em Destaque – Lista
  • Comentários – Lista de comentários
Bolha nenhum código yelp clone tutorial modelo

tipo de Dados: Revisão

Campos:

  • conteúdo
  • Restaurante-Restaurante
Bubble No code yelp Clone tutorial template

adicionando um restaurante à plataforma

agora que configurou a sua base de dados, podemos começar a construir os fluxos de trabalho que irão alimentar a sua aplicação. O primeiro recurso que vamos criar não é algo que os usuários vão se envolver diretamente com, mas é, em vez disso, uma ferramenta de back-end para adicionar novos restaurantes à plataforma.

ao construir um portal dedicado ao envio de listas para a sua base de dados, pode simplificar o processo de adição de novos restaurantes ao seu directório.

na sua página de upload, pode usar uma combinação de campos de entrada para mapear os dados necessários para cada novo restaurante. Uma vez que o botão Criar é clicado, isso irá desencadear um fluxo de trabalho que irá adicionar estes dados coletivos como um novo restaurante dentro de seu banco de dados.

Bubble No code yelp Clone tutorial template

When building your workflow, we’ll need to create a new thing, configurating the data type to a restaurant.

Bubble No code yelp clone tutorial template

irá então comparar os elementos relevantes na sua página com os campos de dados sob o tipo de restaurante na sua base de dados.

Bubble No code yelp Clone tutorial template

exibindo conteúdo dinâmico

uma vez que você carregou um catálogo de restaurantes, é hora de começar a exibi-los em uma página de rosto público que os usuários podem acessar.

usando o elemento de grupo repetitivo da Bubble, você pode mostrar uma lista de dados dinâmicos da sua base de dados – como os seus restaurantes existentes.

Nota: grupos repetitivos são estruturados como um formato vertical por padrão, mas também é possível reconfigurar o elemento para exibir horizontalmente.

Antes de começar a adicionar conteúdo ao seu grupo repetitivo, terá de ligar o elemento a um tipo de dados dentro da sua base de dados. Isto irá ajudá-lo a identificar o conteúdo específico que irá exibir.

o tipo de conteúdo que precisamos exibir, é claro, os restaurantes em sua base de dados. Em seguida, vamos precisar identificar uma fonte de dados para que o editor de bolhas saiba quais restaurantes específicos para exibir. Para o nosso MVP, vamos apenas exibir uma lista de todos os restaurantes atuais, mas você pode facilmente adicionar restrições a esta fonte de dados para filtrar restaurantes por sua cidade ou categorias de alimentos.

Bubble No code yelp Clone tutorial template

uma vez que tenha configurado correctamente o grupo repetitivo, terá então de começar a adicionar quaisquer elementos de conteúdo dinâmico que queira mostrar dentro de cada célula. Dentro do nosso MVP, isto incluirá o título de um restaurante e foto destaque.Como um restaurante pode ter várias fotos em destaque, vamos configurar o conteúdo dinâmico para exibir uma dessas fotos aleatoriamente.

Bolha nenhum código yelp clone tutorial modelo

Enviar dados para páginas dinâmicas

Com a nossa página inicial de apenas exibir uma pré-visualização do cartão para cada restaurante, os usuários precisarão de click-through para um dedicado página de demonstração para cada um restaurante para ver o seu conteúdo integral e comentários. Esta informação adicional será hospedada na página de restaurante do seu aplicativo.

do nosso grupo repetitivo, é possível criar eventos baseados em ações tomadas dentro de cada linha individual. Este recurso se tornará útil ao construir recursos de navegação em toda a sua plataforma.

para direcionar um usuário da página inicial para uma página de vitrine de restaurante específico, você precisará construir um fluxo de trabalho de navegação que é despoletado quando um restaurante de imagem destaque é clicado.

Bubble No code yelp Clone tutorial template

você terá então de enviar dados adicionais para esta página, permitindo que o editor de bolhas para identificar qual restaurante específico a exibir. Os dados que você vai escolher para exibir serão retirados do restaurante da célula atual.

Bolha nenhum código yelp clone tutorial modelo

Exibir conteúdo dinâmico na página de pré-visualização

uma Vez que os dados tenham sido enviados para a página restaurante, você pode facilmente puxar as informações relevantes e exibir esse conteúdo para cada restaurante.

primeiro terá de garantir que o tipo de página de destino corresponde à propriedade de dados que está a enviar dentro do fluxo de trabalho. Neste caso, a página do restaurante será configurada para uma propriedade do restaurante.

Bubble No code yelp clone tutorial template

ao classificar o tipo de conteúdo em uma página, Bubble pode facilmente puxar e enviar dados relevantes de fontes existentes.

pode agora começar a adicionar conteúdo dinâmico nos campos que mostram informações do restaurante da página actual.

Bolha nenhum código yelp clone tutorial modelo

Pesquisa de conteúdo

dar um passo para trás para a nossa página de internet, nós também precisamos construir um recurso que permite aos usuários procurar por restaurantes, com base em uma cidade. Isto pode ser conseguido adicionando um elemento adicional de entrada de texto que trataremos como uma barra de pesquisa.

Bolha nenhum código yelp clone tutorial modelo

a Partir daqui, vamos criar um novo fluxo de trabalho que classifica um usuário com o termo de pesquisa e, em seguida, transmitir dados através de uma página dedicada a esta consulta de pesquisa (mais informações nesta página em breve).

para alimentar este fluxo de trabalho, vamos criar um desencadeador de eventos que reconhece quando um valor de entrada é alterado. O elemento será, naturalmente, o campo de entrada de texto.

Bubble No code yelp Clone tutorial template

ao enviar o utilizador para a nossa página de resultados de pesquisa, teremos de adicionar uma consulta de pesquisa única à nossa cadeia de URL, permitindo que a página seguinte recupere estes dados.

em vez de optar por enviar um usuário para uma página específica neste fluxo de trabalho, vamos optar por abrir um site externo. Isso nos permitirá personalizar o caminho de URL entre as páginas.

o URL para o qual vamos enviar o utilizador será o URL de origem do site actual + o URL da nossa página de resultados de pesquisa + o valor dinâmico da consulta do nosso campo de entrada de texto.

Bubble No code yelp Clone tutorial template

Next, we’ll finish building our dedicated search results page within our application. Ao construir esta página, vamos precisar configurar o tipo de página para um restaurante como vamos querer mostrar uma lista de restaurantes correspondentes.

Bubble No code yelp Clone tutorial template

ao desenhar esta página, vamos primeiro incluir um elemento de grupo repetitivo para mostrar uma lista de restaurantes. Ao contrário do nosso primeiro grupo repetitivo, vamos precisar atualizar a fonte de dados deste grupo repetitivo para corresponder a consulta de pesquisa a partir de nossa string URL.

comece por configurar o tipo de conteúdo para ser um restaurante. Em seguida, atualize a fonte de dados para exibir apenas os restaurantes que incluem o nosso texto URL strings em seu campo da cidade.

Bubble No code yelp Clone tutorial template

This will now display only the restaurants that match the city from the users search query.

a seguir nesta página, vamos querer atualizar o marcador em nosso mapa sempre que um título de restaurantes é clicado, permitindo que os usuários vejam visualmente seu endereço.

para construir esta função, use Bubble workflow edit para criar um evento personalizado que reconhece quando um título de restaurantes é clicado.

Bubble No code yelp Clone tutorial template

From here, we’ll choose the action to display markers.

Bubble No code yelp Clone tutorial template

Now, we’ll select to display the marker for our on-page map, configurating its data source as the current cells restaurants address.

Bubble No code yelp Clone tutorial template

the final key feature we’ll need to add to our search results page is a category dropdown, allowing users to filter through restaurants by the categories of foods they Server.

Bubble No code yelp Clone tutorial template

uma vez que tenha configurado as opções para o menu, teremos de adicionar uma condição ao nosso grupo repetitivo, permitindo-lhe responder às listas de selecção.

a lógica para esta condição irá identificar quando o valor das reduções não estiver vazio. Quando isso ocorrer, ele irá então atualizar a fonte de dados do grupo repetitivo.

a nova fonte de dados irá mais uma vez incluir uma busca por restaurantes, adicionando a mesma condição para a cadeia de URL cidades. Vamos também adicionar outra restrição, garantindo que as categorias de alimentos do restaurante também contêm o mesmo valor que a seleção de menus dropdown.

Bubble No code yelp Clone tutorial template

Now when a food category is selected, this repeating group will automatically update with the most relevant results.

a última função que vamos precisar de adicionar a esta página, é outro evento de navegação que encaminha um usuário para a nossa página dedicada restaurante quando uma imagem de restaurantes é clicada.Vamos replicar o mesmo fluxo de trabalho de navegação que criamos a partir do nosso grupo de repetição da página inicial.

Bolha nenhum código yelp clone tutorial modelo

Adicionar comentários a um restaurante

Depois que um usuário tenha encontrado um novo restaurante favorito (graças ao seu código de aplicativo), eles podem contribuir com uma revisão, compartilhando suas experiências com a comunidade.Na nossa página do restaurante, adicionaremos um grupo adicional de repetição abaixo das informações do restaurante. Este grupo repetitivo será usado para exibir uma lista dos comentários atuais dos restaurantes.

ao configurar este grupo repetitivo, o tipo de dados será definido para uma revisão, e a nossa fonte de dados irá puxar todas as revisões do restaurante páginas atuais.

Bubble No code yelp Clone tutorial template

from here, we’ll create a new workflow when the add review button is clicked.

Bubble No code yelp Clone tutorial template

This workflow will redirect a user to a dedicated page where they can create a new review. Ao enviar um usuário para esta página, também vamos querer passar os dados do restaurante páginas atuais.

Bubble No code yelp Clone tutorial template

On our submit review page, we’ll need to update the page type to also be a restaurant, allowing us to pull the current Restaurant data.

Bubble No code yelp clone tutorial template

Finally, we’ll then need to create another workflow that triggers once the post review button is clicked.

Bubble No code yelp Clone tutorial template

this workflow will be used to create a new thing-a new review.

Bubble No code yelp clone tutorial template

uma vez que uma nova revisão foi criada, ela será automaticamente adicionada ao grupo repetitivo de volta na página restaurantes.

recursos adicionais

depois de construir os recursos principais para o seu MVP, você vai se familiarizar com o processo de criação de campos de dados personalizados e mostrar conteúdo dinâmico. Se você gostaria de continuar a adição de recursos adicionais para o seu diretório, você poderia considerar:

  • Adicionando um recurso para que os usuários enviem fotos para um restaurante página
  • Criação de perfis de usuário, exibindo uma lista dos usuários de conta de detalhes e comentários que são criados através da plataforma

Iniciar

a Contratação de um programador ou equipe de desenvolvimento para construir este app custaria milhares, se não dezenas de milhares de dólares. À medida que você lança e cresce em Usuários, nossos planos pagos permitem que você hospedar o aplicativo em seu próprio domínio personalizado por até US $25 por mês. Alguns modelos e plugins podem custar mais, mas você pode construir toda a funcionalidade de um diretório sem quaisquer custos adicionais.

Templates

se você não quiser construir o seu tema de revisão do restaurante a partir do zero, você pode comprar um dos modelos feitos por nossos membros da comunidade. Alguns modelos semelhantes incluem:

  • Tela de Comentários Plataforma AirDev
  • Localização com Base Resenhas Zeroqode
  • Diretório & Listagem por Zeroqode

Iniciar a Construção de

Bolha pode ajudar você a construir uma resenha de restaurante do site ou por qualquer outro produto que você escolher! Nunca foi tão fácil construir algo incrível sem ter de codificar.Para começar de graça, Inscreva-se aqui.

Você também pode se conectar com outros fabricantes apaixonados construindo com Bubble em nosso fórum comunitário.

Deixe uma resposta

O seu endereço de email não será publicado.