Aprenda como fazer seu próprio Patreon sem precisar programar, usando o editor visual web do Bubble.
Plataformas como o Patreon possibilitaram que o público apoie seus criadores de conteúdo favoritos ao longo de seus empreendimentos. Por meio de um programa de assinatura mensal, os criadores podem empacotar e distribuir valor de qualquer forma única que escolherem. Mas e se você for um criador que gostaria de criar seu próprio site de membros tipo o Patreon?
Nunca foi tão fácil começar a criar software quanto através do poder das ferramentas sem código. Ferramentas como o Bubble estão capacitando os criadores de todas as origens a criar e enviar softwares valiosos com facilidade. Podemos usar o Bubble para criar lojas virtuais, sites móveis e até redes sociais.
Ao longo desse post, vamos descobrir o processo de usar o Bubble para criar sua própria versão do Patreon sem precisar programar.
Se você está procurando montar uma dedicada plataforma de membros, ou apenas interessado em utilizar alguns dos recursos principais do Patreon, este guia compartilhará uma visão interna da criação da lógica subjacente de um MVP.
As etapas para criar site tipo Patreon, sem programação, incluem:
Índice
Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito.
Também será benéfico se você entender como criar e editar contas de usuário.
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do site ou criando os campos necessários em seu banco de dados.
Nesse caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso site. Se você está fazendo uma versão do Patreon, algumas das páginas principais que deseja incluir são:
- Página inicial – Incluindo uma barra de pesquisa para ajudar a descobrir criadores;
- Página de upload – Um portal onde os criadores podem publicar posts;
- Página de post – Uma página para hospedar cada post de um criador individual;
- Página de camada (nível de inscrição) – Um portal para que os criadores montem suas camadas de assinatura personalizadas;
- Perfil do criador – Uma página para hospedar cada perfil de criador.
Um recurso importante no 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 de seu banco de dados quando for necessário.
No caso de seu site tipo Patreon, você só precisará criar uma página para hospedar seus perfis de criador. Então podemos escrever a lógica necessária para exibir apenas o criador 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 de seu site, você pode se concentrar na criação dos campos de dados necessários para alimentá-lo. Contaremos com esses campos para conectar os workflows por trás do seu Patreon.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Ao criar um banco de dados, recomendamos dividir itens maiores em tipos de dados separados para aumentar a velocidade de seu site.
Por exemplo, vamos criar dois tipos de dados separados para cada novo post do criador. Um tipo de dados incluirá os detalhes básicos de uma post (incluindo o nome, a imagem e o trecho do post), enquanto o outro tipo de dados incluirá arquivos de conteúdo maiores, como o próprio post completo.
Criando como tipos de dados separados, podemos carregar apenas as informações necessárias quando são necessárias, reduzindo a quantidade de conteúdo que o editor do Bubble precisará renderizar.
Ao criar o Patreon como um MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Usuário
Campos:
- Nome
- Bio
- Foto
- Posts- Lista de posts Nota: Criar um campo como uma lista, baseada em um tipo de dados separado, permite que você possa integrar todos os seus campos de dados relevantes sem ter que criar pontos de dados adicionais.
- Apoiadores – Lista de usuários
- Apoiando – Lista de usuários
- Camadas – Lista de camadas
- É o criador (sim / não; ‘não’ como padrão).
Tipo de dados: Camada
Campos:
- Descrição
- Imagem
- Título
- Benefícios – Lista de texto
- Custo
Tipo de dados: Post
Campos:
- Título
- post de
- imagem
- Comentários – Lista de comentários
- Conteúdo – Conteúdo de post
Tipo de dados: Conteúdo do post
Campos:
- Conteúdo
- Post -Post
Tipo de dados: Comentário
Campos:
- Conteúdo
- Post – Post
Criando workflows para o Patreon Sem Codar
Agora que você Já estruturou o design e o banco de dados de seu site, é hora de começar a juntar tudo e torná-lo 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 camadas de suporte
O primeiro recurso que criaremos é uma função onde os criadores podem fazer suas camadas de assinatura personalizadas para seu perfil.
Na página de camadas, começaremos adicionando uma variedade de elementos de input que serão usados para adicionar dados em nosso banco de dados. Esses campos podem incluir entradas de texto, um uploader de imagem e uma menu suspenso múltiplo.
Nota: O plugin de menu suspenso múltiplo permitirá aos usuários selecionar várias opções relevantes aos seus recursos de camada.
Uma vez que um usuário adicionou os detalhes relevantes em cada input, ele clica no botão criar para finalizar a nova camada.
Este clique de botão será a ação necessária para acionar seu workflow.
Em seguida, você vai criar um novo item em seu banco de dados – uma nova camada.
Precisaremos então começar a adicionar os campos relevantes em nosso banco de dados. Mapeie cada um dos elementos de input na página com seus campos correspondentes em seu banco de dados.
Publicando posts de criadores
Enquanto criamos recursos para nossos perfis de criadores, também faremos uma página separada, permitindo que eles criem e publiquem novas posts em seus perfis.
Este workflow seguirá um processo semelhante ao nosso último exemplo, só que desta vez, estaremos criando um novo post.
Na página de upload, adicionaremos nossos elementos de input necessários.
Nota: Ao criar um site que requer que o texto seja marcado ou formatado, recomendamos o uso do plugin rich text editor. Este elemento de input permitirá que os usuários personalizem o estilo do conteúdo que adicionam a este campo.
Depois que um usuário adicionou os detalhes relevantes em cada input, ele clica no botão publicar para criar um novo post.
Dentro deste workflow, começaremos criando os dados do conteúdo do post, em seguida, vincularemos isso ao próprio post.
Depois, adicionaremos uma etapa extra a este workflow, criando outro item no banco de dados – só que desta vez, criaremos o post.
Ao vincular o conteúdo do post inicial que criamos, dentro deste post, é possível integrar perfeitamente os dois tipos de dados em sua plataforma.
Cada vez que este workflow é acionado, um novo post será criado.
Exibindo perfis de criadores
Depois de criarmos os recursos principais para suprir a página do criador, podemos começar a exibir esse conteúdo em seus perfis individuais.
No Patreon, os perfis do criador são usados para exibir as camadas e posts publicados por cada criador.
Em nossa página de perfil, começaremos configurando o tipo da página como usuário.
Em seguida, vamos configurar cada um dos elementos na página com conteúdo dinâmico.
Então adicionaremos um grupo repetidor, exibindo a lista de camadas disponíveis do Patreon que os usuários podem assinar.
Grupos repetidores se integram ao seu banco de dados para exibir e atualizar 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. Neste caso, você classificará o tipo de conteúdo como camada (tier).
Você também precisará definir a fonte de dados como uma lista de todos os usuários e camadas da página atual.
Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido na grade. Simplesmente mapeie a linha superior com o conteúdo relevante que você gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
Criando assinaturas como no Patreon original
Depois que um criador listou seus níveis de assinatura (tiers), precisaremos criar uma função que cobra dos assinantes de forma recorrente.
Para começar, você precisa de uma conta Stripe, bem como um produto de assinatura em seu painel de cobrança.
Em seguida, instale o plugin Stripe e configure suas chaves de API nas configurações do plug-in.
Com o plug-in configurado, faremos um workflow que inscreve os usuários em um produto de assinatura atual.
Usando um elemento pop-up, criaremos uma experiência contínua que processa o pagamento, tudo sem ter que redirecionar o usuário de sua experiência atual na página
Neste ponto, também precisaremos atualizar o tipo de conteúdo do pop-up como camada. Isso nos permitirá enviar os dados relevantes da camada selecionada.
Depois de criar este pop-up, vamos fazer um workflow que exibe esse elemento.
Dentro deste workflow, primeiro escolheremos exibir dados em um elemento – nosso pop-up.
Os dados que precisaremos exibir é o pop-up da célula atual.
Após enviar esses dados para o pop-up, precisaremos mostrar o próprio elemento pop-up.
Agora, precisamos criar um workflow adicional que é acionado quando o botão ‘Participar’ é clicado em nosso pop-up.
Dentro deste workflow, escolheremos a ação do stripe – inscrever o usuário em um plano.
Nesse estágio, você pode selecionar em qual plano Stripe deseja inscrever um usuário.
Quando o pagamento for processado, precisaremos adicionar o usuário inscrito à lista de apoiadores totais do criador.
Ao adicionar uma etapa extra a este workflow, precisaremos alterar um item no banco de dados.
Os itens que vamos alterar são as camadas de grupos pais, criadores, lista de apoiadores – adicionando a eles o usuário atual.
Em seguida, replicaremos esta etapa, mas desta vez faremos alterações no usuário atual, adicionando o criador e a camada de grupos pais à sua lista de usuários apoiados.
Procurando por criadores
Depois de terminar os principais recursos em nossos perfis de criador, vamos voltar para nossa página inicial e fazer uma função que permite aos usuários descobrir novos criadores em toda a plataforma. Isso pode ser feito adicionando uma função de pesquisa à nossa página inicial.
Ao adicionar um elemento de pesquisa em sua página inicial, ele indexará todos os criadores atuais em seu banco de dados.
Precisaremos configurar esta lista de caixa de pesquisa para a propriedade usuário. Em seguida, adicionaremos uma restrição a essa propriedade indexando apenas os usuários listados como criadores (criador = sim).
Por fim, configuraremos o campo para pesquisar por nomes de usuários.
Para enviar um usuário ao perfil de criador relevante, navegue até seu editor de workflow e em seguida, crie um novo evento que é acionado quando o valor de uma entrada é alterado.
Você então criará um evento de navegação, definindo a página de destino como a página de perfil, enviando com ela a fonte de dados do valor atual da caixa de pesquisa.
Exibindo posts de criadores
Em nossos perfis de criador, também precisaremos exibir uma lista de todos os posts que um criador compartilha com seu público.
Abaixo de nossas camadas de assinatura, adicionaremos outro grupo repetidor, desta vez configurando seu tipo de dados como posts.
Também definiremos a fonte de dados como os usuários e posts da página atual.
Enviando dados entre as páginas do Patreon
Dentro de um grupo repetidor, também é possível criar eventos com base em cada linha individual. Este recurso se tornará útil ao criar recursos de navegação em sua plataforma.
Como os posts do criador exibem apenas uma prévia de cada post – incluindo o título e o trecho – precisaremos exibir o conteúdo completo quando um usuário clicar na página do post individual.
Para exibir este conteúdo, usaremos nosso editor de workflow para enviar dados entre as páginas.
Você precisará começar criando um workflow que redirecione um usuário para a página do post quando uma imagem do post for clicada.
Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página.
A partir daqui, selecione a página de destino como a página do post.
Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual post único exibir. Os dados que você precisa exibir são os do post da célula atual.
Exibir conteúdo dinâmico na página do post
Quando um usuário é direcionado para uma página de post específica, você pode obter facilmente esses dados de evento e exibir o conteúdo relevante.
Para criar essa função, primeiro é necessário garantir que o tipo de página de destino corresponda à propriedade de dados que você está enviando no workflow. Nesse caso, defina a página do post como uma propriedade do post (post property).
Agora você pode começar a adicionar conteúdo dinâmico aos campos que exibem informações de um post único.
Enviando conteúdo de posts para assinantes
Em nossa página de post, queremos que esse conteúdo esteja disponível apenas para os usuários que se inscreveram no criador atual.
Para tornar este conteúdo visível apenas para assinantes pagos, adicionaremos condições a cada elemento da página.
As condições são uma forma eficaz de criar regras para elementos individuais quando um critério específico é atendido.
Para cada elemento de post, adicionaremos uma condição que reconhece quando os usuário atual e a lista de usuários apoiados não contém o criador e o post da página atual.
Dentro desta condição, marcaremos este conteúdo como não visível. (Deixe a caixa de seleção desmarcada.)
Agora, quando o usuário atual visita um post onde ele não é apoiador do criador, vamos exibir uma lista de camadas de inscrição disponíveis (tiers) em que eles podem participar.
Para o bem de nosso MVP, vamos simplesmente copiar o mesmo grupo repetidor de nosso perfil de usuário em nossa página de post.
Também precisaremos atualizar a fonte de dados deste grupo repetidor para exibir o post da página atual, criadores e camadas (tiers).
Em seguida, precisaremos desmarcar a caixa que exibe este elemento quando a página é carregada.
Finalmente, adicionaremos uma condição a este elemento. Esta condição reconhecerá quando o usuário atual e sua lista de usuários apoiados, não contém o post da página atual e seu criador.
Quando essa condição for atendida, optaremos por tornar esse elemento visível.
Dica profissional: você pode usar a árvore de elementos no canto superior esquerdo para ocultar e exibir elementos selecionados. Isso ajudará a manter seu ambiente de desenvolvimento organizado durante a criação.
‘Curtindo’ um post no Patreon
Os criadores adoram ver o apoio do público. Receber curtidas em uma post é sempre uma forma eficaz de saber que seu público aprecia seu conteúdo.
Ao criar um recurso para curtir no Bubble, você pode utilizar nossos elementos de ícone para criar um botão curtir ou até mesmo carregar uma imagem própria.
Quando o ícone de curtir é clicado, você criará um novo workflow que altera um item no banco de dados.
O item que queremos mudar é o post da página atual.
Como as curtidas são medidas como uma lista de usuários, adicionaremos o usuário atual às curtidas do post atual.
Em nossa página de post, precisaremos exibir uma contagem de todas as curtidas adicionados neste post.
Comentando em um post
Para ajudar a impulsionar o engajamento do usuário por toda a plataforma, também adicionaremos uma função para oferecer suporte a comentários em cada página de post.
Os comentários podem ser facilmente criados adicionando um grupo repetidor e um input de texto multilinhas abaixo do próprio post.
Ao configurar este grupo repetidor, comece definindo o tipo de dados como comentários. Em seguida, nossa fonte de dados exibirá os comentários do post da página atual.
Ao criar um novo comentário, acionaremos um novo workflow quando o botão publicar for clicado – criando um novo item no banco de dados.
O item que queremos criar é um novo comentário. Mais uma vez, você precisará combinar o elemento na página com o campo de dados de comentário necessário.
Sempre que um novo comentário é criado, o grupo repetidor nesta página será atualizado automaticamente com o novo conteúdo.
Recursos adicionais para um Patreon no code
Depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, você pode começar novas experiências em seu próprio Patreon sem código.
Adicionalmente, você pode:
- Criar painéis do criador que exibem seus ganhos a cada mês;
- Adicionar metas e barra de progresso aos perfis de criador;
- Adicionar suporte para diferentes formatos de posts do criador.
Quer saber mais sobre o Movimento Sem Codar? Veja também nosso Tutoriais em Vídeo:
- Tutorial Bubble.io para Iniciantes – Como criar um Aplicativo de Agendamento
- Criei um Aplicativo que Publica e Comenta no Instagram (sem codar)
- Tutorial No-Code: Como Criar um Aplicativo igual Spotify (Streaming de Músicas) Gratuitamente
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 sites 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-patreon-clone-no-code/
