Software Requirements Specification (SRS) Web Based Presentation & Controller 지금부터 CRUD의 요구사항 분석 발표를 시작하도록 하겠습니다. Team Crud

contents. Requirement Definition Storyboard 3. Resource Requirement CRUD 목차는 다음과 같습니다. 먼저 요구사항을 정의와, Storyboard 발표 후, 개발 요구사항 명세를 진행하도록 하겠습니다. Contents Team CRUD

Requirements Definition Web based Presentation & Controller 2012. 09. 18 Requirements Definition Writer – 전용훈, 조익찬 요구사항 정의 입니다. CRUD

Webpresenter Application Name We are make.. Web based Presentation And Controller my app. design Controller Speaker Note Presentation 저희가 만들 어플리케이션은 지난 발표때 말씀드린바와 같이 웹을 기반으로한 프레젠테이션 및 컨트롤러입니다. 앱이름은 다음과 같이 정해보았습니다. Web + Presenter 웹과 프레젠터의 합성어입니다. 컨트롤한다는 의미는 넣지 못했지만 웹기반의 프레젠테이션이라는 의미를 담는데 중점을 두었습니다. User Requirements Team CRUD

feature. Webpresenter Core Function 01. Presentation Import 02. my app. design We considering How to make Presentation in Web and decision “Let's import PPT or PPTX files!” 02. Presentation Control No more used Pointer And We Want to see Speaker Note 03. Multi Screen (Mobile / PC) 그다음으로 핵심기능.들을 세가지로 정리해보았습니다. 첫번째로 프레젠테이션 임포트 기능인데요, 팀내에서 아이디어 회의결과, 조잡하게 에디터기능을 넣는것 보다 차라리 기존에 사용하던 Power Point 를 사용하여 만든 PPT파일과, PPTX파일 또는 PDF파일을 임포트하여 이미지화, 프레젠테이션에 사용하는 것으로 기능의 가닥을 \잡았습니다. 두번째는 프레젠테이션 컨트롤 기능입니다. 원격으로 페이지를 넘기는 기본적인 기능 외에 아직까지 구현은 미지수이지만 포인터기능을 고려중에 있으며, 발표자를 위한 스피커노트 기능을 핵심기능으로 두었습니다. 마지막으로 멀티 스크린기능입니다. PC/Mobile 등 플랫폼을 가리지않고, 발표자의 View을 공유하는 기능입니다. 이 기능에는 추가적으로 발표View에 QR코드를 삽입하여 유저들의 접근 편의성을 높이는 방안을 고려하고있습니다. Not only Main Screen but also We want see Presentation In My Device User Requirements Team CRUD

process. Webpresenter Process More Simple More eidetic my app. design Member Login Presentation Import My Presentation List View My Presentation Control Presentation (Other View) Logout 다음은 웹프레젠터의 개략적인 처리흐름도 입니다. 기능은 최대한 단순하게 그리고 직관적이게 구성하여 User가 어렵지 않게 사용하는 것을 중점으로 둘 것입니다. 먼저 회원이 Login을 하고, 프레젠테이션을 임포트합니다. 이후 자신의 프레젠테이션 목록을 확인하고 프레젠테이션의 컨트롤 View과 발표View을 선택하여 각각의 장치에 보여줍니다. 이후 프레젠테이션을 진행하고 종료하게되면 로그아웃을 통해 어플리케이션의 라이프사이클이 종료됩니다. 1st. 2nd. 3rd. 4th. 5th. 6th. User Requirements Team CRUD

ui structure. Webpresenter UI Structure ex ) Mobile View Presentation my app. design PT List d. ppt e. ppt More 01 b. ppt a. ppt c. ppt Speaker note Prev Next Controller 02 03 Presentation View 주요 View의 유저인터페이스를 나타내 보았습니다. 보시는 바와같이 첫번째 View은 발표자 노트와 함께 발표View을 제어하는 컨트롤러의 모습입니다. 두번째 View은 Login후 자신의 프레젠테이션 목록을 확인할 수 있는 View입니다. 마지막으로 세번째 View은 모바일에서 프레젠테이션View을 띄웠을때의 View입니다. 각 View에 붙은 번호에 대해 설명드리면 1번은 목록을 더 볼 수 있는 버튼, 2번은 리스트로 돌아가는 버튼, 3번은 발표View을 컨트롤하는 버튼입니다. 01. Back / 02. 설명 / 03. 설명 – 나눔고딕 B, 7pt User Requirements Team CRUD

ui design. Webpresenter UI design There is no Designer.. SenchaTouch Default Design my app. design 저희가 사용할 디자인을 임시로 입혀보았습니다. 하이브리드 웹앱 라이브러리인 센차터치를 사용하여 기본으로 제공되는 디자인을 입힌 View입니다. 발표View의 경우에는 html5를 사용하여 프레젠테이션뷰를 구성한 View입니다. 기능은 전과 같습니다. 01. 설명 / 02. 설명 / 03. 설명 – 나눔고딕 B, 7pt User Requirements Team CRUD

Webpresenter StoryBoard 20074488 전용훈 20084689 조익찬 Web Based Presentation & Controller Webpresenter StoryBoard #2 Requirements Computer Science Department Project Name Team CRUD Documentation 전용훈 다음은 좀더 구체적인 Storyboard를 설명드리겠습니다. TEAM CRUD

앞에 처리흐름도에서 설명드렸던 내용을 바탕으로 스토리 보드를 작성해 보았습니다. Storyboard Job# title abstraction Client User View platform PC / Mobile View 1 Login View View 4 Import View Func. Login Func. Import View 2 Join View View 5 Presentation View( PCView) Func. Join Func. Paging 앞에 처리흐름도에서 설명드렸던 내용을 바탕으로 스토리 보드를 작성해 보았습니다. 여섯가지 화면으로 분류하여 손으로 스케치 해보았습니다. 한장씩 살펴보겠습니다. View 3 My Document LIST View View 6 Speaker Note View & Controller View (Mobile View) Func. List & Import Func. PCView Control 10

#View 1 Login Func. 로그인 화면입니다. Storyboard Job# 1 Title LoginView Client User View Platform PC / Mobile #View 1 Login Login View. 로그인 화면입니다. 임시로 구성한 화면이며, 회원가입버튼을 누를시 회원가입화면이 나타나게 됩니다. 가입한 아이디와 비밀번호를 입력하면 나의 문서화면이 나타나게됩니다. Func. Login 11

#View 1 Join Func. 회원가입 화면을 임시로 구성해 보았습니다. 개인정보는 다루지 않고, 아이디와 비밀번호, Storyboard Job# 2 Title Join View Client User View Platform PC / Mobile #View 1 Join Just Userid and Passwd No Private Infomation 회원가입 화면을 임시로 구성해 보았습니다. 개인정보는 다루지 않고, 아이디와 비밀번호, 그리고 패스워드 분실시 질문과 답을 등록하도록 구성하였습니다. Func. Join member in webpresenter 12

#View 1 My Document List View Func. 내 문서 리스트를 나타내는 화면입니다. Storyboard Job# 3 Title ListView Client User View Platform PC / Mobile #View 1 My Document List View Listing My Document 내 문서 리스트를 나타내는 화면입니다. 왼쪽 상단의 버튼은 뒤로가기, 오른쪽상단의 버튼은 글쓰기 버튼으로 대체할 예정입니다. Func. List, Import Button 13

#View 1 Import View Func. 글쓰기 버튼을 눌렀을때의 화면입니다. Storyboard Job# 4 Title Import View Client User View Platform PC / Mobile #View 1 Import View Import outside Documents Ppt, pptx, pdf 글쓰기 버튼을 눌렀을때의 화면입니다. 글쓰기 폼같은 경우에는 구상이 아직 구상이 덜 진행 되었습니다. 파일업로드를 할 수 있는 입력 폼과, 미리보기를 할 수 있는 기능을 추가 할 예정입니다. Func. Import file and generating Slide 14

#View 1 Presentation View Func. Storyboard Job# 5 Title PresentationView Client User View Platform PC / Mobile #View 1 Presentation View Presentation User Documents 문서 목록에서 문서를 선택하면 발표자노트화면과 발표화면을 선택하게됩니다. 그 중에 발표 화면이 되겠습니다. 전에 프로토타입에서 보셨던 바와같은 화면으로 키보드로 슬라이드의 페이징이 가능하며 컨트롤러에 의해 조작됩니다. Func. Slide Paging 15

#View 1 Speaker View Func. 발표자 노트화면을 눌렀을때의 화면입니다. 화면은 캐러셀로 구성될 예정이며, Storyboard Job# 6 Title SpeakerView Client User View Platform PC / Mobile #View 1 Speaker View Display Speaker note and Control Presentation View 발표자 노트화면을 눌렀을때의 화면입니다. 화면은 캐러셀로 구성될 예정이며, 마우스로 드래그하여 넘기거나, 모바일의 경우 손가락으로 스와이프할경우, 발표자노트와 발표화면이 같이 넘어가게됩니다. 만약 발표화면만 움직이고 싶다면 하단의 버튼을 이용합니다. 프레젠테이션이 끝나면 사용이 끝나게 됩니다. 로그아웃 기능도 추가해야겠습니다. Func. Control Presentation View 16

Resources Requirement Webpresenter Resources Requirement Use Web Technic Only 다음으로 개발시 필요한 자원에 대한 요구사항 명세입니다.

Simple system configuration Architecture Simple system configuration 1 Mobile Database JSP Pc Node js data Response / Request Broadcast event 시스템 구조를 간략히 표현해 보았습니다. Mobile에 해당하는 부분이 컨트롤러, PC에 해당하는 부분이 발표View입니다. 해당 두 브라우저는 컨트롤러로 부터 발표View을 컨트롤하기위해 Nodejs서버를 통해 통신합니다. JSP에서는 해당 프레젠테이션 페이지 요청이 올때마다 필요한 데이터를 데이터베이스로부터 반환합니다.

Details System Configuration 2 Desktop Client - Internet Browser Mobile Client - Smart Phone - Tablet PC Oracle Database Sencha touch 2.x (Mobile) jQuery HTML5 Web Socket Client Reference Java (JSP + Servlet) Spring 3.x iBatis Eclipse Node.js Server Reference Tomcat 6 Web Server(WAS) Client Response + Transaction Java, JSP, Servlet Node.js Server Sencha touch, node.js Client Request 상세 시스템 구성도입니다. 가장 상단에 보이는 데스크탑과 모바일이 클라이언트에 해당하는 유저의 브라우져이며, 두 클라이언트끼리 다른 브라우져를 컨트롤하기위해 nodejs서버를 통해 통신합니다. 이를 위해 사용되는 자원으로는 앞서 말씀드린 하이브리드 웹앱 제작에 용이한 센차터치, jquery, html5의 websocket등이 있습니다. 아래쪽은 프레젠테이션 데이터가 저장되는 데이터베이스와 웹 요청을 처리하는 웹어플리케이션 서버의 모습입니다. 이쪽에서는 JSP를 사용하며 스프링프레임워크, 아이바티스 등의 라이브러리를 사용합니다.

Client / Server Software & Hardware Requirement Client / Server Software & Hardware Requirement 3 OS : Windows 7 Browser : IE 9, Chrome, Firefox, Safari Mobile : Android 2.2(Froyo) I-phone 3G (ios 4.0) Client (PC/Mobile) WAS : Tomcat 6.0 Database : Oracle 10G XE Server (PC) Hardware (Minimum) CPU : Dual core RAM : 2G Graphic : minimum used Mobile : Smart Phone or tarblet PC 하드웨어 요구명세입니다. 그전에 사용되는 소프트웨어들을 살펴보겠습니다. 클라이언트에서는 단지 웹 브라우져만을 필요로합니다. PC의 경우에는 IE는 9부터 타 브라우져의 경우 백그라운드에서 최신버전으로 업데이트 되고 있으므로, 최신버전을 사용하며 대부분의 스마트폰 모바일 기기에서는 html5를 지원하는 웹브라우져를 장착하고 있으므로 많은 사용자층이 확보될 것입니다. 서버는 일단 개발피시를 기준으로 윈도우7 WAS는 6.0 데이터베이스는 오라클 10G를 사용합니다. 결과적으로 하드웨어 요구사항을 측정하자면 서버피시를 제외하고 하드웨어의 별다른 요구사항은 필요하지 않을 것으로 판단됩니다.

First & second is Client side Third & fifth is Server side Resources Requirement First & second is Client side Third & fifth is Server side 4 다음은 개발에 사용되는 라이브러리들입니다. 앞에 자바스크립트와 html5에 해당하는 오픈소스들은 클라이언트, User 브라우저 영역 뒤에 jsp와 db에 해당하는 오픈소스들은 서버영역입니다. Nodejs의 경우 서버와 클라이언트의 작업이 모두 필요할것으로 예상됩니다. Javascript HTML5 JSP Database

나눔고딕 B 9.5pt, 문자 간격은 넓게 0.1pt, 줄 간격은 고정 14pt입니다. Development Process 가운데 정렬로 내용을 입력하세요. 나눔고딕 B 9.5pt, 문자 간격은 넓게 0.1pt, 줄 간격은 고정 14pt입니다. 상황에 맞게 조절하실 수 있습니다. 5 make up Display 내용 내용 Need Data Request Client Side (Html / Jsp) Request Analysis Mapping Service Getting Data From DB Return Data Server Side (Java) 이로써 개발되는 개발절차를 도식화 해 보았습니다. 먼저 클라이언트영역의 경우 User에게 표시할 View을 구성한 뒤 필요한 데이터를 요청하는 정도로 작업후, 서버 측에서는 해당 요청을 분석 후 해당 로직을 실행하고 데이터베이스로부터 필요한 데이터를 받아 필요한 형태(JSON, JSP)로 반환합니다. 이벤트 서버는 NODEJS를 뜻하는 부분으로 컨트롤러에서 명령이 들어오면 해당 명령을 각기 다른 브라우져에 브로드캐스트하는 구문을 개발 할 것입니다. 이와 같은 방식으로 개발이 진행될 예정입니다. Event Catch Broadcast Event Event Server Side (Nodejs)

Thanks. Have any questions? Web Based Presentation & Controller 이상으로 발표를 마치겠습니다. 감사합니다. Team Crud