가능한 방법:
-
라이엇게임즈 API 참고
-
아니면 OP.GG를 긁어서써도 됩니다.
어떤 서비스를 쓰던 항상 중요하게 봐야할 것은 URL임
=> http://www.op.gg/summoner/userName=hide+on+bush 매우 간단한 형태의 url
저는 직접 라이엇게임즈 API를 이용했습니다.
- Riot Games API 이용가이드
- 본인이 가지고 있는 LOL 아이디로 로그인한다.
- DEVELOPMENT API KEY를 복사해서 저장한다(환경변수)
- API DOCUMENT -> FULL API REFERENCE 클릭
-
소환사 닉네임을 받아서 소환사 정보(ID)를 받자.
-> Summoner v4 항목의 api를 참고하면 된다.
-
이제 반환받은 encryptedSummonerId를 입력값으로 줘서 리그정보를 얻는다.
이 정보를 이용해서 잘 코드에 버무리면 된다.
[예시]
# python code
from flask import Flask,render_template,request
import os
import requests
from pprint import pprint as pp
app = Flask(__name__, template_folder="views")
apikey = os.environ['RIOT_API_KEY']
print("api_key\n",apikey)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/search')
def search():
sum_name = request.args.get('name')
url = "https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/{}".format(sum_name)
headers = {
"Origin": "https://developer.riotgames.com",
"Accept-Charset": "application/x-www-form-urlencoded; charset=UTF-8",
"X-Riot-Token": apikey,
"Accept-Language": "ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
}
res = requests.get(url=url,headers=headers)
encrypted_id = res.json()['id']
url_league = "https://kr.api.riotgames.com/lol/league/v4/positions/by-summoner/{}".format(encrypted_id)
res_league = requests.get(url=url_league,headers=headers)
league_dicts = res_league.json()
#pp(league_dicts)
#print('-------------------------------')
def get_league_info(league_dict):
res = [
league_dict.get('queueType'),
league_dict.get('tier'),
league_dict.get('rank'),
league_dict.get('wins'),
league_dict.get('losses'),
league_dict.get('leagueName'),
league_dict.get('leaguePoints')
]
return res
results = []
for league_dict in league_dicts:
results.append(get_league_info(league_dict))
length = len(results)
return render_template('search.html',sum_name=sum_name,results=results,length=length)
<!-- index.html -->
<!DOCTYPE html>
<head>
<title>롤 전적 검색기</title>
</head>
<body>
<p> OP.GG </p>
<form action="/search">
<input type="text" name="name"/>
<input type="submit" value="Submit"/>
</form>
</body>
<!-- search.html -->
<!DOCTYPE html>
<head>
<title>전적검색결과</title>
</head>
<body>
<p>
{{sum_name}}님의 전적검색결과
</p>
{% if length != 0 %}
{% for result in results %}
<div> {{result[0]}} </div>
<div> {{result[1]}} {{result[2]}} 리그</div>
<div> {{result[-1]}} LP </div>
<div> {{result[3]}} 승 {{result[4]}} 패</div>
<div> {{result[5]}}</div>
<br>
{% endfor %}
{% else %}
<div>아직 리그가 없습니다. 분발하세요!</div>
{% endif %}
<form action = '/'>
다시 검색하기 <input type="submit" value="Submit"/>
</form>
</body>
웹사이트 출력 예시)
화면 보기좋게 수정하기
getbootstrap 를 통해서 우리 보노보노급 페이지를 예쁘게 꾸미자.
1) get started -> CSS 카피 -> title바로 위에다가 붙이기.
2) JS 카피 -> link 아래에다가 붙이기
-> 우리는 bootstrap의 components를 사용할 수 있게 되었다!
3) components : 웹사이트들을 위해 쓸 수 있는 코드들의 조각
-
jumbotron
웹사이트 처음 들어가면 나오는 웹의 전광판 : Fluid jimbotron 써보자.
-
forms : 검색창을 있어보이게 만들자
처음꺼를 카피해서 약간 커스터마이징하자.
<form action="/search">
<div class="form-group">
<label for="exampleInputEmail1">소환사 이름을 입력하세요</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Summoner name" name="name">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
웹사이트 화면
1) 메인화면
2) 전적검색결과 화면
나중에 할 것
- 반응형 웹사이트 -> 웹사이트 사이즈에 따라서 다르게 최적화된 사이트를 보여줌
ex) 큰 사이트 형태
작은 사이트 형태 (모바일 최적화)
이런 사이즈 최적화를 위해서 여러 웹사이트를 만드는건 낭비이므로 bootstrap를 이용해서 최적화를 쉽게 할 수 있다.
- 프록시 : 우리가 직접 서버에 요청하는게 아니라 중간 서버나 프로그램을 거쳐서 전달되게끔
그러면 다른사람이 요청하는 것 처럼 만들 수 있음.
일반적인 브라우저로 작업한다면 정보를 매우 많이 주기 때문에 프록시를 사용해야한다.
선생님이 주신 꿀팁]
-
코딩계 괴수들, 형님들의 예시를 참고하라! https://www.youtube.com/watch?v=5cslNPJJTJ4&index=2&list=PLPcncwcN2UkazPbL42D-RiJL7Q_Kc9zWx # 자바좋은강의(61b) https://www.youtube.com/user/papajohnno/videos # 61a
보통 교수님들은 코딩을 못하는 경우가 많은데, 외국에서는 교수님이 코딩을 굉장히 잘함.
-
한국 개발자의 예시
https://www.youtube.com/user/ipknhama # 하재승 개발자님 라이브코딩
이 개발자는 테스트를 매우 빡세게 시행한다고함