Aprenda como criar uma plataforma de streaming de vídeo igual à Netflix, usando o editor visual web do Bubble.
‘Netflix and chill’? Vamos experimentar ‘Bubble and build’.
Bubble é uma ferramenta de desenvolvimento sem código que está mudando a maneira como criadores do mundo todo criam software. Nossa plataforma poderosa tornou mais fácil do que nunca começar a criar software sem ter que saber programar. Usamos o Bubble para criar lojas virtuais, diretórios e até redes sociais.
Este post vai mostrar o processo de usar o Bubble para replicar uma versão ‘white-label’ da Netflix.
Podemos criar uma plataforma de streaming do zero, ou apenas utilizar alguns dos principais recursos da Netflix. Este guia mostrará como começar a criar a lógica subjacente para seu MVP sem código.
Ao longo deste guia, vamos destacar como criar os seguintes recursos principais da Netflix:
- A capacidade de fazer upload de conteúdo para a plataforma de um portal back-end
- Uma página inicial que pode filtrar o conteúdo por categorias e tipos de conteúdo (filmes e programas de TV)
- Uma barra de pesquisa para navegar por títulos específicos
- Um recurso para os usuários adicionarem conteúdo à sua lista para assistir.
As etapas para criar um site tipo Netflix sem programar incluem:
Índice
Conta Bubble e páginas principais para uma Netflix no code
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Agora podemos criar nosso site tipo Netflix juntos.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Podemos começar criando um protótipo para o design do site 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 site. Se você estiver fazendo uma alternativa à Netflix, algumas das páginas principais que desejará incluir serão:
- Uma página inicial para exibir conteúdo por categorias
- Uma página de visualização dinâmica para cada filme ou programa de TV
- Um portal para administradores fazerem upload de conteúdo para o plataforma
Um recurso importante de nosso editor sem código é 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 possa refletir informações sobre usuários específicos ou itens de seu banco de dados.
Ou seja, só precisamos criar uma página para mostrar o conteúdo da visualização de cada filme no banco de dados. Podemos então criar a lógica necessária para exibir apenas o conteúdo relevante para cada filme quando for necessário.
Tipos de dados e campos pra Netflix com o Bubble
Após 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 a lógica por trás de seu site.
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 seu Netflix MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Conteúdo
Campos:
- Título
- Descrição
- Imagem de Thumbnail
- Arquivo de conteúdo
- Categorias
- Programa de TV (sim / não)
- Filme (sim / não)
Tipo de dados: Usuário
- Minha lista (lista de dados existentes, tipo – conteúdo). Nota: Criando uma lista com base 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.
Fazendo o upload do conteúdo
Com o banco de dados configurado, podemos mergulhar na criação de workflows para moldar seu site. O primeiro recurso que criaremos não é algo que os usuários verão diretamente, mas é uma ferramenta back-end que você usará para gerenciar o conteúdo na plataforma.
Criar um portal onde os administradores podem fazer upload de conteúdo. Isso ajuda a agilizar o processo de estruturação dos campos relevantes pela sua biblioteca de filmes.
Em sua página de upload, você mapeará os inputs relevantes necessários para cada parte do conteúdo. Quando o botão de upload for clicado, um workflow será aconado para adicionar o conteúdo ao seu banco de dados.
Ao criar seu workflow, precisaremos criar um novo item, configurando o tipo de dados como ‘conteúdo’.
Combine os elementos relevantes na página com os campos de dados sob o tipo ‘conteúdo’ em seu banco de dados. Usando uma combinação de texto, imagem, arquivo e elementos suspensos, é possível adicionar os campos necessários para estruturar adequadamente cada parte do conteúdo.
Exibindo conteúdo dinâmico
Depois de fazer upload de um catálogo de conteúdo, é hora de começar a exibi-lo em uma página pública que os usuários possam acessar.
Usando o elemento grupo repetidor do Bubble, você pode exibir uma lista de dados dinâmicos de seu banco de dados, com base em quaisquer configurações definidas.
Nota: Os grupos repetidores são estruturados como um formato vertical por padrão, mas é possível reconfigurar o elemento para exibição horizontal.
Ao criar um site tipo Netflix, precisaremos usar grupos repetidores separados para cada variação de conteúdo dinâmico que você gostaria de exibir. Nesse caso, precisaremos criar um novo grupo repetidor para cada categoria de conteúdo na página inicial.
Para começar a exibir dados em seu grupo repetidor, você precisará primeiro vincular o grupo repetidor a um tipo de dados em seu banco de dados. Isso o ajudará a identificar qual conteúdo precisará exibir.
O tipo de conteúdo a ser exibido será o campo ‘conteúdo’ em seu banco de dados. Nesse ponto, o grupo repetidor exibirá uma lista de todo o conteúdo que você fez upload, não apenas os itens relevantes para cada categoria.
Adicionando restrição ao grupo repetidor
Como solução, adicionaremos uma restrição dentro do grupo repetidor para pesquisar apenas o conteúdo que contém a categoria chamada ‘popular’.
Nota: Como um MVP, essas categorias podem ser escritas manualmente em sua página de upload de conteúdo como campos de texto livre. Você precisará garantir que a grafia na restrição do grupo repetidor corresponda ao input de texto original adicionado.
Isso agora exibirá apenas o conteúdo relevante que foi adicionado à categoria popular. Você precisará repetir esse processo para cada tipo de categoria que deseja incluir.
Dica: se desejar colocar páginas adicionais dedicadas a programas de TV ou filmes, você pode adicionar outra restrição para corresponder ao input booleano (filme ou programa de TV) que você classificou na página de upload.
Com essa restrição adicional, podemos criar páginas dedicadas ao estilo de conteúdo que seus usuários estão procurando.
Depois de configurar corretamente o grupo repetidor, você precisará adicionar quaisquer campos de conteúdo dinâmico que deseja exibir em cada coluna. Para nosso Netflix MVP, vamos exibir apenas a imagem de Thumbnail em cada filme.
Enviando dados para páginas dinâmicas
Depois que um usuário seleciona um filme ou programa de TV para visualização, precisaremos exibir mais informações sobre o item específico.
Do grupo repetidor, podemos 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.
Nossa página inicial do Netflix exibe apenas um feed de Thumbnails do conteúdo, mas não mostra nenhuma informação adicional como o título ou a descrição do conteúdo. Essas informações adicionais serão hospedadas na página de ‘visualização de conteúdo’ do seu aplicativo.
Para direcionar um usuário a esta página, você precisará criar um workflow de navegação que é acionado quando uma imagem de Thumbnail é clicada.
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 extraídos do conteúdo da célula atual.
Exibir conteúdo dinâmico na página de visualização
Depois que os dados foram enviados para a página de visualização, você pode obter facilmente as informações relevantes e exibir esse conteúdo para cada filme.
Primeiro, você precisará garantir que o tipo de página de destino corresponda à propriedade de dados que você está enviando no workflow. Nesse caso, você precisará definir a ‘página de visualização’ como uma propriedade de conteúdo (content property).
Ao classificar o tipo de 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 determinado filme.
Pesquisando conteúdo
Na sua página inicial, também é possível redirecionar os usuários para um título específico integrando um elemento de pesquisa e navegação. Uma barra de pesquisa é uma maneira poderosa de agilizar o processo de descoberta de conteúdo específico por seu título.
Depois de adicionar um elemento de barra de pesquisa à sua página inicial, configure seus parâmetros para pesquisar pelo tipo de dados ‘conteúdo’ e pelo campo de dados ‘título’. Isso vai indexar todas as entradas e até oferecerá sugestões de pesquisa à medida que forem digitadas.
Para enviar um usuário à página de visualização do filme relevante, navegue até o editor de workflow e crie um novo evento que é acionado quando o valor de um input é alterado. Obviamente, o elemento em que estaremos trabalhando é a sua barra de pesquisa.
Em seguida, você criará um evento de navegação, definindo a página de destino como sua página de visualização – enviando a fonte de dados do valor atual da caixa de pesquisa.
Adicionando um item à lista salva do usuário
Como acontece com todos os grandes títulos da Netflix, simplesmente há muito conteúdo para assistir e pouco tempo durante o dia. Ao criar um recurso ‘adicionar à lista para assistir’, os usuários podem acompanhar seus títulos favoritos e assisti-los em outro momento.
Para facilitar esse recurso, criaremos um workflow que é acionado quando um usuário clica no botão ‘+ Minha lista’ na página de visualização de conteúdo.
Nesse workflow, vamos alterar um item no banco de dados, e então, adicionaremos o conteúdo da página atual à lista para assistir do usuário atual.
Depois que um usuário começa a adicionar títulos à lista para assistir, você pode adicionar um grupo repetidor adicional na página inicial – mas desta vez configurando a fonte de dados para exibir o conteúdo de uma lista para assistir do usuário.
Reproduzindo conteúdo
Pipoca: ok. A lógica para alimentar seu MVP tipo Netflix: ok! É hora de criar o recurso final – um reprodutor de vídeo que permite aos usuários iniciar o streaming dos arquivos que você fez upload.
Usando o Bubble, há duas opções para realizar esse processo:
- Use nosso elemento de vídeo existente para incorporar um player de vídeo em sua página de visualização. Este player pode se integrar facilmente com soluções de streaming existentes como YouTube e Vimeo, evitando que você tenha que fazer upload de um arquivo para seu banco de dados. Você simplesmente precisará adicionar um link do YouTube como fonte de dados para o ID do vídeo.
- Um recurso poderoso do Bubble é a capacidade de integrar plugins de terceiros que nossa comunidade de desenvolvimento criou. O plugin HTML5 Video Player permite que você reproduza de forma nativa qualquer formato de vídeo compatível com o HTML5. Este player incorporado irá integrar com o arquivo de vídeo original que você fez upload para cada filme.
Recursos adicionais para uma Netflix no code
Agora você sabe como criaar campos de dados personalizados e exibir conteúdo dinâmico. Podemos criar os seguintes recursos em nossa Netflix no code:
- Conteúdo com votos positivos e negativos
- Adicionando avaliações do usuário
- Incluir recomendações de conteúdo adicionais em cada página de visualização
- 🎬 Como Criar um Aplicativo igual o Netflix
- Criando uma Biblioteca de Vídeos no Bubble (Renaflix Parte 2)
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-netflix-without-code/
