홈페이지>프로그래밍 관련>기타 소스코드
다운로드

Heather Olcot의 가사 파인더

브리핑 - 하나 이상의 API에 크게 의존하는 단일 페이지 응용 프로그램을 작성합니다.

내가 선택한 API는 https://www.musixmatch.com/에 위치한 Musixmatch Catalog of Song 가사입니다.

특정 노래의 가사를 찾고자하는 사용자는 가사 파인더를 사용하여 그렇게 할 수 있습니다.

사용자는 아티스트 또는 노래로 검색 할 수 있으며 탐색하여 원하는 노래의 가사를 찾을 수있는 결과 목록이 반환됩니다.

페이지는 이제 https://hfolcot.github.io/lyrics-finder/에서 라이브입니다.

라이센스로 가사가 완전히 인쇄되지 않습니다.

기능 / 기술

일반적인

이 페이지는 부트 스트랩 4.0.0을 사용하며 그리드 시스템 및 기타 스타일을 사용합니다.

이 페이지는 Google Fonts의 Nunito Sans 및 Corben Fonts와 Fontawesome의 아이콘을 사용합니다.

내 자신의 추가 스타일은 자산/CSS/Main.css 내에서 수행되었습니다

스크립팅은 jQuery 3.3.1을 사용합니다.

사용 된 API는 https://api.musixmatch.com/ws/1.1입니다. 반환 된 데이터는 JSONP 형식으로 이루어 지므로 데이터를 얻으려면 jQuery ajax 요청이 필요했습니다.

논리

이들은 앱이 할 수있는 각 단계입니다. 다음 숫자는 각 함수가 사용되는 [단계]를 설명하는 데 사용됩니다.

각 단계 내에는 명확한 결과 버튼 또는 GO BACK 버튼을 통해 이전 페이지로 다시 이동하는 기능도 있습니다.

  1. 기본
  2. 메인> 노래 결과
  3. 메인> 노래 결과> 가사 결과
  4. 메인> 아티스트 결과
  5. 메인> 아티스트 결과> 앨범 결과
  6. 메인> 아티스트 결과> 앨범 결과> 노래 결과
  7. 메인> 아티스트 결과> 앨범 결과> 노래 결과> 가사 결과

가사 파인더에는 사용되는 7 가지 주요 기능이 있습니다.

checkradio () [1]

이 함수는 사용자가 검색 버튼을 클릭하자마자 호출됩니다. 라디오 버튼의 값을 확인하고이를 기반으로 관련 기능을 실행합니다.

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

이 기능은 이미 결과 컨테이너에있을 수있는 데이터를 지우기 위해 다음 기능의 시작 부분에서 호출됩니다.

gettrack () [1> 2]

이 기능은 사용자가 검색했을 때 노래 라디오 버튼을 확인한 경우 Checkradio ()에 의해 호출됩니다. 이 함수는 사용자가 검색 상자에 입력 한 값을 매개 변수 q_track으로 입력 한 값으로 https://api.musixmatch.com/ws/1.1/track.search에 $ .ajax 요청을 만듭니다. 요청이 성공하면 반환 된 트랙 목록이 포함 된 가변적 인 트랙 레드 리트가 생성됩니다. 이것들은 Musixmatch의 등급 시스템을 기반으로 아티스트의 인기에 의해 분류됩니다. 그런 다음이 목록의 각 항목에 대해 이름과 아티스트가 index.html의 결과 컨테이너에 입력하고 사용자에게 선택한 노래의 가사를 볼 수있는 옵션을 제공합니다. 이것은 track_id를 매개 변수로 전달하여 클릭에 트리거되는 gutlyrics () 함수로 전달하여 작동합니다.

getartist () [1> 4]

이 기능은 사용자가 검색했을 때 아티스트 라디오 버튼을 확인한 경우 Checkradio ()에 의해 호출됩니다. 이 함수는 q_artist의 매개 변수로 검색 상자에 입력 한 값을 가진 https://api.musixmatch.com/ws/1.1/artist.search에 $ .ajax 요청을 만듭니다.
요청이 성공하면 반환 된 아티스트 목록이 포함 된 가변 아트리스트 (Artistresults)가 만들어집니다. 이들은 Musixmatch의 등급 시스템을 기반으로 인기에 의해 정렬됩니다. 그런 다음이 목록의 각 항목에 대해 아티스트는 index.html의 결과 컨테이너에 입력하고 사용자에게 선택한 아티스트가 앨범을 볼 수있는 옵션을 제공합니다. 이것은 Artist_id를 매개 변수로 전달하여 클릭에 트리거되는 getAlbumList () 함수로 전달하여 작동합니다.

getAlbumlist () [4> 5]

이 함수는 이전 두 기능과 유사하게 실행됩니다. Artist_id는 getartist () 함수에서 전달되며 해당 아티스트의 앨범 데이터를 얻는 데 사용됩니다. 그런 다음 각 앨범의 이름이 포함 된 목록과 해당 앨범의 트랙 목록을 볼 수있는 옵션을 제공하는 버튼으로 컨테이너 요소에 인쇄됩니다. 클릭에서 gettracklist ()가 실행되며 앨범 _id를 해당 함수로 매개 변수로 전달합니다.

gettracklist () [5> 6]

Album_id는이 기능으로 전달되어 해당 앨범의 트랙 목록에 대한 https://api.musixmatch.com/ws/1.1/album.tracks.get에 요청하는 데 사용됩니다. 그러면 가사를 볼 수있는 옵션으로 트랙 목록을 반환하고 GetTrack ()에서와 같이 버튼을 다시 볼 수 있습니다.

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

이 함수는 노래 목록의 버튼을 클릭하면 호출됩니다. 선택한 노래의 트랙 ID는 이전 기능에서 전달됩니다. 이 기능은 두 개의 별도 Ajax 호출을 사용합니다. 첫 번째는 트랙에서 데이터를 가져 오는 데 사용됩니다. 그런 다음 두 번째 호출은 matcher.lyrics.get로 가사를 반환합니다. 반환 할 가사가 없으면 컨테이너 요소 내에 사용자 정의 오류 메시지가 표시됩니다.

설계

페이지의 레이아웃은 방법을 명백하고 단순하게 유지하기 위해 매우 기본적으로 유지되었습니다. 어두운 배경 이미지가 사용되어 눈이 부드럽고 사용자의 관심을 끌지 않습니다. 색 구성표는이 이미지를 가능한 한 많이 일치 시키려고 노력하며 Coolors.co와 함께 만들어졌습니다. 데이터는 적절한 헤더가있는 테이블에 반환됩니다.

테스트

JavaScript 코드는 JSHINT에서 실행되었으며 오류를 반환하지 않았습니다. HTML은 W3C 마크 업 유효성 검사기에서 실행되어 오류를 반환하지 않았습니다. CSS는 W3C CSS 유효성 검사기에서 실행되었으며 오류를 반환하지 않았습니다.

사용자 테스트 중에 MusixMatch 데이터베이스의 모든 노래에 가사가 없으므로 결과 내에 가사 _body 키가없는 곡에 대한 사용자 정의 오류가 추가되었습니다.

ResetPage ()의 기능을 확인하기 위해 자산/JS/SPEC.JS가 생성되고 실행되었습니다. 이 테스트는 성공적이었습니다. 테스트 스크립트가 올바른지 확인하기 위해 결과 컨테이너 내에 텍스트를 포함하도록 함수가 편집되었으며,이 시점에서 테스트는 실패했습니다.

테스트하는 동안 이중 또는 단일 견적 표시가 포함 된 노래에 대해 가사가 반환되지 않은 곳에서 흥미로운 문제가 발생했습니다. 조사 에서이 문제는 노래 이름을 새로운 기능으로 전달하려는 기능으로 인해 발생했지만 (이 과정에서 ReturnlyRics로 이름이 바뀌 었음), 노래 이름에 인용문이 있었을 때,이를 끝으로 읽었습니다. 닫는 괄호가 없기 때문에 매개 변수 및 오류 중. 이는 이전 함수에서 전달하는 대신 노래 이름 자체를 별도의 호출로 검색하도록 첨가물을 편집하여 해결되었습니다.

새로운 기능이 변경된 후 각 테스트 단계가 다시 해결되었습니다.

테스트하려면 :

  1. 기본
  2. 메인> 노래 결과
  3. 메인> 노래 결과> 명확한 결과
  4. 메인> 노래 결과> 가사 결과
  5. 메인> 노래 결과> 가사 결과> 돌아 가기
  6. 메인> 노래 결과> 가사 결과> 명확한 결과
  7. 메인> 아티스트 결과
  8. 메인> 아티스트 결과> 명확한 결과
  9. 메인> 아티스트 결과> 앨범 결과
  10. 메인> 아티스트 결과> 앨범 결과> 돌아 가기
  11. 메인> 아티스트 결과> 앨범 결과> 명확한 결과
  12. 메인> 아티스트 결과> 앨범 결과> 노래 결과
  13. 메인> 아티스트 결과> 앨범 결과> 노래 결과> 돌아 가기
  14. 메인> 아티스트 결과> 앨범 결과> 노래 결과> 명확한 결과
  15. 메인> 아티스트 결과> 앨범 결과> 노래 결과> 가사 결과
  16. 메인> 아티스트 결과> 앨범 결과> 노래 결과> 가사 결과> 돌아 가기
  17. 메인> 아티스트 결과> 앨범 결과> 노래 결과> 가사 결과> 명확한 결과

(x = 예상대로 작동) (O = 예상대로 작동하지 않음)

다음은 코드가 예상대로 작동하는지 테스트하는 것입니다.

브라우저/테스트 오페라 파이어 폭스 크롬 가장자리 원정 여행
1 엑스 엑스 엑스 엑스 엑스
2 엑스 엑스 엑스 엑스 엑스
3 엑스 엑스 엑스 엑스 엑스
4 엑스 엑스 엑스 엑스 엑스
5 엑스 엑스 엑스 엑스 엑스
6 엑스 엑스 엑스 엑스 엑스
7 엑스 엑스 엑스 엑스 엑스
8 엑스 엑스 엑스 엑스 엑스
9 엑스 엑스 엑스 엑스 엑스
10 엑스 엑스 엑스 엑스 엑스
11 엑스 엑스 엑스 엑스 엑스
12 엑스 엑스 엑스 엑스 엑스
13 엑스 엑스 엑스 엑스 엑스
14 엑스 엑스 엑스 엑스 엑스
15 엑스 엑스 엑스 엑스 엑스
16 엑스 엑스 엑스 엑스 엑스
17 엑스 엑스 엑스 엑스 엑스

다음은 디스플레이가 예상대로 작동하는지 테스트하는 것입니다.

브라우저/테스트 오페라 파이어 폭스 크롬 가장자리 원정 여행
1 엑스 엑스 엑스 엑스 엑스
2 엑스 엑스 엑스 엑스 엑스
3 엑스 엑스 엑스 엑스 엑스
4 엑스 엑스 엑스 엑스 엑스
6 엑스 엑스 엑스 엑스 엑스
7 엑스 엑스 엑스 엑스 엑스
8 엑스 엑스 엑스 엑스 엑스
9 엑스 엑스 엑스 엑스 엑스
11 엑스 엑스 엑스 엑스 엑스
12 엑스 엑스 엑스 엑스 엑스
14 엑스 엑스 엑스 엑스 엑스
15 엑스 엑스 엑스 엑스 엑스
17 엑스 엑스 엑스 엑스 엑스

배경 이미지가 올바르게 표시되지 않은 Microsoft Edge에서 문제가 발생했습니다. 이는 HTML 코드 내에서 스크립트 요소의 위치 때문입니다. 머리가 아닌 몸의 끝으로 이동하면 배경 이미지가 올바르게 표시됩니다.

iPhone에서 배경 이미지가 고정되어 있지 않고 페이지로 스크롤하지 않는 또 다른 문제가 발견되어 많은 양의 반환 된 데이터를 스크롤 할 때 페이지가 배경이 떨어지게됩니다. 연구에 따르면 이것은 iOS에서 알려진 문제입니다. 이것은 미디어 쿼리를 사용하여 배경을 작은 화면에서 반복하도록 설정하여 해결되었습니다.

민감도

Google Chrome 개발자 도구를 사용하여 애플리케이션의 각 단계에서 다른 화면 너비로 표시되는 방식을 테스트합니다.

x = 예상대로 표시됩니다

화면 너비/페이지 디스플레이 갤럭시 S5 픽셀 2 픽셀 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로 밀려 나서 https://hfolcot.github.io/lyrics-finder/의 Github 페이지에 게시되었습니다.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체