Articles

Cómo Crear Un Sitio de Reseñas De Restaurantes Sin Código

Si estás buscando el restaurante o bar perfecto, plataformas como Yelp, Zagat o Zomato (Urbanspoon) pueden ayudarte a elegir entre miles de opciones de comida.

Sin embargo, si estabas interesado en crear tu propia versión de un sitio de reseñas de restaurantes, Bubble es la única plataforma que necesitarás.

Las herramientas sin código como Bubble están revolucionando la forma en que los creadores cotidianos pueden crear software. La potente plataforma de Bubble ha hecho que sea más fácil que nunca comenzar a crear software sin tener que escribir una sola línea de código.

Nuestra herramienta de programación visual permite diseñar y crear rápidamente software de trabajo que va más allá de las experiencias estáticas. Los creadores están usando Bubble para crear mercados, directorios e incluso redes sociales.

Esta publicación cubrirá el proceso paso a paso de crear un sitio de reseñas de restaurantes sin código usando Bubble. Ya sea que esté buscando replicar todo el producto o simplemente esté interesado en utilizar algunas de las características principales de la plataforma, esta guía compartirá cómo crear los flujos de trabajo necesarios para poner en marcha su producto.

Los pasos para crear un estilo Yelp sin código incluyen:

Comenzar

Para comenzar, deberá registrar su cuenta de Burbuja gratuita.

Registre su cuenta en Bubble

¿Es nuevo en Bubble? Sigue nuestros videos introductorios del Curso intensivo para familiarizarte con los conceptos básicos de Bubble.

También recomendamos completar nuestras lecciones introductorias, que lo guiarán a través del proceso paso a paso de las funciones de burbuja más comunes. Esto te ayudará a empezar a correr al crear tu aplicación de revisión de restaurantes sin código.

También recomendamos comprender cómo crear y editar cuentas de usuario. Anteriormente hemos cubierto esto con más detalle en nuestras otras Guías de Cómo Construir.

Al iniciar su proyecto, puede elegir comenzar por enmarcar el diseño de su producto o crear los campos necesarios dentro de su base de datos.

En esta guía, comenzaremos utilizando la herramienta de diseño visual de Bubble para dar forma a la interfaz de usuario de nuestro producto. Si estás replicando una versión de Yelp o Zomato, algunas de las páginas principales que querrás incluir son:

  • Página de carga: un portal de backend donde puede cargar nuevos restaurantes
  • Página de inicio: muestra una lista de restaurantes y una barra de búsqueda
  • Página de resultados de búsqueda: muestra una lista de restaurantes y categorías una vez que un usuario ha buscado una ubicación
  • Página de restaurante individual: una página que muestra la información completa de cada restaurante
  • Página de envío de reseñas – una página donde los usuarios pueden enviar una reseña de restaurante

Una característica importante dentro de Bubble es la capacidad de enviar datos entre páginas. Esto le permite crear una versión genérica de una página y, a continuación, mostrar dinámicamente el contenido relevante de su base de datos cuando sea necesario.

En el caso de tu sitio, solo necesitarás crear una página para mostrar tus restaurantes individuales. Luego podemos crear los flujos de trabajo necesarios para mostrar solo el restaurante relevante en cada página cuando sea necesario (cubriremos esto con más detalle pronto).

Configurar su aplicación

Una vez que haya mapeado la pantalla de su producto, puede centrarse en crear los campos de datos necesarios para impulsar su aplicación. Dependeremos de estos tipos de datos y campos para conectar los flujos de trabajo detrás de su producto.

La base de datos preconstruida de Bubble facilita la creación de diferentes tipos de datos con campos únicos. Al crear una aplicación de restaurante similar a Yelp como MVP, necesitaremos crear los siguientes tipos de datos & campos:

Tipo de datos: Usuario

Campos:

  • Nombre
  • Foto
  • Comentarios enviados-Lista de comentarios. Nota: Crear un campo como una lista basada en un tipo de datos independiente le permite integrar sin problemas todos sus campos de datos relevantes. Esto le evita tener que volver a crear todos los campos de datos adicionales
Plantilla de tutorial de clon de yelp sin código de burbuja

Tipo de datos: Restaurante

Campos:

  • Nombre
  • Descripción
  • Ciudad
  • Logotipo
  • Enlace al sitio web
  • Número de teléfono
  • Lista de categorías de pies
  • Dirección
  • Lista de fotos destacadas
  • Comentarios – Lista de comentarios
Plantilla de tutorial de clon de yelp sin código de burbuja

Tipo de datos: Revisión

Campos:

  • Contenido
  • Restaurante-Restaurante
Plantilla de tutorial de clon de yelp sin código de burbuja

Agregar un restaurante a la plataforma

Ahora que ha configurado su base de datos, podemos comenzar a crear los flujos de trabajo que impulsarán su aplicación. La primera característica que crearemos no es algo con lo que los usuarios interactúen directamente, sino que es una herramienta de back-end para agregar nuevos restaurantes a la plataforma.

Al crear un portal dedicado para cargar anuncios en su base de datos, puede agilizar el proceso de agregar nuevos restaurantes a su directorio.

En tu página de carga, puedes usar una combinación de campos de entrada para asignar los datos requeridos para cada nuevo restaurante. Una vez que se haga clic en el botón crear, esto activará un flujo de trabajo que agregará estos datos colectivos como un nuevo restaurante dentro de su base de datos.

Plantilla de tutorial de clon de yelp sin código de burbuja

Al crear su flujo de trabajo, necesitaremos crear una cosa nueva, configurando el tipo de datos en un restaurante.

 Plantilla de tutorial de clon de yelp sin código de burbuja

A continuación, emparejará los elementos relevantes de su página con los campos de datos debajo del tipo de restaurante en su base de datos.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Mostrar contenido dinámico

Una vez que haya subido un catálogo de restaurantes, es hora de comenzar a mostrarlos en una página pública a la que los usuarios puedan acceder.

Con el elemento repeating group de Bubble, puedes mostrar una lista de datos dinámicos de tu base de datos, como tus restaurantes existentes.

Nota: Los grupos repetitivos están estructurados como un formato vertical de forma predeterminada, pero también es posible reconfigurar el elemento para que se muestre horizontalmente.

Antes de comenzar a agregar contenido a su grupo repetidor, deberá vincular el elemento a un tipo de datos dentro de su base de datos. Esto le ayudará a identificar el contenido específico que mostrará.

El tipo de contenido que necesitaremos mostrar, es por supuesto, los restaurantes en su base de datos.

A continuación, necesitaremos identificar una fuente de datos para que el editor de burbujas sepa qué restaurantes específicos mostrar. Para nuestro MVP, solo mostraremos una lista de todos los restaurantes actuales, pero puede agregar restricciones fácilmente a esta fuente de datos para filtrar los restaurantes por su ciudad o categoría de alimentos.

Plantilla de tutorial de clon de yelp sin código de burbuja

Una vez que haya configurado correctamente el grupo repetidor, deberá comenzar a agregar cualquier elemento de contenido dinámico que desee mostrar dentro de cada celda. Dentro de nuestro MVP, esto incluirá el título de un restaurante y la foto destacada.

Como un restaurante puede tener varias fotos destacadas, configuraremos el contenido dinámico para mostrar una de estas fotos al azar.

Plantilla de tutorial de clon de yelp sin código de burbuja

Envío de datos a páginas dinámicas

Con nuestra página de inicio mostrando solo una tarjeta de vista previa para cada restaurante, los usuarios deberán hacer clic en una página de presentación dedicada para cada restaurante para ver su contenido completo y reseñas. Esta información adicional se alojará en la página del restaurante de su solicitud.

Desde nuestro grupo repetidor, es posible crear eventos basados en acciones realizadas dentro de cada fila individual. Esta función será útil al crear funciones de navegación en toda la plataforma.

Para dirigir a un usuario de la página de inicio a una página de presentación de un restaurante específico, deberás crear un flujo de trabajo de navegación que se activa cuando se hace clic en una imagen destacada de un restaurante.

 Plantilla de tutorial de clon de yelp sin código de burbuja

A continuación, deberá enviar datos adicionales a esta página, lo que permitirá al editor de burbujas identificar qué restaurante específico mostrar. Los datos que elijas mostrar se extraerán del restaurante de la celda actual.

Plantilla de tutorial de clon de yelp sin código de burbuja

Mostrar contenido dinámico en la página de vista previa

Una vez que se hayan enviado los datos a la página del restaurante, puede extraer fácilmente la información relevante y mostrar este contenido para cada restaurante.

Primero deberá asegurarse de que el tipo de página de destino coincida con la propiedad de datos que está enviando dentro del flujo de trabajo. En este caso, la página del restaurante se configurará como una propiedad de restaurante.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Al clasificar el tipo de contenido de una página, Bubble puede extraer y enviar fácilmente datos relevantes de fuentes existentes.

Ahora puede comenzar a agregar contenido dinámico a los campos que muestran información del restaurante de la página actual.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Búsqueda de contenido

Volviendo a nuestra página de inicio, también necesitaremos crear una función que permita a los usuarios buscar restaurantes en función de una ciudad. Esto se puede lograr agregando un elemento de entrada de texto adicional que trataremos como una barra de búsqueda.

Plantilla de tutorial de clon de yelp sin código de burbuja

Desde aquí, crearemos un nuevo flujo de trabajo que clasifica el término de búsqueda de un usuario y luego pasa estos datos a una página separada dedicada a esta consulta de búsqueda (más en esta página pronto).

Para impulsar este flujo de trabajo, crearemos un desencadenador de eventos que reconozca cuándo se cambia un valor de entrada. El elemento será, por supuesto, el campo de entrada de texto.

Plantilla de tutorial de clon de yelp sin código de burbuja

Al enviar al usuario a nuestra página de resultados de búsqueda, necesitaremos agregar una consulta de búsqueda única a nuestra cadena de URL, permitiendo que la siguiente página recupere estos datos.

En lugar de optar por enviar a un usuario a una página específica en este flujo de trabajo, elegiremos abrir un sitio web externo. Esto nos permitirá personalizar la ruta de URL entre páginas.

La URL a la que enviaremos al usuario será la URL de inicio del sitio web actual + la URL de nuestra página de resultados de búsqueda + el valor de consulta dinámica de nuestro campo de entrada de texto.

 Plantilla de tutorial de clon de yelp sin código de burbuja

A continuación, terminaremos de construir nuestra página de resultados de búsqueda dedicada dentro de nuestra aplicación. Al crear esta página, necesitaremos configurar el tipo de página para un restaurante, ya que desearemos mostrar una lista de restaurantes coincidentes.

Plantilla de tutorial de clon de yelp sin código de burbuja

Al diseñar esta página, primero incluiremos un elemento de grupo repetitivo para mostrar una lista de restaurantes. A diferencia de nuestro primer grupo repetidor, necesitaremos actualizar la fuente de datos de este grupo repetidor para que coincida con la consulta de búsqueda de nuestra cadena de URL.

Comience configurando el tipo de contenido para que sea un restaurante. A continuación, actualice la fuente de datos para mostrar solo los restaurantes que incluyen el texto de nuestras cadenas de URL en su campo de ciudad.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Ahora solo se mostrarán los restaurantes que coincidan con la ciudad desde la consulta de búsqueda de los usuarios.

A continuación, en esta página, desearemos actualizar el marcador en nuestro mapa cada vez que se haga clic en el título de un restaurante, lo que permitirá a los usuarios ver visualmente su dirección.

Para crear esta función, usa Edición de flujo de trabajo de burbujas para crear un evento personalizado que reconozca cuando se hace clic en el título de un restaurante.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Desde aquí, elegiremos la acción para mostrar los marcadores.

Plantilla de tutorial de clon de yelp sin código de burbuja

Ahora, seleccionaremos para mostrar el marcador de nuestro mapa en página, configurando su fuente de datos como la dirección actual de restaurantes de celdas.

Plantilla de tutorial de clon de yelp sin código de burbuja

La característica clave final que necesitaremos agregar a nuestra página de resultados de búsqueda es un menú desplegable de categorías, que permite a los usuarios filtrar por restaurantes según las categorías de alimentos que sirven.

Plantilla de tutorial de clon de yelp sin código de burbuja

Una vez que haya configurado las opciones del menú desplegable, necesitaremos agregar una condición a nuestro grupo repetidor, lo que le permitirá responder a la selección de menús desplegables.

La lógica de esta condición identificará cuando el valor de los desplegables no esté vacío. Cuando esto ocurra, actualizará el origen de datos del grupo repetidor.

La nueva fuente de datos incluirá una vez más una búsqueda de restaurantes, agregando la misma condición para la cadena de URL de las ciudades. También agregaremos otra restricción, asegurando que las categorías de alimentos del restaurante también contengan el mismo valor que la selección de menús desplegables.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Ahora, cuando se selecciona una categoría de alimentos, este grupo repetitivo se actualizará automáticamente con los resultados más relevantes.

La última función que necesitaremos agregar a esta página, es otro evento de navegación que dirige a un usuario a nuestra página dedicada a restaurantes cuando se hace clic en una imagen de restaurantes.

Replicaremos el mismo flujo de trabajo de navegación que creamos desde nuestro grupo de repetición de página de inicio.

Plantilla de tutorial de clon de yelp sin código de burbuja

Agregar opiniones a un restaurante

Una vez que un usuario ha encontrado un nuevo restaurante favorito (gracias a su aplicación sin código), es posible que desee contribuir con una opinión, compartiendo su experiencia con la comunidad.

En nuestra página del restaurante, agregaremos un grupo repetitivo adicional debajo de la información del restaurante. Este grupo repetitivo se utilizará para mostrar una lista de las reseñas actuales de los restaurantes.

Al configurar este grupo repetidor, el tipo de datos se establecerá en una opinión, y nuestra fuente de datos extraerá todas las opiniones de las páginas actuales del restaurante.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Desde aquí, crearemos un nuevo flujo de trabajo cuando se haga clic en el botón Agregar revisión.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Este flujo de trabajo redirigirá al usuario a una página dedicada donde podrá crear una nueva revisión. Al enviar a un usuario a esta página, también desearemos transmitir los datos de las páginas actuales del restaurante.

 Plantilla de tutorial de clon de yelp sin código de burbuja

En nuestra página enviar revisión, necesitaremos actualizar el tipo de página para que también sea un restaurante, lo que nos permitirá extraer los datos actuales de los restaurantes.

Plantilla de tutorial de clon de yelp sin código de burbuja

Finalmente, necesitaremos crear otro flujo de trabajo que se active una vez que se haga clic en el botón de revisión de publicaciones.

 Plantilla de tutorial de clon de yelp sin código de burbuja

Este flujo de trabajo se utilizará para crear una cosa nueva, una nueva revisión.

Plantilla de tutorial de clon de yelp sin código de burbuja

Como ha hecho antes, luego emparejará los elementos de la página con los campos de datos necesarios para crear una revisión válida.

Una vez que se haya creado una nueva opinión, se agregará automáticamente al grupo repetidor en la página de restaurantes.

Funciones adicionales

Después de crear las funciones principales para su MVP, se familiarizará con el proceso de crear campos de datos personalizados y mostrar contenido dinámico. Si desea continuar agregando características adicionales a su directorio, podría considerar:

  • Agregar una función para que los usuarios envíen fotos a la página de un restaurante
  • Crear perfiles de usuario: mostrar una lista de los detalles de la cuenta de los usuarios y las reseñas que han creado en la plataforma

Lanzar

Contratar a un desarrollador o equipo de desarrollo para crear esta aplicación costaría miles, si no decenas de miles de dólares. Como iniciar y crecer en usuarios, nuestros planes le permiten alojar la aplicación en su propio dominio personalizado para tan poco como $25 por mes. Algunas plantillas y complementos pueden costar más, pero puede crear toda la funcionalidad de un directorio sin costos adicionales.

Plantillas

Si no quieres crear el tema de reseñas de tu restaurante desde cero, puedes comprar una de las plantillas hechas por los miembros de nuestra comunidad. Algunas plantillas similares incluyen:

  • Plataforma de reseñas de Canvas de AirDev
  • Reseñas basadas en la ubicación de Zeroqode
  • Directorio & Listado de Zeroqode

Comience a construir

¡Bubble puede ayudarlo a construir un sitio de reseñas de restaurantes o cualquier otro producto que elija! Nunca ha sido tan fácil crear algo increíble sin tener que codificar.

Para comenzar de forma gratuita, regístrese aquí.

También puede conectarse con otros creadores apasionados construyendo con Bubble en nuestro foro de la comunidad.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.