lyrics finder

Лирика Finder от Heather Olcot

Краткое описание - создать одно страницу приложения, которое в значительной степени зависит от одного или нескольких API.

API, который я решил использовать, - это каталог текста песен MusixMatch, расположенный по адресу https://www.musixmatch.com/

Пользователи, которые хотят искать тексты конкретной песни, могут сделать это, используя лирический Finder.

Пользователь может искать по исполнителю или по песне и возвращает список результатов, через которые он может перейти, чтобы найти текст песни, которую они ищут.

Страница сейчас живет на https://hfolcot.github.io/lyrics-finder/

Обратите внимание, что тексты не напечатаны в полном объеме из -за лицензирования

Функциональность / технологии

Общий

На странице используется Bootstrap 4.0.0 и использует свою систему сетки и другой стиль.

На странице используются шрифты Nunito Sans и Corben от Google Fonts, а также значки от Fontawesome.

Мой собственный дальнейший стиль был сделан в рамках активов/css/main.css

Сценарий использует jQuery 3.3.1.

Используется API https://api.musixmatch.com/ws/1.1. Возвращенные данные находятся в формате JSONP, и поэтому для получения данных требовался запрос jQuery Ajax.

Логика

Это каждая из этапов, на которые может быть приложение - следующие числа будут использоваться для описания, на котором используется [этап] каждая функция и на какую стадию оно приводит.

В каждом этапе есть функциональность, чтобы вернуться обратно на предыдущую страницу, через кнопку «Очистить результаты» или кнопку «Обратно».

1. Основной
2. Главный> Результаты песни
3. Главный> Результаты песни> лирические результаты
4. Main> Результаты художника
5. Главный> Результаты исполнителя> Результаты альбома
6. Главный> Результаты исполнителя> Результаты альбома> Результаты песни
7. Главный> Результаты исполнителя> Результаты альбома> Результаты песни> Лирические результаты

Есть семь основных функций, используемых в лирическом искателе:

CheckRadio () [1]

Эта функция вызывается, как только пользователь нажал кнопку поиска. Он проверяет, какое значение радиопроизводительной кнопки проверяется, и запускает соответствующую функцию на основе этого.

ResetPage () [2, 3, 4, 5, 6, 7]

Эта функция вызывается в начале всех следующих функций, чтобы очистить любые данные, которые уже могут быть в контейнере результатов.

getTrack () [1> 2]

Эта функция вызывается checkradio (), если кнопка «Песня» была проверена при поиске пользователя. Функция делает запрос $ .ajax по адресу https://api.musixmatch.com/ws/1.1/track.search с значением, которое пользователь ввел в поле поиска в качестве параметра Q_TRACK. Если запрос успешно, создается переменная трек -обработки, которая содержит возвращенный список треков. Они сортируются по популярности художника как основанного на оценке MusixMatch. Затем для каждого элемента этого списка имя и артист вводятся в контейнер результатов в index.html, а также кнопку, которая дает пользователю возможность просмотреть текст выбранной песни. Это работает путем передачи TRACK_ID в качестве параметра в функцию getLyrics (), которая запускается при щелчке.

getartist () [1> 4]

Эта функция вызывается checkRadio (), если радиопроизводительная кнопка была проверена при поиске пользователя. Функция делает запрос $ .ajax по адресу https://api.musixmatch.com/ws/1.1/artist.search с значением, которое пользователь ввел в поле поиска в качестве параметра для Q_ARTIST.
Если запрос успешно, создается переменная Artistresults, которая содержит возвращенный список художников. Они сортируются по популярности, основанной на оценках MusixMatch. Затем для каждого элемента этого списка художник вводится в контейнер результатов в index.html, а также кнопку, которая дает пользователю возможность просмотреть альбомы выбранного артиста. Это работает путем передачи Artist_id в качестве параметра в функцию GetaLbumList (), которая запускается при щелчке.

getalbumlist () [4> 5]

Эта функция работает аналогично предыдущим двум функциям. Artist_ID передается в него из функции Getartist (), и это используется для получения данных альбома для этого артиста. Затем он печатается в элемент контейнера в качестве списка, содержащий название каждого альбома, и кнопку, дающую возможность просмотреть список треков для этого альбома. Это запустит getTrackList () на Click и передаст Album_id в качестве параметра в эту функцию.

getTrackList () [5> 6]

Album_id передается в эту функцию и используется для выполнения запроса на https://api.musixmatch.com/ws/1.1/album.tracks.get для списка треков на этом альбоме. Затем это вернет список треков с возможностью просмотра текста, опять же с помощью кнопки, как в getTrack ().

returnlyrics () [2> 3 и 6> 7]

Эта функция вызывается, когда нажимается любая кнопка в списке песен. Идентификатор трека выбранной песни проходит из предыдущей функции. Функция использует два отдельных вызова AJAX. Первый используется для получения данных с трека. Get in API и смягчать имя трека из этого, чтобы их можно было отображать в виде заголовка. Затем можно сделать второй звонок в Matcher.lyrics.get, чтобы вернуть сами текст. Если нет текста, чтобы вернуть, в элементе контейнера отображается пользовательское сообщение об ошибке.

Дизайн

Макет страницы оставался очень простым, чтобы сохранить методы очевидными и простыми. Было использовано темное фоновое изображение, которое нежно на глазах и не привлекает внимание пользователя. Цветовая схема пытается соответствовать этому изображению как можно больше и была создана с Coolors.co. Данные возвращаются в таблице с соответствующими заголовками.

Тестирование

Код JavaScript был запущен на JSHINT и не возвращал ошибок. HTML был запущен на валидаторе разметки W3C и не возвращал ошибок. CSS был запущен на валидаторе W3C CSS и не возвращал ошибок.

Во время пользовательского тестирования было отмечено, что не все песни в базе данных MusixMatch имеют тексты текстов, и поэтому была добавлена ​​пользовательская ошибка для тех, у кого нет ключа текста_ в результате.

Assets/JS/Spec.JS был создан и запускается, чтобы проверить функциональность ResetPage (); Этот тест был успешным. Чтобы убедиться, что тестовый скрипт был правильным, функция была отредактирована, чтобы включить текст в контейнер результатов, после чего тест не удался.

Во время тестирования возникла интересная проблема, где не возвращались лирики для какой -либо песни, содержащей двойные или единственные оценки. В ходе расследования появилось, что проблема была вызвана функцией, пытающейся передать имя песни в новую функцию (getlyrics, переименованные во время этого процесса для возврата), но когда цитаты присутствовали в названии песни, он читал это как конец параметра и ошибок, потому что не было закрытия скобки. Это было разрешено путем редактирования Getlyrics, так что оно забрало саму имя песни в отдельном вызове, а не передал его из предыдущей функции.

Каждый этап тестирования был повторно выполнен после любых новых изменений функциональности.

Быть проверенным:

1. Основной
2. Главный> Результаты песни
3. Главное> Результаты песни> четкие результаты
4. Главный> Результаты песни> лирические результаты
5. Главный> Результаты песни> Лирические результаты> вернуться назад
6. Главное> Результаты песни> Лирические результаты> четкие результаты
7. Main> Результаты художника
8. Главные> Результаты художника> четкие результаты
9. Главный> Результаты исполнителя> Результаты альбома
10. Главный> Результаты исполнителя> Результаты альбома> вернуться назад
11. Главные> Результаты исполнителя> Результаты альбома> четкие результаты
12. Главный> Результаты исполнителя> Результаты альбома> Результаты песни
13. Главный> Результаты исполнителя> Результаты альбома> Результаты песни> вернуться назад
14. Главный> Результаты исполнителя> Результаты альбома> Результаты песни> Чистые результаты
15. Главный> Результаты исполнителя> Результаты альбома> Результаты песни> Лирические результаты
16. Главный> Результаты исполнителя> Результаты альбома> Результаты песни> Лирические результаты> вернуться назад
17. Главные> Результаты исполнителя> Результаты альбома> Результаты песни> Лирические результаты> четкие результаты

(X = функционирование, как и ожидалось) (O = не функционирует, как и ожидалось)

Следующее проверяет, работает ли код, как и ожидалось.

Браузер/Тест	Опера	Firefox	Хром	Край	Сафари
1	Х	Х	Х	Х	Х
2	Х	Х	Х	Х	Х
3	Х	Х	Х	Х	Х
4	Х	Х	Х	Х	Х
5	Х	Х	Х	Х	Х
6	Х	Х	Х	Х	Х
7	Х	Х	Х	Х	Х
8	Х	Х	Х	Х	Х
9	Х	Х	Х	Х	Х
10	Х	Х	Х	Х	Х
11	Х	Х	Х	Х	Х
12	Х	Х	Х	Х	Х
13	Х	Х	Х	Х	Х
14	Х	Х	Х	Х	Х
15	Х	Х	Х	Х	Х
16	Х	Х	Х	Х	Х
17	Х	Х	Х	Х	Х

Следующее проверяет, работает ли дисплей, как и ожидалось.

Браузер/Тест	Опера	Firefox	Хром	Край	Сафари
1	Х	Х	Х	Х	Х
2	Х	Х	Х	Х	Х
3	Х	Х	Х	Х	Х
4	Х	Х	Х	Х	Х
6	Х	Х	Х	Х	Х
7	Х	Х	Х	Х	Х
8	Х	Х	Х	Х	Х
9	Х	Х	Х	Х	Х
11	Х	Х	Х	Х	Х
12	Х	Х	Х	Х	Х
14	Х	Х	Х	Х	Х
15	Х	Х	Х	Х	Х
17	Х	Х	Х	Х	Х

Проблема была отмечена на Microsoft Edge, где фоновое изображение не отображалось правильно. Это было связано с позицией элемента сценария в коде HTML. Как только он был перенесен в конце тела, а не в голове, фоновое изображение отображалось правильно.

Другая проблема была найдена на iPhone, где фоновое изображение не оставалось фиксированным и не прокручивалось со страницей, что привело к «исчезновению» страниц при прокрутке большого количества возвращаемых данных. Исследования показали, что это известная проблема с iOS. Это было разрешено с использованием медиа -запроса, чтобы установить фон для повторения на небольших экранах.

Отзывчивость

Использование инструментов разработчика Google Chrome, чтобы проверить, как каждый этап приложения отображается по разным ширине экрана.

X = отображение, как и ожидалось

Ширина экрана/отображение страницы	Галактика S5	Пиксель 2	Pixel 2xl	iPhone 5/SE	iPhone 6/7/8	iPhone 6/7/8 Plus	iPhone x	iPad	iPad Pro
1	Х	Х	Х	Х	Х	Х	Х	Х	Х
2	Х	Х	Х	Х	Х	Х	Х	Х	Х
3	Х	Х	Х	Х	Х	Х	Х	Х	Х
4	Х	Х	Х	Х	Х	Х	Х	Х	Х
6	Х	Х	Х	Х	Х	Х	Х	Х	Х
7	Х	Х	Х	Х	Х	Х	Х	Х	Х
8	Х	Х	Х	Х	Х	Х	Х	Х	Х
9	Х	Х	Х	Х	Х	Х	Х	Х	Х
11	Х	Х	Х	Х	Х	Х	Х	Х	Х
12	Х	Х	Х	Х	Х	Х	Х	Х	Х
14	Х	Х	Х	Х	Х	Х	Х	Х	Х
15	Х	Х	Х	Х	Х	Х	Х	Х	Х
17	Х	Х	Х	Х	Х	Х	Х	Х	Х

Развертывание

Этот проект был построен в Cloud9 и отправлен в GitHub, где он был опубликован на страницах GitHub по адресу https://hfolcot.github.io/lyrics-finder/