Design and Planning

Design and Planning

Document Revision History

Rev. 1.0 2021-10-30 - Initial version
Rev. 1.1 2021-11-04 - Remove match_id field in Report Model
Rev. 1.2 2021-11-10 - Add tag info
Rev. 1.3 2021-11-24 - Update model diagram
Rev. 1.4 2021-11-26 - Update ui design

System Architecture

• Frontend
  • Frontend Library: React.js
  • State Management Tool: Redux
• Backend
  • Backend Framework: Django
  • Database: Mysql

---

Backend

Model

Above image describes a relation schema diagram for Django models of this service. It also shows the fields of each model. Each arrow indicates foreign key constraints and its relationship between two models.

API Document

Riot API

We will use Riot Games Official Api(document) to get in-game data such as summoners and matches.

We are going to use MATCH-V5 api to get matches data :

• GET /lol/match/v5/matches/{matchId}
• GET /lol/match/v5/matches/by-puuid/{puuid}/ids

We are going to use SUMMONER-V4 api to get summoner data :

• GET /lol/summoner/v4/summoners/by-name/{summonerName}

We are going to use LEAGUE-V4 api to get summoner's detailed information data:

• GET /lol/league/v4/entries/by-summoner/{encryptedSummonerId}

API Table

We can see the detailed information (ex.request and response) in this page.

Description	API endpoint	GET	POST	PUT	DELETE
Description	API endpoint	GET	POST	PUT	DELETE
:---:	:---:	:---:	:---:	:---:	:---:
sign up	/api/signup/		O
login	/api/login/		O
logout	/api/logout/		O
find id	/api/forgot/id/		O
find password	/api/forgot/password/		O
change password	/api/change/password/			O
my page	/api/mypage/	O
my reports	/api/my/reports/	O
my received reports	/api/my/received_reports/	O
report delete	/api/reports/:id/				O
search	/api/search/?summoners={}	O
statistics	/api/home/	O
report match authentication	/api/reports/auth/	O	O
report	/api/reports/		O
update summoner name	/api/update/summoner/			O
apology	/api/apology/	O	O	O

Backend Dependency

---

Frontend

UI Requirements

UI Design

Front Components

Pages

Components

Frontend Description

All pages excluding [Authorization Related] pages described below include Header which includes logo image and text of Gaejosim, My Page button and Login out button by default.

[Authorization Related]

1. Login Page

• Let a user login with his/her own account.
• If the user clicks the Sign up button, redirect to the Sign Up Page.
• If the user clicks the Find User Info button, redirects to the Find User Info Page.
• If the user writes down ‘ID’ and ‘Password’ inputs and then clicks Login button, then it checks authentication with user inputs.

2. Sign Up Page

• Let user create new account.
• Only if the user agrees with terms and services of this webpage, user can create new account.
• If the user fills following inputs appropriately and clicks Sign up button, redirect to the Login Page.

3. Find User Info Page

• Let user find userID information with his/her own email
• Let user find userPassword with his/her own email and userID
• If the user clicks the Find ID button, and inputs his/her email then server sends email to the user with corresponding userID.
• If the user clicks the Find Password button, and inputs his/her email and userID then server sends email to the user with corresponding user password.

[Search Related]

4. Search Page

• User can search without login.
• Let user search other LOL users by writing down summonerID and clicking Search button on the searchBar. <SearchBar/>

5. Single Search Result Page

• Let user search other LOL users by writing down summonerID and clicking Search button on the searchBar. <SearchBar/>
• Show summoner information that the user searched for. Summoner information contains 'summonerName', 'tier', 'mannerPoint', <TagView/> and 'recentGameHistory'. <CommonSearch/>

6. Multi Search Result Page

• Let user search other LOL users by writing down summonerID and clicking Search button on the searchBar. <SearchBar/>
• Show all summoners' information the user searched for. <MultiSearch/>

[Report Related]

7. Report Authentication Page

• Let user write down or select other summoner who want to report.
• If user choose one of the summoners name from the dropdown, then it automatically authenticated.
• If user write down summonerID by himself/herself then user have to click Authentication button.
• When authenticated, then user can clicks Next Button, redirects to Report Page.

8. Report Page

• Let user evaluate selected summoner's manner point.
• Let user pick tags that describe selected summoner's behavior. <Tags/> (tags example - #abusing #dodging #intentionally_ruining_the_game #cursing #throwing)
• Let user write down comments in detail only if user wants.
• If user clicks Submit button, save report to server and redirects to My Page.
• If user clicks Cancel button, redirects to Search Page.

9. My Page

• Only login user can access My Page.
• Show all user related information such as 'summonerName', 'email', 'userName', 'MannerPoint'. <UserInfo/>
• Show all reports the user wrote. <ReportList/>
• Let user delete written reports by clicking Delete button.
• If user clicks Detail button, redirects to My Reports Page.

10. My Reports Page

• Show all reports that user wrote. <ReportList/>
• Let user delete written reports by clicking Delete button.

States of Reducer

Reducer	State	Description
User	user	Contains user information
Report	receivedReports	arrays of all recieved reports @ My Page
	writtingReport	currently writing report @ Report Page
MannerPoint	initialMannerPoint	MannerPoint not evaluated by anyone @ Single Search Page, Multi Search Page
	AccumulatedMannerPoint	Manner Point value @Single Search Result Page, Multi Search Page

Actions of Reducer

Reducer	Action	Function
User	login({id, password})	Send id/password, and receive current user profile
	logout()	Logout current user
	createUser({ id, email, summonerID, password, passwordCheck})	Post information(id, email, summoner, password) of a new registered user to backend DB
	checkPassword({password, passwordCheck})	Check identity of 'password' and 'passwordCheck'
	findUserID(email)	Check if the email of the user exists in backend DB, and if exists, fetch the corresponding user with email
	findUserPassword({email, id})	Check the existence of user matching with given email and id, if exists, fetch the corresponding user
Report	getReports()	get a report list
	createReport()	Create a report
	deleteReport()	Delete selected report
	cancelReport()	Cancel submission of a report
MannerPoint	evaluateMannerPoint()	Set a manner point value by clicking some point of a graph

Axios Design

Implementation Plan

Feature-task difficulties & sprint

Page	Feature	Tasks	Priority	Time(days)	Sprint	Assignees	etc
User	sign up	POST signup	medium	1	3	미승
		Render Signup Page	medium	1	4	우진
		Redirect to Login Page	medium	1	4	우진
	Login	POST login	medium	1	3	윤수
		Render Login Page	medium	1	4	우진
		Redirect to Search page	medium	1	4	우진
	Find user info	Find user Id	medium	1	3	미승
		Render Find User Info Page	medium	1	4	우진
		SMTP setting	hard	1	3	미승
		Find user password	medium	1	3	미승
		Change user password	medium	1	3	미승
		Redirect to Login page	medium	1	4	우진
	MyPage	Get User Info	medium	1	4	미승
		Get my reports	medium	1	4	미승
		Render MyPage Page	medium	1	4	은채
Search	Single search result	Get Summoner Info	medium	3	4	미승
		Get User Recent Match Logs	hard	3	4	미승
		Logs Pagination	hard	3	4	미승
		Get Summoner Manner Info	medium	3	4	미승
		Render Single Search Page	medium	3	4	은채
	Multi search result	Get Each User's User Info	high	2	4	윤수
		Get Each User's match logs	high	2	4	윤수
		Get Each User's Manner Info	high	2	4	윤수
		Render Multi Search Page	high	2	3	은채
Report	Make a report	POSTreport	high	2	3	윤수
		Update Manner Statistics	high	2	3	윤수
		Redirect to My Report Page	high	2	4	은채
		Render Report Page	medium	1	4	은채
	report match authentication	Get Recent Team players	medium	1	3	미승
		Autenticate the report	medium	1	3	미승
		Render Report Authentication Page	medium	1	3	우진
		Redirect to Report Page	high	2	3	우진
	my reports	Get My Report	medium	1	4	윤수
		My Report Logs Pagination	medium	1	4	윤수
		Render My Reports Page	medium	1	4	은채
		UX Design and CSS	medium	20	3,4	우진

Testing Plan

Unit Test

We force every commit to pass the unit test and to accomplish over 90% coverage.

• Django: Python unit test
• React: Jest, Enzyme

Functional Test

All APIs should be tested completely.

• Django: Python unit test
• React: Jest, Enzyme

Functional Test will be performed at Sprint 4

Acceptance & Integrity Testing

• Integrity Test: Travis CI
• Acceptance Test: Cucumber

Tag info

언행 : [과격한 언행] [비속어 사용]
게임 폭파 : [고의성 게임 던짐] [탈주/닷지] 
게임 전 : [대리 게임] [픽 상황 갑질]
게임 중 : [cs 스틸] [팀킬]
기타 : [정치] [라인 거부]

Acceptance & Integrity Test will be performed at Sprint 5