Articles

Comment Construire Un Site d’Avis de restaurant Sans Code

Si vous cherchez le restaurant ou le bar parfait, des plates-formes comme Yelp, Zagat ou Zomato (Urbanspoon) peuvent vous aider à choisir parmi des milliers d’options alimentaires.

Si vous étiez intéressé à créer votre propre version d’un site de critiques de restaurants, Bubble est la seule plate-forme dont vous aurez besoin.

Les outils sans code comme Bubble révolutionnent la façon dont les fabricants de tous les jours peuvent créer des logiciels. La plate-forme puissante de Bubble a rendu plus facile que jamais de commencer à créer des logiciels sans avoir à écrire une seule ligne de code.

Notre outil de programmation visuelle permet de concevoir et de construire rapidement des logiciels de travail qui vont au-delà des expériences statiques. Les fabricants utilisent Bubble pour créer des marchés, des répertoires et même des réseaux sociaux.

Cet article couvrira le processus étape par étape de création d’un site d’examen de restaurant sans code à l’aide de Bubble. Que vous cherchiez à reproduire l’ensemble du produit ou que vous souhaitiez simplement utiliser certaines des fonctionnalités de base de la plate-forme, ce guide vous expliquera comment créer les flux de travail nécessaires pour que votre produit soit opérationnel.

Les étapes pour créer un style Yelp sans code incluent:

Commencer

Pour commencer, vous devrez enregistrer votre compte Bubble gratuit.

Enregistrez votre compte sur Bubble

Nouveau sur Bubble? Suivez nos vidéos d’introduction au cours intensif pour vous familiariser avec les bases de Bubble.

Nous vous recommandons également de suivre nos leçons d’introduction, qui vous guideront à travers le processus étape par étape des fonctionnalités de bulles les plus courantes. Cela vous aidera à démarrer lors de la création de votre application de révision de restaurant sans code.

Nous vous recommandons également de comprendre comment créer et modifier des comptes d’utilisateurs. Nous avons déjà abordé cela plus en détail dans nos autres guides de construction.

Lors du démarrage de votre projet, vous pouvez choisir de commencer par wireframing la conception de votre produit ou de créer les champs nécessaires dans votre base de données.

Dans ce guide, nous allons commencer par utiliser l’outil de conception visuelle de Bubble pour façonner l’interface utilisateur de notre produit. Si vous répliquez une version de Yelp ou Zomato, certaines des pages principales que vous voudrez inclure sont:

  • Page de téléchargement – un portail backend où vous pouvez télécharger de nouveaux restaurants
  • Page d’accueil – affichage d’une liste de restaurants et d’une barre de recherche
  • Page de résultats de recherche – affichage d’une liste de restaurants et de catégories une fois qu’un utilisateur a recherché un emplacement
  • Page de restaurant individuelle – une page présentant l’information complète pour chaque restaurant
  • Page de soumission d’avis – une page où les utilisateurs peuvent soumettre un avis de restaurant

Une caractéristique majeure de Bubble est la possibilité d’envoyer des données entre les pages. Cela vous permet de créer une version générique d’une page, puis d’afficher dynamiquement le contenu pertinent de votre base de données lorsque cela est nécessaire.

Dans le cas de votre site, vous n’aurez besoin que de créer une page pour présenter vos restaurants individuels. Nous pouvons ensuite créer les flux de travail nécessaires pour afficher uniquement le restaurant pertinent sur chaque page lorsque cela est nécessaire (nous aborderons cela plus en détail bientôt).

Configuration de votre application

Une fois que vous avez cartographié l’affichage de votre produit, vous pouvez vous concentrer sur la création des champs de données nécessaires pour alimenter votre application. Nous nous appuierons sur ces types de données, ces champs, pour connecter les flux de travail derrière votre produit.

La base de données prédéfinie de Bubble facilite la création de différents types de données avec des champs uniques. Lors de la création d’une application de restaurant de type Yelp en tant que MVP, nous devons créer les types de données suivants & champs:

Type de données: Utilisateur

Champs:

  • Nom
  • Photo
  • Avis soumis – Liste des avis. Remarque : La création d’un champ sous forme de liste basée sur un type de données distinct vous permet d’intégrer de manière transparente tous ses champs de données pertinents. Cela vous évite d’avoir à recréer tous les champs de données supplémentaires
 Modèle de tutoriel de clonage yelp sans bulle de code

Type de données: Restaurant

Champs:

  • Nom
  • Description
  • Ville
  • Logo
  • Lien vers le site Web
  • Numéro de téléphone
  • Liste des catégories de pieds
  • Adresse
  • Photos en vedette – Liste
  • Avis – Liste des avis
 Modèle de tutoriel de clonage yelp sans bulle

Type de données: Revue

Champs:

  • Contenu
  • Restaurant – Restaurant
 Modèle de tutoriel de clonage yelp sans bulle

Ajout d’un restaurant à la plate-forme

Maintenant que vous avez configuré votre base de données, nous pouvons commencer à créer les flux de travail qui alimenteront votre application. La première fonctionnalité que nous allons créer n’est pas quelque chose avec lequel les utilisateurs s’engageront directement, mais est plutôt un outil back-end pour ajouter de nouveaux restaurants à la plate-forme.

En créant un portail dédié pour télécharger des annonces dans votre base de données, vous pouvez rationaliser le processus d’ajout de nouveaux restaurants à votre répertoire.

Sur votre page de téléchargement, vous pouvez utiliser une combinaison de champs de saisie pour mapper les données requises pour chaque nouveau restaurant. Une fois le bouton Créer cliqué, cela déclenchera un flux de travail qui ajoutera ces données collectives en tant que nouveau restaurant dans votre base de données.

 Modèle de tutoriel de clonage yelp sans bulle

Lors de la création de votre flux de travail, nous devrons créer une nouvelle chose, en configurant le type de données pour un restaurant.

 Modèle de tutoriel de clonage yelp sans bulle

Vous associerez ensuite les éléments pertinents de votre page aux champs de données sous le type de restaurant dans votre base de données.

 Modèle de tutoriel de clonage yelp sans bulle

Affichage du contenu dynamique

Une fois que vous avez téléchargé un catalogue de restaurants, il est temps de commencer à les afficher sur une page publique à laquelle les utilisateurs peuvent accéder.

En utilisant l’élément de groupe répétitif de Bubble, vous pouvez afficher une liste de données dynamiques de votre base de données, telles que vos restaurants existants.

Remarque : Les groupes répétitifs sont structurés en format vertical par défaut, mais il est également possible de reconfigurer l’élément pour l’afficher horizontalement.

Avant de commencer à ajouter du contenu dans votre groupe répétitif, vous devez lier l’élément à un type de données dans votre base de données. Cela l’aidera à identifier le contenu spécifique qu’il affichera.

Le type de contenu que nous devrons afficher est bien sûr les restaurants de votre base de données.

Ensuite, nous devrons identifier une source de données afin que l’éditeur de bulles sache quels restaurants spécifiques afficher. Pour notre MVP, nous n’afficherons qu’une liste de tous les restaurants actuels, mais vous pouvez facilement ajouter des contraintes à cette source de données pour filtrer les restaurants par ville ou catégorie de nourriture.

 Modèle de tutoriel de clonage yelp sans bulle

Une fois que vous avez correctement configuré le groupe répétitif, vous devrez ensuite commencer à ajouter les éléments de contenu dynamique que vous souhaitez afficher dans chaque cellule. Dans notre MVP, cela comprendra le titre d’un restaurant et une photo en vedette.

Comme un restaurant peut avoir plusieurs photos en vedette, nous configurerons le contenu dynamique pour afficher l’une de ces photos au hasard.

 Modèle de tutoriel de clonage yelp sans bulle

Envoi de données vers des pages dynamiques

Notre page d’accueil affichant uniquement une carte d’aperçu pour chaque restaurant, les utilisateurs devront cliquer sur une page vitrine dédiée pour chaque restaurant pour afficher son contenu complet et ses critiques. Ces informations supplémentaires seront hébergées sur la page restaurant de votre candidature.

À partir de notre groupe répétitif, il est possible de créer des événements en fonction des actions effectuées au sein de chaque ligne individuelle. Cette fonctionnalité deviendra utile lors de la création de fonctionnalités de navigation sur votre plate-forme.

Pour diriger un utilisateur de la page d’accueil vers une page vitrine de restaurant spécifique, vous devez créer un flux de travail de navigation qui se déclenche lorsqu’une image en vedette de restaurants est cliquée.

 Modèle de tutoriel de clonage yelp sans bulle

Vous devrez ensuite envoyer des données supplémentaires à cette page, permettant à l’éditeur de bulles d’identifier le restaurant spécifique à afficher. Les données que vous choisirez d’afficher seront extraites du restaurant de la cellule actuelle.

 Bulle sans code modèle de tutoriel yelp clone

Affichage du contenu dynamique sur la page d’aperçu

Une fois les données envoyées à la page du restaurant, vous pouvez facilement extraire les informations pertinentes et afficher ce contenu pour chaque restaurant.

Vous devez d’abord vous assurer que le type de page de destination correspond à la propriété data que vous envoyez dans le workflow. Dans ce cas, la page du restaurant sera configurée pour une propriété de restaurant.

 Modèle de tutoriel de clonage yelp sans code Bubble

En classant le type de contenu d’une page, Bubble peut facilement extraire et envoyer des données pertinentes à partir de sources existantes.

Vous pouvez maintenant commencer à ajouter du contenu dynamique dans les champs qui affichent les informations du restaurant de la page en cours.

 Modèle de tutoriel de clonage yelp sans bulle

Recherche de contenu

En revenant sur notre page d’accueil, nous devrons également créer une fonctionnalité permettant aux utilisateurs de rechercher des restaurants en fonction d’une ville. Cela peut être réalisé en ajoutant un élément de saisie de texte supplémentaire que nous traiterons comme une barre de recherche.

 Modèle de tutoriel de clonage yelp sans bulle

À partir de là, nous allons créer un nouveau flux de travail qui classifie le terme de recherche d’un utilisateur, puis transmet ces données à une page distincte dédiée à cette requête de recherche (plus d’informations sur cette page bientôt).

Pour alimenter ce flux de travail, nous allons créer un déclencheur d’événement qui reconnaît lorsqu’une valeur d’entrée est modifiée. L’élément sera, bien sûr, le champ de saisie de texte.

 Modèle de tutoriel de clonage yelp sans bulle

Lors de l’envoi de l’utilisateur à notre page de résultats de recherche, nous devrons ajouter une requête de recherche unique à notre chaîne d’URL, permettant à la page suivante de récupérer ces données.

Au lieu d’envoyer un utilisateur vers une page spécifique de ce flux de travail, nous choisirons d’ouvrir un site Web externe. Cela nous permettra de personnaliser le chemin d’URL entre les pages.

L’URL à laquelle nous enverrons l’utilisateur sera l’URL d’accueil du site Web actuel + l’URL de notre page de résultats de recherche + la valeur de requête dynamique de notre champ de saisie de texte.

 Modèle de tutoriel de clonage yelp sans bulle

Ensuite, nous finirons de créer notre page de résultats de recherche dédiée dans notre application. Lors de la création de cette page, nous devrons configurer le type de page pour un restaurant car nous voulons afficher une liste de restaurants correspondants.

 Modèle de tutoriel de clonage yelp sans bulle

Lors de la conception de cette page, nous allons d’abord inclure un élément de groupe répétitif pour afficher une liste de restaurants. Contrairement à notre premier groupe répétitif, nous devrons mettre à jour la source de données de ce groupe répétitif pour qu’elle corresponde à la requête de recherche de notre chaîne d’URL.

Commencez par configurer le type de contenu pour qu’il s’agisse d’un restaurant. Ensuite, mettez à jour la source de données pour afficher uniquement les restaurants qui incluent le texte de nos chaînes d’URL dans leur champ de ville.

 Modèle de tutoriel de clonage yelp sans bulle

Cela affichera désormais uniquement les restaurants correspondant à la ville à partir de la requête de recherche des utilisateurs.

Ensuite sur cette page, nous voudrons mettre à jour le marqueur sur notre carte chaque fois qu’un titre de restaurant est cliqué, permettant aux utilisateurs de voir visuellement son adresse.

Pour créer cette fonction, utilisez Bubble workflow edit pour créer un événement personnalisé qui reconnaît lorsqu’un titre de restaurant est cliqué.

 Modèle de tutoriel de clonage yelp sans bulle

À partir de là, nous choisirons l’action pour afficher les marqueurs.

 Modèle de tutoriel de clonage yelp sans bulle

Maintenant, nous allons choisir d’afficher le marqueur de notre carte sur la page, en configurant sa source de données comme adresse des restaurants des cellules actuelles.

 Modèle de tutoriel de clonage yelp sans bulle

La dernière caractéristique clé que nous devrons ajouter à notre page de résultats de recherche est une liste déroulante de catégories, permettant aux utilisateurs de filtrer les restaurants par catégories d’aliments qu’ils servent.

 Modèle de tutoriel de clonage yelp sans bulle

Une fois que vous avez configuré les options du menu déroulant, nous devrons ajouter une condition à notre groupe répétitif, lui permettant de répondre à la sélection des listes déroulantes.

La logique de cette condition identifiera lorsque la valeur des listes déroulantes n’est pas vide. Lorsque cela se produit, il mettra alors à jour la source de données du groupe répétitif.

La nouvelle source de données inclura à nouveau une recherche de restaurants, en ajoutant la même condition pour la chaîne d’URL des villes. Nous ajouterons également une autre contrainte, en veillant à ce que les catégories d’aliments du restaurant contiennent également la même valeur que la sélection des menus déroulants.

 Modèle de tutoriel de clonage yelp sans bulle

Maintenant, lorsqu’une catégorie d’aliment est sélectionnée, ce groupe répétitif se mettra automatiquement à jour avec les résultats les plus pertinents.

La dernière fonction que nous devrons ajouter à cette page est un autre événement de navigation qui dirige un utilisateur vers notre page de restaurant dédiée lorsqu’une image de restaurant est cliquée.

Nous allons reproduire le même flux de navigation que nous avons créé à partir de notre groupe de répétition de page d’accueil.

 Modèle de tutoriel de clonage yelp sans bulle

Ajout d’avis à un restaurant

Une fois qu’un utilisateur a trouvé un nouveau restaurant préféré (grâce à votre application sans code), il peut vouloir contribuer à un avis, en partageant son expérience avec la communauté.

Sur notre page restaurant, nous ajouterons un groupe répétitif supplémentaire sous les informations du restaurant. Ce groupe répétitif sera utilisé pour afficher une liste des critiques actuelles des restaurants.

Lors de la configuration de ce groupe répétitif, le type de données sera défini sur un avis, et notre source de données extraira tous les avis du restaurant pages actuelles.

 Modèle de tutoriel de clonage yelp sans bulle

À partir de là, nous créerons un nouveau flux de travail lorsque vous cliquerez sur le bouton Ajouter un avis.

 Modèle de tutoriel de clonage yelp sans bulle

Ce flux de travail redirigera un utilisateur vers une page dédiée où il pourra créer une nouvelle revue. Lors de l’envoi d’un utilisateur sur cette page, nous voulons également transmettre les données du restaurant des pages actuelles.

 Modèle de tutoriel de clonage yelp sans bulle

Sur notre page d’avis d’envoi, nous devrons mettre à jour le type de page pour qu’il soit également un restaurant, ce qui nous permet d’extraire les données actuelles des restaurants.

 Modèle de tutoriel de clonage yelp sans bulle

Enfin, nous devrons créer un autre flux de travail qui se déclenche une fois le bouton de publication cliquée.

 Modèle de tutoriel de clonage yelp sans bulle

Ce flux de travail sera utilisé pour créer une nouvelle chose – une nouvelle revue.

 Modèle de tutoriel de clonage yelp sans bulle

Comme vous l’avez déjà fait, vous associerez ensuite les éléments de la page aux champs de données nécessaires pour créer un avis valide.

Une fois qu’un nouvel avis a été créé, il sera automatiquement ajouté au groupe de répétition sur la page restaurants.

Fonctionnalités supplémentaires

Après avoir créé les fonctionnalités principales de votre MVP, vous vous familiariserez avec le processus de création de champs de données personnalisés et d’affichage de contenu dynamique. Si vous souhaitez continuer à ajouter des fonctionnalités supplémentaires à votre répertoire, vous pouvez envisager:

  • Ajout d’une fonctionnalité permettant aux utilisateurs de soumettre des photos à une page de restaurant
  • Création de profils d’utilisateurs – affichage d’une liste des détails du compte des utilisateurs et des avis qu’ils ont créés sur la plate-forme

Lancement

Embaucher un développeur ou une équipe de développement pour créer cette application coûterait des milliers, voire des dizaines de milliers de dollars. Au fur et à mesure que vous lancez et augmentez le nombre d’utilisateurs, nos forfaits payants vous permettent d’héberger l’application sur votre propre domaine personnalisé pour aussi peu que 25 $ par mois. Certains modèles et plugins peuvent coûter plus cher, mais vous pouvez créer toutes les fonctionnalités d’un répertoire sans frais supplémentaires.

Modèles

Si vous ne souhaitez pas créer à partir de rien le thème de votre critique de restaurant, vous pouvez acheter l’un des modèles créés par les membres de notre communauté. Certains modèles similaires incluent:

  • Plate-forme d’avis Canvas par AirDev
  • Avis basés sur la localisation par Zeroqode
  • Répertoire & Liste par Zeroqode

Commencez à construire

Bubble peut vous aider à créer un site d’avis sur les restaurants ou tout autre produit que vous choisissez! Il n’a jamais été aussi facile de construire quelque chose d’incroyable sans avoir à coder.

Pour commencer gratuitement, inscrivez-vous ici.

Vous pouvez également vous connecter avec d’autres créateurs passionnés construisant avec Bubble sur notre forum communautaire.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.