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

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

articleDetail

• constructor

call Article.clear
call Article.fetch with articleID
call Comment.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

• onClickPostCommentButton

call Comment.write

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

CustomNavbar

• onClickChat

redirect to /chat

• onClickCommunityMain

redirect to /boards

• onClickAll

redirect to /boards/all

• onClickHot

redirect to /boards/hot

• onClickSignin

redirect to /signin

• onClickAccount

redirect to /account

• onClickSignup

redirect to /signup

• onClickSignout

call User.signout

IncomingMessage

• parseIncomingMessage

OutgoingMessage

articleEntry

• articleTitle: link

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

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

• 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

Comment

• fetchComment

send backend articleId update commentList data

• clearComment

clear commentList data

• postComment

send backend articleId, content update commentList data

• editComment

send backend articleId, commentId, content update commentList data

• deleteComment

send backend articleId, commentId update commentList data

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