Design and Planning

ver 1.0.0 (2019-10-18)

Team Information

Minjun Kim | Myeonghwan Ahn | Seongmin Park | Sungbin Park

System Architecture

 System architecture follows MVC(model-view-controller) design pattern:

 There are 11 views and 4 models.

Model

 Here is E-R (Entity Relationship) diagram for model design.

 Rectangle stands for entity set. Connected lines show the relations between entities. Crossed two line symbols to ‘one’ and circle with half-sliced triangle shows ‘many’. For convenience we added some memo to relation lines. Entity attributes are listed inside entity rectangle, and attributes with ‘PK’ tag indicates primary key.

 Here is relation schema diagram based on E-R diagram. This is also the structure of Django models that our service will use. It also shows core methods of each model.

 Rectangle stands for relation schema. Schema attributes are listed inside relation rectangle, followed by methods for Django models. Attribute with ‘-‘ tag in front indicates primary key, and arrow represents foreign key constraints. Since Django saves whole object for foreign key, this diagram also follows the convention.

View

 UI for view design is as follows:

Sign up page (/signup)

• Sign up a new user
• Get username, user email, password, password_confirm as user inputs

Sign in page (/login)

• Sign in

Community page (/boards)

• Show community boards briefly with some articles
• If the user clicks the board name, navigate to the board detail page.
• If the user clicks the article, navigate to the article detail page.

Chat page (/)

• Show the short guide about how to use on the chat-box
• Get question input as user input
• If the user clicks the send-button, question input will be uploaded on the chat-box and get an answer from SNUbot.

Board detail page (/{boardName})

• Show articles posted on specific board
• There are some tag filters and sort drop-down form
• If the user clicks the tag-filter, user can see filtered articles
• If the user clicks the sort drop-down form, they can see sorted article
• There are criteria drop-down form, input form to get search-keyword, and search-button
• If user click the search button, user can see the searched article

About page (/about)

• Show how to use SNUbot in detail
• Show developers of the SNUbot service

Article create page (/{boardName}/create)

• Get title and content as user inputs
• If the user clicks the confirm-button, article will be posted on the board and navigate to the article detail page.

Article detail page (/{boardName}/{articleId})

• There are like-button and dislike-button.
• If the user clicks the button, user can see the number updated.

Article edit page (/{boardName}/{articleId}/edit)

• If user click the edit button in detail page, page is same as create page but title and content is filled as article.
• Edit button is only visible to writer.

Controller

 Controller design is as follows:

 Left side is view part(frontend) and right side is model part(backend). Left to right arrow represents request from view, and right to left arrow represents response with data from model.

Design Details - Frontend

Organization

React + redux design is as follows and contains container, components, redux actions & reducers:

Relations

Relations between containers(pages) are as follows:

And relations between react containers and redux states are as follows:

Algorithms

Containers

common to redux-connected containers

receive backend response on props with lifecycle methods componentWillReceiveProps or getDerivedStateFromProps

chat

• onClickSubmit

call Chat.send with question
set question to ""

communityMain

• constructor

call Article.clearList
set sessionStorage.searchOptions to main_init
call Article.fetchList
Note: not using componentWillUnmount because of timing issue constructor is called before componentWillUnmount

signin

• onClickSignupButton

redirect to /signup

• onClickSigninButton

call User.signin with userID and password
set userID and password to ””
if successful, redirect to where user was
if not, prompt: userID or password is wrong [after some seconds (0.5s~) (depending on implementation of User in Django backend)]

signup

• onClickUsernameValidate

call User.validateUsername with username

• onClickUserIDValidate

call User.validateID with userID

• onClickConfirm

call User.signup with username, userID, password, passwordConfirm

• onChangeUsername

set User.usernameValidated to False

• onChangeUserID

set User.userIDValidated to False
Note: beware of concurrency errors with other users! even with validate buttons, sameUserIDError, sameUsernameError could happen

boardDetail

• constructor

call Article.clearList
set sessionStorage.searchOptions to detail_init(boardName)
call Article.fetchList

• boardName: link

redirect to /{boardName}

• onClickFilter

set sessionStorage.searchOptions.filter as chosen
set sessionStorage.searchOptions.currentPageNumber to detail_init.currentPageNumber
call Article.fetchList

• onChangeSortCriteria

(depends on implementation of dropdown)

• onClickSortButton

set sessionStorage.searchOptions.sortCriteria as chosen
set sessionStorage.searchOptions.currentPageNumber to detail_init.currentPageNumber
call Article.fetchList

• onChangeSearchCriteria

(depends on implementation of dropdown)

• onClickSearchButton

set sessionStorage.searchOptions.searchCriteria as chosen
set sessionStorage.searchOptions.searchKeyword with searchKeyword
set sessionStorage.searchOptions.currentPageNumber to detail_init.currentPageNumber
call Article.fetchList

• onClickCreateButton

redirect to /{boardName}/create
Note: not using componentWillUnmount because of timing issue constructor is called before componentWillUnmount Note: on refresh, sessionStorage.searchOptions is initialized

articleDetail

• constructor

call Article.clear
call Article.fetch with articleID

• boardName: link

redirect to /{boardName}

• onClickLikeButton

call Article.like

• onClickDislikeButton

call Article.dislike

• onClickEditButton

redirect to /{boardName}/{articleID}/edit

• onClickDeleteButton

prompt popup to make sure to delete
yes -> call Article.delete and redirect to /{boardName}
no -> nothing happens
Note: not using componentWillUnmount because of timing issue constructor is called before componentWillUnmount

articleCreate

• constructor

call Article.clear
call Article.fetch with articleID

• boardName: link

redirect to /{boardName}

• onClickConfirmButton

call Article.post with articleTitle, articleContent
redirect to /{boardName}/{articleID}

• block if user is leaving to make sure

reactjs - Detecting user leaving page with react-router - Stack Overflow
Note: not using componentWillUnmount because of timing issue constructor is called before componentWillUnmount

articleEdit

• constructor

call Article.clear
call Article.fetch with articleID

• onClickBoardName

redirect to /{boardName}

• onClickConfirmButton

call Article.edit with articleTitle, articleContent
redirect to /{boardName}/{articleID}

• block if user is leaving to make sure

reactjs - Detecting user leaving page with react-router - Stack Overflow
Note: not using componentWillUnmount because of timing issue constructor is called before componentWillUnmount

accountInformation

• constructor

TBD (requires user information(username))

• onClickUsernameValidate

call User.validateUsername with username

• onClickConfirm

call User.signup with username, userID, password, passwordConfirm

• destructor (componentWillUnmount)

TBD (requires constructor)
Note: beware of concurrency errors with other users! even with validate buttons, sameUsernameError could happen

Components

navbar

• onClickSidebar

(depends on implementation of sideBar)
opens up sideBar (slide over)

• home: link

redirect to /chat

sideBar

• ask: link

redirect to /chat

• community: link

redirect to /boards

• about: link

redirect to /about

sideBarAccount

• onClickSignin

redirect to /signin

• onClickSignup

redirect to /signup

• onClickAccountInfo

redirect to /account

• onClickSignout

call User.signout
close sideBar or refresh
Note: in edit or create, if user signs out, what would & should happen?

simpleBoardEntry

• boardName: link

redirect to /{boardName}

boardPartition

• boardPartitions: pagination

update sessionStorage.searchOptions.currentPageNumber
call Article.fetchList

boardEntry

• boardEntry: link

redirect to /{boardName}

simpleArticleEntry

• articleTitle: link

redirect to /{boardName}/{chosen article ID}

articleEntry

• articleTitle: link

redirect to /{boardName}/{chosen article ID}

Redux (actions, reducers)

User

• signin

send backend signin, userID and password update idToken, loggedIn, loginAck

• signout

send backend signout
update idToken, loggedIn, loginAck

• signup

send backend signup, username, userID and password

• validateUsername

send backend username
set usernameValidated to True if successful

• validateUserID

send backend userID
set userIDValidated to True if successful

• changeInfo

send backend update, userID, username and password
update idToken

Article

• post

send backend post, articleTitle, articleContent
set Article as posted (articleTitle, articleContent)

• edit

send backend edit, articleID, articleTitle, articleContent
set Article as updated (articleTitle, articleContent)

• delete

send backend delete, articleID
set Article as empty, ArticleAck as False

• fetchThumbnails

send backend fetchThumbnails (GET /community)
update Thumbnails and ThumbnailsAck

• clearThumbnails

clear Thumbnails and ThumbnailsAck

• fetchList

send backend sessionStorage.searchOptions
update ArticlesList and ArticlesAck

• clearList

clear ArticlesList and ArticlesListAck

• fetch

send backend articleID
update Article, ArticleAck

• clear

clear Article and ArticleAck

• like

send backend like, articleID
update Article if successful

• dislike

send backend dislike, articleID
update Article if successful

Chat

• send

send backend question
update chatHistory and chatAck

Design Details - Backend

RESTful APIs are as following:

Model	API	GET	POST	PUT	DELETE
User	/api/signup/	X	Create new user	X	X
	/api/signin/	X	Log in	Change password	X
	/api/signout/	Log out	X	X	X
Article	/api/boards/	X	Create article	X	X
	/api/article/	X	Get Article by posted option	X	X
	/api/article/:article_id/	Get specified article	X	Edit specified article	Delete specified article
Vote	/api/vote/:vote_id/	X	X	update specified vote	X
Chat	/chat/	X	user input	X	X

Implementation Plan

 This implementation plan gives the division of work into sprints. We divide implementation plan not by page, but by feature as some pages in our service has more than one feature. Most of the time will be spent implementing and improving chatbot system as NLP feature is the most important feature in our SNUbot service. Our service have not only static data, such as, override forms and course information, but also dynamic data, such as, today's cafeteria menu and period of application for scholarship. So we will make web crawler and script files that regularly train model with dynamic data. Ways to take care of data is to be determined.

Feature	Difficulties (1 to 5)	Time (hour)	Sprints	Note
Chatbot(NLP)	5	infinity	3 to 6	implement NLP open source
Navbar&Sidebar	2	60	3
Chatbot UI	2	60	3
Login	1	30	3
Sign up	1	30	3
short guide	1	10	3
give some guide	1	10	3
show all board	2	40	3
show article list	2	50	3
show specific article	3	50	3
edit specific article	2	40	3
voting on article	3	40	3
sorting article at board page	2	40	3
search article	2	40	4
tag filtering	3	40	4
crawler	4	100	4	we have to process crawling data to train our NLP model
python script(file I/O)	4	100	5	make train data using static data and crawling data
python script(update model)	4	100	5	train and replace exist model

Testing Plan

Unit Testing

 All components will have proper unit tests to test functionalities. In each sprint, we would test implemented components using Jest and Enzyme. We expect the code coverage to be over 80%.

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

Functional Testing

 Every APIs will be tested using Jest and Enzyme. In sprint 3, we will test overall features such as posting, voting, login etc. In sprint 4, we will test ML features and crawler.

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

Acceptance & Integration Testing

 Since Cucumber allows automation of functional validation in easily readable and understandable format, we will use Cucumber for acceptance test. For integration testing, we will use Travis CI.

• Acceptance Testing: Cucumber
• Integration Testing: Travis CI