lyrics finder
1.0.0
Brief - para criar um aplicativo de uma única página que depende muito de uma ou mais APIs.
A API que escolhi usar é o catálogo de letras de músicas de Musixmatch, localizado em https://www.musixmatch.com/
Os usuários que desejam procurar a letra de uma música específica podem fazê -lo usando o Lyric Finder.
O usuário pode pesquisar por artista ou por música e retornou uma lista de resultados através da qual eles podem navegar para encontrar a letra da música que estão procurando.
A página agora está ao vivo em https://hfolcot.github.io/lyrics-finder/
Observe que as letras não estão impressas na íntegra devido ao licenciamento
A página usa o Bootstrap 4.0.0 e utiliza seu sistema de grade e outro estilo.
A página usa as fontes Nunito Sans e Corben do Google Fontes e também ícones da Fontawesome.
Meu próprio estilo foi feito em ativos/css/main.csss
O script faz uso do jQuery 3.3.1.
A API usada é https://api.musixmatch.com/ws/1.1. Os dados retornados estão no formato JSONP e, portanto, uma solicitação de Ajax jQuery foi obrigada a obter os dados.
Estes são os cada um dos estágios em que o aplicativo pode estar - os seguintes números serão usados para descrever em que [estágio] cada função é usada e para qual estágio ele leva.
Também existe uma funcionalidade em cada estágio para voltar para a página anterior, através do botão Clear Results ou um botão Voltar.
Existem sete funções principais usadas no Lyric Finder:
Esta função é invocada assim que o usuário clicar no botão de pesquisa. Ele verifica qual valor do botão de rádio é verificado e executa a função relevante com base nisso.
Esta função é invocada no início de todas as funções a seguir para limpar todos os dados que já podem estar no contêiner de resultados.
Esta função é invocada por checkRadio () se o botão de rádio da música foi verificado quando o usuário pesquisou. A função faz uma solicitação $ .ajax para https://api.musixmatch.com/ws/1.1/track.search com o valor que o usuário inseriu na caixa de pesquisa como o parâmetro Q_TRACK. Se a solicitação for bem -sucedida, será criado uma variável TrackResults, que contém a lista retornada de faixas. Estes são classificados pela popularidade do artista como baseados no sistema de classificações de Musixmatch. Então, para cada item desta lista, o nome e o artista são inseridos no contêiner de resultados em index.html, juntamente com um botão que oferece ao usuário a opção para visualizar a letra da música selecionada. Isso funciona passando o track_id como um parâmetro na função getlyrics () que é acionada no clique.
Esta função é invocada por checkRadio () se o botão de rádio do artista foi verificado quando o usuário pesquisou. A função faz uma solicitação $ .ajax para https://api.musixmatch.com/ws/1.1/artist.search com o valor que o usuário inseriu na caixa de pesquisa como um parâmetro para Q_artist.
Se a solicitação for bem -sucedida, é criado uma variável artistresults que contém a lista de artistas devolvidos. Eles são classificados pela popularidade, com base no sistema de classificações da Musixmatch. Então, para cada item desta lista, o artista é inserido no contêiner de resultados em index.html, juntamente com um botão que oferece ao usuário uma opção para visualizar os álbuns do artista selecionado. Isso funciona passando o artista_id como um parâmetro na função getalbumlist () que é acionada no clique.
Esta função funciona de maneira semelhante às duas funções anteriores. O Artist_Id é passado para a função getArtist () e isso é usado para obter os dados do álbum para esse artista. Em seguida, ele é impresso no elemento do contêiner como uma lista que contém o nome de cada álbum e um botão dando a opção de visualizar a lista de faixas desse álbum. Isso executará getTrackList () em clique e passará o album_id como um parâmetro nessa função.
O album_id é passado para esta função e usado para fazer uma solicitação para https://api.musixmatch.com/ws/1.1/album.tracks.get para a lista de faixas nesse álbum. Isso retornará a lista de faixas com a opção de visualizar a letra, novamente com um botão como no getTrack ().
Esta função é invocada quando qualquer botão dentro de uma lista de músicas é clicado. O ID da faixa da música selecionado é passado da função anterior. A função usa duas chamadas de Ajax separadas. O primeiro é usado para obter dados da faixa. Uma segunda chamada é feita para matther.lyrics.get para devolver a letra. Se não houver letras para retornar, uma mensagem de erro personalizada será exibida no elemento do contêiner.
O layout da página foi mantido muito básico para manter os métodos óbvios e simples. Uma imagem de fundo escura foi usada que é suave nos olhos e não chama a atenção do usuário. O esquema de cores tenta corresponder a essa imagem o máximo possível e foi criado com coolors.co. Os dados são retornados em uma tabela com cabeçalhos apropriados.
O código JavaScript foi executado no JSHint e não retornou erros. O HTML foi executado no validador de marcação W3C e não retornou erros. O CSS foi executado no validador W3C CSS e não retornou erros.
Durante os testes do usuário, observou -se que nem todas as músicas do banco de dados do MusixMatch têm letras e, portanto, um erro personalizado foi adicionado para aqueles que não têm uma tecla Lyrics_body dentro do resultado.
Os ativos/js/spec.js foram criados e executados para verificar a funcionalidade do resetPage (); Este teste foi bem -sucedido. Para garantir que o script de teste estivesse correto, a função foi editada para incluir o texto no contêiner de resultados, momento em que o teste falhou.
Durante os testes, houve uma questão interessante encontrada, onde nenhuma letra estava sendo devolvida para qualquer música que contenha marcas de cotação dupla ou única. Na investigação, parecia que a questão foi causada pela função tentando passar um nome de música em uma nova função (GetlyRics, renomeada durante esse processo para retornarlyrics), mas quando aspas estavam presentes no nome da música, estava lendo isso como o fim do parâmetro e erro porque não havia parênteses de fechamento. Isso foi resolvido editando o GetLyrics para que ele recuperasse o nome da música em uma chamada separada, em vez de passá -la da função anterior.
Cada estágio de teste foi re-feito após qualquer nova funcionalidade mudar.
A ser testado:
(X = funcionando conforme o esperado) (o = não está funcionando como esperado)
A seguir, está testando se o código está funcionando como esperado.
| Navegador/teste | Ópera | Firefox | Cromo | Borda | Safári |
|---|---|---|---|---|---|
| 1 | X | X | X | X | X |
| 2 | X | X | X | X | X |
| 3 | X | X | X | X | X |
| 4 | X | X | X | X | X |
| 5 | X | X | X | X | X |
| 6 | X | X | X | X | X |
| 7 | X | X | X | X | X |
| 8 | X | X | X | X | X |
| 9 | X | X | X | X | X |
| 10 | X | X | X | X | X |
| 11 | X | X | X | X | X |
| 12 | X | X | X | X | X |
| 13 | X | X | X | X | X |
| 14 | X | X | X | X | X |
| 15 | X | X | X | X | X |
| 16 | X | X | X | X | X |
| 17 | X | X | X | X | X |
A seguir, está testando se a tela está funcionando como esperado.
| Navegador/teste | Ópera | Firefox | Cromo | Borda | Safári |
|---|---|---|---|---|---|
| 1 | X | X | X | X | X |
| 2 | X | X | X | X | X |
| 3 | X | X | X | X | X |
| 4 | X | X | X | X | X |
| 6 | X | X | X | X | X |
| 7 | X | X | X | X | X |
| 8 | X | X | X | X | X |
| 9 | X | X | X | X | X |
| 11 | X | X | X | X | X |
| 12 | X | X | X | X | X |
| 14 | X | X | X | X | X |
| 15 | X | X | X | X | X |
| 17 | X | X | X | X | X |
Um problema foi observado no Microsoft Edge, onde a imagem em segundo plano não estava sendo exibida corretamente. Isso ocorreu devido à posição do elemento de script no código HTML. Uma vez movido para o final do corpo, e não na cabeça, a imagem de fundo exibida corretamente.
Outro problema foi encontrado no iPhone, onde a imagem em segundo plano não estava fixa e não rolava com a página, levando à página 'funcionando' de plano de fundo quando uma rolagem para baixo em uma grande quantidade de dados retornados. Pesquisas mostraram que esse é um problema conhecido com o iOS. Isso foi resolvido usando uma consulta de mídia para definir o plano de fundo para repetir em telas menores.
Usando as ferramentas do Google Chrome Developer para testar como cada estágio do aplicativo é exibido em diferentes larguras da tela.
X = exibindo como esperado
| Exibição de largura/página da tela | Galaxy S5 | Pixel 2 | Pixel 2xl | iPhone 5/SE | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X. | iPad | iPad Pro |
|---|---|---|---|---|---|---|---|---|---|
| 1 | X | X | X | X | X | X | X | X | X |
| 2 | X | X | X | X | X | X | X | X | X |
| 3 | X | X | X | X | X | X | X | X | X |
| 4 | X | X | X | X | X | X | X | X | X |
| 6 | X | X | X | X | X | X | X | X | X |
| 7 | X | X | X | X | X | X | X | X | X |
| 8 | X | X | X | X | X | X | X | X | X |
| 9 | X | X | X | X | X | X | X | X | X |
| 11 | X | X | X | X | X | X | X | X | X |
| 12 | X | X | X | X | X | X | X | X | X |
| 14 | X | X | X | X | X | X | X | X | X |
| 15 | X | X | X | X | X | X | X | X | X |
| 17 | X | X | X | X | X | X | X | X | X |
Este projeto foi construído em Cloud9 e empurrado para o Github, onde foi publicado nas páginas do Github em https://hfolcot.github.io/lyrics-finder/
