Como criar uma plataforma freelancer tipo Fiverr

Aprenda como criar uma plataforma freelancer no code, usando o editor visual web do Bubble.

Se você já precisou de ajuda para criar um site ou aplicativo, plataformas freelance como Fiverr, Upwork ou Freelancer.com podem ser a fonte para criadores não técnicos. Esses mercados ajudam a conectar profissionais da indústria com clientes que buscam seus conjuntos de habilidades.

Com o surgimento de ferramentas no code como o Bubble, é mais fácil do que nunca começar a criar uma plataforma freelancer. Usando um conjunto de ferramentas de programação visual. Podemos usar o Bubble para criar sites, aplicativos de mensagens e até redes sociais.

Portanto, descobriremos agora o processo de usar o Bubble para criar sua própria versão ‘white-label’ do Fiverr.

Esteja você procurando criar um dedicado mercado freelance ou apenas interessado em utilizar alguns dos principais recursos do Fiverr, este guia mostrará como começar a criar a lógica subjacente para um MVP.

Os passos para criar uma plataforma freelancer tipo Fiverr no code incluem:

Fazer cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Em seguida, você pode acompanhar enquanto criamos nosso site juntos.

💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar

Além disso, também ajudará se você souber como criar e editar contas de usuários. Já cobrimos isso com mais detalhes em nosso artigo sobre a Como criar um site tipo Quora.

Podemos começar criando um protótipo para o design do site ou criando os campos necessários no banco de dados.

Dessa forma, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso site. Assim, se você baseando seu site no Fiverr, algumas das páginas principais que desejará incluir são:

• Página de upload de produto – Um portal back-end onde os usuários podem listar serviços na plataforma
• Página inicial – Onde os usuários podem começar a pesquisar serviços
• Páginas de resultado da pesquisa – Exibindo uma lista de produtos / serviços relevantes a partir de uma consulta de pesquisa
• Página do produto – Uma página dedicada a exibir todas as informações sobre um serviço
• Página de Checkout
• Perfil do usuário – Exibindo uma lista de avaliações para cada usuário

Um recurso importante no Bubble é a capacidade de enviar dados entre páginas. Permitindo criar uma versão genérica de uma página e, em seguida, exibir dinamicamente o conteúdo relevante do banco de dados quando necessário.

No caso da sua plataforma freelance como o Fiverr, você só precisará criar uma página para hospedar seus serviços individuais. Podemos então criar a lógica necessária para exibir apenas a lista relevante em cada página quando for necessário (vamos cobrir isso com mais detalhes em breve).

Configurando seu banco de dados

Depois de mapear a exibição do seu site, podemos nos concentrar em criar os campos de dados necessários para uma plataforma freelancer. Contaremos com esses campos para conectar os workflows por trás de seu app.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao usar o Fiverr como um MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos:

• Nome
• Bio
• Foto
• Produtos adquiridos – Lista de produtos. Nota: Criando um campo baseado em lista, em um tipo de dados separado, permite que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar pontos de dados adicionais
• Avaliações – Lista de avaliações

Tipo de dados: Produto

Campos:

• Categoria
• Descrição
• Imagem apresentada
• Preço
• Título

Tipo de dados: Avaliações

Campos:

• Conteúdo
• Classificação

Criando workflows

Agora que você estruturou o design e o banco de dados para seu Fiverr Sem Codar, é hora de começar a juntar tudo e tornar seu site funcional.

No Bubble, a principal maneira de fazer isso é com “workflows”. Cada workflow acontece quando ocorre um “evento” (ex: um usuário clica em um botão) e, em seguida, executa uma série de “ações” em resposta (ex: “cadastre o usuário”, “faça uma alteração no banco de dados”, etc. )

Criar a listagem de serviços na plataforma freelancer

Uma das principais características de qualquer mercado freelancer é a capacidade dos profissionais de listar seus serviços para venda como um produto.

Portanto, antes de criarmos qualquer um dos principais recursos para nossa plataforma, primeiro faremos uma página dedicada onde os usuários podem criar uma nova listagem.

Em nossa página de criar produto, podemos criar um suporte para esse recurso usando combinações de inputs. Essas combinações incluem campos de texto livre, uploaders de imagens ou menus suspensos.

Depois que um usuário tiver adicionado os detalhes relevantes em cada input, eles clicarão no botão de listar produto (List Product) para criar uma nova entrada em seu banco de dados.

Usando o editor de workflow, selecione criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo produto.

Você precisará então começar a adicionar dados aos campos relevantes em seu banco de dados. Mapeie cada elemento na página que deseja criar em relação ao campo de dados correspondente.

Criar uma navegação de pesquisa na plataforma freelancer

Depois que os usuários adicionarem listas de produtos ao seu site, começaremos a criar recursos para pesquisar e exibi-los em nossa plataforma.

Com milhares de anúncios em uma plataforma como o Fiverr, os usuários costumam pesquisar categorias específicas por meio de uma barra de pesquisa na página inicial. Isso permite aos usuários inserir uma consulta e visualizar uma lista de todas as correspondências relevantes para essas palavras-chave.

Em nossa página inicial, usaremos um input de texto como uma caixa de pesquisa – permitindo que os usuários insiram palavras-chave da categoria.

Daqui, criaremos um novo workflow que classifica uma frase de pesquisa do usuário, e em seguida, passa esses dados para uma página de resultado da pesquisa separada..

Para potencializar esse workflow, criaremos um gatilho de evento que reconhece quando um valor de input é alterado. Obviamente o elemento será o campo de input de texto.

Como precisaremos adicionar uma consulta de pesquisa exclusiva à string do nosso URL, optaremos por 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 incluirá 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.

Exibindo listagens relevantes de uma consulta de pesquisa

Depois de criarmos uma função para suportar as consultas de pesquisa, agora criaremos nossa página para exibir os resultados de pesquisa corretos.

Ao criar nossa página de resultados de pesquisa, começaremos adicionando um elemento de grupo repetidor, exibindo uma lista de ofertas de produtos que estão relacionadas à nossa categoria de pesquisa.

Os grupos repetidores são um elemento poderoso que se integra ao seu banco de dados, exibindo e atualizando uma lista de conteúdo dinâmico.

Ao usar um grupo repetidor, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo como um produto.

Em seguida, atualizaremos a fonte de dados de nosso grupo repetidor para exibir apenas os produtos que incluem nosso texto de strings da URL em seu campo de categoria.

Em seguida, você deve selecionar de qual campo da URL você puxará esses dados. Simplesmente escolha obter dados do caminho da URL (URL path), não do parâmetro.

Agora será exibido qualquer produto em que a categoria corresponda a uma instância da palavra-chave específica que está sendo pesquisada, por exemplo, Marketing Digital.

Depois de configurar a fonte de dados do seu grupo repetidor, você pode começar a adicionar conteúdo dinâmico na linha principal deste elemento.

Enviando dados entre as páginas

O envio de dados entre páginas é uma função essencial para a maioria dos produtos dinâmicos.

Dentro de um grupo repetidor, também é possível enviar dados para uma página a partir de uma coluna individual.

Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. Como os cartões de listagem do Fiverr exibem apenas uma visão geral de cada produto (incluindo seu nome, imagem e preço), você precisará exibir os detalhes de listagem completos para cada item único em uma página separada.

Este conteúdo adicional será hospedado em sua página do produto dedicada.

Para potencializar esse evento, comece criando um workflow que redirecione um usuário para a página do produto quando a imagem do produto é clicada.

Nesse workflow, use um evento de navegação para enviar um usuário a outra página. Daqui, selecione o tipo da página de destino como a página do produto.

Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual produto específico exibir. Os dados que você precisa exibir são aqueles do produto da célula atual.

Exibir conteúdo dinâmico na página do produto

Depois que um usuário for redirecionado para a página de um produto específico, você pode facilmente obter esses dados de evento do seu workflow e exibir o conteúdo relevante.

Na página de destino, você precisará configurar o tipo da página como o mesmo tipo de dados que está sendo enviado por meio de seu workflow.

Nesse caso, você definirá a página do produto como propriedade do produto.

A partir daqui, você pode começar a adicionar conteúdo dinâmico em seus elementos da página, exibindo as informações do produto que foram enviadas em seu workflow.

Realizando uma compra em nosso Fiverr Sem Codar

Após decidir comprar um produto / serviço, o cliente clica no botão completar pedido e aciona um novo workflow.

Daqui, vamos redirecionar os usuários para uma página de pagamento usando outro evento de navegação.

Nesse workflow, selecionaremos a página de destino como nossa página de checkout, enviando os dados do produto da página atual.

Em nossa página de checkout, adicionaremos elementos dinâmicos para exibir um resumo do item comprado pelo cliente.

Também adicionaremos os inputs necessários para oferecer suporte a pagamentos com cartão de crédito.

Neste guia, usaremos o plugin Stripe.js para processar pagamentos com cartão de crédito no Bubble.

Nota: Depois de integrar este plugin, você precisará primeiro configurar suas chaves de API nas configurações do plugin.

Você também precisará incluir um elemento de token Stripe ao lado do formulário de pagamento na página. Este elemento não será visível para seus usuários finais, mas é essencial para realizar uma nova transação no Stripe.

Quando o botão pedir agora é clicado, criaremos um novo workflow que aciona um pagamento Stripe.

Selecione o evento ‘converter cartão em Stripetoken A’ (convert card into Stripetoken A). Nesse evento, configure seus inputs para corresponder à estrutura de pagamento do Stripe.

Após converter o cartão em token Stripe, criaremos um workflow que processe automaticamente esse token da conta bancária do usuário.

Usando o evento ‘Stripe.js – charge – create’, vamos verificar o token Stripe, bem como o valor final a ser pago (incluindo a moeda).

Após esta etapa, também precisaremos criar um evento adicional em nosso workflow, adicionando este produto à lista de produtos comprados do usuário atual.

Ao fazer alterações em um item, podemos facilmente atualizar este campo em nosso banco de dados.

Adicionando e exibindo avaliações de clientes

Após o usuário adquirir um serviço, ele pode deixar um comentário no perfil do profissional para recomendar seu trabalho.

Na página de perfil do usuário, podemos exibir informações sobre nossos profissionais da plataforma freelancer, e também listar avaliações recebidas.

Ao criar esta página, comece atualizando o tipo da página para usuário.

Em seguida, mapeie o conteúdo dinâmico que gostaria de exibir para cada perfil.

Então adicionaremos um grupo repetidor a esta página, exibindo uma lista de comentários gerados para o usuário da página atual.

O tipo de conteúdo deste grupo repetidor, é claro, será uma avaliação. Nossa fonte de dados exibirá uma lista das avaliações do usuário da página atual.

Abaixo adicionaremos uma entrada multilinha e um elemento deslizante (slider), permitindo que os usuários enviem uma nova avaliação.

Quando o botão enviar avaliação é clicado, acionaremos um workflow que cria um novo item – uma nova avaliação.

Mais uma vez, combinaremos os elementos da página com os campos de dados necessários para cada avaliação.

Após a criação de uma nova avaliação, criaremos uma etapa adicional em nosso workflow, adicionando a nova avaliação à lista de avaliações do usuário da página atual.

Essa etapa adicionará a nova avaliação à lista de avaliações existentes em nosso grupo repetidor.

Recursos adicionais para criar em uma plataforma freelancer no code

Agora você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico. Posteriormente, você pode:

• Adicionar suporte para pacotes de preços diferentes em serviços
• Permitir que os clientes adicionem vários itens ao checkout. Abordamos isso com mais detalhes em nosso guia anterior Como criar uma loja virtual tipo Etsy.

• Como criar uma comunidade de design do zero tipo Dribbble (sem programar)
• Como criar um aplicativo de idiomas tipo Duolingo (sem programar)
• Aprenda a criar um site de anúncios como a Craigslist usando ferramentas no code

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-fiverr-clone-no-code/