Design and Planning

ver 1.1.0 (2019-12-17)

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

Chat

• constructor

initialize local state call clearChatHistory and fetchCategory

• componentDidUpdate

call scrollToBottom

• chatLog

lambda on chatHistory; if message is from user, return . else, return

• parseCategory

lambda on category; wrap category object in

• shortGuide

lambda on categoryList; call parseCategory for every category

CommunityMain

• constructor

call fetchAllBoard and fetchHotBoard

• articleParser

wrap article in

BoardDetail

• constructor

initialize local state call fetchArticles

• statusToSelected

used to separate selected button from not-selected button

• setAndFetch

set filter as given and call fetchArticles

• makeArticleEntry

wrap article in

• buttonFactory

make with given name

• dropdownItemFactory

make with given type and name

Signup

• constructor

initialize local state if logged in, redirect to previous page

• pushHandler

redirect to /signin if signup was successful (called after signup is done)

• SignupHandler

check conditions if conditions are met, call signup

• errorToAlert

make error message from error status in props and local state

Signin

• constructor

initialize local state if logged in, redirect to previous page

• SigninHandler

empty out input password and call signin

AccountInformation

• constructor

initialize local state if not logged in, redirect to /signin if logged in, call fetchUser

• componentWillReceiveProps

if not logged in, redirect to /signin if fetchUser is complete, set local state if changeInfo is complete, call signout and redirect to /signin

• ChangeInfoHandler

check conditions if conditions are not met, set error conditions on local state if conditions are met, reset error conditions and call changeInfo

• errorToAlert

make error messages from error status in props and local state

Components

ArticleCreate

• onClick create-article-button

if given id is not default value (intended behavior is post), call postArticle
if not, call editArticle

ArticleDetail

• tagToDescription

make description string from given tag

• makeCommentEntry

return wrapped in <Modal.Footer>

• voteHandler

if not logged in, popup
if logged in, call like or dislike depending on input

• commentHandler

if not logged in, popup
if logged in, call postComment and reset input comment string

• dropdownItemFactory

make with given name

ArticleEntry

• tagToBg

return background-setting string with given tag

• onClick article-entry

call fetchComment, fetchArticle and show

CustomNavbar

• makeNavLink

make <Nav.Link> with given url and display string

IncomingMessage

• parseIncomingText

return parsed response text with
to make newline

Redux (actions, reducers)

User

• fetchUser

GET /api/account/
set sessionStorage with response nickname
set loadingUser to false
store response in redux store

• signin

POST /api/signin/
if error, dispatch with SIGN_IN_FAIL and set corresponding flags in redux state
if not, {
set sessionStorage with sessionid in Cookie, input username
GET /api/account/
set sessionStorage with response nickname
dispatch with SIGN_IN and set corresponding flags in redux state
redirect to /boards
}

• signout

clear used sessionStorage
GET /api/signout/ , dispatch with SIGN_OUT and set corresponding flags in redux state

• signup

POST /api/signup/
if error, {
dispatch with corresponding error flag (SIGN_UP_CREATE_FAIL or SIGN_UP_SUBMIT_FAIL)
set corresponding flags in redux state
} if not, dispatch with SIGN_UP and set corresponding flags in redux state

• changeInfo

PUT /api/account/
if error, {
dispatch with corresponding error flag (CHANGE_INFO_DUPLICATE_NICKNAME or CHANGE_INFO_WRONG_PASSWORD)
set corresponding flags in redux state
}
if not, dispatch with CHANGE_INFO and set corresponding flags in redux state

• clearUser

clear used sessionStorage
dispatch with CLEAR_USER and set corresponding flags in redux state

admin

• updateServer

GET /rasa_kor/makefile/
GET /rasa_eng/makefile/
GET /admin_command/update/

• updateModel

GET /admin_command/replace

Article

• fetchArticle

GET /api/article/${given_id}
dispatch with FETCH_ARTICLE and set redux state with response data

• clearArticle

dispatch with CLEAR_ARTICLE and clear article of redux state

• postArticle

POST /api/article/
dispatch with POST_ARTICLE, set article and edit articleList of redux state

• editArticle

PUT /api/article/${given_id}
dispatch with EDIT_ARTICLE_TAG, set article and edit articleList, articleListHot, articleListAll of redux state

• editArticleTag

PUT /api/article/${given_id}
dispatch with EDIT_ARTICLE_TAG, set article and edit articleList, articleListHot, articleListAll of redux state

• deleteArticle

DELETE /api/article/${given_id}
dispatch with DELETE_ARTICLE, empty article of redux state

• fetchAllBoard

POST /api/boards/
dispatch with FETCH_ALL_BOARD and set articleListAll of redux state

• clearAllBoard

dispatch with CLEAR_ALL_BOARD and reset articleListAll of redux state

• fetchHotBoard

POST /api/boards/
dispatch with FETCH_ALL_BOARD and set articleListAll of redux state

• clearHotBoard

dispatch with CLEAR_HOT_BOARD and reset articleListHot of redux state

• fetchArticleList

POST /api/boards/
dispatch with FETCH_ARTICLE_LIST and set articleList, articlePages of redux state

• clearArticleList

dispatch with CLEAR_ARTICLE_LIST and reset articleList, articlePages of redux state

• putVote

PUT /api/vote/${given_id}
dispatch with VOTE and update article, articleList, articleListAll, articleListHot of redux state

Chat

• getMessage

internal function for dispatching RCV_QUESTION

• sendMessage

set senderID with CSRF token in cookie POST /webhooks${lang}/rest/webhook
dispatch with SEND_QUESTION and RCV_QUDSTION
update chatHistory of redux state

• clearChatHistory

dispatch with CLEAR_CHAT_HISTORY
reset chatHistory of redux state

• fetchCategory

GET /api/category/
dispatch with CHAT_CATEGORY and set engCategory, korCategory of redux state

Comment

• fetchComment

GET /api/comment/${id}/
dispatch with FETCH_COMMENT and update commentList of redux state

• clearComment

dispatch with CLEAR_COMMENT and reset commentList of redux state

• postComment

POST /api/comment/${articleId}/
dispatch with POST_COMMENT and update commentList of redux state

• editComment

PUT /api/comment/${articleId}/
dispatch with EDIT_COMMENT and update commentList of redux state

• deleteComment

DEL /api/comment/${articleId}/
dispatch with DELETE_COMMENT and update commentList of redux state

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