Skip to content

Design and Planning

Jump to bottom
cube-c edited this page Dec 17, 2019 · 81 revisions

Document Revision History

Design and Planning Document

18/10/2019, version 1.0

31/10/2019, version 1.1

13/12/2019, version 1.2

17/12/2019, version 1.3

System Architecture

Above architecture show generalization of the entire system. Server get queries from client, and nginx manage queries whether they are frontend query or backend query. If this query is backend query then nginx pass over queries to gunicorn by socket. Gunicorn manage the backend query by django and postgresql. if this query is frontend query then nginx pass over queries to react. There are 4 components for frontend: dispatcher, store, action creators, and views. React manage the query with external apis such as google-map api.

Design Details

Model

This image shows a ERD(Entity Relation Diagram) of the model.

View

UI / UX

  1. Login Page
    • User will log-in on this page.
    • There are two input fields(id-input, password-input) and two buttons(login-button, signup-button).
    • When the user clicks the login-button after writing valid id and password, user will navigate to Main Page. If not, user will stay on this page.
    • When the user clicks the signup-button, user will navigate to Signup Page.
    • User who is not logged in will be redirected to this page.
  2. Signup Page
    • User can sign up on this page.
    • There are four input fields(id-input, password-input, confirm-password-input, email-input) and one button(signup-button).
    • When the user clicks the signup-button after writing id, password, confirm-password, and email, user will navigate to Verification Page and a verification email will be sent to the written email.
  3. Verification Page
    • There is only one button(return-button).
    • When the user clicks the return-button, user returns to the Login Page.
  4. Main Page
    • User can see time table and friends list and can redirect to timetable management page and friends page and settings page.
    • There are two table(schedule, friends), three buttons(timetable-management-button, friend-button, personal-information-button).
    • In schedule table, it shows representative schedule. In friend table, it shows friends of user and each friend column has friend’s name and friend’s current status.
    • When the user clicks the timetable-management-button, user will navigate to timetable-management-page.
    • When the user clicks the friend-button, user will navigate to friend-page.
    • When the user clicks the personal-information-button, user will navigate to Personal Information Page.
  5. Friend Page
    • User can see the list of friends and their timetable.
    • There are four buttons(timetable-management-button, friend-button, personal-information-button, friend-request-button).
    • timetable-management-button, friend-button, personal-information-button work as same as the Main Page.
    • If the user clicks friend-request-button, user will navigate to Friend Request Page.
  6. Friend Request Page
    • User can search other users by id and send a friend request, and can see the list of friend list that user sent.
    • User can accept received friend request.
    • There is one button(back-button)
    • When user enters other’s id and clicks it, friend request is sent to that user.
    • When user click accept button, they both add each other as a friend.
    • When user click deny button, friend request that user received will be deleted.
    • When user click cancel button, friend request that user sent will be deleted.
  7. Personal Information Page
    • User can change his/her personal information and password
    • There are five input fields(department-input, grade-input, current-password-input, password-input, confirm-password-input) and one button(change-button).
    • If the user inputs changed personal information and clicks change-button, user’s personal information is changed to a new one.
  8. Timetable Management Page
    • User can create timetable, edit timetable, delete timetable, search courses, see and rename timetables.
    • There are one table(time-table), three list(time table selector, course selector, current courses), one input(course-search-input), one selector(semester selector), and six button(timetable-recommend-button, course-search-button, search-result-button, current-courses-button, delete-current-timetable-button, create-empty-timetable-button)
    • if the user inputs course information to course-search-input and clicks course-search-button, searched courses appear at course-selector list and when user clicks valid course, then the course inserted to current timetable.
    • if the user clicks timetable at time-table-selector, then time-table table change to clicked timetable.
    • if the user clicks current-courses-button, then user can see courses which are in timetables.
    • if the user clicks create-empty-timetable-button, then empty timetable created and shown on time-table table.
    • if the user clicks delete-current-timetable-button and timetable is more than two, then current timetable is deleted and shows next timetable. if representative timetable has deleted then next timetable becomes representative timetable.
    • if the user clicks course-search-button, then user can see searched courses.
    • if the user clicks a course in timetable(or course in current course list), user can see pop up with course detail and can change course's color, time, position.
    • if the user clicks timetable-recommend-button, then user navigate to Timetable Recommendation Page.
    • if the user clicks timetable-title, then user can edit name of the timetable.
  9. Timetable Recommendation Page
    • User can receive timetable recommendation by setting some information.
    • There are two pages which get information from users, and there is a page which make timetable for user
    • This page will get ‘time that user doesn’t want to have classes’, ‘minimum, maximum credits that user want to take(as total and as major)’, ‘courses that user wants to take, and user's preference’.
    • After the user inputs required information, recommended timetables made by machine learning will be shown in this page.
    • User can save recommended timetables to his/her own timetable list.

Container & Component

Container

  • Account : can change user's information likes name or department or etc.
    • handleLogout() : log out handler
    • toggleModal() : handle for pop up closing
    • handleChange(infos) : check validity when user changes input values and change invalid value message
  • CourseDetail : shows information about specific course
    • componentDidMount() : get times when the render begins
    • shouldComponentUpdate(nextProps) : if course id changed then component should updated
    • setPosition(index) : for google map, we have to save index in state
    • setToProps(props) : add times to component's state
    • handlePosition(building, index) : change building's information in index
    • appendTime() : add time of course
    • deleteTime() : delete time of course
    • handleWeekday(index, value) : change weekday of time in course
    • handleTime() : change start time and end time of time in course
    • handleColor() : change color of course
    • updateCourse() : post course with changed values to backend course data
    • postCustom() : add course with new custom course to backend course data
    • validcheck() : check is valid for times
  • CourseMap : shows google map about specific course
    • shouldComponentUpdate(nextProps) : automatically complete search results when we can confirm building by input
    • searchBuilding() : search building by name
    • updateCenter() : if map's position changed then update googlemap
    • enterKey() : can search by enter
  • Datetime : user can see and change time from 00:00 to 23:59
    • shouldComponentUpdate(nextProps) : handle when props value is changed
    • clickListener() : close toggle when user clicks
    • toggleDropdown() : change toggle status when user clicks
    • handleChange(str) : handle for inner value changes
    • handleBlur() : change value when inputs are changed
    • changeHour(value) : handle for user changes hour with button
    • changeMinute(value) : handle for user changes minute with button
  • Friend : user can send and get friend request, and can see timetable of existing friend
    • handleLogout() : log out handler
    • handleTimetable(friend) : handle when view friend's timetable button is clicked. show friend's timetable
    • handleDeleteFriend(friend) : delete friend relation with clicked friend
    • enterKey(event) : handle when user pressed enter key
    • handleSearch() : search user with email that user entered
  • Login : can login or sign up
    • handleLogin() : Handle login status when the signin button was pressed
    • goToSignup() : redirect user to signup page
    • enterKey() : handle when user pressed enter key during sign in
  • Main : shows important information such as main timetable, friends’ status, etc.
    • gotoFriend(id) : redirect to friend page and show the friend's timetable when user clicks friend
    • handleLogout() : Logout when the signin button when the signout button was pressed
  • SignUp : can sign up with with informations filled in
    • handleSignup(infos) : check validity and send email if user's input is valid
    • goToLogin() : redirect user to login page
  • TimetableManagement : shows informations about timetables and can modify timetable with searched courses or modify courses in timetable
    • componentDidMount() : initially calls 50 courses
    • handleLogout() : log out handler
    • postCourse(id) : add course to timetable
    • deleteCourse(id) : delete course from timetable
    • deleteTimetable(id) : delete timetable
    • show(id, title) : handle for viewing timetable changed. new timetable that user is watching becomes main timetable
    • createEmptyTimetable() : add empty timetable to user
    • showCoursesInSearch() : show searched courses
    • showCoursesInTimetable() : show courses in timetable
    • search() : search courses with data from search bar
    • editTimetableTitle(title) : change timetable's title
    • enterKey() : check if enter key is pressed
    • handleMouseEnter(course) : show course temporary that user entered mouse
    • handleMouseLeave(course) : delete course that was shown temporary
    • searchOnChange(event, type) : handler for value changes in search bar
    • scrollHandler(scrollTop) : check if user needs more courses (when user scrolls to the limit)
    • openCourseDetail(course) : handle for user clicked to see course detail
  • RecommendConstraint : user can add constraint in recommendation
    • handleDaysPerWeek(value) : handler for "days per week" changes
    • handleCreditMin(value) : handler for "credit min" changes
    • handleCreditMax(value) : handler for "credit max" changes
    • handleMajorMin(value) : handler for "major min" changes
    • handleMajorMax(value) : handler for "major max" changes
  • RecommendCourse : can give scores to courses
    • componentDidMount() : calls functions that get data for initial view
    • segmentToString(weekday, startTime) : returns string of week day and start time
    • scrollHandler(scrollTop) : handler for scrolling down. calls API when more courses should be shown
    • changeTab(tab) : handler for changing tabs between rated courses tab and unrated courses tab
    • courseElement(course) : returns element shows each course
    • searchOnChange(event, type) : handler for searchbar change
    • search() : handle searching and change view with search result
    • enterKey() : handle to check valid key is pressed
  • RecommendResult : Shows recommended timetables
    • changeview(index) : change view with other timetable that user selected
    • onClickSave() : handle for user clicks save button. saves timetable and shows text that timetable is saved
    • loadTimetables() : get recommended timetable
  • RecommendTime : User can give scores to each time slots
    • mouseDownListener(event) : check flag that mouse is down
    • mouseUpListener() : check flag that mouse is up. save time preference result
    • handleColor(index) : handle for user changing colors (preference)
    • handleFill(xIndex, yIndex, force) : fill (xIndex, yIndex) with color
  • TimetableRecommend : Outer space for recommendation page
    • handleLogout() : log out handler
    • handleValid(value) : change state when validity is changed
    • movePage(offset) : handler for moving page in recommendation page.
  • Verify : Shows when email is sent during sign up
    • gotoLogin() : redirect to login page

Component

  • FrontBar : shows a logo with the link to the login page.
  • MainPageFriendView : shows a friend list from the main page.
  • SearchBar : shows a search bar with filter setting panel.
  • TimeTableView : shows a timetable of user or user’s friend.
  • TopBar : shows a top bar of main page, timetable management page and friend list page.
  • CourseElement : shows summarized information of a course.

Action

  • postSignup (user)
    • Action Creator called when new user tries to sign up
    • Send information of new user (email, password, username, grade, department)
    • Get sign up status
  • postSignin (user)
    • Action Creator called when user tries to sign in
    • Send login information of user (email, password)
    • Get sign in status and session cookie
  • getSignout ()
    • Action Creator called when user tries to sign out
    • Get sign out status
  • getVerify (token)
    • Action Creator called in email verification
    • Send verification token to backend
    • Backend checks if some user’s token matches with token received from frontend
    • If the token is matched successfully, make the user’s activation status true
    • Get account verify status (receive true when the match was successful)
  • getUser ()
    • Action Creator called to get current user’s information
    • Get current user’s information (who is currently logged in)
  • putUser (user)
    • Action Creator called to modify current user’s information
    • Send current user’s modified information
  • getFriend (id)
    • Action Creator called to get specific friend’s information of current user
    • Get the information of :id if :id is friend with current user
  • postUserSearch (email)
    • Action Creator called to add new friend of current user
    • Add friend relation of :id and current user in backend if :id is a valid user id
  • getFriend ()
    • Action Creator called to get current user’s friends and friend request list of current user
    • Get current user’s friend list and current user's friend request list
  • getTimetableFriend (id)
    • Action Creator called to get friend's timetable
    • Get selected friend's timetable from :id if :id is a valid timetable
  • deleteFriend (id)
    • Action Creator called to delete a friend of current user
    • Delete friend relation if :id and current user in backend if :id is current user’s friend
  • receiveFriend (id)
    • Action Creator called to add new friend request to current user
    • Add friend request from :id to current user in backend if :id is a valid user id
  • rejectFriend (id)
    • Action Creator called to delete a friend request from current user
    • Delete friend request from :id from current user in backend if :id sent a friend request
  • cancelFriend (id)
    • Action Creator called to delete a friend request to current user
    • Delete friend request from :id to current user in backend if :id sent a friend request
  • getPrefTime ()
    • Action Creator called to get current user’s time preference
    • Get current user’s preferred / unpreferred time list
  • putPrefTime (time)
    • Action Creator called to modify current user’s time preference
    • Send current user’s modified preferred / unpreferred time list
  • getPrefCourse ()
    • Action Creator called to get current user’s course preference
    • Get current user’s preferred / unpreferred course list
  • putPrefCourse (course)
    • Action Creator called to modify current user’s course preference
    • Send current user’s modified preferred / unpreferred course list
  • getTimetable (id)
    • Action Creator called to get current user’s timetable
    • Get current user’s timetable from :id if :id is valid timetable id
  • editTimetable (id, title)
    • Action Creator called to edit timetable
    • Change the title of timetable from :id if :id is valid timetable id
  • getTimetables ()
    • Action Creator called to get current user’s timetables
    • Get current user’s all timetables as list
  • postTimetable ()
    • Action Creator called to add new timetable to current user
    • Add an empty timetable to current user in backend
  • postMainTimetable ()
    • Action Creator called to change main timetable of current user
    • Change main timetable id of current user
  • deleteTimetable (id)
    • Action Creator called to delete user's timetable
    • Delete timetable from :id in backend which is valid timetable and not main timetable
  • getMainTimetable ()
    • Action Creator called to get current user’s main timetable
    • Get current user’s main timetable
  • getRecommend ()
    • Action Creator called to get saved recommend data of current user
    • Get saved recommendation data about user's timetable
  • postRecommend ()
    • Action Creator called to request new recommend of current user with constraint about recommendation
    • Get newly calculated recommendation about user's timetable
  • deleteRecommend ()
    • Action Creator called to delete saved recommend data of current user
    • Delete saved recommendation data about user's timetable
  • getLastPage ()
    • Action Creator called to get information about what page to load in recommend page
    • Get user's most recently visited page number of recommend page
  • putLastPage ()
    • Action Creator called to put information about what page to load in recommend page in next visit
    • Put user's most recently visited page number of recommend page
  • getConstraints (constraints)
    • Action Creator called to get constraints about recommendation of user
    • Get constraints about recommendation of user
  • editConstraints (constraints)
    • Action Creator called to edit constraints about recommendation of user
    • Change constraints about recommendation of user
  • putConstraints (constraints)
    • Action Creator called to put constraints about recommendation of user
    • Change constraints about recommendation of user
  • putMainTimetable (timetable)
    • Action Creator called to change current user’s main timetable
    • Send current user’s new main timetable, and apply it at backend
  • getTimetableId (id)
    • Action Creator called to get current user’s specific timetable (specified with :id)
    • Get timetable which has id of :id if current user owns :id
  • putTimetableId (id, timetable)
    • Action Creator called to change current user’s specific timetable
    • Send timetable and change timetable :id to received timetable in backend
  • getCourses (start, end, criteria)
    • Action Creator called to search courses which meet criteria (required in search function) from start to end
    • Get courses which meet criteria as list from start to end from backend
  • setCourses (start, end, criteria)
    • Action Creator called to search courses which meet criteria (required in search function) from start to end
    • Clear current course search result and get courses which meet criteria as list from start to end from backend
  • editCourse (id, values)
    • Action Creator called to change course with values
    • Change course of :id which is valid course with values in backend
  • deleteCourse (id)
    • Action Creator called to delete course
    • Delete course of :id which is valid course in backend
  • postCourse (timetable_id, course_id)
    • Action Creator called to add course to timetable
    • Add course from :id which is valid course to timetable from :id which is valid timetable in backend
  • postCustomCourse (timetable_id, course)
    • Action Creator called to add custom course to timetable
    • Add custom course to timetable from :id which is valid timetable in backend
  • postCourseTemp (course)
    • Action Creator called to add temporary course to user's timetable
    • Add temporary course to timetable in frontend
  • deleteCourseTemp (course)
    • Action Creator called to delete temporary course to user's timetable
    • Delete temporary course to timetable in frontend
  • putCourseprefTemp (id, score)
    • Action Creator called to edit course preference of a course stored in reducer
    • Edit course preference data in reducer
  • putCoursepref (id, score)
    • Action Creator called to edit course preference of a course stored in backend
    • Edit course preference data in backend
  • deleteCourseprefTemp (id)
    • Action Creator called to delete course preference of a course stored in reducer
    • Delete course preference data in reducer
  • deleteCoursepref (id, score)
    • Action Creator called to delete course preference of a course stored in backend
    • Delete course preference data in backend
  • getTimePref (table)
    • Action Creator called to get timepref about recommendation to user
    • Get time preferences in user in backend
  • putTimePref (table)
    • Action Creator called to put timepref about recommendation to user
    • Change time preferences in user in backend
  • getRatedCourse (start, end, searchValues)
    • Action Creator called to get rated courses from user about recommendation
    • Get rated courses in user in backend
  • getUnratedCourse (start, end, searchValues)
    • Action Creator called to get rated courses from user about recommendation
    • Get rated courses in user in backend
  • setRatedCourse (start, end, searchValues)
    • Action Creator called to set rated courses from user about recommendation
    • change rated courses in user in backend
  • setUnratedCourse (start, end, searchValues)
    • Action Creator called to set rated courses from user about recommendation
    • change rated courses in user in backend
  • setSearchable ()
    • Action Creator called to activate search bar in management page
    • change activation status in reducer
  • setRatedSearchable ()
    • Action Creator called to activate search bar in rated course preference view
    • change activation status in reducer
  • setUnratedSearchable ()
    • Action Creator called to activate search bar in unrated course preference view
    • change activation status in reducer
  • searchBuildings (name)
    • Action Creator called to get search result of buildings
    • get a list of buildings which are matched with name
  • autoComplete ()
    • Action Creator called to change auto complete status in reducer
    • set auto complete status in reducer to false

Reducer

  • user
    • manages user’s account information
    • provides user logged-in information
    • provides logged-in user’s information
  • timetable
    • provides user's timetable to display
  • timetable_friend
    • provides friend's timetable to display
  • timetables
    • provides logged-in user's timetable list
  • searched
    • provides search complete status in management page
  • courses
    • provides course list to display
  • friend
    • provides list of logged-in user's friends
  • friend_send
    • provides list of logged-in user's sent friend request
  • friend_receive
    • provides list of logged-in user's received friend request
  • search
    • manages user search information in friend page
  • constraints
    • manages constraints information in recommend page
    • provides max days per week, min/max total credit, min/max major credit information
  • time_pref_table
    • provides time preference data in recommend page
  • rated_course
    • provides list of rated course in recommend page
  • unrated_course
    • provides list of unrated course in recommend page
  • changed_courses
    • provides list of preference changed courses
  • ratedSearched
    • provides search complete status in recommend page rated course view
  • unratedSearched
    • provides search complete status in recommend page unrated course view
  • recommended_timetables
    • provides user's recommended timetables
  • lastPage
    • provides user's recently visited page number in recommendation page
  • buildingList
    • provides building search result
  • search_auto_complete
    • provides auto complete status in building search

Backend API

Model API GET POST PUT DELETE PATCH
User /signup X Create new user and send verification email X X X
User /signin X Log-in ASSA and get user id X X X
User /signout Log-out ASSA X X X X
User /verify/:uid/:token Verify and activate account X X X X
User /user Get a user information X Change personal user data X X
User /user/friend Get information of user's friends and friend requests X X X X
User /user/friend/:id X Accept a friend request X Delete a friend relationship X
User /user/friend/search X Send a friend request from email address X X X
Timetable /timetable Get all of user's timetables Create a new timetable X X X
Timetable /timetable/:id Get specific timetable X Change specific timetable Delete specific timetable X
Timetable /timetable/:id/course X Add new course to timetable X X X
Timetable /timetable/:id/customCourse X Add new custom course to timetable X X X
Timetable /timetable/main/:id X Change main timetable X X X
CustomCourse /customCourse/:id X X Change custom course Delete custom course X
Course /timetable/:id/course Get courses of specific timetable X X X X
Course /course Get courses that meet criteria X X X X
Building /building Get buildings that meet criteria X X X X
CoursePref /coursepref/:id Get user's preference of a course X Change user's preference of a course Delete user's preference of a course X
TimePref /timepref/ Get user's time preference as a table X Update user's time preference with a table X X
RecommendCourse, RecommendTimetable /recommend Get saved recommendation data Get newly calculated recommendation data X Delete saved recommendation data X
User /constraints X X change user's custom constraints on recommend timetable X X
CoursePref /coursepref/rated get rated course preferences X X X X
CoursePref /coursepref/unrated get unrated course preferences X X X X
CoursePref /coursepref/:id get specfic course preference X change specific course preference X X

Implementation Plan

Page Feature Difficulties Time(days) Sprints Requirements Assignee
Login Signing up ASSA 2 2 3 Find out how to verify email 김현수
Login Log-in ASSA 2 1 2 정재윤
Login Log-out ASSA 1 2 3,4,5 김영찬
Main Show timetable and friend list 2 1 2,3 구준서
Timetable-management Checking specific timetable 2 2 3 Requires DB of SNU courses 구준서
Timetable-management Creating an empty timetable 2 2 3 김현수
Timetable-management Deleting the timetable 1 1 3 정재윤
Timetable-management Adding specific subjects to the timetable 1 2 3 김영찬, 김현수
Timetable-management Set a timetable as main timetable 1 1 3 정재윤
Timetable-recommendation Get timetable recommendations 3 4 5 Requires ML implementation 전부
Timetable-recommendation Save recommended timetables 1 1 5 김영찬
Friend-request Checking a friend request 1 1 4 정재윤
Friend-request Sending a friend request 1 1 4 정재윤
Friend-request Accept a friend request 1 1 4 정재윤
Friend-request Checking friend's status 1 1 4 정재윤
CSS Make view beautiful 1 4 3-5 정재윤

Testing Plan

Unit testing

Every unit of frontend (action creator, reducer, component, container) will be tested with jest and enzyme. Backend Django part will be tested with Python unit testing tool. We will manage our code coverage above 70% in any case.

Functional testing

Every APIs will be covered in functional testing. The tools for functional testing will be same with unit testing - frontend part will be tested with jest / enzyme, backend part will be tested with Python unit testing tool. Functional testing would be started when every implementation and unit testing is done. It will be done by following user stories written in our requirement and specification document.

Integration testing

We will use travis CI for integration test.

Clone this wiki locally