Como criar um aplicativo tipo Spotify no code

Fazer cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Em seguida, você pode acompanhar enquanto criamos nosso app juntos.

Faça seu cadastro gratuito no Bubble.

Também será benéfico entender como criar e editar contas de usuário. Já cobrimos isso com mais detalhes em nosso artigo Como criar um site tipo Quora.

Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do seu aplicativo 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 aplicativo. Se você está baseando seu app de streaming no Spotify, algumas das páginas principais que desejará incluir são:

• Página de upload – Um portal back-end onde os artistas podem fazer upload de músicas
• Página inicial – Exibindo uma lista de músicas por suas categorias
• Página de reprodução – Onde uma música individual pode ser reproduzida
• Página para criar playlists (listas de reprodução) – Permitindo que os usuários criem novas playlists
• Perfil de usuário – Exibindo os detalhes de um usuário e uma lista de suas playlists criadas
• Página da playlist – Exibindo uma lista de todas as músicas adicionadas em uma playlist

Um dos principais recursos 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 de seu banco de dados quando for necessário.

No caso do seu aplicativo tipo Spotify para Android ou iPhone, você só precisará criar uma página para hospedar suas músicas individuais. Podemos então criar a lógica necessária para exibir apenas a música relevante em cada página quando for necessário (vamos cobrir isso com mais detalhes em breve).

Configurando seu banco de dados

Depois de mapear a exibição do aplicativo, você pode se concentrar na criação dos campos de dados necessários para alimentá-lo. Contaremos com esses campos para conectar os workflows por trás de seu app.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao criar um banco de dados, recomendamos dividir itens grandes em tipos de dados separados – aumentando a velocidade do aplicativo.

Por exemplo, vamos criar dois tipos de dados separados para nossas músicas. Um incluirá os detalhes básicos da música (nome, artista e foto da capa), enquanto o outro incluirá o próprio arquivo da música.

Ao criá-los como campos de dados separados, podemos carregar apenas as informações necessárias quando são necessárias, reduzindo a quantidade de conteúdo que o editor do Bubble precisará processar.

Ao usar o Spotify como um MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos:

• Nome
• Foto
• Playlists – Lista de playlists. 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 campos adicionais

Tipo de dados: Música

Campos:

• Título
• Nome do artista
• Imagem da capa
• Conteúdo da música – conteúdo da música
• Playlists em que foi adicionada – Lista de playlists
• Categoria

Tipo de dados: Conteúdo de música

Campos:

• Conteúdo da música (arquivo da música)

Tipo de dados: Playlist

Campos:

• Nome da playlist
• Descrição
• Conteúdo da playlist – Conteúdo da playlist

Tipo de dados: Conteúdo da Playlist

Campos:

• Lista de músicas

Workflows necessários para criar um aplicativo tipo Spotify

Com o design e banco de dados para seu app estruturados, podemos começar a juntar tudo – tornando o aplicativo 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.)

Fazendo o upload de uma nova música

O primeiro recurso que vamos criar é um portal back-end onde artistas ou gravadoras podem fazer upload de músicas para a plataforma.

Na página de upload, você pode começar adicionando uma combinação de inputs, incluindo: campos de texto livre, uploaders de imagem e um uploader de arquivo.

Depois que um usuário tiver adicionado seus detalhes relevantes em cada input, eles clicarão no botão enviar (upload) para criar uma nova entrada em seu banco de dados. Este clique de botão será a ação necessária para acionar seu workflow.

Usando o editor de workflow, você pode optar por criar um novo item em seu banco de dados. Neste caso, estaremos criando uma nova música.

Em seguida, você precisará começar a adicionar dados dos seus elementos na página aos campos relevantes em seu banco de dados. Mapear cada input que deseja criar em relação ao campo de dados correspondente.

Começaremos criando o próprio conteúdo da música. Isso criará um arquivo em silos onde a música será armazenada. Ao separar esse arquivo grande dos detalhes adicionais das músicas, isso aumentará a velocidade de seu aplicativo, pois o editor do Bubble precisará carregar esse arquivo apenas quando for necessário.

Em seguida, adicionaremos outra etapa em nosso workflow, desta vez criando uma nova música. Este tipo de dados incluirá os detalhes restantes da música, incluindo seu título, imagem da capa e nome do artista. Contaremos com essas informações ao exibir a faixa para os usuários na página inicial.

Embora tenhamos separado o arquivo da música das informações das músicas, esse workflow nos permite mesclar esses dois tipos de dados, mas manter os arquivos separados.

Exibir uma lista de músicas no seu app de streaming no code

Depois de começar a adicionar músicas à plataforma, você está pronto para exibir cada item em um feed na página inicial. Isso pode ser obtido usando o 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, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo como música.

Você também precisará definir a fonte de dados como uma lista de todas as músicas enviadas em seu banco de dados. Se desejar segmentar cada grupo repetidor por uma categoria relevante, você pode adicionar uma restrição adicional à sua fonte de dados.

Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido nesta grade. Simplesmente mapear a primeira coluna com o conteúdo relevante que você gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

Dentro de um grupo repetidor, também é possível criar eventos dentro de cada coluna individual.

Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. Ao selecionar a reprodução de uma música, vamos redirecionar o usuário para nossa página de reprodução dedicada, onde eles podem reproduzir o arquivo em si.

Para realizar este evento, você precisará começar criando um workflow que redireciona o usuário quando o título da música é clicado.

Selecione para ir para a página – a página de reprodução dedicada.

Então você precisará enviar dados adicionais à esta página para que o editor do Bubble saiba qual música específica exibir. Os dados que você precisa exibir são os da música da célula atual.

Agora podemos adicionar conteúdo dinâmico aos elementos da página, exibindo as informações da música que foi enviada em seu workflow.

Agora nosso pop-up pode armazenar os dados de uma música individual e exibir uma lista de todas as nossas playlists. Criaremos então um workflow final que adiciona esse item a uma opção selecionada.

Crie um novo workflow quando o botão criar playlist for clicado no pop-up.

Dentro deste workflow, começaremos criando um novo item no banco de dados – uma nova playlist.

Depois de criar esta playlist, precisaremos criar uma etapa que altere um item no banco de dados, adicionando esta nova playlist à lista de playlists criadas pelo usuário atual.

Adicionando uma música a uma playlist

Após criarmos uma playlist, precisamos em seguida de uma função para adicionar uma música a esta biblioteca. Criar esse workflow é tão simples quanto fazer alterações em um campo de dados existente.

Começaremos adicionando um pop-up à nossa página inicial. Popups são uma maneira útil de exibir informações ou criar eventos sem direcionar o usuário para fora da página atual.

Em seguida, configuraremos nosso elemento suspenso para exibir dados dinâmicos. O tipo de dados que precisaremos exibir são playlists, a fonte de dados será definida como lista de playlists criadas pelos usuários atuais.

Finalmente, queremos que o texto atual em nosso menu suspenso exiba o nome de cada playlist de nossa fonte disponível.

Agora é hora de começar a criar esse workflow. Começaremos exibindo este pop-up quando o ícone de adição (plus icon) for clicado ao lado de uma música.

Então desejaremos exibir dados dentro de um elemento.

Os dados que queremos exibir são a música da célula atual em nosso novo elemento pop-up.

Depois de enviar esses dados, precisaremos exibir nosso elemento pop-up.

Agora nosso pop-up pode armazenar os dados de uma música individual e exibir uma lista de todas as nossas playlists. Criaremos então um workflow final que adiciona esse item a uma opção selecionada.

Nele, precisaremos alterar um item no banco de dados. O item que iremos alterar é o Parent group’s Song (pop up) adicionado a à playlist selecionada no menu suspenso.

Exibindo uma lista de playlists

Depois de criar várias playlists, o conteúdo deste tópico será exibido na sua página de perfil do usuário.

Como o conteúdo da playlist é baseado em uma lista de playlists de usuários, precisaremos configurar este tipo de página como usuário.

O conteúdo dinâmico em nossa página exibirá os dados do usuário atual.

Se desejar exibir dados de vários usuários em sua plataforma, você pode configurar esses elementos para o usuário da página atual. Abordamos isso com mais detalhes no guia abaixo.

Dentro do grupo repetidor nesta página, configuraremos este tipo de dados como playlists, com a fonte de dados sendo as playlists criadas pelos usuários atuais.

Por fim, criaremos um workflow de navegação adicional quando o título de uma playlist for clicado no grupo repetidor. Este evento irá direcionar o usuário à nossa página da playlist individual para mostrar uma lista de todas as músicas dentro desta playlist.

Exibindo músicas em uma playlist

Em nossa página de playlist, primeiro atualizaremos o tipo da página como playlist.

A seguir, configuraremos nosso grupo repetidor para exibir uma lista de músicas. Desta vez, vamos atualizar a fonte de dados para pesquisar apenas as músicas que foram adicionadas à playlist de nossa página atual (Current Page Playlist).

Para começar a tocar uma música, basta criar outro workflow de navegação, enviando o usuário para nossa página de reprodução, incluindo com ele a música da célula atual.

Criando novos recursos para seu app de streaming

Agora que você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, pode criar novas experiências em seu aplicativo tipo Spotify no code.

Adicionalmente, você pode:

• Permitir que os artistas categorizem as músicas em álbuns
• Criar recursos de navegação e reprodução mais ricos
• Adicionar uma função de pesquisa para procurar músicas – abordamos isso com mais detalhes em nosso guia Como criar um site tipo Amazon.

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-spotify-clone-no-code/