Como criar um site tipo Pinterest sem saber programar

Aprenda como criar um site de moodboard no code tipo Pinterest, usando o editor visual web do Bubble.

Criar um site tipo Pinterest sem programar no 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.

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.

💻 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. 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)
Site tipo Pinterest - Tipos de dados e campos

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.
Site tipo Pinterest - Tipos de dados e campos

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)
Site tipo Pinterest - Tipos de dados e campos

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.

Pinterest Sem Codar - Painel

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.

Pinterest Sem Codar - Painel

Novamente, você precisará mapear os inputs relevantes na página com os campos de dados que deseja criar.

Pinterest Sem Codar - Painel

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.

Pinterest Sem Codar - Painel

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.

Criar um site tipo Pinterest Sem Codar

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.

Criar um site tipo Pinterest Sem Codar

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.

Criar um site tipo Pinterest Sem Codar

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.

Criar um site tipo Pinterest Sem Codar

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.

Procurando Pins - Site tipo Pinterest

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.

Procurando Pins - Site tipo Pinterest

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.

Procurando Pins - Site tipo Pinterest

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.

Procurando Pins - Site tipo Pinterest

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.

Bubble No Code Pinterest Tutorial Walkthrough

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.

Bubble No Code Pinterest Tutorial Walkthrough

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.

Bubble No Code Pinterest Tutorial Walkthrough

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.

Bubble No Code Pinterest Tutorial Walkthrough

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.

Bubble No Code Pinterest Tutorial Walkthrough

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.

Bubble No Code Pinterest Tutorial Walkthrough

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.

Bubble No Code Pinterest Tutorial Walkthrough

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.

 Bubble No Code Pinterest Tutorial Walkthrough

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/

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Inscreva-se na Comunidade Sem Codar, um curso online com mais de 300 aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble e desenvolvimento No-Code:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email