django를 이용한 lol(리그 오브 레전드) 전적사이트 만들기 3부

안녕하세요

저번글에 이어서 django를 이용한 lol 전적사이트 만들기 3부로 돌아왔습니다.

django를 이용한 lol(리그 오브 레전드) 전적사이트 만들기 1부 바로가기

django를 이용한 lol(리그 오브 레전드) 전적사이트 만들기 2부 바로가기

---

django 어플리케이션 생성하기

이번에는 본격적으로 django를 이용하여 lol전적 사이트 어플리케이션을 만들어보고 사이트에 추가해보도록 하겠습니다.

일단 django에서 어플리케이션을 생성해봅시다! 생성방법은 파이썬 가상환경을 실행한 후

사용법)

python manage.py startapp 어플리케이션명

이렇게 작성하시면 됩니다.

그러면 이렇게 score라는 이름의 폴더가 생성되는데요 폴더안에는 이렇게 파일들이 자동으로 생성됩니다.

그런다음 settings.py에 어플리케이션을 등록해봅시다.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'score',
]

그림처럼 INSTALLED_APPS 부분을 찾고 마지막부분에 추가해주신 어플리케이션명을 작성하시면 됩니다.

그런다음 이제 메인에서 score어플리케이션으로 url 설정을 해주어야해요.

lolsearch/urls.py 를 편집해봅시다.

from django.contrib import admin
from django.urls import path, include
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('score/', include('score.urls')), # score 어플리케이션의 urls.py를 포함시켜줍니다.
]
 

이렇게 작성하시면 주소창에 score/ 를 치면 score 어플리케이션의 urls.py를 보고 갈 곳을 정해주게 됩니다.

이제 다시 score 폴더로 가서 urls.py를 작성하도록합시다.

score/urls.py

from django.urls import path
from . import views
 
app_name = 'score'    #score 어플리케이션의 url 호출시 앞의 구분자 사용을 하시려면 작성합시다.
 
urlpatterns = [
    path('score_view/', views.score_view, name='score_view'),            #검색창 메인 화면
    path('search_result', views.search_result, name='search_result'),    #검색결과를 보여줄 화면
]

이렇게 기본틀은 만들어졌습니다. 이제 본격적으로 django에서 라이엇에서 제공하는api를 호출하고 받은 결과값을 가공하는 로직을 구현해야합니다.

이런 기능을 구현할 코드는 views.py 파일에 작성하시면됩니다. 우선 어떤 라이엇 api를 호출 해야하는지 확인해봅시다.

---

라이엇api 알아보기

일단 첫번째글에서 보셨던 https://developer.riotgames.com/ <--- 라이엇 api 사이트로 들어가봅시다.

여기서 API DOCUMENTATION 페이지로 가봅시다.

보시면 이런식으로 각각의 api와 사용법 가져올 수 있는 값들을 확인하실 수 있어요. 일단 저희는 사용자의 닉네임을 이용하여 전적검색을 시작해야하기 때문에 SUMMONER-V4 탭으로 가봅시다. 여기서 by-name 클릮!

GET방식을 이용하여 해당 URL로 사용자닉네임을 전달하면 결과값으로 소환사레벨이나 프로필아이콘아이디등 여러 정보를 받을 수 있는데

저희는 여기서 받은 값중에 id라는 값을 한번 더 이용하여 왼쪽탭의 LEAGUE-V4를 이용하여 사용자의 랭크게임 티어를 가져오도록합시다.

---

라이엇 api 활용하여 값가져오기 (views.py 작성)

일단 저는 GET방식으로 호출하여 JSON형태의 값을 받을때 사용 할 라이브러리로 requests라는 라이브러리를 사용하였습니다.

requests라이브러리를 사용하려면 설치를 해줘야하는데요 django를 설치할때처럼 pip를 이용하여 설치합시다.

자이제 설치하셨다며 본격적으로 views.py를 작성해봅시다.

score/views.py

from django.shortcuts import render
import requests
 
# Create your views here.
 
#League of Legends 전적검색
def score_view(request):
    return render(request, 'score/score_view.html')
 
def search_result(request):
    if request.method == "GET":
        summoner_name = request.GET.get('search_text')
 
        summoner_exist = False
        sum_result = {}
        solo_tier = {}
        team_tier = {}
        store_list = []
        game_list ={}
        game_list2 = []
        api_key = '자신의 라이엇 API키를 여기에 입력하시오'
 
 
        summoner_url = "https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/" + str(summoner_name)    #소환사 정보 검색
        params = {'api_key': api_key}
        res = requests.get(summoner_url, params=params)
        # summoners_result = json.loads(((res.text).encode('utf-8')))
        if res.status_code == requests.codes.ok:                #결과값이 정상적으로 반환되었을때만 실행하도록 설정
            summoner_exist = True
            summoners_result = res.json()                        #response 값을 json 형태로 변환시키는 함수
            if summoners_result:
                sum_result['name'] = summoners_result['name']
                sum_result['level'] = summoners_result['summonerLevel']
                sum_result['profileIconId'] = summoners_result['profileIconId']
 
                tier_url = "https://kr.api.riotgames.com/lol/league/v4/entries/by-summoner/" + summoners_result['id']    #소환사 티어 검색
                tier_info = requests.get(tier_url, params=params)
                tier_info = tier_info.json()
 
                if len(tier_info) == 1:            #자유랭크 또는 솔로랭크 둘중 하나만 있는경우
                    tier_info = tier_info.pop()
                    if tier_info['queueType'] == 'RANKED_FLEX_SR':        #자유랭크인 경우
                        team_tier['rank_type'] = '자유랭크 5:5'
                        team_tier['tier'] = tier_info['tier']
                        team_tier['rank'] = tier_info['rank']
                        team_tier['points'] = tier_info['leaguePoints']
                        team_tier['wins'] = tier_info['wins']
                        team_tier['losses'] = tier_info['losses']
                    else:                                                #솔로랭크인 경우
                        solo_tier['rank_type'] = '솔로랭크 5:5'
                        solo_tier['tier'] = tier_info['tier']
                        solo_tier['rank'] = tier_info['rank']
                        solo_tier['points'] = tier_info['leaguePoints']
                        solo_tier['wins'] = tier_info['wins']
                        solo_tier['losses'] = tier_info['losses']        
                if len(tier_info) == 2:            #자유랭크, 솔로랭크 둘다 전적이 있는경우
                    for item in tier_info:
                        store_list.append(item)
                    solo_tier['rank_type'] = '솔로랭크 5:5'
                    solo_tier['tier'] = store_list[0]['tier']
                    solo_tier['rank'] = store_list[0]['rank']
                    solo_tier['points'] = store_list[0]['leaguePoints']
                    solo_tier['wins'] = store_list[0]['wins']
                    solo_tier['losses'] = store_list[0]['losses']
 
                    team_tier['rank_type'] = '자유랭크 5:5'
                    team_tier['tier'] = store_list[1]['tier']
                    team_tier['rank'] = store_list[1]['rank']
                    team_tier['points'] = store_list[1]['leaguePoints']
                    team_tier['wins'] = store_list[1]['wins']
                    team_tier['losses'] = store_list[1]['losses']
 
 
        return render (request, 'score/search_result.html', {'summoner_exist': summoner_exist, 'summoners_result': sum_result, 'solo_tier': solo_tier, 'team_tier': team_tier})
 

제 미천한 실력으로 작성해본 코드입니다. 여러분들은 더 효율적으로 작성하실 수 있을꺼에요.

이렇게 로직은 구현하였으니 이로직들을 직접적으로 화면에 나타내줄 html 템플릿을 작성해야합니다!

현재 views.py에서 사용중인 템플릿은 score_view.html, search_result.html 두가지가 있네요 작성해봅시다!

---

templates 작성하기

templates를 작성하려면 우선 폴더부터 생성해주어야합니다.

사진처럼 폴더를 생성해봅시다. 그다음 templates/score 폴더 안에 score_view.html, search_result.html 파일을 각각 생성해봅시다.

저는 약간 예쁘게 만들기 위해서 부트스트랩4를 이용하여 작성하였습니다.

score_view.html

<html>
  <head>
    <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 
  </head>
    <title>전적검색</title>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <form method="get" name="search_form" action="{% url 'score:search_result' %}" >
                    <div class="input-group">
                      <input type="text" class="form-control" placeholder="소환사명" name="search_text"  value="{{search_text}}">
                     <span class="input-group-btn">
                          <button class="btn btn-secondary" type="submit">검색</button>
                    </span>
                      </div>
                  </form>
            </div>
        </div>
    </div>
  </body>
</html>
 
 

search_result.html

{% load static %}
<html>
  <head>
    <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 
  </head>
    <title>전적검색</title>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <form method="get" name="search_form" action="{% url 'score:search_result' %}" >
                    <div class="input-group">
                      <input type="text" class="form-control" placeholder="소환사명" name="search_text"  value="{{search_text}}">
                     <span class="input-group-btn">
                          <button class="btn btn-secondary" type="submit">검색</button>
                    </span>
                      </div>
                  </form>
            </div>
        </div>
        {% if summoner_exist %}
          <div class="row" style="margin: 40px; float: none;">
 
              <img style="display: block; margin: 0px" class="img-thumbnail" src="{% static 'images/profileicon/' %}{{summoners_result.profileIconId}}.png">
              <span style="margin: 20 0 0 20; font-size: 32px;">{{ summoners_result.name }}<br>
                <span style="font-size: 20px; ">LV: {{ summoners_result.level }}</span>
              </span>
 
 
          </div>
          <div class="row">
            <div style="float: none; margin: 0 auto" class="col-5 border border-secondary">
              <div class="row">
              {% if solo_tier %}
                <div class="col-4">
                  <img src="{% static 'images/emblems/Emblem_' %}{{solo_tier.tier}}.png"  width="100%">
                </div>
                <div>
                리그: {{ solo_tier.rank_type }}<br>
                티어: {{ solo_tier.tier }} {{ solo_tier.rank }}<br>
                포인트: {{ solo_tier.points }}<br>
                전적: {{ solo_tier.wins|add:solo_tier.losses}}전 {{ solo_tier.wins }}승 {{ solo_tier.losses }}패
              </div>
            </div>
            {% else %}
            <div>
              배치&전적정보없음
            </div>
            {% endif %}
            </div>
 
            <div style="float: none; margin: 0 auto" class="col-5 border border-secondary">
              <div class="row">
 
              {% if team_tier %}
                <div class="col-4">
                  <img src="{% static 'images/emblems/Emblem_' %}{{team_tier.tier}}.png"  width="100%">
                </div>
                <div>
                리그: {{ team_tier.rank_type }}<br>
                티어: {{ team_tier.tier }} {{ team_tier.rank }}<br>
                포인트: {{ team_tier.points }}<br>
                전적: {{ team_tier.wins|add:team_tier.losses}}전 {{ team_tier.wins }}승 {{ team_tier.losses }}패
                </div>
                {% else %}
                <div>
                배치&전적정보없음
              </div>
                {% endif %}
              </div>
            </div>
            </div>
          {% else %}
            사용자가 존재하지않습니다.
          {% endif %}
        
    </div>
 
  </body>
</html>

이렇게 작성해주신 뒤 주소창에 http://127.0.0.1:8000/score/score_view/ 를 적고 접속해봅시다.

여기에 자신의 소환사명을 검색해봅시다!

짜잔!! 이렇게 간단하게나마 구현이 완성된 모습입니다. op.gg나 fow처럼 상세하게 만들진 않았지만 api를 이용하여 충분히 만드 실 수 있습니다!

물론 아이콘이미지가 없으셔서 엑스박스로 나오시기 때문에 아이콘을 직접 넣어주셔야 합니다.

---

라이엇에서 제공해주는 리그오브레전드 api를 이용하여 간단하게나마 롤전적검색 사이트를 만들어 보았습니다.

감사합니다.