플레이어 표시

이 예에서는 계정 사용자 이름, ID 및 암호를 입력합니다. 버튼의 클릭에, HTML 정렬되지 않은 목록은 계정 플레이어를 표시합니다. 각 플레이어마다 플레이어 ID, 이름, 생성 날짜가 표시됩니다.

개요

이 샘플 앱의 아키텍처, 특히 인증 및 AJAX 구현과 관련된 일반적인 접근 방식에 대해 알아보려면 HttpRequest를 사용하는예제를 참조하십시오 .

앱 아키텍처

이 앱의 상위 수준 응용 프로그램 논리는 다음과 같습니다.

  1. 계정에 액세스하는 데 필요한 사용자 데이터 수집
  2. 버튼 클릭시 AJAX 호출을 수행하여 모든 플레이어 정보를 검색합니다.
  3. AJAX 호출 성공에서 다음을 수행하십시오.
    • HTML 페이지에 JSON 응답 데이터 삽입
    • 정렬 된 목록에 플레이어 정보를 표시하는 HTML을 동적으로 빌드하고이를 HTML 페이지에 삽입하십시오.

샘플 앱

소스 코드

이 GitHub 리포지토리에서이 샘플과 관련된 모든 코드를 찾아보세요 .

샘플 앱

펜 보기디스플레이 플레이어 Brightcove 학습 서비스( @rcrooks1969 ) 에코드펜 .

코드펜 사용

위의 CodePen을 효과적으로 사용하기위한 몇 가지 팁은 다음과 같습니다.

프록시 코드

이 페이지에서 자신의 버전을 샘플 응용 프로그램을 빌드하려면 자신의 프록시를 만들고 호스팅해야합니다. (브라이트코브 학습 서비스에서 사용하는 프록시는 브라이트코브 도메인의 요청만 허용합니다.) 우리가 사용하는 것과 매우 유사하지만 BrightCove가 아닌 도메인의 요청을 차단하는 검사가 없는 샘플 프록시는이 GitHub 리포지토리에서 찾을 수있습니다. 또한 REST API 사용에서프록시를 사용하기 위한 기본 지침과 프록시를 중심으로 앱을 빌드하기 위한 보다 자세한 안내서를 찾을 수있습니다.