Skip to content

System Architecture

Jump to bottom
Davin Byeon edited this page Oct 19, 2019 · 22 revisions

2019/10/19, version 1.01

Document Revision History

Rev. 0.10 2019-10-19 - beta version

Rev. 0.20 2019-10-19 - slightly change order of View, add Controller

Rev. 0.30 2019-10-19 - add image of overall system architecture

Rev. 0.40 2019-10-19 - add updated UI design

Rev. 1.00 2019-10-19 - basically completed

Rev. 1.01 2019-10-19 - slightly change on View

System Architecture

The overall system architecture of PapersFeed is represented as follows. It consists of two main components: frontend and backend. Deployment components like database and servers are included as well. Especially, we will use Microsoft Azure services and apply some ML features for recommendation to users and extracting keywords from abstracts of papers.

SystemArchitecture (1)

Model

This is the model diagram of PapersFeed. 'Field Type' is based on Django.(EnumField as used in 'django-mysql')

Models

View

Overall user interface for view design is as follows.

UI_draft_3_5

1. Intro Page('/')

  • The page where a user meets PapersFeed for the first time.
  • Simple description for PapersFeed and two buttons, 'sign_up' and 'sign_in'.
  • Enter information at 'Sign Up' or 'Sign In' popup to logs in and navigates to the main page.
  • If logged out, redirect to the 'Intro Page' from any page.

2. Main Page('/main')

  • Consists of 'Upper Bar', 'Side Bar' and 'User Feed' components.
  • A user can select what to be displayed on 'User Feed'. By default, 'User Feed' is same as 'Subscription'.

3. Upper Bar

  • Always rendered at all pages except popup windows and 'Intro Page'.
  • If a user clicks the logo of PapersFeed, navigates to 'Main Page'.
  • If a user enters text in the search box and press the search button, then navigates to 'Search Result Page'.
  • If a user enters no text in the search box, the search button will be disabled.
  • If a user clicks the 'notify_icon', the 'Notification' menu will be expanded.
  • If a user clicks the 'profile_icon', the 'My Account' menu will be expanded.

3-1. Notification

  • Expanding component rendered from the 'Upper Bar', not rendered at separate page.
  • Shows the history of other users' activities related to the currently logged in user.
  • If a user clicks one from the list, navigates to the source page of that item.

3-2. My Account

  • Expanding component rendered from the 'Upper Bar', not rendered at separate page.
  • If a user clicks 'my_profile' button, navigates to the 'Profile Page' of current user.
  • If a user clicks 'sign_out' button, the user will be logged out and navigate to the 'Intro Page'.

4. Search Result('/search')

  • Shows a list of search results of the paper, collection, and user from each database for the entered string.
  • Only one type of the search result list is displayed on the page, and the user can see another list by pressing the tab button.

5. Side Bar

  • Contains buttons to History, Subscription and My Collection.
  • Always rendered at all pages except popup windows and Intro Pages

6. Subscription('/subscribed' if not selected as 'Main Page')

  • The page which shows activity history of users who follow or share the same collection with current user.

7. Profile Page(‘/profile/:user_id’)

  • Show information about a user, including his/her followings, followers, user description, collections and reviews.
  • There are the number of collections as text, ‘follower_list’ button, ‘following_list’ button, ‘edit’ or ’follow’/’unfollow’ button, ‘collections’ tab and ‘reviews’ tab.
  • If a user clicks ‘follower_list’ button, navigate to 'Follower List Page'.
  • If a user clicks ‘following_list’ button, navigate to 'Following List Page'.
  • If the user clicks ‘edit’ button, navigate to 'Profile Edit Page'.
  • ‘collections’ tab gets the list of collections created by the owner of Profile Page and shows them. If a user clicks the name of one of collections on the list, navigate to ‘Collection Detail Page’ of the selected collection.
  • ‘reviews’ tab gets the list of reviews written by the owner of 'Profile Page' and shows them. If a user clicks the name of one of reviews on the list, navigate to ‘Review Detail Page’ of the selected review.

8. Profile Edit Page(‘/profile/:user_id/edit’)

  • Edit the profile of a user.
  • There are ‘photo_change’ button and ‘apply’ button
  • Get the new description about a user as user input
  • If a user clicks ‘photo change’ button, there should be ‘Browse File’ popup.
  • If the user clicks ‘apply’ button, navigate to 'Profile Page' and the change should be applied.

9. Follower List Page(‘/profile/user_id/followers’)

  • Show the follower list of the owner of 'Profile Page'.
  • If a user clicks the name of one of the other users on the list, navigate to ‘Profile Page’ of the selected user.

10. Following List Page(‘/profile/user_id/followings’)

  • Show the following list of the owner of 'Profile Page'.
  • If a user clicks the name of one of the other users on the list, navigate to ‘Profile Page’ of the selected user.

11. Paper Detail Page(‘/papers/:paper_id’)

  • Show paper specification of a paper and reviews on it
  • There are ‘add_to_collection’ button, ‘like’/’unlike’ button and ‘add_review’ button to create a review.
  • If a user clicks ‘add_to_collection’ button, there should be ‘Paper Add To Collection’ popup.
  • If a user clicks ‘add’ button, navigate to 'Review Create Page'.
  • If a user clicks the name of one of the reviews on the list, navigate to 'Review Detail Page' of the selected review.

12. Review Create Page(‘/papers/:paper_id/create’)

  • Create a review on a paper.
  • There are paper specification, text areas to write the title and content of a review, and ‘add’ button.
  • If a user fills the text areas and clicks ‘add’ button, navigate to 'Review Detail Page' and the new review should be added to the review list of the paper.

13. Review Detail Page(‘/papers/:paper_id/:review_id’)

  • Show a review on a paper.
  • There are ‘like/unlike’ button, the number of likes the review gets, review content, ‘edit’ button, ‘delete’ button, replies related to the review, text area for a new reply, ‘reply_add’ button for a new reply, and ‘edit’ button, ‘delete’ and ‘like/unlike’ button for the existing replies.
  • If the user clicks ‘edit’ button, navigate to ‘Review Edit Page’.
  • If the user clicks ‘delete’ button, the review should be eliminated from the list of reviews on a specific paper and navigate to ‘Paper Detail Page’ of the related paper.
  • If the user clicks ‘edit’ button of a reply, open ‘Reply Edit’ popup.

14. Review Edit Page(‘papers/:paper_id/:review_id/edit’)

  • Edit the selected review.
  • There are paper specification, text areas to write the title and content of a review, and ‘add’ button.
  • If a user fills the text areas and clicks ‘add’ button, navigate to 'Review Detail Page' and the new review should be added to the review list of the paper.

15. Collection Page(‘/collections’)

  • Show list of collections which the user has
  • There are ‘all’ tab and ‘shared’ tab, and the ‘all’ tab is selected by default.
  • ‘all’ tab shows the list of all collections where the user is the owner or member, and shows them. If the user clicks the name of one of collections on the list, navigate to ‘Collection Detail Page’ of the selected collection.
  • ‘shared’ tab shows the list of collections which include the user and have multiple members, and shows them. If the user clicks one of collections on the list, navigate to ‘Collection Detail Page’ of the selected collection.

16. Collection Detail Page(‘/collections/:collection_id’)

  • Show information of the collection and list of papers included in the collection
  • There are ‘invite’ button, ‘edit’ button, and specfiication of the collection. Also there are a list of papers included in the collection and a list of replies about the collection.
  • If a user clicks one of the papers on the list, navigate to ‘Paper Detail Page’ of the paper.
  • If a user clicks ‘Edit’ button, navigate to ‘Collection Edit Page’.

17. Collection Edit Page(‘collections/:collection_id/edit’)

  • Edit the selected collection
  • There are text areas to write a new collection name and description, ‘apply’ button, ‘manage_member’ button, ‘transfer_ownership’ button, and ‘delete_collection’ or ‘leave_collection’ button.
  • If a user clicks ‘apply’ button, navigate to ‘Collection Detail Page’ of the collection.

18. History Page(‘/history’)

  • Show papers and reviews a user recently access
  • There are ‘papers’ tab and ‘reviews’ tab, and the ‘papers’ tab is selected by default.
  • ‘papers’ tab shows the list of papers viewed by the user and shows them. If the user clicks the name of one of papers on the list, navigate to ‘Paper Detail Page’ of the selected paper.
  • ‘reviews’ tab shows the list of reviews viewed by the user and shows them. If the user clicks one of reviews on the list, navigate to ‘Review Detail Page’ of the selected review.

Controller

Controller design of PapersFeed is as follows. In some View, we simplified Model and Controller because users can interact(like/unlike, follow/unfollow, etc.) with the card format of a paper, review, collection, or user in various pages. Also as you can see, meta information of a single paper is stored in multiple models. So in many times Paper Model is referred, it actually means not only Paper itself, but also PaperKeyword, PaperAuthor, PaperPublication, Reference, and so on.

스크린샷 2019-10-19 15 24 09
Clone this wiki locally