🍀 Code-kids: 객체 지향 교육용 프로그램

✨ 프로젝트 소개

객체 지향의 개념을 누구보다 쉽게
객체 지향 프로그래밍에 대해 깊이 이해하고 적용할 수 있도록 돕기 위해, 블록 코딩을 활용한 시각적 설명을 준비했습니다. 이를 통해 추상화, 캡슐화, 상속, 다형성 등의 개념을 친근하게 전달하며, 복잡한 개념도 쉽게 이해하고 프로그래밍 실력을 향상할 수 있도록 설계했습니다.

여러분들이 객체 지향 프로그래밍을 배우는 데 도움이 되기를 바랍니다!

🧑🏻‍💻 팀원 소개

허은정	서건우	이해니
@eundeang	@Shilvister	@haeni82
Backend, Team Leader	Frontend	Frontend

🗂 백엔드 기술 스택

🗂 프론트엔드 기술 스택

📣 Communication

🛠️ 서비스 아키텍처

💎 시작 가이드

Requirements

For building and running the application you need:

• Node.js 14.19.3
• Npm 9.2.0
• JAVA 17.0.9

Installation

$ git clone https://github.com/CSID-DGU/2024-1-OSS-team-5-OOP.git
$ cd 2024-1-OSS-team-5-OOP

Backend

$ cd codekids_BE
$ ./gradlew build
$ java -jar codekids_BE.jar

Frontend

$ cd codekids_FE
$ nvm use v.14.19.3
$ npm install 
$ npm start

Blockly 블록 커스텀 하기 🧩

🪄커스텀 블록을 제작하고 블록 정의 코드와 generator 코드를 확인할 수 있습니다.
Blockly Developer Tools

🔎Blockly에 관련된 전반적인 가이드를 확인할 수 있습니다.
Blockly 가이드

🖥️react에서 Blockly를 불러오는 법을 확인할 수 있습니다.
Blockly-react 오픈소스

화면 구성 📺

이론 페이지
이론 페이지입니다. 프로그램의 시작 페이지이고 3가지 개념 중 원하는 개념을 선택합니다. 발랄한 bgm이 나오며 로고 옆의 버튼으로 음소거가 가능합니다. 이론 설명은 이미지 하단 버튼을 통해 skip이 가능하고 이론을 다 학습하였다면 해당 이론의 문제 목록을 볼 수 있습니다.

문제 페이지
문제 페이지입니다. 문제 전체 목록을 볼 수 있습니다. 힌트 버튼으로 힌트를 확인하고, 되돌리기 버튼으로 워크스페이스를 초기화할 수 있습니다. 문제를 맞추면 bgm과 함께 성공 모달이 뜨고 다음 단계로 넘어갈 수 있습니다.

퀴즈 페이지
퀴즈 페이지입니다. 이론 학습을 완료하고 문제를 다 풀었다면 마무리로 이론에 대한 간단한 개념 퀴즈를 진행합니다. 퀴즈는 O/X와 오지선다로 구성되어 있고 매번 랜덤하게 출력됩니다. 퀴즈 채점 결과를 확인할 수 있습니다.

개발자에게 문의 페이지
블록 코딩 문제를 다 풀고 퀴즈까지 완료하였다면 오른쪽 상단에 체크 표시가 생깁니다. 헤더의 개발자에게 제안하기 버튼을 클릭하면 이슈 페이지로 넘어갑니다.

⚙️ 주요 기능

👩🏻‍🏫 튜토리얼

• 각 객체지향 개념에 대한 설명 제공
• 배경음 ON/OFF 기능 제공

🤔 문제 풀어보기

• 각 예제에 튜토리얼 없이 직접 접근
• 이미 해결 완료 기록이 있는 문제의 경우 아이콘 노출

🤖 블록 코딩

• Blockly를 활용한 블럭 코딩
• 주어진 상황에 대한 문제 해결
• 세 단계로 구성되며, 각 단계별 힌트 제공

✍️ 퀴즈

• 객체지향 개념에 대한 랜덤 퀴즈 제공
• O/X, 오지선다 문제 혼합
• 서버에 조회해 정답 여부 확인 후 답지 제공

💡 개발자에게 제안하기

• 깃허브 이슈 페이지로 리다이렉트

🛠️ 아키텍쳐

디렉터리 구조

.
├── codekids_BE
│   └── src
│       ├── main
│       │   ├── java
│       │   │   └── oop
│       │   │       └── codekids
│       │   │           ├── Answer.java
│       │   │           ├── CodekidsApplication.java
│       │   │           ├── Concept.java
│       │   │           ├── QuizType.java
│       │   │           ├── config
│       │   │           │   ├── AWSConfig.java
│       │   │           │   └── WebConfig.java
│       │   │           ├── controller
│       │   │           │   ├── ProblemController.java
│       │   │           │   ├── QuizController.java
│       │   │           │   └── TutorialController.java
│       │   │           ├── dto
│       │   │           │   ├── AnswerRequestDto.java
│       │   │           │   ├── MultiChooseDto.java
│       │   │           │   ├── ProblemDetailDto.java
│       │   │           │   ├── ProblemDto.java
│       │   │           │   ├── ProblemsDto.java
│       │   │           │   ├── QuizDto.java
│       │   │           │   ├── QuizListDto.java
│       │   │           │   ├── ResponseDto.java
│       │   │           │   ├── TutorialDetailDto.java
│       │   │           │   ├── TutorialDto.java
│       │   │           │   └── TutorialsDto.java
│       │   │           ├── entity
│       │   │           │   ├── MultiChoose.java
│       │   │           │   ├── Problem.java
│       │   │           │   ├── ProblemDetail.java
│       │   │           │   ├── Quiz.java
│       │   │           │   ├── Tutorial.java
│       │   │           │   └── TutorialDetail.java
│       │   │           ├── repository
│       │   │           │   ├── MultiChooseRepository.java
│       │   │           │   ├── ProblemDetailRepository.java
│       │   │           │   ├── ProblemRepository.java
│       │   │           │   ├── QuizRepository.java
│       │   │           │   ├── TutorialDetailRepository.java
│       │   │           │   └── TutorialRepository.java
│       │   │           └── service
│       │   │               ├── ProblemService.java
│       │   │               ├── QuizService.java
│       │   │               ├── S3Service.java
│       │   │               └── TutorialService.java
│       │   └── resources
│       │       ├── application-dev.yaml
│       │       └── application.yaml
│       └── test
│           └── java
│               └── oop
│                   └── codekids
│                       └── CodekidsApplicationTests.java
├── codekids_FE
│   ├── README.md
│   ├── blockly-blockly-v11.0.0.-beta.6
│   └── src
│       ├── App.js
│       ├── Blockly
│       │   ├── BlocklyComponent.css
│       │   ├── BlocklyComponent.jsx
│       │   └── index.js
│       ├── blocks
│       │   └── customblocks.js
│       ├── components
│       │   ├── Header.css
│       │   └── Header.js
│       ├── fields
│       │   ├── BlocklyReactField.jsx
│       │   └── DateField.jsx
│       ├── fonts
│       │   ├── NanumGothic-Bold.ttf
│       │   ├── NanumGothic-ExtraBold.ttf
│       │   └── NanumGothic-Regular.ttf
│       ├── generator
│       │   └── generator.js
│       ├── index.css
│       ├── index.js
│       ├── logo.png
│       ├── pages
│       │   ├── BlockPage.css
│       │   ├── BlockPage.js
│       │   ├── BlockPage.test.js
│       │   ├── ButtonList.css
│       │   ├── FailureModal.js
│       │   ├── FinalBlockPage.js
│       │   ├── HintModal.js
│       │   ├── HintModal.module.css
│       │   ├── Modal.css
│       │   ├── NextBlockPage.js
│       │   ├── ProblemPage.js
│       │   ├── QuizCheckPage.js
│       │   ├── QuizPage.css
│       │   ├── QuizPage.js
│       │   ├── SuccessModal.js
│       │   ├── TutorialDetailPage.css
│       │   ├── TutorialDetailPage.js
│       │   ├── TutorialPage.js
│       │   ├── alignlist.module.css
│       │   └── logo.png
│       ├── reportWebVitals.js
│       ├── setupTests.js
│       └── seviceWorker.js
├── node_modules
├── package-lock.json
└── package.json
* 중요 파일들만 명시함