Aprenda a criar uma plataforma de crowdfunding no code, usando o editor visual web do Bubble.
Criar uma campanha no Kickstarter ou Indiegogo pode ser um processo divertido para fabricantes de produtos únicos. Criar uma plataforma de crowdfunding, entretanto, tem sido tradicionalmente um processo demorado que se limita ao conjunto de habilidades dos desenvolvedores de software.
Como criador, não há sentimento melhor do que lançar seu produto para o mundo. Ajudamos a criar esse sentimento todos os dias com o Bubble.
A plataforma poderosa do Bubble tornou mais fácil do que nunca começar a criar software sem ter que escrever uma única linha de código. Com o Bubble podemos criar sites, diretórios e até redes sociais.
Ao longo deste post, descobriremos o processo de usar o Bubble para criar sua própria plataforma de crowdfunding no code, como Kickstarter, Indiegogo ou GoFundMe.
Se você está procurando criar uma dedicada plataforma de crowdfunding ou apenas interessado em utilizar alguns dos principais recursos do Kickstarter, este guia compartilhará como começar a criar a lógica subjacente para seu MVP.
Ao longo deste guia, vamos destacar como criar os seguintes recursos principais do Kickstarter:
- A capacidade dos usuários de criar novos projetos
- Exibindo esses projetos em uma página inicial por suas categorias relevantes
- Hospedando cada projeto com todos os detalhes em sua própria página dinâmica
- A capacidade de processar pagamentos para contribuir com a arrecadação de fundos
As etapas para criar uma plataforma de crowdfunding no code incluem:
Índice
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.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Também será benéfico se você 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 uma 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 projeto 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 mapeie 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.
Este conteúdo adicional precisará ser hospedado na página do projeto individual.
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 Stripetoken A’. 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
Agora que você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, pode começar a ficar criativo com as experiências da sua plataforma de crowdfunding. Além disso, você pode:
- 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/
