Design and Planning

Design and Planning

Team 12

Service Name: Meetingoverflow

Members:

• Taeyoung Jang <2012-12506> [email protected]
• Sangyeon Na <2012-12477> [email protected]
• Chaemin Im <2013-10138> [email protected]
• Yeji Ahn <2015-15838> [email protected]

Version 2.1

2.1 >> Modify design spec image

Overall Description

Meetingoverflow is a powerful service that allows you to write and manage your meeting notes efficiently and helps you visualize the flow of your meeting

System Architecture

Models

E-R Diagram

• Rectangle stands for entity set, diamond stands for relationship set, and symbols at the end of each lines represent mapping cardinality constraints (Detail is described by the following image). Entity attributes are listed inside entity rectangle, and underlined attribute indicates primary key.

Schema

• Here is the relation schema diagram based on E-R diagram. This is also the structure of Django models.
• Rectangle stands for relation schema. Schema attributes are listed inside relation rectangle. Underlined attribute indicates primary key, and arrow represents foreign key constraints. Since Django saves whole object for foreign key, this diagram also follows the convention of Django.

View

Here is the interface of view design

The functionality and the requirement for each page are described as below.

1. Sign Up Page ( /signup )

   • Sign up a new user
   • Get 'email', 'password', 'nickname' as user inputs.
   • Check the 'email' and 'password' validation
   • All inputs are required to sign up
   • If user clicks the sign up button, navigate to Workspace Selection Page

2. Sign In Page ( /signin )

   • Sign In user
   • Get 'email', 'password' as user inputs.
   • If user clicks the sign in button, navigate to Dashboard Page

3. DashboardPage(/:workspace_name/:w_id )

   • Workspace dashboard page
   • User can see all notes in the specific workspace.
   • If user clicks invite member button, the modal popped up and can invite new member to this workspace
   • If user clicks specific note, agendas and todos related to it is rendered.
   • If user clicks open note button, the original note page is redirected.
   • If user clicks create new meeting note button, navigate to Basic Note Info Page for creating new note

4. NoteLeftPage(/note/:n_id)

   • Note Left Page
   • User can see all contents about meeting
   • User can modify layout by drag and drop
   • If user clicks add-block icons located in the left side, new blocks be created
   • If user clicks auto typing button, ML auto typing activate and all speechs are recorded.

Controller Design

This is a controller design which connects view part (frontend) and model part (backend). The arrows that connect from view part to model part are http request with user inputs from view, and the arrows that connect from model part to view part represent http response with data from model. Above the arrow is an API that controller uses to transfer JSON data below the arrow.

Design Detail

Frontend Design

Frontend Components

Frontend Algorithms

Containers

Note

1. Note Left

   • handleChangeTitle(note_title:string): Save input value of note title typed by user.
   • handleChangeDatetime(meeting_date: datetimefield): Save input value of date time typed by user.
   • handleAddParticipant(): Add participants list to the meeting note.
   • handleStartAutoTyping(): Start the auto-typing speech-to-text ML feature.
   • handleCompleteMeeting(): Complete the auto-typing speech-to-text ML feature.

2. Basic Info Modal

   • handleChangeNoteTitle(note_title: string): Save input value of note title typed by user.
   • handleChangeMeetingDate(meeting_date: datetimefield): Save input value of meeting date typed by user.
   • handleChangeParticipant(participant: string[]): Save input value of participants typed by user.
   • handleChangeLocation(location: string): Save input value of location typed by user.
   • handleChangeTags(tags: string[]): Save input values of tags typed by user.
   • handleChangeNumberOfAgenda(number_of_agenda:int): Save input value of the number of agendas typed by user.
   • handleCreateCancel(): Cancel the creation of note page.
   • handleCreateConfirm(): Confirm the input values, and redirects to the creating note page.

Workspace

1. Left Bar

   • handleCreateWorkspace(): Create new workspace.
   • handleChangeWorkspace(): Change to another workspace.
   • handleInviteMembers(): Renders modal that user can search other teammates and invite them to the workspace.
   • handleCreateNote(): Render the basic info modal page for creating new meeting note.

2. Dashboard Block

   • handleClickDashboardBlockAgenda(): Redirect to the specific note page that contains the agenda.
   • handleClickDashboardBlockTodo(): Redirect to the specific note page that contains the todo.

3. Dashboard Note

   • handleClickDashboardBlockNote(): Redirect to the specific previous note page.

User

1. Sign in

   • handleSignIn(user_email: string, user_password: string): Make registered user signed in. If user_email and user_password do not match, alert the user that email or password is wrong. If sign in is successful, redirect to the dashboard page.
   • handleNavigateSignUp() : Redirect to Sign Up page.

2. Sign Up

   • handleCheckEmail(user_email: string) : Check input value of email typed by user.
   • handleCheckPassword(user_password: string): Check input value of password typed by user.
   • handleCheckPasswordConfirmation(user_password: string): Check input value of password typed by user.
   • handleSignUp(user_email: string, user_password: string, user_nickname: string): Make a new user. If user_email or user_nickname is already used, alert the user to use other email or nickname. If sign up is successful, redirect to the dashboard page.
   • handleNavigateSignIn() : Redirect to Sign In page.

Components

Workspace_main

1. Overview
   • handleNoteClick(): Renders agendas and todos related to the specific note.

Note

1. Note Left Bar
   • handleAddTextBlock(): Add text block to the note.
   • handleAddAgendaBlock(): Add agenda block to the note.
   • handleAddImageBlock(): Add Image block to the note.
   • handleAddTodoBlock(): Add Todo block to the note.

Blocks

1. Agenda
   • handleAddTextBlock(): Add new text block inside the agenda block.
   • handleAddImageBlock(): Add new image block inside the agenda block.
   • handleAddTodoBlock(): Add new todo block inside the agenda block.
   • handleClickDelete(): Delete the agenda block.
2. Image
   • handleSubmit(): Patch the image block with the image file and image caption.
   • handleClickDelete(): Delete the image block.
3. Tag
4. Text
   • handleClickDelete(): Delete the text block.
5. Todo
   • handleChangeTodo(content: string): Save input value of todo typed by user.
   • handleClickDelete(): Delete the specific Todo.

Backend Design

Implementation Plan

Testing Plan

Unit Testing

Every components and modules should be tested. In each sprint, we would test implemented modules by following frameworks. We expect the code coverage is over 90%.

• React: Enzyme & Jest
• Django: Python unit test

Functional Testing

Every APIs should be tested. As in hw2 and hw3, we will use following frameworks and mock data to test. In sprint 3, we would cover test RESTful API about authentication, plane, and photo. In sprint 4, we would test API about reply.

• React: Enzyme & Jest
• Django: Python unit test

Integration Testing

For integration testing, we will use Travis CI.

• Integration Testing: Travis CI

External APIs

React Beautiful Dnd

CK Editor 5

Google Cloud Speech API