[iOS 앱개발 일기] RIOT API를 사용하여 iOS 앱 만들기 - 2

안녕하세요! Ick입니다.

 

약 3주 전에 개인 Riot API를 신청했고 드디어 허가가 나서 이렇게 글을 올릴 수 있게 되었습니다.

그동안 임시로 주는 API key로 iOS에서 API 사용하는 방법에 대해 익히고 있었지만.. 2일 정도 되는 유효기간 때문에 많이 불편했었습니다..ㅠㅠ

 

하지만 이제 개인 API key가 있으니 열심히 사용할 일만 남았군요!

 

Riot API를 사용해서 토이 프로젝트를 만들며 공부를 할 계획입니다.

우선 아주 잘 만들어진 OPGG 앱에 있는 기능들을 제가 직접 구현해볼 생각입니다.

 

오늘 구현해볼 기능은 랭킹을 조회하는 기능입니다.

우선 OPGG에서 랭킹을 조회하는 화면은 아래와 같습니다.

화면에 1~4위 까지의 랭킹만 보이는데 쇼메이커 선수의 계정이 2개네요..;; 대단합니다.

어쨌든 위와 같은 화면을 구성하기 위해서는 테이블 뷰를 사용하면 될 것 같았고 소환사 아이콘이라 불리는 사진이 필요했습니다.

해당 사진은 developer.riotgames.com/docs/lol#data-dragon_champions 여기를 보면 얻을 수 있는 방법이 있었습니다.

 

결과적으로 보면 ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/1.png 이렇게 접근할 수 있었습니다.

위와 같이 랭킹 API를 통해 어떤 계정의 소환사 아이콘 정보를 얻기 위해서는 랭킹 API에서 소환사 이름을 알아낸 뒤 소환사 이름으로 계정 정보를 조회해야 했습니다.

페이커 선수의 계정 정보를 조회한 결과를 보면..

{
    "id": "OP8lhXcRzR4a3B05TcGoGLzA1QA8yGL3jYrlkKO4fPL0Kw",
    "accountId": "zn5Hxo0MqQL9PiPUO0slWLmLKeiwjEEV8jqYWkPqJk4h",
    "puuid": "wq7ROlha2QA3RshIXD1a_VATj_GM7VfPAeZjhsZgIZL3h4H6pMTSwjOHyuqQWOZ8ogWf_MTnVLVkQQ",
    "name": "Hide on bush",
    "profileIconId": 6,
    "revisionDate": 1599475096000,
    "summonerLevel": 347
}

 위와 같은 정보를 받을 수 있었습니다! 여기서 profileIconId 라는 정보가 소환사 아이콘 정보입니다.

이를 통해 아까 소환사 아이콘 사진을 확인할 수 있는 주소로 접근하여 사진을 얻어오면 됩니다.

즉 ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/6.png 으로 접근하면 됩니다.

이게 페이커 선수 계정의 소환사 아이콘이네요 ㅋㅋ

이를 사용해서 제가 만든 랭킹 정보 창은... 조금 허접하지만 최소한의 정보는 제공할 수 있게 되었습니다..

위와 같이 랭킹 정보를 알려주는 화면을 만들었습니다.

근데 이상하게 소환사 아이콘 몇 개가 접근이 불가해서 위와 같이 아이콘이 빈 공간이 많이 있습니다.

이는 뭔가 데이터 서버 자체의 문제인지... 알 수 없지만 아직 해결방법은 모르겠습니다.

이는 URL에서는 띄워쓰기와 한글이 다른 문자로 사용되는 문제 때문이었습니다!

이는 인코딩을 활용하여 해결할 수 있었습니다!

var exampleName: String = "DWG ShowMaker"
var urlName = exampleName.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)

인코딩 하는 방법은 위의 코드같이 하면 됩니다!

 

또한 서버에서 데이터를 받아올 때 걸리는 시간 때문에 실제 앱에서 실행할 때 시간이 오래 걸린다는 점과 테이블 뷰를 스크롤하면 정보를 매번 새로 받아오기 때문에 버벅거림이 있었습니다.

 

이에 대한 부분을 해결하기 위해 공부를 해야할것 같습니다.ㅠㅠ

 

우선 다음으로 구현해볼것은 랭킹 정보에서 어떤 계정을 클릭하면 해당 계정의 게임 정보가 나오도록 하는 것인데.. 생각보다 api 구성이 복잡해서 어려울 것 같네요...