Aprenda como criar um site de moodboard no code tipo Pinterest, usando o editor visual web do Bubble.
Se você procura ideias ou inspiração, o Pinterest é um ótimo lugar para começar. Com categorias para atender a qualquer interesse com seu rico repositório de imagens e recursos para ajudar a educar e entreter os usuários. A interface do Pinterest é intuitiva e simples de usar, mas nos bastidores, o código subjacente pode ser tudo menos isso.
Ao criar software tradicionalmente, desenvolvedores podem levar anos para dominar sua arte antes de fazer algo útil. Mas imagine as possibilidades se todos tivessem a habilidade de criar softwares bonitos sem nenhuma experiência? Um criador não técnico poderia ter as habilidades para criar um site tipo Pinterest?
A resposta é sim. Com o Bubble, os fabricantes de todas as origens podem criar softwares poderosos usando nosso conjunto de ferramentas no code. O editor visual simplifica o processo de criação e desenvolvimento de aplicativos de todos os tipos. O Bubble pode criar lojas virtuais, diretórios e até redes sociais.
Este post explicará o processo de usar o Bubble para criar um site tipo Pinterest sem programar. Esteja você procurando criar uma réplica exata ou apenas interessado em utilizar alguns dos principais recursos da plataforma, este guia compartilhará como começar a criar a lógica subjacente para um moodboard no code.
Índice
Recursos principais para um site tipo Pinterest:
- Configurar contas de usuário
- Permitir que os usuários criem novos painéis e pins (marcadores)
- Uma função de pesquisa para ajudar a descobrir pins relevantes
- Exibir pins em um feed da página inicial
- Uma página dinâmica para exibir cada pin individual
- Uma página de quadro dinâmica para exibir os pins salvos dentro de cada quadro
- Exibir conteúdo em perfis de usuário
- A capacidade de fixar fotos de outros usuários em seu próprio quadro
- Visualizar os pins dentro de um quadro geral
Os passos para criar um site tipo Pinterest no code incluem:
Iniciando
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Clique no link para começar, então poderemos criar nosso site tipo Pinterest juntos.
💻
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. Em vez disso, esta postagem se concentrará na atualização dos detalhes de um perfil de usuário existente.
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.
Nesse 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 Pinterest, algumas das páginas principais que precisaremos incluir são:
- Página de configurações – onde os usuários podem atualizar seus detalhes de perfil
- Página de perfil do usuário – Exibindo os detalhes do usuário e uma lista de seus painéis e pins
- Página de upload de quadro (painel) – Onde os usuários podem criar e publicar novos painéis
- Página de upload de pins – Onde os usuários podem criar e publicar novos pins
- Uma página inicial – Exibindo todos os pins carregados na plataforma
- Página de pins – Uma página independente para exibir cada pin depois de selecionado
O principal recurso 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 for necessário.
No caso do seu moodboard no code, você só precisa criar uma página para hospedar um pin individual. Podemos então criar a lógica necessária para exibir apenas o pin relevante nesta página quando for necessário (abordaremos isso com mais detalhes em breve).
Configure seu banco de dados
Depois de mapear a exibição do seu produto, 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 usar o Pinterest como MVP, aqui está um exemplo da estrutura de dados com tipos de dados e campos de que você precisará:
Tipo de dados: Pin
Campos:
- Foto
- Título
- Descrição
- Link
- Salvo no quadro (integrando com o tipo de dados do seu quadro)
Tipo de dados: Quadro
Campos:
- Nome do quadro
- Pins – lista de pins. 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.
Tipo de dados: Usuário
Campos:
- Nome
- Foto
- Bio
- Pins criados (lista de pins)
- Painéis criados (lista de painéis) / quadros
- Pins salvos (lista de pins)
DICA AVANÇADA DE DADOS: Não existe uma maneira “certa” de criar um banco de dados No Bubble. A resposta para “qual é a maneira correta de estruturar meu aplicativo?” é frequente: depende do que você está otimizando. Para saber mais sobre estruturas de dados alternativas para otimizar aplicativos em escala, verifique nossa entrada manual em Conectando tipos de dados entre si.
Workflows para criar um site tipo Pinterest
Agora que você estruturou o design e o banco de dados para seu aplicativo, é hora de começar a juntar tudo para tornar seu moodboard 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. )
Atualizando os detalhes de perfil do usuário
Começaremos criando suporte para que os usuários atualizem os detalhes do perfil depois de criarem uma conta. Isso pode incluir seu nome, foto de perfil e bio.
Ao criar uma página dedicada às configurações de perfil, podemos usar inputs extras para adicionar esses dados a um perfil de usuário. Quando um usuário adiciona seus detalhes relevantes em cada input, ele clica no botão enviar para atualizar esses dados.
Usando o editor de workflow, podemos alterar um item dentro do banco de dados após esta ação.
Neste caso, você desejará fazer alterações nos inputs relevantes em seu banco de dados. Comece a mapear cada campo de dados que você gostaria de alterar em relação a cada um dos inputs relevantes.
Agora, quando o botão atualizar for clicado, ele atualizará todos os campos relevantes com quaisquer novos valores.
Além disso, agora você pode exibir esses dados no perfil de um usuário usando elementos que correspondam aos campos de dados atualizados.
Criando um painel
Antes que um usuário possa carregar um pin, primeiro precisamos criar um recurso inicial para a criação de novos painéis – permitindo que os usuários armazenem os pins posteriormente nesses quadros.
Para o bem do nosso MVP, criaremos uma página básica chamada ‘criar painel’, em seguida, adicionaremos um elemento de input de texto para dar um nome ao quadro.
O workflow para criar um novo quadro é semelhante à estrutura de edição de um perfil, só que desta vez, você desejará criar um novo item em seu banco de dados.
Novamente, você precisará mapear os inputs relevantes na página com os campos de dados que deseja criar.
Depois de criar um quadro, também precisaremos adicionar uma etapa extra a este workflow – adicionando este novo quadro à lista total de quadros criados pelo usuário atual.
Comece selecionando para fazer alterações em um usuário.
O item que iremos mudar é o total de quadros criados pelo usuário atual – adicionando o resultado da etapa 1 (Criando um novo painel) como a propriedade de dados.
Esta função adicional será útil quando exibirmos uma lista dos fóruns criados por cada usuário em sua página de perfil (mais sobre isso mais tarde).
Criando um pin
Uma vez que fizemos o workflow para criar um quadro, agora podemos nos concentrar na criação de um dos principais recursos do Pinterest – uma função para os usuários publicarem novos pins.
O workflow que alimenta as postagens geradas pelo usuário seguirá o processo exato de criação de um novo quadro, só que desta vez, você adicionará elementos extras na página, como campos de texto livre, um uploader de imagem e um menu suspenso.
Antes de podermos criar um novo pin, precisamos configurar o menu suspenso que classifica em qual painel salvaremos este pin.
Ao atualizar o estilo de escolhas do menu suspenso de uma escolha estática para uma escolha dinâmica, podemos exibir uma lista de todos os painéis criados pelo usuário atual.
Agora estamos prontos para criar o workflow que criará um novo pin. Isso começará quando um usuário clicar no botão publicar.
Mais uma vez, queremos criar um novo item em nosso banco de dados. O item que precisamos criar é obviamente o pin.
Isso irá criar um novo pin e salvá-lo automaticamente no quadro que nosso usuário selecionou do menu suspenso.
Semelhante ao workflow de criar um painel / quadro, incluiremos uma etapa final para adicionar este novo pin ao total de pins criados pelo usuário atual.
Simplesmente selecione fazer alterações no usuário atual, então adicione o resultado da etapa 1 (criando um novo pin) aos pins criados pelo usuário atual.
Exibir pins dinâmicos em um feed
Depois que os usuários começarem a publicar pins, podemos começar a criar a lógica em sua página inicial para exibi-los como uma lista dinâmica. Isso pode ser obtido utilizando nosso elemento de grupo repetidor.
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, precisaremos primeiro vincular o elemento a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo de conteúdo como pins.
Você também precisará definir a fonte de dados como uma lista de todos os pins de seu banco de dados.
Nota: Também é possível refinar os pins exibidos adicionando restrições extras. Este é um recurso útil ao segmentar pins por categorias.
Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido na 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.
Para nosso MVP, vamos simplesmente adicionar um elemento de imagem para exibir a foto de cada pin.
Navegando e enviando dados entre páginas
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. Se um usuário quiser descobrir mais informações sobre um pin específico, ele precisará clicar na imagem em destaque e, em seguida, ser redirecionado para nossa página do pin individual.
Para realizar este evento, criaremos um novo workflow assim que esta imagem for clicada. Nesse workflow, selecionaremos a função ir para a página.
A página para a qual estaremos redirecionando o usuário é página do pin individual. Também precisaremos enviar os dados do pin selecionado para que o editor do Bubble saiba qual conteúdo dinâmico exibir.
Procurando pins
Outra alternativa para navegar entre as páginas de pins é utilizar uma função de pesquisa.
Ao adicionar um elemento de pesquisa à sua página inicial, ele indexará uma lista de todos os pins do seu banco de dados.
Você pode configurar este elemento para pesquisar especificamente pelos pins em seu banco de dados. Ao estruturar o campo de pesquisa como o título do pin, os usuários podem consultar os nomes dos pins e receber sugestões de pesquisa à medida que são digitados.
Ao enviar um usuário para a página do pin relevante, navegue até o editor de workflow e crie um novo evento que é acionado quando o valor de um input é alterado.
Em seguida, você criará um evento de navegação, definindo a página de destino como sua página do pin, e enviando a fonte de dados do valor atual da caixa de pesquisa.
Exibir conteúdo dinâmico na página de um pin
Quando um usuário é direcionado para uma página de pin específica, você pode facilmente obter esses dados de evento e exibir o conteúdo relevante para esse pin.
Para criar essa função, primeiro você precisará garantir que o tipo da página de destino corresponda à propriedade de dados que está enviando no workflow. Nesse caso, você precisará definir a página do pin como uma propriedade de pins.
Ao classificar o tipo do conteúdo de uma página, o Bubble pode facilmente extrair e enviar dados relevantes de fontes existentes.
Agora você pode começar a adicionar conteúdo dinâmico aos campos que exibem informações de um pin específico.
Salvando um pin em um quadro
Quando um usuário encontra um pin atraente, ele pode querer adicioná-lo a um de seus próprios quadros.
Ao incluir o mesmo menu suspenso que usamos ao criar um pin, podemos permitir que um usuário selecione em qual dos painéis ele salvará o pin antes de clicar no botão Salvar.
Em nosso workflow, começaremos fazendo alterações na lista de pins salvos do usuário atual. Neste primeiro passo, vamos adicionar o pin da página atual à lista de pins usuário atual.
Por fim, precisaremos fazer alterações no pin da página atual. Neste caso, queremos adicionar este pin ao quadro do menu suspenso do usuário.
Isso irá adicionar o pin atual ao painel selecionado pelo usuário atual.
Exibindo quadros e pins nos perfis de usuário
O recurso final que criaremos é uma função para que os usuários visualizarem quadros criados por outras pessoas e os pins salvos dentro deles.
Ao criar sua página de perfil do usuário, começaremos adicionando um grupo repetidor horizontal sob as informações dos usuários.
Em seguida, configuraremos esse grupo repetidor como uma propriedade de painel, com a fonte de dados dos painéis criados pelos usuário da página atual.
Isso exibirá dinamicamente uma lista de todos os quadros que o usuário criou.
Quando um usuário clica no nome de um quadro, criaremos um evento de navegação, enviando-o para a página do quadro única. Dentro deste workflow, estaremos enviando os dados do quadro da célula atual.
A interface de usuário da página do quadro irá replicar a página inicial existente que criamos anteriormente, apenas o grupo repetidor em destaque precisará ser reconfigurado.
Embora esse grupo repetidor ainda exiba pins, precisaremos adicionar uma restrição para exibir apenas os pins salvos na página do quadro atual.
Recursos adicionais
Agora que você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, podemos criar novas funcionalidades em nosso site tipo Pinterest.
Adicionalmente, você pode:
- Permitir que os usuários sigam outras pessoas na plataforma
- Criar um função para comentar nas páginas dos pins
- Em vez de criar páginas individuais, utilize elementos pop-up para alguns recursos, como a criação de novos painéis / quadros
- Recomendar pins semelhantes por categorias
Aprenda a criar sites e aplicativos com os Tutoriais gratuitos do Bubble:
Como criar uma comunidade de design do zero tipo Dribbble (sem programar)
NO-CODE: Criei um aplicativo que publica no WordPress (sem código)
Criei um Aplicativo que Publica e Comenta no Instagram (sem codar)
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-pinterest-no-code-tutorial/
