EDUARDO MOZART DE OLIVEIRA
MUSIC CENTER
Divulgação do trabalho musical na web
Novo Hamburgo
2022
RESUMO
O Music Center é um projeto que busca trazer reconhecimento para
músicos iniciantes. Através de um site simples e objetivo, o músico pode divulgar
seu trabalho através de vídeos, interagir com outros músicos e obter patrocínios
de empresas cadastradas que procuram artistas para divulgação de sua marca
e produtos comercializados por elas.
Palavras-chave: 1. Música. 2. Rede social. 3. Desenvolvimento Web.
ABSTRACT
Music Center is a project that aims to bring acknowledgment to musicians
beginning career. Using a simple and objective website, musicians can publish
their work using videos, interact with others musicians and get sponsorship from
registered companies that are looking for artists to spread their brand and
products that are sold by them.
Keywords: 1. Music. 2. Social network. 3. Web development.
LISTA DE ILUSTRAÇÕES
Figura 1: Diagrama de Casos de Uso
Figura 2: Página de Cadastro (PI001)
Figura 3: Página de Login (PI002)
Figura 4: Página para Envio de Vídeo (PI003)
Figura 5: Página para Administração de Vídeos (PI004)
Figura 6: Página para Edição de Informações do Vídeo (PI005)
Figura 7: Página de Exibição do Vídeo (PI006)
Figura 8: Diagrama de Atividade – Administrar Vídeo (UC004)
Figura 9: Diagrama de Classes
Figura 10: Diagrama do Banco de Dados – Music Center
Figura 11: Página inicial do projeto (antes e depois)
Figura 12: Página de cadastro (antes e depois)
LISTA DE ACRÔNIMOS
SQL Structured Query Language (Linguagem de Consulta Estruturada)
JSON JavaScript Object Notation
HTTP Hypertext Transfer Protocol
HTML HyperText Markup Language (Linguagem de Marcação de Hipertexto)
CSS Cascading Style Sheets
PHP Hypertext Preprocessor
IDE Integrated Development Environment (Ambiente Integrado de
Desenvolvimento)
SUMÁRIO
1
DESENVOLVIMENTO ................................................................................ 7
1.1
LEVANTAMENTO DE REQUISITOS .................................................... 7
1.1.1
Requisitos funcionais .................................................................. 7
1.1.2
Requisitos não funcionais ........................................................... 8
1.2
DIAGRAMA DE CASOS DE USO ......................................................... 8
1.3
ESPECIFICAÇÃO DOS CASOS DE USO ............................................ 9
1.4
DIAGRAMA DE ATIVIDADES ............................................................. 21
1.5
DIAGRAMA DE CLASSES .................................................................. 22
1.6
BANCO DE DADOS ............................................................................ 25
1.6.1
Visão geral das tabelas .............................................................. 26
APÊNDICES .................................................................................................... 27
APÊNDICE A: MODELO DE ENTREVISTA ................................................. 27
APÊNDICE B: TERMO DE AUTORIZAÇÃO DO USO DE IMAGEM ............ 28
1
DESENVOLVIMENTO
No desenvolvimento, será apresentado o levantamento de requisitos
funcionais e não funcionais do projeto. Em seguida, serão demonstrados os
casos de uso, diagrama de classes e atividades e o modelo de banco de dados.
1.1
LEVANTAMENTO DE REQUISITOS
Anteriormente ao desenvolvimento do código realizamos, através da
análise das entrevistas com músicos e empresários, o levantamento de
requisitos do site. Através dele, obtivemos informações a cerca de
funcionalidades que precisariam ser desenvolvidas para o projeto.
1.1.1 Requisitos funcionais
RF01 – O Sistema deverá conter um Cadastro de Artistas, Empresas e
Fãs.
RF02 – O Sistema deverá possuir uma página administrativa para
Artistas, Empresas e Fãs.
RF03 – O Sistema deverá permitir o envio de vídeos por parte dos Artistas.
RF04 – O Sistema deverá permitir a administração de vídeos enviados
pelos Artistas.
RF05 – O Sistema deverá permitir as empresas contatar os Artistas que
enviaram o vídeo.
RF06 – O Sistema deverá permitir aos fãs seguirem seus artistas
preferidos.
RF07 – O Sistema deverá permitir a busca por vídeos através de critérios
de buscas (filtros) específicos.
RF08 – O Sistema deverá permitir comentários em vídeos por Artistas,
Empresas e Fãs.
1.1.2 Requisitos não funcionais
RNF01 – O Servidor de hospedagem deverá possuir um sistema de
Bandwidth (Largura de Banda) ilimitado.
RNF02 – O Servidor de hospedagem deverá possuir espaço em disco
suficiente para armazenar vídeos em Alta Definição (HD).
1.2
DIAGRAMA DE CASOS DE USO
Conforme Sommerville (2003), “os diagramas de casos de uso são
considerados fundamentais na modelagem de sistemas, pois identificam as
interações necessárias, descobertas durante o levantamento de requisitos.
Nesse diagrama, os usuários são representados por atores (stickman); os casos
de uso (ações) são representados por elipses; e as interações entre os atores e
os casos de uso são representadas por uma linha contínua”.
Figura 1: Diagrama de Casos de Uso
Fonte: Elaborado pelo autor
1.3
ESPECIFICAÇÃO DOS CASOS DE USO
Nome do Caso de Uso: UC001 – Efetuar Cadastro
Ator(es) Envolvido(s): Artistas, Empresas e Fãs.
Prioridade: Normal
Pré-Condições:
- A Empresa deve possuir CNPJ válido.
- A Empresa deve atuar no ramo musical.
Pós Condições:
- Não se aplicam.
Fluxo Normal:
FN01 – Usuário acessa opção “Cadastrar”
FN02 – Sistema exibe PI001
Figura 2: Página de Cadastro (PI001)
Fonte: Elaborado pelo autor
FN03 – Usuário informa dados do Cadastro
FN04 – Usuário envia formulário
Fluxo alternativo
- Não se aplica.
Pontos de Extensão
- Não se aplica.
Pontos de inclusão
- Não se aplica.
Nome do Caso de Uso: UC002 – Administrar Perfil
Ator(es) Envolvido(s): Artistas, Empresas e Fãs.
Prioridade: Normal
Pré-Condições:
- O usuário deve possuir cadastro no site.
- O usuário deve estar com login efetuado no site.
Pós Condições:
- Não se aplicam.
Fluxo Normal:
FN01 – Usuário acessa opção “Login”
FN02 – Sistema exibe PI002
Figura 3: Página de Login (PI002)
Fonte: Elaborado pelo autor
FN03 – Usuário informa dados do Login
FN04 – Usuário envia formulário
Fluxo alternativo
- Não se aplica.
Pontos de Extensão
- Não se aplica.
Pontos de inclusão
- Não se aplica.
Nome do Caso de Uso: UC003 – Enviar vídeo
Ator(es) Envolvido(s): Artistas.
Prioridade: Normal
Pré-Condições:
- O usuário deve possuir cadastro no site.
- O usuário deve estar com login efetuado no site.
Pós Condições:
- Não se aplicam.
Fluxo Normal:
FN01 – Usuário acessa opção “Enviar vídeo”
FN02 – Sistema exibe PI003
Figura 4: Página para Envio de Vídeo (PI003)
Fonte: Elaborado pelo autor
FN03 – Usuário envia o arquivo de vídeo através do formulário
Fluxo alternativo
- Não se aplica.
Pontos de Extensão
- Não se aplica.
Pontos de inclusão
- UC004 – Administrar vídeo
Nome do Caso de Uso: UC004 – Administrar vídeo
Ator(es) Envolvido(s): Artistas.
Prioridade: Normal
Pré-Condições:
- O usuário deve possuir cadastro no site.
- O usuário deve estar com login efetuado no site.
Pós Condições:
- Não se aplicam.
Fluxo Normal:
FN01 – Usuário acessa a página inicial
FN02 – Sistema exibe PI004
Figura 5: Página para Administração de Vídeos (PI004)
Fonte: Elaborado pelo autor
FN03 – Usuário clica no botão “Administrar vídeos”
FN04 – Usuário seleciona vídeo para edição
FN05 – Sistema exibe PI005
Figura 6: Página para Edição de Informações do Vídeo (PI005)
Fonte: Elaborado pelo autor
FN06 – Usuário atualiza dados do vídeo
FN07 – Usuário envia formulário
Fluxo alternativo
- Não se aplica.
Pontos de Extensão
- Não se aplica.
Pontos de inclusão
- Não se aplica.
Nome do Caso de Uso: UC005 – Contatar Artista
Ator(es) Envolvido(s): Empresas.
Prioridade: Normal
Pré-Condições:
- O usuário deve possuir cadastro no site.
- O usuário deve estar com login efetuado no site.
Pós Condições:
- Não se aplicam.
Fluxo Normal:
FN01 – Usuário abre a página de exibição do vídeo
FN02 – Sistema exibe PI006
Figura 7: Página de Exibição do Vídeo (PI006)
Fonte: Elaborado pelo autor
FN03 – Usuário clica no botão “Contatar artista”
FN04 – Usuário escreve mensagem destinada ao artista
FN05 – Usuário confirma envio do formulário
Fluxo alternativo
- Não se aplica.
Pontos de Extensão
- Não se aplica.
Pontos de inclusão
- Não se aplica.
Nome do Caso de Uso: UC006 – Seguir Artista
Ator(es) Envolvido(s): Fã.
Prioridade: Normal
Pré-Condições:
- O usuário deve possuir cadastro no site.
- O usuário deve estar com login efetuado no site.
Pós Condições:
- Não se aplicam.
Fluxo Normal:
FN01 – Usuário abre a página de exibição do vídeo
FN02 – Sistema exibe PI006
FN03 – Usuário clica no botão “Seguir artista”
Fluxo alternativo
- Não se aplica.
Pontos de Extensão
- Não se aplica.
Pontos de inclusão
- Não se aplica.
Nome do Caso de Uso: UC007 – Procurar vídeos
Ator(es) Envolvido(s): Artistas, Empresas e Fãs.
Prioridade: Normal
Pré-Condições:
- Não se aplicam.
Pós Condições:
- Não se aplicam.
Fluxo Normal:
FN01 – Usuário clica no campo de texto “Procurar” no topo da página.
FN02 – Usuário digita palavras-chave para realização da pesquisa.
FN03 – Usuário confirma a ação pressionando [ENTER] ou clicando na
imagem da lupa.
Fluxo alternativo
- Não se aplica.
Pontos de Extensão
- Não se aplica.
Pontos de inclusão
- Não se aplica.
Nome do Caso de Uso: UC008 – Comentar Vídeo
Ator(es) Envolvido(s): Artistas, Empresas e Fãs.
Prioridade: Normal
Pré-Condições:
- O usuário deve possuir cadastro no site.
- O usuário deve estar com login efetuado no site.
Pós Condições:
- Não se aplicam.
Fluxo Normal:
FN01 – Usuário abre a página de exibição do vídeo
FN02 – Sistema exibe PI006
FN03 – Usuário clica na caixa de texto “Comentar”
FN03 – Usuário escreve comentário sobre o vídeo
FN04 – Usuário confirma envio do formulário
Fluxo alternativo
- Não se aplica.
Pontos de Extensão
- Não se aplica.
Pontos de inclusão
- Não se aplica.
1.4
DIAGRAMA DE ATIVIDADES
Conforme Silva (2008), o diagrama de atividades possui como objetivo
modelar um processo. Ele é essencialmente um gráfico de fluxo, mostrando o
fluxo de uma atividade para outra. Ele permite que decisões sejam tomadas
durante o fluxo, determinando qual caminho seguir. Uma atividade somente pode
ser iniciada após a execução de todas as atividades que desemboquem nela.
Figura 8: Diagrama de Atividade – Administrar Vídeo (UC004)
Fonte: Elaborado pelo autor
Quando o usuário envia um vídeo para o site é realizada uma validação
do arquivo (para verificar se ele está dentro das extensões e tamanho de vídeo
suportado).
Com a validação do envio do vídeo para o site, o usuário é redirecionado
para a página de administração do mesmo. Nela, o usuário deve adicionar
informações sobre o vídeo (título, data, categoria e descrição). Após a digitação
dos dados, é realizada uma validação dos mesmos para verificar se a data foi
informada e é válida, se o título foi informado e se uma ou mais categorias foram
selecionadas (a descrição do vídeo é um atributo opcional). Caso o sistema
identifique problemas nos dados informados, oferece ao usuário a possibilidade
de voltar a página anterior e corrigir a informação digitada incorretamente. Caso
o usuário desista de adicionar o vídeo, o vídeo é excluído do servidor.
Após adicionar um vídeo ao site, o usuário pode editar as informações
dele a qualquer momento. Ao editar as informações de um vídeo, o sistema
recupera do banco de dados às informações atuais e, á partir deste ponto, o
processo de edição das informações do vídeo segue as mesmas etapas
realizadas quando o usuário adicionou as mesmas pela primeira vez.
Ao excluir um vídeo do sistema, o usuário recebe uma mensagem pedindo
para confirmar a ação. Após a confirmação, o vídeo é removido do servidor.
1.5
DIAGRAMA DE CLASSES
De acordo com Oliveira (2008), uma classe é um conjunto de objetos. Um
objeto é o conjunto de atributos e métodos. Atributos são as características de
um objeto, e métodos são as habilidades atribuídas a ele. Por exemplo: Bidu é
um objeto da classe Cachorro, portanto tem habilidade para latir, implementada
através do método de um latido. Normalmente, uma classe possui diversos
métodos, que no caso da classe Cachorro poderiam ser sente, coma e morda.
Bidu possui características (atributos) comuns a todos os cachorros, como nome,
cor, raça.
Figura 9: Modelo de Diagrama de Classes
Fonte: Elaborado pelo autor.
Conforme Oliveira (2008), as classes colaboram uma com as outras
internamente para produzir os resultados esperados pelos atores, e o diagrama
de classes apresenta a responsabilidade de cada classe na realização desta
tarefa.
Abaixo será apresentado o diagrama de classes do projeto Music Center.
Figura 10: Diagrama de Classes
Fonte: Elaborado pelo autor.
Uma
pessoa
pertence
a
uma
cidade,
e
uma
cidade
deve,
obrigatoriamente, pertencer a um estado. Uma pessoa pode cadastrar-se ou
alterar informações do seu cadastro no site.
Várias pessoas podem enviar um ou mais vídeos para o site.
Um vídeo deve possuir uma ou mais categorias. Várias categorias podem
ser atribuídas a um vídeo. Um vídeo pode ser adicionado, editado ou removido
pelo usuário que o enviou.
Uma pessoa pode adicionar um ou mais comentários em um vídeo.
1.6
BANCO DE DADOS
Os diagramas abaixo mostram uma visão geral do banco de dados do
Music Center e as relações entre as tabelas criadas durante o desenvolvimento
do projeto. Abaixo incluímos detalhes adicionais sobre as tabelas e colunas.
Figura 11: Diagrama do Banco de Dados – Music Center
Fonte: Elaborado pelo autor
1.6.1 Visão geral das tabelas
Esta seção é uma visão geral de todas as tabelas criadas durante o
desenvolvimento do Music Center. Nela acompanham informações específicas
dos dados armazenados em cada tabela.
Tabela 2: Visão geral das tabelas do Banco de Dados
Tabelas do Music Center (8)
Nome da tabela
Descrição
Área relevante do Painel do
Music Center
Pessoas
Lista de usuários cadastrados no site.
PessoaFis
Pessoas são classificadas de acordo
com sua personalidade de direito (Física
Administração > Usuários
ou Jurídica).
PessoaJur
Estados
Cada cidade e estado de municípios
brasileiros são armazenados em suas
Cidades
Videos
respectivas tabelas.
Os vídeos enviados através do
formulário de upload são referenciados
Administração > Vídeos
na tabela Videos.
Categorias
As categorias para vídeos são
armazenadas na tabela Categorias.
Comentarios
Os comentários realizados em vídeos
no site são armazenados na tabela
Comentarios.
Fonte: Desenvolvida pelo autor
‘
Administração > Categorias
Administração > Comentários
APÊNDICES
APÊNDICE A: MODELO DE ENTREVISTA
Entrevista Para o Projeto Music Center
O Projeto “Music Center” foi desenvolvido com intuito de criar um espaço
onde o músico possa mostrar seu trabalho diretamente para empresas, tendo
assim, maiores chances de obter apoio, sejam eles lojas de música,
distribuidores ou diretamente das marcas. Este espaço é uma espécie de
“YouTube” focado na música. Neste espaço o artista pode adicionar seus vídeos
e criar um perfil. As empresas podem acompanhar artistas, analisando seus
vídeos e popularidade. O site possui ainda um espaço para fãs. Eles, por sua
vez, podem visualizar vídeos de artistas e, se for de interesse, ser fã do músico.
O projeto tem a intenção de trazer visibilidade aos músicos e melhorar o cenário
musical brasileiro.
Nome:
( ) Empresa ( ) Músico ( ) Ambos
1. Como você vê a relação entre patrocínio e patrocinado no Brasil?
2. O que você achou da ideia do Music Center?
3. Você acha que o Music Center pode facilitar o apoio aos músicos?
4. Você participaria deste site?
APÊNDICE B: TERMO DE AUTORIZAÇÃO DO USO DE IMAGEM
Termo de Autorização do Uso de Imagem
ADULTO
Neste ato, _____________, nacionalidade _____________, residente à
_________________,
nº.
________,
municipio
de
_________________/
____________________ AUTORIZO o uso de minha imagem em todo e qualquer
material entre fotos e documentos, para ser utilizada em trabalhos e pesquisas nos Cursos
Técnicos da Intituição Evangélica de Novo Hamburgo com sede na rua Frederico Mentz,
526, Hamburgo Velho - Novo Hamburgo/ RS, sejam essas destinadas à divulgação ao
público em geral. A presente autorização é concedida a título gratuito, abrangendo o uso
da imagem acima mencionada em todo território nacional e no exterior, das seguintes
formas: (I) out-door; (II) busdoor; folhetos em geral (encartes, mala direta, catálogo, etc.);
(III) folder de apresentação; (IV) anúncios em revistas e jornais em geral; (V) home page;
(VI) cartazes; (VII) back-light; (VIII) mídia eletrônica (painéis, vídeo-tapes, televisão,
cinema, programa para rádio, entre outros). Por esta ser a expressão da minha vontade
declaro que autorizo o uso acima descrito sem que nada haja a ser reclamado a título de
direitos conexos à minha imagem ou a qualquer outro, e assino a presente autorização em
02 vias de igual teor e forma.
______________________, dia _____ de ______________ de ___________.
(assinatura)