개발 환경 : VScode
사용 언어 : Nodejs , expressjs(jade)
아직 Beta 이기 때문에 , DB연동은 되어 있지 않은 상태이며 , 추가적으로 해야할 부분은 선택되어진 사용자의 입력값들을 기반으로 게임을 추천해 주는 부분을 추가해야 하며 , 어떻게 신뢰도 높은 게임추천을 해주어야 할 것인지 고민해야 할 것이다.
먼저 , 알고리즘을 통해서 어떻게 돌아가게 되는지 설명해 보겠다.
위 사진처럼 , Client , Server , Result 순으로 데이터가 돌게 된다.
먼저 Client는 사용자이다 . Server에 데이터를 요청하는 사람이다.
이 때 , 사용자의 입력을 받고 , 출력해주는 부분은 .jade 파일들이 담당하고 있다.
Server는 사용자가 요청한 데이터를 req,res 해주는 역할을 하게 된다 .
Server는 main_app.js 이 파일이 모든것을 담당하고 있으며 , get 요청과 post요청 또한 처리한다.
쉽게 말하면 , 요청과 처리는 이 main_app.js가 다 처리한다고 생각하면 된다.
이 때 이역할을 Router 로써 정의를 해놓았는데 , 이 Router는 직접적으로 req,res 을 다룬다.
Result는 사용자에게 결과를 보여주는 것으로써 , 선택되어진 값들과 선택이 안된값들을 보여준다.
정리를 해보자면 다음과 같다.
선택지에는 각각의 tag값들이 존재한다 . 이 tag 값들은 사용자의 선택에 따라서 달라지며 , 선택지에 따라서 내가 어떠한 tag들을 선택했는지 또한 , 내가 추천받게 되는 tag들은 어떠한 것인지 까지 구현되었다.
이제 실행화면을 보자 .
위 화면은 초기 화면이다 .
위 화면은 첫번째 화면에서 start를 누르게 되면 넘어가는 화면이다 .
실질적으로 게임추천에 사용되는 데이터들은 위 부분부터 이다 .
마지막으로 위 화면은 결과화면이다 .
왼쪽의 엑셀은 user가 선택한 결과를 바탕으로 어떠한 tag들이 True or false or none 이 되었는지 나타내고 있으며 ,
오른쪽 엑셀은 user가 실질적으로 선택한 선택지에서 도출된 tag값들이다 .
이제 main_app.js에서 어떻게 Router들이 데이터를 다루는지 코드를 통해서 확인해 보겠다.
var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
--> 기본적으로 node에서는 require를 사용해서 사용하고 싶은 lib를 사용한다. 나는 express와 body-parser , fs를 사용하기 위해서 하나의 변수에 저장을 시켜주었고 , require를 해주었다.
var app = express();
app.locals.pretty = true ;
app.set('views', '../beta_senior_project_view');
app.set('view engine', 'jade');
--> 위에서 선언한 express를 하나의 변수로 사용함으로써 , 조금더 쉽게 조작을 하였다 .
--> app.locals.pretty = true 를 해줌으로써 코드를 이쁘게 해주었다.
--> app.set을 통해서 view engine 은 jade로써 , ../beta_senior_project_view 내의 views 폴더를 정적으로 지정시켜주었다.
app.use(express.static('../beta_senior_project_image'));
--> image 파일들이 출력이 되는데 , 이 파일들은 위의 경로로 static 해주었다.
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));
--> post 방식을 처리하기 위해서 맨 상단에서 require 한 bodyparser를 사용한다.
app.get('/main', function(req,res)
{
res.render('main_view');
});
--> 첫번째 page인 main 페이지로 get요청을 했을 때 res.render 을 함으로써 , main_view.jade 를 보여준다.
// Single
var First_Tag
var First_TF
// Multi
var Multi_value
var Multi_TF
// CategoryCoop
var CategoryCoop_value
var CategoryCoop_TF
// Horror Vs Story-Rich & Relaxing
var Horror_value
var Horror_TF
var Relaxing_value
var Relaxing_TF
var Story_Rich_value
var Story_Rich_TF
// CategoryMMO
var CategoryMMO_value
var CategoryMMO_TF
// Free VS pay
var IsFree_value
var IsFree_TF
var GenreIsFreeToPlay_value
var GenreIsFreeToPlay_TF
var PurchaseAvail_value
var PurchaseAvail_TF
// Causal VS Dark
var Causal_value
var Causal_TF
// Cute , Music , Humor , Comedy VS none
var Cute_value
var Cute_TF
var Music_value
var Music_TF
var Humor_value
var Humor_TF
var Comedy_value
var Comedy_TF
// Gore Vs Survive
var Gore_value
var Gore_TF
var Survive_value
var Survive_TF
// Stratgy
var Stratgy_value
var Stratgy_TF
// Sci_fi VS Fantasy
var Sci_fi_value
var Sci_fi_TF
var Fantasy_value
var Fantasy_TF
// Action
var Action_value
var Action_TF
// Violent
var Violent_value
var Violent_TF
// Sports VS Racing
var sports_value
var sports_TF
var Racing_value
var Racing_TF
// Farm Vs Simulation Vs Building
var Farm_value
var Farm_TF
var Simulation_value
var Simulation_TF
var Build_value
var Build_TF
// Puzzle
var Puzzle_value
var Puzzle_TF
// Shooter
var Shooter_value
var Shooter_TF
// Dark
var Dark_value
var Dark_TF
--> 위 변수들은 각각의 선택지에 따른 global 변수이다. 선택한 선택지에 따라서 global 변수에 다른 값들이 들어갈 것이다.
위 변수들이 어떻게 쓰이는지 다음을 통해서 알아보자 .
doctype html
html
head
meta(charset='utf-8')
body
h1 FirstPage
br
form(action='CategorySinglePlayer', method='post')
div(style='width:300px; height:300px; border:1px solid black; float:left; margin-right:70px;')
input(type='image' name='Single' value='Single' alt='Single' src="/1.png" width="300px" height="300px")
input(type='hidden', name='Single_value', value='Single')
input(type='hidden' name='Single_TF' value='TRUE')
form(action='CategoryMultiplayer', method='post')
div(style='width:300px; height:300px; border:1px solid black; float:left;')
input(type='image' name='Multi' value='Multi' alt='Multi' src="/2.jpg" width="300px" height="300px")
input(type='hidden', name='Multi_value', value='Multi')
input(type='hidden', name='Multi_TF' value='TRUE')
--> 위 jade파일은 첫번째 페이지 이다. 여기서 질문은 Single play or multiplay 둘중에 어떤게 좋냐 라는 질문을 한다 .
--> 사용자에 따라서 선택지 값이 다를 것이며 , 선택한 값에 따라서 form 의 Action이 달라진다 .
--> 결국에는 Client에서 이 form내에 존재하는 데이터를 request하는 형태로 되게 된다.
--> 이 때 , hidden 값으로써 single 과 single에 해당하는 True or false or none 값을 넘겨주게 된다 .
app.get('/CategorySinglePlayer', function(req,res)
{
res.render('CategorySinglePlayer');
});
app.post('/CategorySinglePlayer' , function(req,res)
{
First_Tag = req.body.Single_value;
First_TF = req.body.Single_TF;
res.render('CategorySinglePlayer')
});
--> 이렇게 넘겨온 데이터들은 post로써 요청을 받고 , 맨 상단에서 global 변수에 req.body.Single_value , req.body.Single_TF 각각의 값들이 저장되는 동시에 render로써 다음 page를 보여준다 .
이렇게 Beta_site 구조가 되어있다.
결과적으로 보여지는 Result page는 어떻게 되어있을까?
app.post('/Result' , function(req,res)
{
Farm_value = req.body.Farm_value;
Farm_TF = req.body.Farm_TF;
Simulation_value = req.body.Simulation_value;
Simulation_TF = req.body.Simulation_TF;
Build_value = req.body.Build_value;
Build_TF = req.body.Build_TF;
res.render('Result' ,
{
First_Tag:First_Tag,
First_TF:First_TF,
--> 보게 되면 Router는 비슷한 역할을 한다 . 다만 다른것은 render할 때 Result.jade에 결과값들을 보여주고 싶었기 때문에 , 사용자 입력에 따라서 global 변수에 저장되어 있는 값들을 다 넘겨준다.
doctype html
html
head
meta(charset='utf-8')
style.
table {
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
}
body
h1 ResultPage
br
br
br
-var Game_Tag = [First_Tag,Multi_value,CategoryCoop_value,CategoryMMO_value,IsFree_value,GenreIsFreeToPlay_value,PurchaseAvail_value,Causal_value,Dark_value,Cute_value,Music_value,Comedy_value,Humor_value,Story_Rich_value,Relaxing_value,Gore_value,Survive_value,Stratgy_value,Puzzle_value,Sci_fi_value,Fantasy_value,Action_value,Violent_value,Shooter_value,sports_value,Racing_value,Farm_value,Simulation_value,Build_value];
-var TF = [First_TF,Multi_TF,CategoryCoop_TF,CategoryMMO_TF,IsFree_TF,GenreIsFreeToPlay_TF,PurchaseAvail_TF,Causal_TF,Dark_TF,Cute_TF,Music_TF,Comedy_TF,Humor_TF,Story_Rich_TF,Relaxing_TF,Gore_TF,Survive_TF,Stratgy_TF,Puzzle_TF,Sci_fi_TF,Fantasy_TF,Action_TF,Violent_TF,Shooter_TF,sports_TF,Racing_TF,Farm_TF,Simulation_TF,Build_TF];
-var Basic_Game_Tag =["Single","Multi","Coop","MMO","IsFree","GenreIsFreeToplay","PurchaseAvail","Causal","Dark","Cute","Music","Comedy","Humor","Story-Rich","Relaxing","Gore","Survive","Stratgy","Puzzle","Sci_fi","Fantasy","Action","Violent","Shooter","sports","Racing","Farm","Simulation","Build"];
table
tbody
tr
td(colspan='2' align = "center") User imformation
- for (var i = 0 ; i < Game_Tag.length ; ++i){
if Game_Tag[i]
tr(align = "center" bgcolor="black")
td(style="color:white")= Game_Tag[i]
td(style="color:white")= TF[i]
else
tr(align = "center")
td= Basic_Game_Tag[i]
td NotSelected
tr(align = "center")
- }
--> 위코드는 Result.jade 파일이다 .
--> Game_Tag에 넘겨온 데이터 값들을 배열로써 저장을 시켜준다.
--> TF 는 넘겨온 데이터이지만 , 이부분은 True or False or none을 의미한다 .
--> Basic_Game_Tag 는 선택되어지지 않은 데이터들을 나타내 주기 위해서 배열로써 선언해 준 것이다.
--> 나중에 이 값들이 DB에 연동이 되어서 게임추천해 줄 때 사용될 데이터로 사용될 것이다 .
앞으로 추가 되어야 할 부분
1. 데이터에 따른 게임 추천
2. DB 연동
3. 데이터의 신뢰도를 어떻게 높일 것인가 ( machine learning )
4. 더 많은 데이터를 구축하기
