ESCOLA TÉCNICA ESTADUAL MONTEIRO LOBATO

R. Guilherme Lahm, 1778 - Jardim do Prado Curso Técnico em Informática

Taquara, RS, CEP 95600-000 Integrado ao Ensino Médio

TuneTalk:

Site para divulgação de artistas por meio de uma comunidade ativa

Cauã Rodrigues de Vargas¹

Lucas de Souza Meregali²

RESUMO
O presente artigo visa relatar o desenvolvimento de uma rede social para a
divulgação de opiniões de músicas e álbum por meio de uma comunidade ativa. O
objetivo do projeto consiste em auxiliar artistas pequenos que estão começando e
também os artistas que tiveram seu legado esquecido presentemente, a fim de que
todos os artistas tenham o devido reconhecimento pelos seus trabalhos de
qualidade que acabam se perdendo, pois não são devidamente abordados e
compartilhados pelas pessoas, pela falta de um ambiente que providencia isso.
Durante o desenvolvimento deste projeto foram feitas pesquisas para saber se
realmente existia a falta desse ambiente e se as pessoas utilizariam se esse
ambiente fosse fornecido a elas, com o propósito de saber se esse site seria
realmente útil para os usuários que quisessem utilizá-lo. Logo percebe-se que sim,
os usuários gostariam de utilizar o site e consideram interessante a ideia de poder
compartilhar e debater sobre músicas e álbuns que os interesse, ou novas
descobertas musicais feitas.

Palavras-chave: rede social, debate, opinião 1

INTRODUÇÃO

Com o fenômeno conhecido como “globalização” o acesso das pessoas a

tecnologia, internet, informações e a possibilidade de comunicação com mais gente
fizeram surgir vários nichos dentro e fora da internet, como afirma Amaral (2010):

Devido ao intenso crescimento e popularização dos sites de redes sociais,

uma das tendências de apropriação foi a segmentação em nichos de “gosto”
e estilos de vida, como redes de relacionamentos voltadas a animais

1
Estudante — Escola Técnica Estadual Monteiro Lobato. Titulação. E-mail: lucas.smeregalli@gmail.com.
² Estudante — Escola Técnica Estadual Monteiro Lobato. Titulação. E-mail: caua-rvargas@gmail.com
 domésticos (como o Orkupet), moda (MySpace Fashion), atuações
profissionais (por exemplo, o Linkedin) e de música, entre outros.

Uma das maneiras que as pessoas acharam para compartilhar seus

interesses musicais foi inicialmente por sites como o Last.FM, que funcionava como
um rádio virtual onde o foco principal era mostrar os artistas e músicas favoritas do
usuário, uma vez que seu perfil fosse construído pelo próprio site o usuário poderia
entrar em comunidades que tivessem o mesmo interesse que ele. Ou também o
soundcloud que era uma comunidade onde músicos profissionais ou não postavam
seus trabalhos para que os outros usuários pudessem escutar, a ideia era músicos
colaborarem entre si, mas acabou tornando-se um centro de ouvintes. Porem com o
tempo esses sites foram decaindo e atualmente a fama dos artistas vinha não pelo
seu trabalho de qualidade, mas por outros motivos como afirma Abeche, Daniel
Pala(2012):

Deve-se frisar que essa “seleção” de artistas não era baseada em

qualidade, inovação ou mérito, necessariamente, mas principalmente nas
especificidades anteriormente decididas em salas de reunião de
determinados grupos empresariais.

O que prova que artistas, com grande potencial para crescerem, acabam
perdendo essa chance para outros artistas que tem mais relações de poder e por fim
sendo decididos pela indústria, o que é desleal, pois os quesitos são
preestabelecidos por empresários de grandes corporações visando apenas lucros
seguindo as sentenças do capitalismo, fazendo assim com que a minoria
selecionada tenha toda atenção, enquanto a grande maioria acaba por se perder e
não tendo tantas chances de sucesso desistem do seu sonho. Mas com uma rede
social que permite o compartilhamento esses artistas podem receber o
reconhecimento merecido do modo que aconteceu com a compositora Mallu
Magalhães, como declara Lima, Tatiana Rodrigues(2011):

A visibilidade obtida pela jovem compositora e intérprete brasileira Mallu

Magalhães, que disponibilizou quatro canções em um perfil musical na rede
social MySpace2 e obteve em sua página 1,9 milhão de visitas em menos
de seis meses (dados de 2007), é um exemplo dos trânsitos da música nas
fronteiras entre o consumo de nicho e massivo, mediante o uso de
plataformas digitais

Portanto, o atual projeto visou desenvolver um site que concedesse essa

visibilidade dada a compositora Mallu Magalhães, a outros compositores ou músicos
que tivessem suas obras citadas por algum usuário, fazendo assim com que a
maioria dos artistas tivesse o reconhecimento merecido, ou pelo menos a chance de
te-lo, não pelas relações de poder, nem pelas grandes corporações, mas sim por
mérito próprio, por produzir músicas com qualidade e letras cativantes, que
deixassem o usuário com vontade de mostrar para o mundo sua opinião sobre a
música.
 O desenvolvimento desse site foi concluído e disponibilizado na internet para
qualquer pessoa poder criar uma conta e fazer a música ou artista que adora ser
reconhecido por outras pessoas.

4 METODOLOGIA

Foi utilizado para o desenvolvimento do presente projeto uma metodologia

quali-quantitativa, sendo feitas consultas bibliográficas e também questionários para
coleta e análise de dados dos possíveis usuários. A metodologia de
desenvolvimento utilizada foi a incremental, aonde o produto final é construído
progressivamente, esta é uma metodologia flexível com base em pequenos
incrementos constantes, aonde sempre que possível era postada uma nova
funcionalidade, onde tinham feedbacks constantes.

Figura 01 — Modelo da metodologia incremental

Fonte:<https://miro.medium.com/v2/resize:fit:720/format:webp/1*
XysBNgtzZzOkFzSQw_pVXQ.png>, 2023
 Para auxiliar no funcionamento desta metodologia foi utilizado o quadro
kanban através da ferramenta trello. Onde era possível acompanhar as tarefas a
serem realizadas no projeto.
Figura 02 — Quadro kanban feito no trello

Fonte: Autoria própria, 2023

4.1 Formulários

Para coletar opiniões dos possíveis usuários foi disponibilizado um formulário

que obteve 20 respostas ao total.

Gráfico 01: Referente ao costume de escutar música

Fonte: Google Formulários, 2023

Analisando os resultados apresentados, conclui-se que a grande maioria (90%) dos
usuários tem, sim, o costume de escutar música.

Gráfico 02: Referente ao costume de debater sobre músicas

Fonte: Google Formulários, 2023

Observa-se através do resultado obtido que, a maioria dos usuários (80%)

que responderam tem, sim, o costume de debater sobre músicas e álbum que
gostam.
Gráfico 03: Referente a vontade de debater

Fonte: Google Formulários, 2023

Percebe-se que a maioria tem vontade de debater sobre as músicas e debate
ativamente.
 Gráfico 04: Referente a utilização do local para debate

Fonte: Google Formulários, 2023

Nota-se que a grande maioria gostaria de experimentar um ambiente que

possibilitasse esse tipo de debate, deixando assim evidente a que seria possível o
funcionamento do projeto.

4.3 Ferramentas

Durante o desenvolvimento do projeto foram aplicadas diversas ferramentas que

executaram atividades de suma importância para ser possível sua conclusão.

4.3.1 Figma

O Figma é uma plataforma de design colaborativo online que permite que

equipes trabalhem simultaneamente em projetos de design de interfaces de usuário
(UI) e experiência do usuário (UX). Sua abordagem baseada na nuvem possibilita a
edição em tempo real, prototipagem interativa e compartilhamento fácil, facilitando a
colaboração entre designers, desenvolvedores e stakeholders. A acessibilidade a
partir de diferentes dispositivos e a eliminação da necessidade de instalação de
software tornam o Figma uma ferramenta eficiente e flexível para equipes de design
em ambientes distribuídos.

4.3.2 MySQL Workbench

 O MySQL Workbench é uma ferramenta gráfica de design e administração
para o sistema de gerenciamento de banco de dados MySQL. Desenvolvido pela
Oracle, o MySQL Workbench oferece uma interface visual que simplifica o
desenvolvimento, modelagem, manutenção e administração de bancos de dados
MySQL.

4.3.3 Xampp

O XAMPP, desenvolvido pela Apache Friends, é uma ferramenta eficiente e

acessível que simplifica a criação de um ambiente de desenvolvimento web local. Ao
incluir componentes essenciais como Apache, MySQL, PHP e Perl, proporciona aos
desenvolvedores uma solução completa e pronta para uso. Sua instalação
descomplicada e configuração intuitiva tornam o XAMPP uma escolha popular para
aqueles que buscam criar e testar aplicações web em um ambiente controlado. Essa
versatilidade e facilidade de uso fazem do XAMPP uma ferramenta indispensável
para o desenvolvimento e teste de projetos web antes da implementação em
ambientes online.

4.3.4 Visual Studio Code

O Visual Studio Code é um ambiente de desenvolvimento integrado (IDE) leve

e gratuito, desenvolvido pela Microsoft. Ele é projetado para ser uma ferramenta
extensível e altamente personalizável, adequada para uma variedade de linguagens
de programação.

4.3.5 Git

O Git é um sistema de controle de versão distribuído amplamente utilizado

para rastrear alterações em projetos de software. Ele permite que vários
colaboradores trabalhem em um mesmo projeto, gerenciando e registrando as
modificações feitas nos arquivos.

4.3.6 GitLens
 O GitLens é uma extensão para o Visual Studio Code, uma ferramenta de
controle de versão Git. Ele fornece recursos adicionais e aprimoramentos visuais
para facilitar a navegação e compreensão do histórico de um repositório Git
diretamente no ambiente de desenvolvimento.

4.3.7 Github

O GitHub é uma plataforma de hospedagem e colaboração para projetos de

desenvolvimento de software que utilizam o sistema de controle de versão Git. Ele
fornece um ambiente centralizado na web onde os desenvolvedores podem
armazenar, compartilhar, colaborar e gerenciar as versões de seus códigos-fonte.

4.4 Tecnologias

No decorrer do projeto diversas tecnologias foram utilizadas, todas tendo

suas funções especificas e essenciais para cada etapa

4.4.1 CSS

O CSS, ou Cascading Style Sheets, é uma linguagem fundamental, sendo

responsável por definir o estilo e a apresentação visual de documentos HTML e XML.
Ao permitir controle nos aspectos como layout, cores, fontes e espaçamento, o CSS
desempenha um papel crucial na criação de interfaces atraentes e responsivas para
diferentes dispositivos. Sua abordagem baseada em regras e seletores simplifica a
aplicação de estilos de maneira consistente e eficiente, promovendo a manutenção
fácil e a adaptabilidade a diversos contextos.

4.4.2 JavaScript

O JavaScript é uma linguagem de programação de alto nível, focada no

desenvolvimento web, que proporciona interatividade dinâmica às páginas.
Executado no navegador do usuário, o JavaScript é fundamental para a
manipulação dinâmica do conteúdo HTML, interação com o usuário e realização de
chamadas a servidores.
4.4.3 Express

Express é um framework web para Node.js, um ambiente de execução

JavaScript do lado do servidor. Ele simplifica o desenvolvimento de aplicativos web
em Node.js, fornecendo uma camada abstrata sobre o HTTP e oferecendo diversas
funcionalidades para a construção de APIs e aplicações web.

4.4.4 MySQL

O MySQL é um sistema de gerenciamento de banco de dados relacional de

código aberto, conhecido por sua confiabilidade e desempenho. Ele utiliza a
linguagem SQL para definir, manipular e consultar dados, seguindo o modelo
relacional. Os dados são organizados em tabelas, e o MySQL suporta a criação de
índices para otimizar consultas. É amplamente utilizado por desenvolvedores e
organizações para armazenar e gerenciar dados.

4.4.5 Node.js

Node.js é um ambiente de execução de JavaScript do lado do servidor que

utiliza o motor V8 do Google Chrome. Que, na prática, se reflete na possibilidade de
criar aplicações standalone (autossuficientes) em uma máquina servidora, sem a
necessidade do navegador. O Node.js facilita a manipulação de operações
intensivas de entrada/saída e utiliza o NPM para gerenciamento de pacotes.

4.4.6 Ejs

EJS (Embedded JavaScript) é um mecanismo de modelo para JavaScript que

permite a incorporação de código JavaScript em documentos HTML. Utilizado em
conjunto com Node.js para criar páginas da web dinâmicas. Com a sintaxe simples
para incorporar código e inserir resultados diretamente no HTML, o EJS facilita a
criação de modelos dinâmicos, nos quais dados podem ser injetados durante a
renderização.

4.4.7 Cloudinary
 Cloudinary é um serviço em nuvem para gerenciamento de ativos de mídia,
especialmente imagens e vídeos. Oferece recursos para upload, armazenamento,
manipulação e entrega eficiente de mídia em ambientes web. O Cloudinary realiza
operações como redimensionamento, corte, otimização e manipulação de imagens,
além de fornecer entrega rápida e segura de ativos multimídia.

4.4.8 Multer

Multer é uma biblioteca middleware para Node.js, utilizada para lidar com o
upload de arquivos em aplicações web. Ele simplifica o processo de recebimento de
dados de formulários que incluem arquivos, permitindo o fácil manuseio e
armazenamento desses arquivos no servidor. Multer é flexível e oferece opções
configuráveis, como o destino do armazenamento dos arquivos, nomeação, e
filtragem de tipos de arquivos permitidos, proporcionando uma solução conveniente
para gerenciar uploads eficazmente em aplicações web.

4.5 Desenvolvimento

A fase de desenvolvimento do site teve diversas etapas importantes para

chegar ao resultado.

4.5.1 Diagrama ER do Banco de dados

Com a ferramenta MySQL Workbench foi criado um diagrama ER, aonde nele
continha todas as tabelas que seriam utilizadas no banco de dados e seus
relacionamentos. Durante o desenvolvimento do projeto foram feitas alterações,
tabelas que estavam sobrando sem nenhum preenchimento foram deletadas,
tabelas tiveram suas colunas reformuladas conforme a necessidade.
 Figura 03 — diagrama ER inicial

Fonte: Autoria própria, 2023

Figura 04 - diagrama ER final

Fonte: Autoria própria, 2023

4.5.2 Prototipação de telas

 Figura 05 — Protótipo landing page

Fonte: Autoria própria, 2023

Figura 06 — Protótipo Tela de cadastro

Fonte: Autoria própria, 2023

Figura 07 — Protótipo Tela de login

Fonte: Autoria própria, 2023

Figura 08 — Protótipo Tela de perfil

Fonte: Autoria própria, 2023

4.5.3 Arquitetura MVC

Para o desenvolvimento deste projeto foi utilizado a arquitetura MVC

(Model-View-Controller) é um padrão de design de software que organiza uma
aplicação em três componentes principais para melhorar a modularidade e a
manutenção de código. Os três componentes principais são Model(modelo)
representa a camada de dados e lógica de negócios da aplicação. É aqui onde é
gerenciado o acesso e a manipulação dos dados, garantindo consistência e
integridade. O modelo notifica a View sobre as alterações nos dados. View(visão) é
responsável pela apresentação e exibição dos dados. A view recebe os dados do
Modelo e os renderiza para o usuário poder interagir. Ela também envia as ações do
usuário de volta ao controlador. Controller(controlador) atua como intermediário
entre o Modelo e a View, recebendo entradas do usuário da view, processa essas
entradas e atualiza o model conforme o necessário. Ele também envia atualizações
para a view que reflete as alterações na interface do usuário

Figura 09 — Arquitetura no visual studio code

Fonte: Autoria própria, 2023

4.5.4 Api do spotify

Para o desenvolvimento de uma rede social sobre música, viu-se necessário

consumir uma api que liberasse um banco de dados imenso com uma infinidade de
músicas, artistas, álbuns, para conseguir consumir essa api foi necessário criar uma
conta de desenvolvedor no spotify, colocar as rotas que seriam usadas de callback
para a confirmação do usuário.

Figura 10 — Tela api spotify

Fonte: Autoria própria, 2023

5 RESULTADOS OBTIDOS

A rede social desenvolvida tem como finalidade permitir que o usuário crie
uma conta, conecte essa conta com a conta do spotify e poste suas opiniões sobre
suas músicas e álbuns favoritos.
Na área de cadastro é feito o cadastro do usuário, com nome, e-mail, senha e
foto de perfil
 Figura 11 — Tela de cadastro de usuário

Fonte: Autoria própria, 2023

Nesta tela é listado os posts que aparecem para o usuário

Figura 12 — Tela de foryou

Fonte: Autoria própria, 2023

Ao entrar no post do usuário é possível comentar e interagir, fazendo assim existir
um debate.
 Figura 13 — Tela de Post

Fonte: Autoria própria, 2023

Nesta tela o usuário faz a pesquisa da música desejada por um popup com
uma search-bar, após selecionar a música ou álbum, mostra essa tela

Figura 14 — Tela de post

Fonte: Autoria própria, 2023

Nesta tela é mostrado o perfil do usuário logado

 Figura 15 — Tela de perfil do usuário

Fonte: Autoria própria, 2023

A partir desta tela é possível alterar os dados do usuário como a bio, a foto de
perfil e o nome do usuário.

Figura 16 — Tela de edição do perfil do usuário

Fonte: Autoria própria, 2023

6 CONSIDERAÇÕES FINAIS
 Após serem analisados os dados obtidos com a conclusão do projeto,
pode-se afirmar que foi desenvolvido um site aonde é possível postar opiniões de
músicas, interagir com outros usuários e debater. E também que essa comunidade
se for populada com um número maior de usuários pode, sim, servir de meio de
divulgação para os artistas.
Portanto, o projeto concluiu as metas propostas, no período determinado.

REFERÊNCIAS

ABECHE, D. P. de Comunicação e consumo de música no ciberespaço: o papel

do usuário de redes sociais na distribuição e compartilhamento de músicas.
Disponível em: <https://repositorio.pucsp.br/jspui/handle/handle/4450> Acesso em:
13 nov. 2023.

AMARAL, A. de Redes sociais de música: segmentação, apropriações e

práticas de consumo. Disponível em:
<http://comciencia.scielo.br/scielo.php?script=sci_arttext&pid=S1519-765420100007
00009&lng=e&nrm=iso> Acesso em: 13 nov. 2023.

LIMA, T. R. de Redes sociais e circulação musical. Disponível em:

<https://www.academia.edu/download/34475459/Redes-Sociais-e-Circulacao-Musica
l-LIMA-Tatiana.pdf> Acesso em: 13 nov. 2023