🎮RIOT API 분석 프로젝트(7) - Flask를 사용해 웹페이지 개발

데이터팍스 2024. 9. 22. 01:16

flask를 활용해 웹페이지 개발

flask_project/
│
├── app.py                # Flask 메인 파일
├── riot_api.py           # Riot API 관련 함수들
├── templates/
│   ├── home.html         # 소환사 검색을 위한 폼
│   └── results.html      # 검색 결과를 표시하는 페이지
└── static/               # CSS, JS 파일 등 (필요 시)

이제 DB는 구축을 다 했고 유저들의 닉네임을 검색했을 때 자신의 최근 5판 평균을 보여주는 웹사이트를 만들겠습니다.

flask를 이용하면 비교적 손쉽게 웹사이트를 만들 수 있고 구조는 위와 같습니다.

바탕화면에 flask_project라는 폴더를 만들고 그 안에 app.py와 riot_api.py 라는 파이썬 파일을 넣습니다.

그리고 홈페이지에 구현할 home.html 과 results.html라는 파일을 templates라는 폴더를 만들어서 그 안에 넣습니다.

app.py 파일

from flask import Flask, render_template, request
from riot_api import get_summoner_info, get_recent_matches

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")

@app.route("/search", methods=["GET"])
def search():
    summoner_name = request.args.get("name")
    
    if not summoner_name:
        return render_template("home.html", error="Please enter a summoner name.")
    
    # 소환사 정보와 최근 매치 정보 가져오기
    summoner_info = get_summoner_info(summoner_name)
    if not summoner_info:
        return render_template("home.html", error="Summoner not found.")
    
    # 최근 5게임 정보 가져오기
    match_details = get_recent_matches(summoner_info['puuid'], count=5)
    
    return render_template("results.html", matches=match_details, summoner_name=summoner_name)

if __name__ == "__main__":
    app.run(debug=True)

riot_api.py 파일

import requests

API_KEY = "my_api"

# 소환사 정보 가져오기
def get_summoner_info(summoner_name):
    url = f"https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/{summoner_name}"
    headers = {"X-Riot-Token": API_KEY}
    
    response = requests.get(url, headers=headers)
    
    # 상태 코드 및 응답 내용 로그 출력
    print(f"API 호출 상태 코드: {response.status_code}")
    print(f"API 응답 내용: {response.text}")
    print(f"Rate Limit? Retry-After: {response.headers.get('Retry-After')}")
    
    if response.status_code == 200:
        return response.json()
    else:
        return None


# 최근 경기 정보 가져오기
def get_recent_matches(puuid, count=5):
    match_list_url = f"https://asia.api.riotgames.com/lol/match/v5/matches/by-puuid/{puuid}/ids?start=0&count={count}"
    headers = {"X-Riot-Token": API_KEY}
    
    match_list_response = requests.get(match_list_url, headers=headers)
    
    if match_list_response.status_code != 200:
        return []
    
    match_ids = match_list_response.json()
    match_details = []

    # 각 경기 상세 정보 가져오기
    for match_id in match_ids:
        match_data_url = f"https://asia.api.riotgames.com/lol/match/v5/matches/{match_id}"
        match_data_response = requests.get(match_data_url, headers=headers)
        
        if match_data_response.status_code == 200:
            match_data = match_data_response.json()
            
            # 해당 경기에서 소환사의 데이터를 추출
            participant_data = next(p for p in match_data['info']['participants'] if p['puuid'] == puuid)
            match_details.append({
                'kills': participant_data['kills'],
                'deaths': participant_data['deaths'],
                'assists': participant_data['assists'],
                'goldEarned': participant_data['goldEarned'],
                'wardsPlaced': participant_data['wardsPlaced']
            })

    return match_details

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summoner Search</title>
</head>
<body>
    <h1>Search for Summoner</h1>
    
    <form action="/search" method="get">
        <label for="name">Summoner Name:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Search</button>
    </form>
    
    {% if error %}
    <p style="color: red;">{{ error }}</p>
    {% endif %}
</body>
</html>

results.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match Results for {{ summoner_name }}</title>
</head>
<body>
    <h1>Recent Matches for {{ summoner_name }}</h1>
    
    <ul>
        {% for match in matches %}
        <li>
            <p>Kills: {{ match.kills }}</p>
            <p>Deaths: {{ match.deaths }}</p>
            <p>Assists: {{ match.assists }}</p>
            <p>Gold Earned: {{ match.goldEarned }}</p>
            <p>Wards Placed: {{ match.wardsPlaced }}</p>
        </li>
        {% endfor %}
    </ul>
</body>
</html>

이렇게 파일들을 만들고 터미널에서 python app.py를 실행시키면 웹사이트가 나옵니다.

터미널에 app 연결, 웹사이트 연동 확인

터미널에 위 사진과 같이 표시가 되고 주소에 http://127.0.0.1:5000를 입력하면 만든 웹페이지가 나옵니다!

이런 웹사이트가 만들어졌습니다.

이제 제대로 만들었는지 확인하기 위해 Summoner Name를 입력했습니다.

근데 자꾸 summoner not found라고 나옵니다.

vscode로 돌아와서 터미널을 확인했더니 403 오류가 납니다.

403 오류가 나는 원인은 보통 아래와 같습니다.

새로운 API 키 발급: API 키가 만료되었을 가능성이 크다.Riot Developer Portal에서 새로운 API 키를 발급받고 적용
API 호출 제한 확인: API 호출 횟수가 제한에 걸렸을 수 있다. 일정 시간이 지난 후 다시 시도
API 키 입력 오류 확인: API 키가 정확하게 입력되었는지 확인
올바른 지역 서버 사용: 한국 서버(kr.api.riotgames.com)를 사용하는지 확인
HTTPS 프로토콜 사용: Riot API는 HTTPS를 통해 요청

근데 저는 위에 해당하는 원인이 없었고, 코드에 오류나 오타가 있지도 않았습니다.

riot api를 재발급도 받아봤지만 해결이 되지 않았습니다.

문제의 원인이 뭘까 싶어서 riot api를 다시 확인했는데 원인을 찾았습니다..

summonerName API 서비스 미지원

https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/{summoner_name} 라는 것처럼

RIOT API는 소환사 이름을 통해 소환사 정보를 검색할 수 있는 엔드포인트를 더 이상 제공하지 않습니다.

구글에서 검색해서 RIOT API를 활용하여 유저가 자신의 닉네임을 검색했을 때 최근 전적이 나오는 프로젝트를 진행한 모든 글들은 https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/{summoner_name} 를 활용했습니다.

다른 블로그에서 퍼왔는데, 예전에는 위와 같이 summonerName 이라는 api를 제공하여 닉네임을 입력해서 puuid를 얻고 그것을 활용해 matchid를 가져오는 방식이었는데 이제는 그 접근 방식을 쓸 수 없게 된 겁니다.

올해 2월인가 까지는 있었는데..

그러니 riot_api.py이라는 코드에서 summonerName을 호출하는 방식을 쓸 수 없는 것이죠.

게임정보는 puuid, encryptedSummonerID를 통해서만 가져올 수 있습니다만 게임 내부에서 유저는자신의 puuid, summonerID를 확인할 수 없습니다. 진짜 문제가 여기서 생긴 것이죠.

서비스를 구상하기 위해 DB 구축도 다 했는데 유저들이 자신의 닉네임 or puuid를 검색하여 조회할 수 있는 기능을 만들지 못하는 겁니다.

물론 일부 비공식 API나 롤 전적 사이트는 여전히 소환사 이름을 통해 PUUID를 추출해주는 서비스를 제공할 수 있습니다. 해당 서비스를 활용해 소환사 이름을 PUUID나 다른 식별자로 변환한 후, 이를 Riot API에서 사용하는 방안도 있습니다.

하지만 타사이트를 이용하지 않고 제가 구성한 것만으로 서비스를 구성하고 싶었습니다.

방법이 있긴 있습니다... 여기서는 다이아 1 티어라고 가정하겠습니다.

1. league-ex-v4에서 해당된 티어의 모든 유저 summonerID를 가져옵니다. (2천개당 1시간, 1만유저가 조금 넘기에 5시간 정도 시간예상)

2. summonerID를 DB에 실고 summoner-v4에서 summnerID를 넣은 다음 puuid를 가져옵니다. (역시 5시간)

3. puuid를 DB에 실고 match-v4에서 최근 1판의 matchID만을 가져옵니다. (5시간)

4. matchID를 DB에 실고 matchID/v5/matches에서 해당판 게임 정보를 닉네임과 PUUID 정보만을 가져옵니다.

5. 그리고 2번에 만든 DB에 들어있는 puuid가 4번에서 생성된 PUUID와 일치하는 것만을 고릅니다.

(4번에 만든 PUUID는 그 판에 참여한 모든 사람의 puuid가 들어있기에 해당 티어에 맞는 puuid인 2번만을 골라야 합니다.)

6. 그러면 유저의 "닉네임"과 "PUUID"만이 남고 이것을 다이아1 티어의 닉네임과 puuid 있는 DB으로 구축합니다.

7. 그러면 다이아1 티어에 해당하는 유저의 닉네임+puuid가 있는 DB가 있기에 유저는 자신의 이름을 검색했을 때 DB에 연동하여 해당 puuid를 가져오고 그것을 api로 호출하는 식으로 app.py를 만들 수 있습니다.

문제는 원래 계획이었던 에메랄드 티어로 하기에는 유저가 너무 많다는 겁니다...

riot은 api rate limit을 두기에 유저 DB를 구축하려면 굉장히 오랜 시간이 걸릴 것 같습니다.

그래서 우선 그랜드마스터(700명) 을 대상으로 유저 DB를 먼저 구축한 다음에 해당 웹서비스가 성공적으로구현된다면

다이아 1티어(1만 2천명)를 대상으로 유저 DB를 구축을 넓혀나가겠습니다.

우선 다시 그랜드마스터를 티어를 대상으로 DB를 다시 구축하겠습니다.

서비스 개발이 처음이어서 그런지 쉽지 않네요..