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, backend dependency, axios design
Rev. 1.5 2021-11-27 - Update Frontend Pages, Components, Reducer design and Description of pages

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
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.

[User Related]

1. Sign in 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.

4. Change Password Page

• Let user change his/her own password.
• If the user clicks the Change button, user password change to new Password.

[Search Related]

5. 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/>

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 Action 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.

[Apology Related]

9. My Page

• Only login user can access My Page.
• Show all user related information such as 'summonerName', 'email', 'userName', 'MannerPoint'.
• Show reports the user wrote and the user received.

10. Reporting Log List Page

• Show all reports that user wrote.
• Let user delete written reports by clicking Delete button.
• Let user check written apologies related to report by clicking Check button.

11. Reported Log List Page

• Show all reports that user received.
• Let user write down apology for recived reports by clicking Write button.

12. Write Apology Page

• Let user write down own apology to his/her received report.
• By clicking Submit button, user can check the validity of written apology.

13. Check Apology Page

• Let user check received apology that he/she reported before.
• By clicking Confirm button, user can redirect to My Page.

States of Reducer

Reducer	State	Description
User	user	Contains user information

Actions of Reducer

Reducer	Action	Function
User	signin()	Sign in user
	signout()	Sign out user

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