Aprenda como criar seu próprio site de vídeos como o YouTube sem programar, usando o editor visual web do Bubble.
Depois de começar com um vídeo intitulado ‘Me at the zoo’ em 2005, o YouTube é agora a base para o consumo de conteúdos em vídeo. Em segundos, os usuários podem encontrar educadores de classe mundial e conteúdo gratuito em todos os nichos imagináveis, bem como milhões de horas de entretenimento.
Neste artigo, vamos percorrer um tutorial para criar um site de vídeos tipo YouTube usando o Bubble. Uma plataforma de desenvolvimento de aplicativos web no code, sem necessidade de experiência em programação!
As etapas para criar um site para compartilhamento de vídeos tipo YouTube sem codar incluem:
Índice
O que é Bubble?
Primeiramente, o Bubble é uma ferramenta que capacita usuários a projetar, desenvolver e hospedar aplicativos totalmente funcionais sem escrever código.
Os aplicativos desenvolvidos no Bubble podem variar de protótipos simples a plataformas e mercados complexos, ou seja, substituem completamente as linguagens de programação e estruturas tradicionalmente usadas para desenvolvimento web. O poderoso editor de ‘apontar e clicar’ do Bubble oferece aos usuários o poder completo e a capacidade de projetar aplicativos e workflows totalmente personalizáveis, de forma que o Bubble lida com a infraestrutura, DevOps e dimensionamento automaticamente.
Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Clique no botão abaixo para começar, então você pode acompanhar enquanto criamos nosso site juntos.
💻
Isso o ajudará a começar a criar seu site de vídeos no code gratuito.
Como as pessoas começam a criar sites e aplicativos?
A resposta curta é que isso se resume à preferência pessoal.
Alguns Bubblers gostam de começar projetando suas páginas de modo que possam visualizar como são as interações do usuário, depois conectando suas páginas ao banco de dados e aos workflows. Outros Bubblers gostam de começar definindo o banco de dados dos seus aplicativos, o que influencia a forma como eles pensam sobre o design da página e os workflows.
Não há uma abordagem correta, então experimente diferentes abordagens para ver qual se encaixa melhor com seu estilo de pensamento.
Páginas principais do seu site de videos
Começaremos pensando nas páginas principais de que um site como o YouTube precisa para fornecer os recursos que seus usuários esperam de uma plataforma de compartilhamento de vídeo moderna. Dessa forma, essas páginas funcionarão como a interface principal que seus usuários usarão para enviar um vídeo e torná-lo disponível para a comunidade de sua plataforma assistir.
O Bubble permite criar painéis e páginas impressionantes que farão seus usuários se sentirem em casa, independentemente do background do seu design. Se você é iniciante, não tem problema! Pois você pode facilmente iniciar seu projeto escolhendo um de nossos muitos modelos.
Um dos recursos do Bubble é 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, com um design simples, e o Bubble preencherá automaticamente os elementos da página usando esses dados. Essas informações são armazenadas no banco de dados do Bubble, que não requer configuração externa, e o Bubble propagará automaticamente os dados para os grupos e elementos de texto certos, para que você não precise de milhares de páginas diferentes para cada perfil ou postagem.
Portanto, para criar um site de vídeos, teremos as seguintes páginas como no Youtube:
- Uma página inicial (você pode usar a página de “índice” padrão) mostrando todos os vídeos mais recentes carregados na plataforma.
- Uma página de perfil que mostra informações sobre um usuário e todos os vídeos que ele postou.
- Uma página de upload de vídeo para permitir que os usuários façam upload de um vídeo.
Tipos de dados necessários para um site de vídeos tipo Youtube
Como o banco de dados Bubble difere dos bancos de dados normais?
O Bubble reduz muitas das complicações técnicas na interação com bancos de dados, mas muitos dos mesmos conceitos básicos ainda estão presentes. Em bancos de dados você tem tabelas; no Bubble, você tem uma tabela para cada “tipo de dados”. Os tipos de dados do Bubble têm campos, que são representados como colunas, e você define que tipo de dados um campo possui, como texto, número ou sim / não (binário). Uma diferença é com as associações de banco de dados, onde o Bubble permite definir um tipo de campo como um tipo de dados que você tem no aplicativo. Se isso não faz sentido para você agora, não se preocupe – fica mais claro depois que você vê um exemplo.
Alguns usuários acham mais fácil começar configurando seus tipos de dados, o que é essencialmente configurar um banco de dados. Cada aplicativo Bubble vem com um banco de dados integrado que você pode configurar para atender às suas necessidades, ou seja, não há problemas de configuração para você.
Queremos um tipo de dados por tipo de ‘item’ que queremos no aplicativo. Nesse sentido, pense em um ‘item’ exatamente como isso – algo que você mostrará, armazenará dados ou utilizará no aplicativo.
Cada um desses tipos de dados deve ter campos que contenham as propriedades daquele item. À medida que continuamos criando as páginas, os elementos na página se basearão em diferentes campos de diferentes tipos de dados.
Tipos de dados e campos para um site de compartilhamento de vídeos:
- Tipo de dados: Usuário – este é um tipo padrão para todos os aplicativos do Bubble
- Campos: e-mail (incluído por padrão), nome, sobrenome, imagem de perfil, lista de ‘vídeos’ e identificador (o equivalente ao “nome de usuário” do Youtube).
Observe que o ‘tipo’ de dados também é definido para que você (e o Bubble) saibam que tipo de dados cada campo é. (O primeiro nome é um trecho de texto, portanto, selecionamos ‘texto’ como o tipo de dados, ‘Vídeos_Publicados’ são uma lista de vídeos etc.)
- Importante: Vamos armazenar não apenas um vídeo, mas um número desconhecido de vídeos, portanto, usamos a opção ‘Este campo é uma lista’ marcando a caixa de seleção quando criamos o campo “Vídeos_ Publicados”. Deve ser assim:
- Tipo de dados: Vídeo – o vídeo que o usuário enviará e disponibilizará para exibição pública em sua plataforma.
- Campos: Video_url (o url do vídeo armazenado, ótimo para compartilhar ou incorporar), Thumbnail (a pequena imagem que representa o vídeo) e o Título (o título em texto do vídeo).
Opcionalmente, você também pode criar outro tipo de dados chamado ‘Comentários’ e salvar uma lista de comentários para o vídeo, como fizemos para ‘Vídeos_ publicados’ no tipo de dados do usuário. No banco de dados do Bubble, os campos que criamos podem ser opcionais. Isso significa que não haverá erros ou problemas se criarmos um registro de vídeo que não contenha comentários.
Esses são os campos mínimos necessários para fazer um site de vídeos como o Youtube funcionar. Conforme criamos mais recursos, provavelmente vamos adicionar mais tipos de dados e campos. Por exemplo, podemos adicionar itens como comentários do usuário, recursos de incorporação de vídeo e muito mais para tornar nossa plataforma tão poderosa quanto o YouTube. Podemos até integrar com um editor de vídeo de terceiros e permitir que os usuários enviem e editem os vídeos dentro de nosso aplicativo e, em seguida, enviem automaticamente o vídeo final editado!
Você pode ter quantos campos e tipos de dados desejar. Então podemos ocultar ou mostrar diferentes elementos de design ou alterar a maneira como o aplicativo se comporta no Bubble com base nesses dados.
Recursos principais
Como você cria recursos no Bubble?
Junto com o design da página e o banco de dados integrado, um recurso central do Bubble igualmente importante são os “workflows”. Os workflows permitem que você defina partes da lógica na forma de “Quando X acontecer, execute as ações A, B, C, etc.” Na realidade, as declarações “se X, então A, B, C” são os blocos de criação básicos para a maioria dos recursos em sites – elas conectam o que os usuários veem na página com o banco de dados nos bastidores.
Agora que temos algumas páginas em branco e o banco de dados configurado, vamos criar em nosso site de vídeos algumas funcionalidades reais, conectando-os e executando algumas ações básicas. No Bubble, a principal maneira de fazer isso é com uma lista de “ações” agrupadas em um “workflow”.
Cada workflow acontece quando um “evento” ocorre (ex: um usuário clica em um botão ou a página está totalmente carregada) 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 ”ou“ ocultar / mostrar um elemento ”etc.).
Para começar com o básico dos workflows, você pode criar as seguintes características:
Cadastro do usuário
- Conta >“Cadastrar o usuário” para usar o ‘sign up’ integrado do Bubble
- Conta >“Cadastro / login com uma rede social” para o Google ou Faça login no Facebook (“OAuth”).
Criando um perfil em nosso site de videos como no Youtube
Aqui, criaremos um formulário e permitiremos que o usuário clique em um botão para salvar sua imagem de perfil, identificador (handler) e nome completo.
Um workflow vinculará o lado do design (o formulário) aos tipos de dados que criamos anteriormente, o que torna o Bubble realmente poderoso para criar aplicativos baseados em dados que armazenam e recuperam informações do usuário.
Primeiro, aqui está um exemplo de uma página de perfil:
Os elementos adicionados incluem:
- 2 ‘inputs’ para nome e sobrenome.
- 1 ‘input multilinha’ para a bio do usuário
- Um elemento de upload de imagem para uma foto de perfil
- Um ‘botão’ Salvar Perfil
Como queremos que todas essas informações sejam públicas, não precisamos nos preocupar com as regras de privacidade de dados por enquanto.
Nota: Os inputs precisam ter formatos de conteúdo que correspondam ao tipo de dados que o banco de dados do Bubble está esperando. Por exemplo, os campos de nome devem ter o formato de conteúdo de “texto” e o campo de dados da foto do perfil deve ser uma “imagem”, o que significa que precisamos de um elemento de upload de imagem para obter o tipo certo de dados.
Em seguida, salve as informações do perfil do usuário usando um workflow.
Clique duas vezes no botão ‘Salvar perfil’ em seu formulário e clique em ‘Iniciar / Editar Workflow’ no menu de propriedades. Isso informa ao Bubble que você deseja vincular alguma lógica ao botão quando ele for clicado.
Em seguida, selecione a etapa ‘Alterar um item no banco de dados’. Nesse caso, estamos fazendo alterações no usuário que está atualmente logado em nosso aplicativo.
Crie a ação ‘Fazer alterações para o usuário atual’ usando os dados de input conforme mostrado acima:
- Item a Alterar = ‘Usuário atual’
- Nome = ‘Input Insira o valor do seu nome’
- Sobrenome = ‘Input Insira o valor do seu sobrenome’
- Foto de Perfil = ‘Uploader de Foto – Faça o Upload do valor da Foto de Perfil’
- Handle = ‘Input Multilinha – Insira o valor da sua bio…’
Fazendo uploads na biblioteca
Vamos criar em nosso site de vídeos uma página para enviar vídeos à biblioteca, usando um elemento ‘FileUploader’ (Uploader de arquivo), um ícone, uma input de título do vídeo e Ícone de upload da imagem de Thumbnail.. Adicione um botão ‘Upload’:
Clique no botão Upload e selecione “criar um novo workflow”.
Etapa 1: “Criar um novo item ” > Tipo = Vídeo com os seguintes campos:
- Video_Url = ‘FileUploader’ Clique para enviar o valor de um vídeo
- Título = Input Dê ao vídeo um valor de título
- Thumbnail = ‘PictureUploader’ Clique para carregar o valor de uma thumbnail
No Bubble, quando os arquivos são armazenados no banco de dados, o Bubble retorna o url da Amazon Web Services do local do arquivo, que neste caso é o link de armazenamento do vídeo. estamos, na verdade, enviando o próprio arquivo de vídeo para a AWS via Bubble e, em seguida, salvando o URL retornado para acessar esse arquivo no Video_Url. Podemos usar esses dados para mostrar o vídeo em um elemento de vídeo mais tarde.
Etapa 2: Criar uma nova etapa e selecione “Fazer alterações em um item” > Definir item para alterar = “Usuário Atual” > Alterar outro campo > Definir o campo como “Vídeos_Published add = Resultado da etapa 1 (Criar um novo vídeo …)” Nós não precisamos necessariamente fazer isso para um MVP, mas dependendo do aplicativo, salvar dados e mapeá-los para um usuário dessa forma pode economizar tempo com regras de privacidade no futuro.
Etapa 3: Adicione a ação ‘Redefinir inputs relevantes’ depois disso para que o usuário possa postar qualquer outro item sem precisar remover o texto antigo que digitou e os arquivos que adicionou. Não se preocupe, tudo já foi salvo antes de reiniciarmos esses inputs.
É isso aí! Os vídeos agora serão salvos no banco de dados, junto com alguns dados padrões que o Bubble adiciona automaticamente (como a conta do usuário que criou o vídeo, a hora em que foi criado e um ID exclusivo para o vídeo) que podemos usar para ações mais avançadas posteriormente na linha.
Exibindo Vídeos Carregados
Agora, temos que criar o feed de Vídeo para visualizar todos os Vídeos armazenados no banco de dados. Isso é realmente fácil de fazer no Bubble, mas você também pode adicionar filtros mais complexos e regras de acesso quando estiver mais familiarizado com a plataforma Bubble. Para fazer isso, adicionamos um elemento de ‘Grupo Repetidor’ dos tipos de elemento na barra lateral do editor do Bubble, em nossa página ‘Mais recente’ (Latest) ou onde quisermos exibir os vídeos.
Defina a ‘Fonte de dados’ como ‘Pesquisar vídeos’ – isso mostrará todos os vídeos armazenados no banco de dados (que foram criados por usuários usando o formulário de envio).
Em cada célula do grupo repetidor, você deseja que um vídeo diferente seja exibido.
Adicione um elemento ‘Vídeo’ e defina Origem do vídeo = YouTube, ID do vídeo = Video_Url da célula atual (Video source = Youtube, Video ID = Current cell’s Video’s Video_Url).
Se desejar, adicione um elemento de texto à célula # 1 do grupo repetidor para exibir a ‘Data de criação do vídeo da célula atual’, que mostrará a data em que o vídeo foi enviado para sua plataforma! Você pode até classificar por data de criação: defina ‘Decrescente’ como ‘sim’ para classificar os vídeos em ordem cronológica de forma que o vídeo mais recente seja mostrado primeiro na grade.
Seus usuários podem então rolar o grupo repetidor como fariam normalmente no YouTube e as células percorrerão todos os diferentes Vídeos armazenados no banco de dados.
Os Grupos Repetidores são muito poderosos e você pode adicionar filtros ou restrições se quiser mostrar apenas Vídeos criados pelo usuário atual, ou até mesmo criar uma pesquisa com uma entrada de texto para mostrar apenas Vídeos cujo título contém o termo da pesquisa!
Essa é a grande vantagem do Bubble, além de de aprender os fundamentos da criação de um dado, você pode fazer muito mais e usar a mesma técnica para criar outros tipos de dados no banco de dados.
Como mostrar os próprios vídeos aos usuários conectados e um feed genérico aos usuários desconectados
Crie uma declaração Condicional para mostrar uma fonte de dados diferente com base em se o usuário está conectado ou desconectado.
Vá para a guia Condicional em Bubble para seu elemento de grupo repetidor. Crie a seguinte condição: ‘Quando o usuário atual está conectado’> Fonte de dados = Pesquisar vídeos> Tipo = ‘Vídeo,’ Criado por = ‘Atual Usuário ‘.
O Grupo Repetidor agora mostrará apenas os vídeos que foram ‘Criados Por’ o ‘Usuário Atual’, ou seja, a pessoa conectada. Esta é uma ótima maneira de mostrar dados diferentes para usuários diferentes. Lembre-se, grupos repetidores só podem ter um tipo de dados cada, portanto, não podemos alterar o tipo de dados que ele mostra para algo diferente de ‘Vídeo’: se quiséssemos mostrar uma lista de usuários no banco de dados, por exemplo, precisaríamos de um grupo repetidor separado com o tipo de dados definido como ‘Usuário’.
Recursos adicionais para criar seu site de vídeos
Também podemos acrescentar algumas idéias divertidas de recursos extras para adicionar mais funcionalidade ao seu site de vídeos no code. Esses não são apenas recursos que seus usuários vão adorar, mas criá-los lhe dará mais prática com o design de páginas, estruturação do banco de dados e criação de workflows:
- Adicionar um novo tipo de dados ‘Comentário’ e permitir que os usuários enviem comentários em cada vídeo.
- Adicionar um input de pesquisa e permitir que os usuários pesquisem vídeos pelo título.
Gostou desse tutorial? Acesse também outros tutoriais como criar um Spotify sem codar, e também criar um aplicativo de idiomas como o Duolingo.
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-no-code-youtube-clone/
