Como criar um site tipo Kickstarter sem precisar programar

Aprenda a criar uma plataforma de crowdfunding sem código usando o Bubble, explorando design visual, banco de dados e workflows para suportar campanhas.

---

Iniciando seu Kickstarter no code

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

💻

Também será benéfico entender como criar e editar contas de usuário. Já cobrimos isso com mais detalhes em nosso artigo Como criar um site tipo Quora.

Ao iniciar seu projeto, você pode escolher começar criando um protótipo de design de seu produto ou criando os campos necessários em seu banco de dados.

Neste caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso produto. Como estamos fazendo uma versão do Kickstarter, algumas das principais páginas que precisaremos incluir são:

• Uma página inicial — Apresentando uma lista de todos os nossos projetos
• Página de upload do Projeto — um portal onde os usuários podem adicionar seus projetos na plataforma
• Uma página de projeto individual — Exibindo todos os detalhes de um projeto selecionado

Um dos principais recursos do Bubble é a capacidade de enviar dados entre páginas. Isso permite que você crie uma versão genérica de uma página e, em seguida, exiba dinamicamente o conteúdo relevante do seu banco de dados quando necessário.

No caso da sua plataforma de crowdfunding, você só precisará criar uma página para hospedar um projeto individual. Podemos então criar a lógica necessária para exibir apenas o projeto relevante em cada página quando for necessário (abordaremos isso com mais detalhes em breve).

Configurando seu banco de dados

Depois de mapear a exibição do seu site, você pode se concentrar na criação dos campos de dados necessários para alimentar seu aplicativo. Contaremos com esses campos para conectar os workflows por trás da plataforma.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao criar nosso MVP Kickstarter, criaremos os seguintes tipos de dados e campos:

Tipo de dados: Projeto

Campos:

• Título
• Descrição
• Imagem apresentada
• Data da meta
• Total de financiadores
• Meta de arrecadação
• Total arrecadado
• Categoria — permitindo entradas múltiplas

Tipo de dados: Criador / Usuário

Campos:

• Nome
• Biografia
• Foto
• Endereço
• Projetos criados — Nota: Criar 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 valores de campo adicionais.
• Projetos apoiados

Workflows para criar uma plataforma de crowdfunding

Agora que você estruturou o design e o banco de dados da sua plataforma, é hora de começar a juntar tudo — tornando 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.)

Criando um projeto

Um dos principais recursos do Kickstarter é a capacidade dos usuários de criar e publicar seus projetos para ganhar patrocinadores em toda a comunidade.

Na página ‘criar projeto’, você pode começar a criar esse processo usando uma combinação de inputs, incluindo; campos de texto livre, uploaders de imagens ou campos de seleção múltipla.

Depois que um usuário tiver adicionado seus detalhes relevantes em cada input, eles clicarão no botão enviar para criar uma nova entrada em seu banco de dados. Este clique de botão será a ação necessária para acionar seu workflow.

Usando o editor de workflow, você precisará criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo projeto.

Você vai querer começar a adicionar dados aos inputs relevantes em seu banco de dados. Comece a mapear cada campo de dados que gostaria de criar em relação a cada dos inputs relevantes.

Exibindo projetos em sua página inicial

Agora vamos exibir cada item em um feed na página inicial. Isso pode ser obtido utilizando nosso elemento de grupo repetidor.

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 projeto.

Você também precisará definir a fonte de dados como uma lista de todos os projetos enviados do banco de dados. Se desejar segmentar cada repetição por uma categoria relevante, você pode adicionar uma restrição adicional à sua fonte de dados.

Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido nesta grade. Simplesmente mapear a primeira coluna com o conteúdo relevante que gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

Dentro de um grupo repetidor, também é possível criar eventos com base em cada coluna individual. Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. Como a página inicial do Kickstarter exibe apenas uma visão geral de cada projeto (incluindo seu título, imagem em destaque e valor total arrecadado), você desejará exibir todos os detalhes de cada projeto em uma página separada.

Para criar esse evento, você começará criando um workflow que redireciona um usuário para a página do projeto quando a imagem do projeto é clicada.

Ao criar este 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 projeto.

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

Exibir conteúdo dinâmico em uma página de projetos

Quando um usuário é direcionado para uma página de projeto específica, você pode facilmente obter esses dados de evento do seu workflow e exibir este conteúdo relevante.

Antes de criarmos esse workflow, você primeiro precisa garantir que o tipo da página de destino corresponda à propriedade de dados que está enviando por meio do workflow. Nesse caso, você precisará definir a página do projeto como uma propriedade do projeto.

Agora você pode começar a adicionar conteúdo dinâmico aos elementos da sua página, exibindo as informações do projeto relevante.

Financiando projetos como no Kickstarter

Assim que um usuário encontrar um projeto que ame, precisaremos criar uma função para apoiar o processo de arrecadação de fundos. Esse workflow incluirá listar um valor de pagamento e, em seguida, processar os fundos por meio de uma experiência de check-out. Usando o Bubble, é possível aproveitar o poder de vários plug-ins para aceitar pagamentos e processar pedidos com facilidade.

Neste guia, usaremos o plugin Stripe.js para processar pagamentos com cartão de crédito por meio do Stripe.

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

Na página do seu projeto, comece a mapear um formulário de pagamento usando inputs — permitindo que os usuários adicionem seus detalhes de pagamento. Você também precisará incluir um elemento de token Stripe próximo ao formulário de pagamento.

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 de compra é clicado, criaremos um novo workflow que aciona um pagamento Stripe.

Você começará selecionando o evento “converter cartão em Stripe token”. Nesse evento, você precisará configurar seus inputs para corresponder à estrutura de pagamento do Stripe.

Depois que um cartão for convertido em token Stripe, você precisará criar um workflow adicional que processe automaticamente esse token da conta bancária de um usuário.

Usando o evento “Stripe.js – charge – create”, você verificará o token Stripe, bem como o valor final a ser pago (incluindo a moeda).

Recursos adicionais para uma plataforma de crowdfunding no code

• Criar perfis de usuário para exibir atividades da comunidade
• Adicionar suporte para comentários nas páginas do projeto
• Adicionar suporte para diferentes valores de acordo
• Use plug-ins de terceiros para adicionar uma barra de progresso da meta de arrecadação de fundos

Veja também:

• Como receber pagamentos no seu Aplicativo Bubble (Pagseguro e Juno)
• Como Publicar seu Aplicativo Bubble (domínio gratuito e pago)

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