HomeBlog SEONon classéComment construire un clone de Fiverr sans code

Comment construire un clone de Fiverr sans code

Apprenez à créer votre propre application de marché indépendante sans code à l’aide de l’éditeur Web visuel de Bubble.

Si vous avez déjà eu besoin d’aide pour créer un site Web ou une application, les places de marché indépendantes comme Fiverr , Upwork ou Freelancer.com peuvent être la source incontournable pour les créateurs non techniques. Ces marchés aident à mettre en relation les professionnels de l’industrie avec des clients à la recherche de leurs compétences.

Avec l’essor des outils sans code comme Bubble , les fabricants de tous horizons trouvent plus facile que jamais de commencer à créer leur propre logiciel puissant – le tout sans écrire une seule ligne de code. En fait, il est désormais possible de créer votre propre marché indépendant à l’aide de notre ensemble d’outils de programmation visuelle. Nos clients utilisent Bubble pour créer des sites Web, des applications de messagerie et même des réseaux sociaux.

Tout au long de ce guide, nous découvrirons le processus d’utilisation de Bubble pour créer votre propre version en marque blanche de Fiverr.

Que vous cherchiez à créer un marché indépendant dédié ou que vous souhaitiez simplement utiliser certaines des fonctionnalités de base de Fiverr, ce guide vous expliquera comment commencer à créer la logique sous-jacente d’un MVP.

Les étapes pour construire Fiverr sans code incluent :

  1. Commencer
  2. Configuration de votre base de données
  3. Créer des flux de travail
  4. Lister un service sur la plateforme
  5. Créer une navigation de recherche
  6. Affichage des annonces pertinentes à partir d’une requête de recherche
  7. Envoi de données entre les pages
  8. Afficher du contenu dynamique sur une page produit
  9. Acheter un produit
  10. Ajout et affichage des avis clients
  11. Caractéristiques supplémentaires
  12. Lancer
  13. Modèles
    1. Commencer à construire

Commencer

Avant de commencer, vous devez d’abord enregistrer votre compte Bubble gratuit. Ensuite, vous pouvez suivre la construction de notre produit ensemble.Enregistrez votre compte sur BubbleNouveau sur Bulle ? Suivez nos 

vidéos d’introduction au Crash Course pour vous familiariser avec les bases de Bubble.

Nous vous recommandons également de suivre nos cours d’introduction , qui vous guideront pas à pas dans le processus des fonctionnalités les plus courantes de Bubble. Cela vous aidera à prendre un bon départ lors de la construction de votre clone Fiverr.

Cela vous aidera également si vous comprenez comment créer et modifier des comptes d’utilisateurs. Nous avons déjà couvert cela plus en détail dans notre article sur la construction d’un clone Quora .

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

Dans ce cas, nous commencerons par utiliser l’outil de conception visuelle Bubbles pour façonner l’interface utilisateur de notre produit. Si vous répliquez une version de Fiverr, certaines des pages principales que vous voudrez inclure sont :

  • Page de téléchargement de produit – Un portail principal où les utilisateurs peuvent répertorier les services sur la plate-forme
  • Page d’accueil – Où les utilisateurs peuvent commencer à rechercher des services
  • Page de résultats de recherche – Affichage d’une liste de produits/services pertinents à partir d’une requête de recherche
  • Page produit – Une page dédiée pour afficher toutes les informations sur un service
  • Page de paiement
  • Profil utilisateur – Affichage d’une liste d’avis pour chaque utilisateur
Didacticiel Fiverr Bubble No Code Clone

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 clone Fiverr, vous n’aurez qu’à créer une page pour héberger vos services individuels. Nous pouvons ensuite écrire la logique nécessaire pour afficher uniquement la liste pertinente sur chaque page lorsque cela est nécessaire (nous aborderons cela plus en détail bientôt).

Configuration de votre base de données

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 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 de Fiverr en tant que MVP, nous devrons créer les types de données et champs suivants :

Type de données : Utilisateur

Des champs:

  • Nom
  • Bio
  • Photo
  • Produits achetés – Liste des produits. 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 sans avoir à créer de points de données supplémentaires.
  • Avis – Liste des avis
Tutoriel sur les champs de types de données utilisateur de clone de Bubble Fiverr

Type de données : Produit

Des champs:

  • Catégorie
  • La description
  • L’image sélectionnée
  • Prix
  • Titre
Bubble Fiverr Clone Product Data Types Fields Tutoriel

Type de données : Avis

Des champs:

  • Teneur
  • Évaluation
Bubble Fiverr Clone Review Tutoriel sur les champs de types de données


Créer des flux de travail

Maintenant que vous avez structuré à la fois la conception et la base de données de votre application, il est temps de commencer à tout assembler et à rendre votre produit fonctionnel.

Dans Bubble, le principal moyen de le faire est d’utiliser des « workflows ». Chaque flux de travail se produit lorsqu’un « événement » se produit (par exemple, un utilisateur clique sur un bouton), puis exécute une série d' »actions » en réponse (par exemple, « inscrire l’utilisateur », « apporter une modification à la base de données », etc. )

Lister un service sur la plateforme

L’une des principales caractéristiques de tout marché indépendant est la possibilité pour les professionnels de répertorier leurs services à vendre en tant que produit.

Avant de créer l’une des fonctionnalités de base de notre place de marché, nous allons d’abord créer une page dédiée où les utilisateurs peuvent créer une nouvelle liste.

Sur notre page de création de produit , vous pouvez commencer à développer la prise en charge de cette fonctionnalité en utilisant une combinaison de champs de saisie, notamment ; champs de texte libre, téléchargeurs d’images ou menus déroulants.

Une fois qu’un utilisateur a ajouté les détails pertinents dans chaque entrée, il clique sur le bouton de liste de produits pour créer une nouvelle entrée dans votre base de données.

Modèle de page de produit du didacticiel Bubble Fiverr Clone

À l’aide de l’éditeur de flux de travail, sélectionnez pour créer un nouvel élément dans votre base de données. Dans ce cas, nous allons créer un nouveau produit .

Procédure pas à pas du flux de travail de clonage de Bubble No Code Fiverr

Vous devrez ensuite commencer à ajouter des données aux champs pertinents de votre base de données. Associez chaque élément de page que vous souhaitez créer à son champ de données correspondant.

Bubble No Code Fiverr Clone Product Workflow Procédure pas à pas

Créer une navigation de recherche

Une fois que les utilisateurs ont ajouté des listes de produits à votre place de marché, nous commencerons à créer des fonctionnalités pour les rechercher et les afficher sur notre plateforme.

Avec des milliers d’annonces sur une plate-forme comme Fiverr, les utilisateurs recherchent souvent des catégories spécifiques via une barre de recherche sur la page d’accueil. Cela permet aux utilisateurs de saisir une requête, puis d’afficher une liste de toutes les correspondances pertinentes pour ces mots clés.

Sur notre page d’accueil, nous utiliserons un champ de saisie de texte comme champ de recherche – permettant aux utilisateurs d’entrer des mots-clés de catégorie.

Créez un clone du marché Fiverr Freelancer sans plate-forme de bulle de code

À partir de là, nous allons créer un nouveau flux de travail qui classe une expression de recherche d’utilisateurs, puis transmet ces données à une page de résultats de recherche distincte .

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 .

Tutoriel pas à pas sur le déclencheur d'événement Bubble Workflow

Comme nous devrons ajouter une requête de recherche unique à notre chaîne d’URL, nous choisirons d’ ouvrir un site Web externe . Cela nous permettra de personnaliser le chemin URL entre les pages.

L’URL que nous enverrons à l’utilisateur comprendra 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 .

Tutoriel de site Web externe Bubble Fiverr

Affichage des annonces pertinentes à partir d’une requête de recherche

Une fois que nous avons créé une fonction pour prendre en charge les requêtes de recherche, nous allons maintenant créer notre page pour afficher les résultats de recherche corrects.

Lors de la création de notre page de résultats de recherche, nous commencerons par ajouter un élément de groupe répétitif, affichant une liste d’offres de produits liées à notre catégorie de recherche.

Les groupes répétitifs sont un élément puissant qui s’intègre à votre base de données, affichant et mettant à jour une liste de contenu dynamique.

Lorsque vous utilisez un groupe extensible, vous devez d’abord lier l’élément à un type de données dans votre base de données. Dans ce cas, vous classerez le type en tant que produit .

Nous mettrons ensuite à jour la source de données de notre groupe extensible pour afficher uniquement les produits qui incluent le texte de nos chaînes d’URL dans leur champ de catégorie .

Présentation de l'interface utilisateur et du produit de Bubble Fiverr Freelancer Marketplace

Ensuite, vous serez invité à sélectionner le champ de l’URL à partir duquel vous allez extraire ces données. Choisissez simplement d’obtenir les données à partir du chemin de l’URL , et non du paramètre.

Tutoriel Bubble No Code Fiverr Clone Procédure pas à pas

Cela affichera désormais tout produit dont la catégorie correspond à une instance du mot-clé spécifique recherché, par exemple Digital Marketing

Une fois que vous avez configuré la source de données de votre groupe extensible, vous pouvez alors commencer à ajouter du contenu dynamique dans la ligne principale de cet élément.

Tutoriel Bubble No Code Fiverr Clone Product Walkthrough

Envoi de données entre les pages

L’envoi de données entre les pages est une fonction essentielle pour la plupart des produits dynamiques. Nous avons couvert cette fonctionnalité plus en détail tout au long de nos leçons d’introduction sur l’envoi de données aux pages.

Bubble-App-Lessons-Send-Data-to-Pages

Au sein d’un groupe répétitif, il est également possible d’envoyer des données à une page à partir d’une colonne individuelle.

Cette fonctionnalité deviendra utile lors de la création de fonctionnalités de navigation sur votre plate-forme. Comme les fiches produits de Fiverr n’affichent qu’un aperçu de chaque produit (y compris son nom, son image et son prix), vous devrez afficher les détails complets de la fiche produit pour chaque article unique sur une page distincte.

Ce contenu supplémentaire sera hébergé sur votre page produit dédiée .

Pour alimenter cet événement, commencez par créer un workflow qui redirige un utilisateur vers votre page produit lorsqu’il clique sur l’image du produit .

Tutoriel Bubble No Code Fiverr Clone Procédure pas à pas Page Produit

Dans ce flux de travail, utilisez un événement de navigation pour envoyer un utilisateur vers une autre page. À partir de là, sélectionnez le type de page de destination qui sera la page produit .

Vous devrez ensuite envoyer des données supplémentaires à cette page afin que l’éditeur de bulles sache quel produit spécifique afficher. Les données que vous devrez afficher sont celles du produit de la cellule actuelle .

Procédure pas à pas de la page produit du didacticiel Bubble Fiverr Clone

Afficher du contenu dynamique sur une page produit

Une fois qu’un utilisateur a été redirigé vers la page d’un produit spécifique, vous pouvez facilement extraire ces données d’événement de votre flux de travail et afficher le contenu pertinent.

Sur la page de destination, vous devrez configurer le type de page pour qu’il soit le même type de données que celui envoyé via votre flux de travail.

Dans ce cas, vous définirez la page du produit sur une propriété de produit .

Bubble Freelancer Upwork Marketplace Clone Tutoriel de propriété de la page produit

À partir de là, vous pouvez ensuite commencer à ajouter du contenu dynamique dans les éléments de votre page, en affichant les informations du produit qui ont été envoyées dans votre flux de travail.

Freelancer Marketplace No Code Tutorial Bubble Product Feature Image

Acheter un produit

Une fois qu’un client décide qu’il est prêt à acheter un produit/service, il clique sur le bouton Terminer la commande et déclenche un nouveau flux de travail.

À partir de là, nous redirigerons les utilisateurs vers une page de paiement en utilisant un autre événement de navigation.

Dans ce flux de travail, nous sélectionnerons la page de destination comme page de paiement et enverrons les données du produit des pages actuelles .

Flux de travail de paiement du didacticiel à bulles

Sur notre page de paiement, nous ajouterons des éléments dynamiques pour afficher un résumé de l’article que le client achète.

Nous ajouterons également les champs de saisie nécessaires pour prendre en charge un paiement par carte de crédit.

Tutoriel sur les paiements par bande de carte de crédit à bulles Fiverr Clone

En utilisant Bubble, il est possible d’exploiter la puissance de plusieurs plugins pour accepter facilement les paiements et traiter les commandes.

Dans ce guide, nous utiliserons le plugin Stripe.js pour traiter les paiements par carte de crédit via Stripe.

Remarque : Après avoir intégré ce plugin, vous devrez d’abord configurer vos clés API dans les paramètres du plugin.

Vous devrez également inclure un élément de jeton Stripe à côté du formulaire de paiement sur la page. Cet élément ne sera pas visible pour vos utilisateurs finaux, mais il est essentiel pour alimenter une nouvelle transaction dans Stripe.

Tutoriel d'intégration de Bubble Stripe

Lorsque vous cliquez sur le bouton Commander maintenant , nous créons alors un nouveau flux de travail qui déclenche un paiement Stripe.

Vous commencerez par sélectionner l’événement ‘ convertir la carte en Stripetoken A ‘. Dans cet événement, vous devrez configurer vos champs de saisie pour qu’ils correspondent à la structure de paiement de Stripes.

Tutoriel Walkthrough Exemple de paiements Bubble avec Stripe

Une fois qu’une carte a été convertie en jeton Stripe, vous devrez ensuite créer un flux de travail supplémentaire qui traite automatiquement ce jeton à partir du compte bancaire d’un utilisateur.

À l’aide de l’événement ‘ Stripe.js – charge – create ‘, vous vérifierez le jeton Stripe, ainsi que le montant final à payer (y compris la devise).

Procédure pas à pas de bande de flux de travail de bulle

Après cette étape, nous devrons également créer un événement supplémentaire dans notre flux de travail, en ajoutant ce produit à la liste des utilisateurs actuels des produits achetés .

En apportant des modifications à un élément, nous pouvons facilement mettre à jour ce champ dans notre base de données.

Tutoriel de flux de travail Bubble No Code Fiverr Clone

Si vous souhaitez des conseils supplémentaires lors de la création de votre flux de travail de traitement des paiements, vous pouvez regarder un didacticiel complet dans la vidéo ci-dessous.https://www.youtube.com/embed/wqKnuxT0XB0?feature=oembed

Ajout et affichage des avis clients

Une fois qu’un utilisateur a acheté un service, il peut vouloir laisser un avis sur le profil des professionnels pour recommander son travail à la communauté.

En créant une page de profil utilisateur, nous pouvons non seulement afficher des informations sur nos professionnels du marché, mais également une liste des avis qu’ils reçoivent.

Lors de la création de cette page, commencez par mettre à jour le type de page sur un utilisateur .

Modèle de page de profil d'avis d'utilisateur de bulle

Ensuite, cartographiez le contenu dynamique que vous souhaitez afficher à partir de chaque profil.

Procédure pas à pas du didacticiel sur le profil utilisateur de Bubble

Nous ajouterons ensuite un groupe répétitif à cette page, affichant une liste des avis générés pour cet utilisateur actuel de la page.

Le type de contenu de ce groupe répétitif sera, bien sûr, une révision . Notre source de données affichera alors une liste des avis des utilisateurs de la page actuelle.

Tutoriel de groupe de répétition de bulles pour la page de révision sans code

Sous ce groupe répétitif, nous ajouterons un élément d’entrée et de curseur multiligne, permettant aux utilisateurs de soumettre une nouvelle évaluation.

Tutoriel sur la nouvelle page de révision de la bulle

Lorsque vous cliquez sur le bouton Soumettre la révision , nous déclenchons un flux de travail qui crée une nouvelle chose – une nouvelle révision.

Encore une fois, nous ferons correspondre les éléments de la page avec les champs de données nécessaires pour chaque avis.

Processus de révision des bulles Fiverr Freelancer No Code Clone

Une fois qu’un nouvel avis a été créé, nous créerons une étape supplémentaire dans notre flux de travail, en ajoutant le nouvel avis à la liste des avis des utilisateurs de la page actuelle .

Tutoriel sur le flux de travail de la place de marché Freelance de Bubble Fiverr

Cela ajoutera maintenant le nouvel avis à la liste existante des avis dans notre groupe de répétition.

Caractéristiques supplémentaires

Une fois que vous êtes familiarisé avec la création de champs de données personnalisés et l’affichage de contenu dynamique, vous pouvez commencer à faire preuve de créativité avec les expériences que vous créez.

Confidentialité et sécurité : Maintenant que vous avez les bases de votre application, n’oubliez pas de commencer à définir des 

règles de confidentialité et des conditions pour protéger vos données – en commençant par les rôles dans la section  » 

Confidentialité  » de votre onglet 

Données . Vous pouvez également vérifier si vous exposez involontairement des données avec un 

vérificateur d’API .

De plus, vous pouvez :

  • Ajouter la prise en charge de différents forfaits à prix sur les services
  • Permettez aux clients d’ajouter plusieurs articles à leur paiement. Nous avons couvert cela plus en détail dans notre précédent guide Comment construire sur Etsy .

Lancer

Ironiquement, l’embauche d’un développeur sur un marché indépendant pourrait vous coûter des milliers d’euros, mais vous pouvez désormais créer vous-même votre clone Fiverr. Au fur et à mesure que vous lancez et augmentez le nombre d’utilisateurs, les plans payants vous permettent d’héberger l’application sur votre propre domaine personnalisé, et ceux-ci commencent à partir de 25 $ par mois. Certains modèles et plugins peuvent coûter plus cher, mais vous pouvez créer toutes les fonctionnalités d’un marché sans frais supplémentaires.

Modèles

Si vous ne souhaitez pas créer votre clone Fiverr à partir de zéro, vous pouvez acheter l’un des modèles créés par les membres de notre communauté. Certains modèles similaires incluent :

Commencer à construire

Bubble peut vous aider à construire un clone Fiverr ou tout autre produit de votre choix ! Il n’a jamais été aussi facile de créer quelque chose d’incroyable sans avoir à coder.

Prêt à rejoindre le mouvement no-code ? Enregistrez votre compte gratuit ici et commencez dès aujourd’hui.

Si vous souhaitez une aide supplémentaire lors de la création de votre produit, notre forum communautaire dynamique est un excellent endroit pour trouver des conseils et des ressources exploitables. Ce n’est pas seulement un endroit idéal pour rechercher parmi nos exemples de bulles existants, mais tout fabricant est encouragé à poser des questions pour les aider dans leur voyage.

Laisser un commentaire

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