Aprenda a criar um site diretório de filmes tipo IMDb sem precisar programar, usando o editor visual web do Bubble.
Uma das maiores revoluções em todo o cenário de criação foi o movimento de ferramentas no code. Tradicionalmente, criar software era um privilégio exclusivo de engenheiros que haviam passado anos aperfeiçoando sua arte. Ao reduzir essa barreira de entrada, os criadores de todas as origens podem fazer seus próprios softwares poderosos.
Liderando esse movimento está o Bubble. Nossa ferramenta de desenvolvimento no code está mudando a maneira como os empreendedores de tecnologia de todo o mundo trabalham, tornando mais fácil do que nunca começar a criar software sem ter que escrever uma única linha de código. Podemos usar o Bubble para criar lojas virtuais, diretórios e até redes sociais. Se você adora cinema como nós, pode até estar ansioso para criar seu próprio site para apoiar essa paixão.
Ao longo deste post, veremos como criar um site tipo IMDB usando o Bubble. Esteja você procurando criar um dedicado diretório de filmes ou apenas interessado em utilizar alguns dos principais recursos do IMDB, este guia compartilhará como começar a criar a lógica subjacente para um MVP de diretório de filmes no code.
Este post vai focar na criação dos seguintes recursos principais:
- Criação de um portal backend para adicionar novos filmes em um diretório
- Criação de uma página inicial que exibe filmes em destaque com base em suas categorias
- Criação de uma função de pesquisa para navegar entre filmes específicos
- Criação de páginas dinâmicas para mostrar filmes em destaque
- Adicionando suporte a avaliações geradas pelo usuário para cada filme
As etapas para criar um IMDB no code incluem:
Índice
Iniciando seu IMDb no code
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Agora você pode acompanhar enquanto criamos nosso site juntos.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Isso o ajudará a começar o trabalho de criar seu diretório de filmes no code.
Podemos começar criando um protótipo para o design do 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. Se você estiver replicando a plataforma IMDB, algumas das páginas principais que vai desejar incluir são:
- Uma página inicial para exibição de filmes por categorias
- Uma página de exibição dinâmica para cada filme
- Um portal para administradores fazerem upload de conteúdo para a plataforma
Um recurso importante dentro de nosso editor no code é a capacidade de enviar dados para uma página. Isso significa que você só precisa criar uma versão genérica de uma página que exibe múltiplas variações.
Em termos gerais, você só precisará criar uma página para mostrar todos os detalhes de cada filme em seu banco de dados. Podemos, então, criar a lógica necessária para exibir apenas os detalhes relevantes do filme quando for necessário (abordaremos isso com mais detalhes em breve).
Configurando seu banco de dados
Depois de mapear a IU de seu produto, vamos nos concentrar na criação dos campos de dados necessários para alimentá-lo. Contaremos com esses campos para conectar a lógica por trás de seu produto.
Criar um banco de dados no Bubble é um processo contínuo. Comece listando seus tipos de dados de nível superior e, em seguida, adicione os campos necessários em cada categoria.
Ao criar um MVP IMDB no code, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Filmes
Campos:
- Título
- Plot
- Imagem
- Categoria
- Diretor
- Atores
- Duração
- Ano de lançamento
- Avaliação
- Avaliações geradas pelos usuários (lista de avaliações). Nota: Criar uma lista baseada em um tipo de dados geral permitirá 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
- Avaliação enviada (lista de avaliações)
Tipo de dados: Avaliações
Campos:
- Avaliação
- Conteúdo da avaliação
- Filme avaliado
Adicionando um filme ao IMDb com o Bubble
Agora que você configurou seu banco de dados, podemos começar a criar os workflows que irão alimentar seu site. O primeiro recurso que criaremos não é algo com o qual os usuários irão interagir diretamente, mas sim uma ferramenta back-end para adicionar novos filmes à plataforma.
Ao criar um portal dedicado a carregar conteúdo em seu banco de dados, você pode agilizar o processo de adição de novos filmes à sua biblioteca de filmes.
Em sua página de upload, você pode usar uma combinação de inputs para mapear os dados necessários para cada novo filme. Depois que o botão adicionar filme é clicado, isso acionará um workflow que adicionará esses dados coletivos como um novo filme em seu banco de dados.
Ao criar seu workflow, precisaremos criar um novo item no banco de dados, configurando o tipo de dados como filme.
Em seguida combinaremos os elementos relevantes na página com os campos de dados do tipo filme no banco de dados.
Exibindo conteúdo dinâmico
Depois de fazer upload de um catálogo de filmes, é hora de começar a exibi-los em uma página pública que os usuários possam acessar.
Usando o elemento de grupo repetidor do Bubble , você pode exibir uma lista de dados dinâmicos de seu banco de dados – como seus filmes existentes.
Nota: Os grupos repetidores são estruturados como um formato vertical por padrão, mas também é possível reconfigurar o elemento para exibição horizontal.
Ao criar seu diretório tipo IMDB, podemos usar vários grupos repetidores para separar as diferentes categorias de filmes em sua página inicial.
Antes de começar a adicionar conteúdo em seu grupo repetidor, você precisará vincular o elemento a um tipo de dados em seu banco de dados. Isso o ajudará a identificar o conteúdo específico que exibirá.
O tipo de conteúdo que precisamos exibir, é claro, os filmes em seu banco de dados. Nesse ponto, o grupo repetidor mostrará uma lista de todos os filmes que você adicionou (não apenas os itens relevantes para cada categoria).
Ao segmentar esses filmes por categorias únicas, adicionaremos uma restrição extra dentro do grupo repetidor – buscar por filmes que contenham a categoria comédia.
Agora apenas o conteúdo relevante que foi adicionado à categoria de comédia será exibido. Você precisará repetir esse processo para quaisquer categorias adicionais que deseja apresentar.
Depois de configurar corretamente o grupo repetidor, você precisará começar a adicionar quaisquer elementos de conteúdo dinâmico que gostaria de exibir dentro de cada célula. Para o nosso MVP, isso incluirá o título do filme, imagem em destaque, classificação e data de lançamento.
Enviando dados para páginas dinâmicas
Com nossa página inicial exibindo apenas um cartão de visualização para cada filme, os usuários precisarão clicar em uma página de demonstração dedicada a cada filme para ver mais informações. Essas informações adicionais serão hospedadas na página do filme do seu site.
Dentro do nosso grupo repetidor, é possível criar eventos com base nas ações realizadas em cada linha individual. Este recurso se tornará útil ao criar recursos de navegação em sua plataforma.
Para direcionar um usuário da página inicial para a página de exibição de um filme específico, você precisará criar um workflow de navegação que é acionado quando a imagem em destaque de um filme é clicada.
A partir daqui, você selecionará ir para uma página.
Em seguida, você precisará enviar dados adicionais para esta página, permitindo que o editor do Bubble identifique qual filme específico exibir. Os dados que você precisa exibir são retirados do filme da célula atual.
Exibir conteúdo dinâmico na página de visualização
Uma vez que os dados foram enviados para a página do filme, você pode facilmente obter as informações relevantes e exibir esse conteúdo para cada filme.
Primeiro, você precisará garantir que o tipo da página de destino corresponda à propriedade de dados que você está enviando no workflow. Nesse caso, a página do filme será configurada como uma propriedade filme.
Ao classificar o tipo de conteúdo em 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 do filme da página atual.
Workflow para pesquisar conteúdo no IMDb
Na sua página inicial, os usuários também podem navegar até um filme específico integrando um elemento de navegação por pesquisa. Uma barra de pesquisa é uma maneira poderosa de agilizar o processo de descoberta de conteúdo específico pelo título.
Depois de adicionar o elemento da barra de pesquisa, configure a fonte de dados como o tipo de dados filme, junto com o campo de dados título. Isso agora irá indexar todas as entradas do seu banco de dados e até mesmo oferecer sugestões de pesquisa à medida que são digitadas.
Daqui, você pode direcionar um usuário para a página do filme relevante, criando um workflow de navegação.
Comece criando um novo evento que é disparado quando o valor de um elemento é alterado. O elemento com o qual estaremos trabalhando, é claro, sua barra de pesquisa.
Então você criará um evento de navegação, definindo a página de destino como sua página do filme – enviando a fonte de dados do valor atual da caixa de pesquisa.
Criando e exibindo análises geradas por usuários
O recurso final que precisaremos criar para nosso MVP é uma função para oferecer suporte a análises geradas por usuários para cada filme.
Comece adicionando os inputs necessários abaixo do conteúdo da página do filme.
Clicar no botão enviar abaixo desses inputs acionará nosso workflow.
O workflow para criar e exibir avaliações geradas por usuários é semelhante ao processo de criação de um filme em si, só que desta vez, vamos precisar criar uma nova avaliação sobre o filme da página atual.
Selecione para criar um novo item, depois mapeie os inputs na página com os campos de dados para suas avaliações.
Depois que uma avaliação for criada em uma página de filmes, usaremos o elemento de grupo repetidor para exibir cada entrada.
Desta vez, a fonte de dados de nosso grupo repetidor serão as análises dos usuários do filme da página atual.
Mais uma vez, mapearemos a célula superior do grupo repetidor para exibir o conteúdo relevante – incluindo o conteúdo da avaliação, a classificação por estrelas da avaliação e a foto de perfil do criador da avaliação.
Recursos adicionais do IMDb no Bubble
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 a ficar criativo com as experiências criando o seu diretório no code.
Além disso, você pode:
- Adicionar campos de dados extras a cada filme, incluindo; links para trailers, avaliações de editores e curiosidades sobre o filme
- Adicionar um grupo repetidor na página do filme para exibir uma lista de filmes relacionados
- Permitir que os usuários salvem filmes em uma coleção
Aprenda mais sobre como criar sites e aplicativos sem programar:
- Como Criar um Aplicativo com Informações do CORONAVÍRUS (via API)
- Integre Bubble com MySQL, PostgreSQL e outros DB externos
- Aplicativo pronto. E agora? – 3 Passos para Transformar seu Aplicativo em um Negócio Rentável
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-imdb-no-code/
