Spring으로 OP.GG 클론 코딩해보기 -1
안녕하세요. 이제 좀 유의미한 결과가 나와서 포스팅을 진행합니다. 이걸할려고 내가 웹프로젝트 강의를 2주를 ...
일단 라이엇 API를 사용해서 OP.GG 클론코딩을 해보는 것을 목적으로 생각하고 프로젝트를 진행했습니다. 나중에 차근차근 코드까지 보여드리면서 알려드릴 기회가 있으면 포스팅하도록 하고 개발 일기정도로 생각해주면 좋겠습니다.
처음에 구현했던 것
- result.jsp 구현 : 전적 검색 결과 나오는 페이지
- summoner구현: 객체 구현.
- SearchSummoner구현: 이름가지고 받아온 결과를 전달하는 Controller역할.
어떤 식으로 개발했는지에 대해서...
첫번째로 내가 이 결과를 보냈을때 값을 보여줘야할 view인 JSP를 만들어줘야합니다. 그 값을 전달 받을 page인 Result.jsp를 만들어줍니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>찾은사람의 정보는?</h2>
<p>${summoner}</p>
<img alt="아이콘" src=${ imgURL}>
</body>
</html> 그 이후에 이 값을 전달 해줄수 있는 역할의 컨트롤러가 필요합니다. 즉, 내 아이디를 찾아서 내정보를 툭 던져주는 역할을 해주는 컨트롤러가 필요합니다.
package com.ventulus95.noxikaGG.controller;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;
import com.ventulus95.noxikaGG.dto.Summoner;
@Controller
public class SearchSummoner {
final static String API_KEY = "RGAPI-8805ace2-14ef-4c5d-bfe1-1ac3a36d3cfb";
@RequestMapping(value="/search", method=RequestMethod.GET)
public String searchSummoner(Model model, HttpServletRequest httpServletRequest) {
BufferedReader br = null;
String SummonerName = httpServletRequest.getParameter("title");
Summoner temp= null;
try{
String urlstr = "https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/"+
SummonerName +"?api_key="+API_KEY;
URL url = new URL(urlstr);
HttpURLConnection urlconnection = (HttpURLConnection) url.openConnection();
urlconnection.setRequestMethod("GET");
br = new BufferedReader(new InputStreamReader(urlconnection.getInputStream(),"UTF-8")); // 여기에 문자열을 받아와라.
String result = "";
String line;
while((line = br.readLine()) != null) { // 그 받아온 문자열을 계속 br에서 줄단위로 받고 출력하겠다.
result = result + line;
}
JsonParser jsonParser = new JsonParser();
JsonObject k = (JsonObject) jsonParser.parse(result);
int profileIconId = k.get("profileIconId").getAsInt();
String name = k.get("name").getAsString();
String puuid = k.get("puuid").getAsString();
long summonerLevel = k.get("summonerLevel").getAsLong();
long revisionDate = k.get("revisionDate").getAsLong();
String id = k.get("id").getAsString();
String accountId = k.get("accountId").getAsString();
temp = new Summoner(profileIconId,name,puuid,summonerLevel,revisionDate,id,accountId);
}catch(Exception e){
System.out.println(e.getMessage());
}
model.addAttribute("summoner", temp);
model.addAttribute("imgURL", "http://ddragon.leagueoflegends.com/cdn/9.16.1/img/profileicon/"+temp.getProfileIconId()+".png");
return "result";
}
}이 파일에서는 summoner의 여러가지 값들을 riotAPI를 통해서 가져오고 그 값을 그대로 result.jsp로 보내줍니다.
추가적으로 프로필 이미지 파일도 가져와보고 싶어서 우리는 summoner를 통해 프로필아이콘의 id를 가져올수 있기때문에, 그것을 라이엇 데이터에서 빼오는 작업을 합니다 .
라이엇 API에서는 dataDragon이라는 중앙 데이터들을 모아 두는 곳이 있습니다. 그 곳에서 공식 이미지 파일이나 공식 데이터 정보들을 가져올 수 있는데, 그것을 활용해서 모든 아이콘을 제 Spring 폴더에 저장해서 보여주는게 아닌, Riot api datadragon을 통해서 받아서 띄워 줄수 있습니다.
혹시 데이터드래곤의 사용법을 알고싶다면, 제가 dataDrangon의 사용법에 대해서 간략하게 적었습니다. 더보기 클릭해주세요.
데이터 드래곤은 라이엇본사에서 데이터를 한번에 전달 해줄 수 있는 데이터 보관소 같은 곳으로 이곳에 대부분의 데이터, 공식 png들이 많이 존재합니다.
img나 데이터의 사용방식은 각각마다 조금 다르지만, 대부분 이런식으로 구성됩니다
http://ddragon.leagueoflegends.com/cdn/6.24.1/img/profileicon/588.png
주황색: 버젼 하늘색: 프로필아이콘ID
즉, 버젼과 프로필 아이콘만 약간씩 달라지면 형식상으로는 모든 데이터 값을 다 가져올 수 있습니다.
문제는 저 버젼은 임의적으로 넣기가 안됩니다. 그러니까 뭐라해야하나... 막 패치버젼을 대충 때려박을 수 없습니다.
예를들어 9.18 이런 형식은 안됨.
그러면 이 문제를 어디서 해결하냐면, https://ddragon.leagueoflegends.com/realms/kr.json을 통해 해결합니다.
지역별로 모든 값이 달라질 수 있으므로, 버젼을 매칭을 잘 시켜줘야합니다. 안의 데이터들은 각 링크들의 버젼(즉, 프로필 아이콘사진이면 사진, 아이템 정보의 버젼)들이 각각 JSON으로 매핑되어있습니다.
필요한 링크에서 버젼을 필요한 값과 맞춰서 매칭해주면 됩니다. 그러면 잘 나옵니다.
이런 모든 정보를 라이엇 API로 다 받은 뒤에, 저희는 그것을 JSP에 보내줘야하므로, model에 서머너 객체를 태워서 보내줍니다. 그러면 jsp에서 메소드만 사용하면 되므로 모든 정보를 model에 담을 필요는 없을 거고, 객체로 담아서 이동하는 방식을 채택합니다.
제가 여기서 하나 발생한 문제가 있었는데, RIOT API의 대부분의 정보는 JSON을 통해서 전달 받아집니다. 그때 이 JSON을 파싱하는 작업이 필요하고, 이 작업을 하기위해서 저는 GSON을 활용해서 해결 했습니다.
단, GSON이 조금 귀찮은 작업이 있는데, 일단 키값을 가져온 후 제가 int형이든 String형이든간에 다시 재파싱을 해줘야합니다. 처음에 key값에서 가져온 value값이 상태가 JSONobject이기 때문에 값을 스스로 출력하는데는 무리가 없지만, 변수에 집어넣으려면 또 파싱을 해줘야합니다. .getAsInt()나 .getAsString()통해 파싱을 해서 값을 넘겨줘야합니다. (왠지 코드가 너무 길어져서 마음이 불편)
summoner.java 파일은 그 받을 내용을 저장해둘 DTO이기때문에 코드를 보여드리지는 않을텐데 궁금하시면 깃허브로 오시면 됩니다.
이런 구현을 어떤 결과값을 내보여줄까?
일단 summoner의 값이 모두 result.jsp에 전달되어지고 자신의 롤 프로필 사진이 화면에 나옵니다.
summoner의 값에는 레벨, 나중에 필요한 accountID값과 ID값이 있으므로 다른 API를 통해서 값전달이 필요합니다.
현재 저는 조금 많이 개발을한 상태라서 이게 사진이 없는 관계상...ㅠㅠ 나중에 더 완성 된것을 보여드리도록 하겠습니다.
추가적으로 뭘 더 구현할 생각인지?
더 많은 정보 전달. 승수, 최근 매치같은 기능넣기와 같은 조금 더 많은 정보를 전달하고 필요없는 정보는 감추는 작업을 진행했습니다.
'프로젝트 > 개인프로젝트' 카테고리의 다른 글
| Spring으로 OP.GG 클론 코딩해보기 -5 (0) | 2019.09.01 |
|---|---|
| Spring으로 OP.GG 클론 코딩해보기 -4 (0) | 2019.09.01 |
| Spring으로 OP.GG 클론 코딩해보기 -3 (0) | 2019.08.24 |
| Spring으로 OP.GG 클론 코딩해보기 -2 (0) | 2019.08.24 |
| Riot Api를 가지고 웹앱을 한번 만들어보자. (메모장) (6) | 2019.07.19 |