Design and Planning

[ghost]

참고 자료 https://github.com/swsnu/swppfall2018/blob/master/project/design-and-planning-examples/Design_and_Planning_example.pdf

To Do List

• [x] 1.System Architecture : MVC @sdu6342

• [x] 2.Model : ER-diagram(DB, Class) @sdu6342

• [x] 3.View : all page & details @KyoungWan

• [x] 4.Controller : data flow (client - server) using MVC @KyoungWan

• [x] Design Detail

  • [x] 5.Frontend Components : Component(button, input etc), Subcomponent, Service, etc @hwan517h1
  • [x] 6.Frontend Logics : 앞에서 사용된 로직들을 구체적으로 설명 @hwan517h1
  • [x] 7.Frontend Relations : 어떤 버튼을 눌러서 뷰가 이동하는지 혹은 어떤 Service를 어떤 Component가 사용하는지 @hwan517h1
  • [x] 8.API 명세서 : ResetFul + Websocket(새로운 Protocol 정의 필수) @sdu6342

• 위의 것들을 작성한 후, 밑의 2개는 같이 해야할 듯!

• [x] Implementation Plan : 스프린트 별로 할 일들 (#5 Spec문서에도 포함되어야 한다.)

• [x] Testing Plan

[ghost]

1. System Architecture : MVC

System Architecture(Chat)

[ghost]

2. model

ERD diagram

(실제로 snippetable_id는 하나다. ERDPlus tool에서는 2개로 표현할수 밖에 없다.)

model column 설명

User : email과 password는 매니저로 가입할때 사용된다. 매니저가 아닐때 channel_id는 유저가 접속해있는 채널이 id를 뜻한다. image는 프로필 이미지 주소로 사용된다. Channel: manager_id 채널을 관리하는 유저의 id이다. name은 channel의 이름이고, duration은 채널의 지속 시간이다. DirectMessage: sender_id는 DM을 보낸 유저의 아이디이고 receiver_id는 DM을 받은 유저의 아이디이다. Snippet: snippet_type은 관리자의 공지사항인지 아니면 일반 대화인지를 구분하는 column이다. snippetable_id는 snippet이 참조하는 테이블의 id이고, snippetable_type은 참조하는 테이블의 이름이다. user_id는 snippet을 보낸 유저의 아이디이다. content는 유저가 입력한 대화의 내용이다.

관계 설명

User가 매니저일때(is_manager = true) Channel과 1:1관계이다. User가 매니저가 아닐때(is_manager = false) Channel과 1:N관계이다. User는 sender의 관점에서 보낸 DirectMessage와 1:N관계이다. User는 receiver의 관점에서 받은 DirectMessage와 1:N관계이다. User와 Snippet는 1:N 관계이다. User 모델은 DirectMessage모델을 이용한 User - User를 M:N관계이다. Channel과 Snippet은 snippetable_id = channel_id 이고 snippetable_type = Channel이면 1:N 관계이다. DirectMessage와 Snippet은 snippetable_id = direct_message_id 이고 snippetable_type = DirectMessage이면 1:N 관계이다.

django class Method

1. User getDirectMessages : 보내거나 받은 direct message를 리턴한다.
2. Channel getSnippets : 페이지에 맞는 snippets를 리턴한다.
3. DirectMessage getSnippets : 페이지에 맞는 snippets를 리턴한다.
4. Snippet

----------------- EN In fact, the snippetable_id is one. In the ERDPlus tool, we can only express it as two.

model column Description User: Email and password are used to sign up as a manager. When not in the manager, channel_id is the id of the channel the user is connected to. image is used as the profile image address. Channel: Manager_id is the id of the user managing the channel. name is the name of the channel, and duration is the duration of the channel. DirectMessage: Sender_id is the id of the user who sent the direct message and receiver_id is the id of the user who received the direct message. Snippet: The snippet_type is a column that identifies whether the snippet_type is an manger's announcement or a general conversation. snippetable_id is the id of the table referenced by the snippet, and snippetable_type is the name of the referencing table. User_id is the id of the user who sent the snippet. content is the content of the conversation entered by the user.

Relationship Description When the user is a manager (is_manager = true), it has a 1: 1 relationship with the channel. When the user is not a manager (is_manager = false), it is a 1: N relationship with the Channel. User is 1: N relationship with Direct Message sent from sender's point of view. User is a 1: N relationship with Direct Message received from the perspective of the receiver. User and Snippet are in 1: N relationship. User model is User: User using Direct Message model is M: N relationship. Channel and Snippet are 1: N if snippetable_id = channel_id and snippetable_type = Channel. Direct Message and Snippet are 1: N if snippetable_id = direct_message_id and snippetable_type = Direct Message.

[ghost]

8.API 명세서 : ResetFul + Websocket(새로운 Protocol 정의 필수) @sdu6342

backend design

1. HTTP

Model	API	GET	POST	PUT	DELETE
User	/user	x	create new user	edit user info	x
	/session	x	sign in	x	sign out
Channel	/channel/:channel_hash	get specific channel	x	x	x
	/channel	x	create new channel	x	x
DirectMessage	/dm/:channel_hash	get specific direct message (giver, receiver)	x	x	x
Snippet	/snippet/:type/:id	get snippets by snippet able type & id	x	x	x

[ghost]

2. Websocket Protocol

requirements

1. 유저가 채널에 접속해서 채널을 보고 있는 중에 채팅이 도착하거나 채팅을 보낼 경우 채널에 보지 않은 채팅이 생성되었음을 알려준다.
2. 유저(A)가 채널에 접속해 있고 다른 유저(B) 나 전체 채팅을 하고 있을 때 다른 유저(C)가 DM을 보내면 C와의 DM에 새로운 채팅이 있음을 알려준다.
3. 유저(A)가 채널에 접속해 있고 다른 유저(B)와 채팅을 하고 있을 때 B가 DM을 보내면 DM창에서 채팅내용을 확인 할 수 있다.
4. 유저가(A)가 채널에 접속해 있을 때 다른유저 B에게 DM을 보내면 A에게는 B에 대한 새로운 알람이 생성되지 않는다.
5. 유저가 메시지를 보냈는데 실패할 경우 메시지를 재전송하거나 취소 할 수 있는 버튼이 메시지 옆에 생성된다.
6. 유저 A가 채널에 접속해 있을때, 새로운 유저 B가 접속하면 접속유저리스트에 B의 정보가 추가되어 A에게 보인다.
7. 유저 A가 채널에 접속해 있을 때, 접속중인 유저 B가 로그아웃 하면 접속유저리스트에서 B의 정보가 제거되어 A에게 보인다.
8. 유저 A가 유저 B와 DM을 하던 중에 로그아웃을 하면, 유저 B에게는 접속유저리스트에서 A의 정보가 제거되고, DM에는 유저 A가 로그아웃했음을 메시지로 보여준다.

주고 받는 패킷

{event: integer,
data : object
status: integer(보낸 메시지의 응답 결과일때만 존재함)
}

event는 보내는 요청 또는 응답이 무엇인지를 결정 해준다. data는 해당 이벤트의 결과 값이나 참고해야할 값을 내포한다. 다음의 리스트는 요청 또는 응답에 대한 event list 이다.

Client -> Server events(Request)

1. SendChannelMessage : 유저가 채널에서 메시지를 보내는 경우이다. 본인의 ID와 대화의 내용이 data에 포함된다.
2. SendNewDirectMessage : 유저가 DirectMessage를 하고 있지 않던 다른 유저에게 메시지를 보내는 경우이다. 본인의 ID와 받는 유저의 ID, 대화 내용이 data에 포함된다.
3. SendDirectMessage : 유저가 DirectMessage를 하고 있던 유저에게 메시지를 보내는 경우이다. DM의 ID와 대화의 내용이 data에 포함된다.

Server -> Client events(Response)

1. ReceiveChannelMessage : 유저 A가 채널에 접속해 있을때 다른 유저 B가 채널에 대화를 입력했을 경우 A가 받는 패킷이다. data에는 받은 메시지의 내용과 메시지를 보낸 유저의 정보가 담겨 있다.
2. ReceiveDirectMessage : 이미 유저 B와 DM을 했었던 유저 A가 유저 B에게 DM을 받은 경우이다. data에는 받은 메시지의 내용과 DM의 ID가 있다.
3. ReceiveNewDirectMessage : 유저 B와 DM을 하지 않은 유저 A가 유저 B에게 DM을 받은 경우이다. data에는 받은 메시지의 내용과 DM을 보내는 유저의 Id가 있다.
4. MessageResult(메시지 성공여부) : 유저가 보낸 메시지의 성공 여부를 알 수 있는 패킷이다. data에는 유저가 보냈던 요청의 이벤트와, 보냈던 대화의 내용, 그리고 상태가 담겨있다. 메시지 상태는 메시지 패킷 parsing error, server connection error(redis?), 등등이 있다.
5. NewUserConnect(새로운 유저 등장) : 새로운 유저가 채널에 접속했음을 알려주는 패킷이다. data에는 새로 접속한 유저의 정보가 담긴다.
6. UserDelete(채팅에 접속한 유저가 로그아웃) : 채널에 접속한 유저가 채널에서 나갔음을 알려주는 패킷이다. data는 로그아웃한 정보가 담긴다.
7. EndChannel(채널종료) : 채널의 기간이 끝났음을 알려주는 패킷이다. data에는 channel의 정보가 담긴다.

TODO : 패킷처리 에러에 대한 리스트 정리, 위 메시지 프로토콜이 최선인지 고민

• 고민되는 것 : DM과 관련되어서 New를 구분해야만 하는가? *

--------------en The data sent and received by websocket are as follows.

{event: integer,
data: object,
status: integer (exists only if it is response from server)}

The event determines which request or response is sent. data contains the result value of the event or reference value. The following list is the event list for the request or response.

Client -> Server events (Request)

1. SendChannelMessage: When the user sends a message from the channel. User's id and the content of the conversation are included in the data.
2. SendNewDirectMessage: This is when user A sends a message to user B who did not have a direct message with the user(A). The data includes the user A's id, the user B's id, and the conversation contents.
3. SendDirectMessage: User A sends a message to user B who was doing direct message with user A. The direct message's id and the content of the conversation are included in the data.

Server -> Client events (Response)

1. ReceiveChannelMessage: When user A is connected to the channel and another user B enters a conversation on the channel, A is the packet received. The data contains the contents of the received message and the user who sent the message.
2. ReceiveDirectMessage: User A who has already done direct message with user B receives direct message from user B. data contains the contents of the message received and the ID of the direct message.
3. ReceiveNewDirectMessage: User A who did not direct message with user B received user A's direct message. The data contains the contents of the received message and the Id of the user sending the direct message.
4. MessageResult: This indicates whether the message sent by the user is successful or not. The data contains the event of the request that the user sent, the content of the conversation sent, and the status. The message state is the message data parsing error, server connection error (redis), And so on.
5. NewUserConnect :This indicate that a new user has connected to the channel. The data contains information about the newly connected user.
6. UserDelete : This indicate that the user connected to the channel has left the channel. data contains the logged out information.
7. EndChannel: This indicate that the channel has expired. data contains channel information.

[hwan517h1]

Frontend Components: Component

[hwan517h1]

Frontend Components: Subcomponent

[hwan517h1]

Frontend Components: Service

[ghost]

System Architecture

[hwan517h1]

Frontend Logics: Components

1. ManagerSignIn
   • ngOnInit(): Call SignIn page with 2 inputs(email, password) and 3 buttons(sing_in, sign_up, about_us).
   • onClickSignInButton(email: string, password: string): Call signIn in UserService. If sign-in is accepted, redirect to NewChannel page or Main page along the existence of channel. If sign-in is rejected, alert the warning message.
   • onClickSignUpButton(): Redirect to ManagerSignUp page.
   • onClickAboutUsButton(): Redirect to AboutUs page.
2. ManagerSingUp
   • ngOnInit(): Call SignUp page with 3 inputs(email, password, key) and 2 buttons(sign_up, about_us).
   • onClickSignUpButton(email: string, password: string, key: string): Call signUp in UserService. If sign-up is accepted, redirected to SignIn page. If sign-up is rejected, alert the warning message.
   • onClickAboutUsButton(): Redirect to AboutUs page.
3. AboutUs
   • ngOnInit(): Call AboutUs page with 1 text(description) and 1 button(back).

   • onClickBackButton(): Redirect to previous SignIn page.
4. NewChannel
   • ngOnInit(): Call NewChannel page with 2 inputs(channel_name, channel_duration) and 2 buttons(channel_create, sign_out).
   • onClickChannelCreateButton(channel_name: string, channel_duration: string): Call createChannel in ChannelService. If channel-create is accepted, redirect to Main page. If channel-create is rejected, alert the warning message.
   • onClickSignOutButton(): Sign out and redirect to SignIn page.
5. Main
   • ngOnInit(): Call Main page with 3 inputs(to_qr, to_chat, sign_out).

   • onClickToQRButton(): Redirect to ShowQR page.
   • onClickToChannelButton(): Redirect to Channel page.
   • onClickSignOutButton(): Sign out and redirect to SignIn page.
6. ShowQR
   • ngOnInit(): Call ShowQR page with 1 button(full_screen) and 1 text(description).
   • onClickFullScreenButton(): Change ShowQR page into full screen.
7. Channel
   • ngOnInit(): Call Channel page with 1 text(time_limit), 1 UsersList(users_list), 1 DirectMessagesList(dms_list), 1 input(snippet_content) and 2 buttons(snippet_send, sign_out).
   • onClickSnippetSendButton(snippet_content: string): Send a snippet to backend.
   • terminateChannel(): When the time limit of the channel is over, it eliminates all the data of the channel and redirect to ExpiredChannel page.
   • onClickSignOutButton(): Sign out and redirect to SignIn page.
8. UserAccess
   • ngOnInit(): Call UserAccess page with 1 image(profile_picture), 1 input(nickname) and 1 button(user_access).

   • onClickUserAccessButton(profile_picture: image, nickname: string): Call signIn in UserService. If sign-in is accepted, redirect to Channel page. If sign-in is rejected, alert the warning message.
9. ExpiredChannel

   • ngOnInit(): Call ExpiredChannel page with 1 image(bomb) and 1 text(description).

[hwan517h1]

Frontend Logics: Subcomponents

1. UsersList
   • ngOnInit(): Call getUsers in UserService and show the list of users in the left side of Channel page at the initialization of the channel.
   • getUsers(): Call getUsers in UserService.
   • sortByAlarm(): Sort the list of users along alarms. Alarm means there are DMs between users and is shown by a green dot next to profile picture.
2. DirectMessagesList
   • ngOnInit(): Call getDMByReceiver in DirectMessageService repeatedly and show alarms on the list of users.
   • getDMsById(id: string): Call getDMByReceiver in DirectMessageService and show the list of snippets in the right side of Channel page when a user clicks other users on the list of users.
   • setDMType(type: string): Set the type of a DM. It will be a notice or not.

[hwan517h1]

Frontend Logics: Services

1. UserService
   • signUp(email: string, password: string, key: string) → Promise: Call backend API, and return the result.
   • signIn(email: string, password: string) → Promise: Call backend API, and return the result.
   • signOut()→ Promise: Call backend API, and return the result.
   • accessUser(profile_picture: image, nickname: string) → Promise: Call backend API, and return the result.
   • getUsers() → Promise<string[]>: Call backend API to get the list of users.
   • getUserById(id: string) → Promise: Call backend API to get a specific user.
2. ChannelService
   • createChannel(channel_name: string, channel_duration: date) → Promise: Call backend API, and return the result.
   • terminateChannel() → Promise: Call backend API, and return the result.

   • showTimeLimit() → Promise: Call backend API, and return the result.
3. DirectMessageService

   • getDMBySender(id: string) → Promise: Call backend API to get a specific DirectMessage using the id of sender.
   • getDMByReceiver(id: string) → Promise: Call backend API to get a specific DirectMessage using the id of receiver.
   • existConnection(id: string, id: string) → Promise: Call backend API, and return the result.

[hwan517h1]

Frontend Relations

[ghost]

Implementation Plan

Divide the project implementation into the pages that fulfill the requirements of the project.

• Sign Up: A page that allows users to sign up and log in.
• Main: A page that allows you to create a channel and move it to a channel or to a QR Code view.
• Channel: A page that allows the user to interact with other users
• Channel New: Input form in which the administrator can create a new channel
• Direct Message: A sub page that allows users to talk on a one-to-one basis.
• User Access: A page with QR code to enter the channel

The distribution of the view by sprint is as follows.

• sprint 2: Main
• sprint 3: Channel, New Channel
• sprint 4: Direct Message, User Access
• sprint 5: Sign Up

The following table divides the implementation into functions and distributes them to the team members. Each row has a function to implement and an expected time to implement.

page	feature	difficulties	time(mins)	sprint	person	Challenge
Main	All page routing	1	60	2	이경환
Channel	User can send message to the channel	3	120	3	서동욱	django channel setting
Channel	User can see other new user's or deleted user's info of the channel	3	120	3	서동욱
Channel	User can receive messages from the channel	4	180	3	서동욱, 채경완	redis
Channel	Manager can send notice to the manager's channel	2	90	3	이경환
Channel	User can see all snippets of the channel	2	90	3	이경환
Channel New	User can make an channel	2	90	3	채경완
Direct Message	User can make direct meesage with other user	3	120	4	서동욱
Direct Message	User can send meesage in direct message	2	90	4	이경환
Direct Message	User can receive meessage in direct message	2	90	4	채경완
Direct Message	User can receive alram about new direct message or new snippet of channel	4	180	4	서동욱, 이경환
User Access	User can change profile or name and access to channel	2	90	4	채경완
Sign Up	User can make a manager account	2	60	5	서동욱, 채경완
Sign Up	User can sign In as a manager	2	60	5	채경완, 이경환

[KyoungWan]

Testing Plan

We would set up our testing from sprint 3,

We except our testing coverage up to 90%.

Details are below

Unit Testing

• Tools
  • Angular
  • Jasmine: Javascript testing framework
  • Karma: Test specific elements in Jasmine
  • Travis CI: Test integration of project
  • Django
  • Python unit test
• Testing type
  • Unit test
  • We would test every single components and modules
  • Functional test
  • We would test RESTful APIS in MVC pattern.
  • We would test WebSocket protocol in our Chat service
  • Integration test
  • Wr eould test our user stories.
  • By using Travis CI, the integration test will force the code to merge successfully.