Skip to content

Latest commit

 

History

History
118 lines (85 loc) · 4.19 KB

README.md

File metadata and controls

118 lines (85 loc) · 4.19 KB
Raw

E-oom

| 한이음 프로젝트 | 온라인(비대면) 교육 전문 플랫폼 + 클라우드 기술(서버가상화, PC)

Developer

👩🏻‍💻 kanhanhee

👩🏻‍💻 hyeyoungSW

👩🏻‍💻 hyejungg

👨🏻‍💻 bong8230

👩🏻‍💻 ahrimy

서비스 구성도

image

주요 기능

1. 강의 생성 및 신청

화면 설명
image image 화상 수업에 아무나 참여할 수 없도록, 강의를 생성하고 그 강의에 참여하고 싶은 학생들은 강의를 신청하고, 강의자는 신청한 학생들을 관리한다.

2. 룸 진행(영상 수업)

화면 설명
image image 강의를 진행하는 강의자(호스트)와 강의를 수강하는 학생들(참여자)들이 실시간 화상채팅으로 수업을 진행한다.

3. 출석 관리

화면 설명
image image 강의를 시작하고, 종료할때 강의자는 출석확인 버튼으로 자동으로 출석체크를 할 수 있고 이후에 강의를 수강하는 학생들에 대해 출석 여부를 확인 할 수 있다.

4. 서버 가상화

화면 설명
image 클라우드 서버를 활용하여 접속과 수업 진행 시 안정성을 높인다.

주요 적용 기술

  1. Web RTC : 영상 송수신을 위한 네트워크 기술

    • 1:多 실시간 화상 채팅을 구현하기 위해서 WebRTC 기술을 사용

  2. JWT : 사용자 인증정보 보안을 위한 기술

    • 사용자 로그인 시에 JWT 기술을 사용하여 사용자의 인증 정보를 토큰화하여 저장

  3. Sequelize : Nodejs에서 MySQL을 쉽게 다룰 수 있도록 도와주는 ORM 기술

    • 자바스크립트 객체와 데이터 베이스의 관계를 매핑해주는 기술로 DB사용을 편리하게 제공

  4. MS Azure : 클라우드 서비스

    • MySQL MS Azure 사용으로 클라우드에서 DB 관리를 관리하였다.
    • 웹 어플리케이션도 클라우드 서버에 배포 예정

SW개발 및 HW 제작 설계서

image

ppt 구글 드라이브 바로가기

Installation

전체 실행

  • root 디렉토리에 .env 파일 생성 후 아래 내용 작성
PORT=서버 포트

DB_HOST=DB 호스트
DB_USER=DB 사용자
DB_PASSWORD=DB 비밀번호
DATABASE=DB 이름

TOKEN_SECRET=jwt토큰 key

ORIGIN_URL=클라이언트 URL

REACT_APP_API_URL=서버 API URL
REACT_APP_SERVER_URL=서버 URL
  • client 디렉토리에서 npm install
  • server 디렉토리에서 npm install
  • root 디렉토리에서 npm install
  • npm start

서버 실행

  • server 디렉토리에 .env 파일 생성 후 아래 내용 작성
PORT=서버 포트

DB_HOST=DB 호스트
DB_USER=DB 사용자
DB_PASSWORD=DB 비밀번호
DATABASE=DB 이름

TOKEN_SECRET=jwt토큰 key

ORIGIN_URL=클라이언트 URL
  • npm install
  • npm run dev

클라이언트 실행

  • client 디렉토리에서
  • .env 파일 생성 후 아래 내용 작성
REACT_APP_API_URL=서버 API URL
REACT_APP_SERVER_URL=서버 URL
  • npm install
  • npm start