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 7 views and 5 models for client, 22 views and 5 model for admin.

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 which does not need response's data. Right to left arrow represents request which need response's 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

Backend Design

RESTful APIs are as following.

for User

Model	API	GET	POST	PUT	DELETE
User	/api/signup/	X	Create new user	X	X
	/api/signin/	X	Sign in	Change password	X
	/api/signout/	Sign out	X	X	X
Article	/api/boards/	X	Get article list by posted option	X	X
	/api/article/	X	Create new article	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
Comment	/api/comment/:id/	Get comment list	Create new comment	update specified comment	Delete specified comment
Story Intent	/api/category/	Get sample question list	X	X	X
Chat	/webhooks/rest/wehbook/	X	user input	X	X

for Admin

Model	API	GET	POST	PUT	DELETE
Intent	/rasa_[:language]/intents/	Get intent list	Create new intent	X	X
	/rasa_[:language]/intent_detail/	Get specified intent	X	Edit specified intent	Delete specified intent
Action	/rasa_[:language]/actions/	Get action list	Create new action	X	X
	/rasa_[:language]/action_detail/	Get specified action	X	Edit specified action	Delete specified action
Story	/rasa_[:language]/stories/	Get story list	Create new story	X	X
	/rasa_[:language]/story_detail/	Get specified story	X	Edit specified story	Delete specified story
Entity	/rasa_[:language]/entities/	Get entity list	Create new entity	X	X
	/rasa_[:language]/entity_detail/	Get specified entity	X	Edit specified entity	Delete specified entity
slot	/rasa_[:language]/slots/	Get slot list	Create new slot	X	X
	/rasa_[:language]/slot_detail/	Get specified slot	X	Edit specified slot	Delete specified slot
Intent Action Story Entity Slot	/rasa_[:language]/make_file/	X	user input	X	X
None	/admin_command/replace_rasa_model/	run script that update rasa model and print it to train file	X	X	X
None	/admin_command/update_server/	set flag at redis	X	X	X

In the server, running script check flag in redis regularly. When flag is on, it train rasa and restart all backends.

Implementation Plan

This implementaion plan gives the division of work into sprints. Some page in our service has more than one feature, we divide implementation plan not by page, but by feature. Because NLP feature is the most important feature in our SNUbot services, most of the time will be implementing and improving chatbot system. And our service have not only static data such as override forms and course information, but also dynamic data such as today's meal menu and period of application for scholarship. So we will make crawler and script file that regulary train model static data and crawler's output. The way how to care 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	10	3
Chatbot UI	3	20	6
Login	1	8	3
Sign up	1	6	3
give some guide	3	9	3
show all board	3	16	3
show specific article	3	8	3
edit specific article	2	8	3
voting on article	3	8	3
sorting article at board page	2	6	3
search article	2	6	4
tag filtering	3	6	4
rasa custom action	4	40	4	custom action for request information(via http request)
python script(file I/O)	4	30	5	make train data using django model
python script(update model)	4	30	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

Integration Testing

 Since Travis CI check install, build and integration, we will use it for Integration Testing.

• Integration Testing: Travis CI