코드벨로퍼는 실시간으로 여러 개발자가 함께 코드를 함께 수정하고 디버깅 할 수 있는 웹기반 IDE 플랫폼 입니다. DEMO: https://youtu.be/lpQRb---oGI

1. Codeveloper
실시간 협업형 웹 기반 IDE 플랫폼
개발자 이재민
https://github.com/j911

2. Codeveloper?
코드벨로퍼는 실시간으로 여러 개발자가 함께 코드를 함께 수정
하고 디버깅 할 수 있는 웹기반 IDE 플랫폼 입니다.

3. 목표
Cookie & Session 최소화
Ecma Script 6 문법
보안 이슈 최적화
누구나 이해할 수 있는 코드
그냥 개발하면 재미 없으니까

4. 일반적인 IDE

5. IDE 구조
파일 목록
편집기
콘솔

6. DOM
{ explorer }
{ editor }
{ console }
Document Object Model

7. DOM Document Object Model

8. IDE == 통합 개발 환경
코드 작성 뿐만이 아니라 코드 실행도 가능해야한다

9. 아이디어 1
로컬 쉘에 접근해 코드를 실행한다.

10. 아이디어 1
로컬 쉘에 접근해 코드를 실행한다.
$ rm -rf /
Drop database
…

11. 아이디어 1
로컬 쉘에 접근해 코드를 실행한다.
$ rm -rf /
Drop database
…너무
많은
보안
이슈

12. 아이디어 2
가상 환경을 구현해 명령을 실행신다

13. 아이디어 2
Node C(GCC) JAVA

14. 아이디어 2
Node C(GCC) JAVA
보안이슈
해결!

15. 구조
Codeveloper
editor Terminal-API

16. Terminal-API
https://github.com/J911/Terminal-API

17. 공동개발자 등록

18. 기능
공동 개발자
공동 개발자의 파일
내가 작성한 파일
새파일 만들기

19. Flow
!

20. Flow
!
codeveloper
coding..

21. Flow
!
codeveloper
Terminal-API
compile

22. Flow
!
codeveloper
Terminal-API
C1 C2 C3 C4
run!
유저마다 가상 컨테이너 생성

23. Flow
!
codeveloper
Terminal-API
C1 C2 C3 C4
Feedback!

24. Flow
!
codeveloper
Terminal-API
C1 C2 C3 C4
!
!

25. 전체 기능
export const UPDATE_USER = 'UPDATE_USER'
export const UPDATE_FILE = 'UPDATE_FILE'
export const UPDATE_CURRENT_IDX = 'UPDATE_CURRENT_IDX'
export const UPDATE_FILE_LIST = 'UPDATE_FILE_LIST'
export const UPDATE_MASTER_FILE_LIST = 'UPDATE_MASTER_FILE_LIST'
export const UPDATE_CODE = 'UPDATE_CODE'
export const UPDATE_CODE_STATE = 'UPDATE_CODE_STATE'
export const SHOW_DIMMER = 'SHOW_DIMMER'
export const HIDE_DIMMER = 'HIDE_DIMMER'
export const SHOW_MESSAGE_BOX = 'SHOW_MESSAGE_BOX'
export const HIDE_MESSAGE_BOX = 'HIDE_MESSAGE_BOX'
export const SHOW_REGIST_BOX = 'SHOW_REGIST_BOX'
export const HIDE_REGIST_BOX = 'HIDE_REGIST_BOX'
export const SHOW_PROFILE_BOX = 'SHOW_PROFILE_BOX'
export const HIDE_PROFILE_BOX = 'HIDE_PROFILE_BOX'
export const SHOW_LOADING = "SHOW_LOADING"
export const HIDE_LOADING = "HIDE_LOADING"
export const UPDATE_CONTRIBUTORS = 'UPDATE_CONTRIBUTORS'
export const ADD_CONTRIBUTOR = 'ADD_CONTRIBUTOR'
export const SWITCH_CONSOLE_MENU = 'SWITCH_CONSOLE_MENU'
export const UPDATE_CONSOLE_LOG = 'UPDATE_CONSOLE_LOG'
export const GET_USER = 'GET_USER'
export const GET_FILE = 'GET_FILE'
export const GET_MASTER_FILE = 'GET_MASTER_FILE'
export const NEW_FILE = 'NEW_FILE'
export const GET_FILE_LIST = 'GET_FILE_LIST'
export const GET_MASTER_FILE_LIST = 'GET_MASTER_FILE_LIST'
export const UPDATE_FILE = 'UPDATE_FILE'
export const GET_HOSTS = 'GET_HOSTS'
export const GET_CONTRIBUTORS = 'GET_CONTRIBUTORS'
export const ADD_CONTRIBUTOR = 'ADD_CONTRIBUTOR'
mutation-types.js
action-types.js
export const JOIN_IDE = "JOIN:IDE"
export const UPDATE_CODE = "UPDATE:CODE"
export const CHAT_MESSAGE = "CHAT:MESSAGE"
export const CONTAINER_INIT = "CONTAINER:INIT"
export const CONTAINER_CP = "CONTAINER:CP"
export const CONTAINER_COMMAND = "CONTAINER:COMMAND"
socket-types.js

26. Frontend 구조
codeveloper-frontend
.
├── src
│ ├── components. // 공통 컴포넌트
│ ├── config // 설정
│ ├── locale // 언어 설정
│ ├── socket // 소켓통신 모듈
│ ├── spa
│ ├── Home.vue // 메인 페이지
│ ├── Login.vue // 로그인 페이지
│ └── IDE.vue // IDE 페이지
│ ├── style // 컴포넌트 스타일
│ ├── App.vue
│ └── main.js
└── index.html

27. Backend 디렉토리 구조
codeveloper-backend
.
├── src
│ ├── auth // 공통 컴포넌트
│ ├── cookie-session
│ ├── docker // 도커 관련 모듈
│ ├── mysql // 데이터베이스 접근 모듈
│ ├── routes // 라우팅 모듈
│ └── socket //소켓 통신 모듈
└── index.js

28. Stack 기술 스택
Backend
Frontend
Express JsNode Js MariaDB Socket.ioUbuntu Server
Vue Js Webpack3 AxiosVuex FontAwesome CodeMirror
Docker

29. OpenSource Project
https://github.com/J911/codeveloper
GitHub

30. OpenSource Project
https://github.com/J911/codeveloper

31. DEMO
https://youtu.be/lpQRb---oGI

32. 감사합니다.