quiplash

quiplash 교체

첫 번째 사업 순서는 좋은 이름, 어떤 아이디어라도 생각해내는 것입니다.

QuickStart

Gamemaster (모든 경쟁자의 공유 화면)에 액세스하려면 https://yodigi7.github.io/quiplash/gamemaster/로 이동하십시오. 각 경쟁자의 액세스 포인트는 https://yodigi7.github.io/quiplash/contender/입니다. Heroku에서 자고있을 가능성이 높기 때문에 몇 초 동안 부팅하는 데 몇 초를 주시면 서버가 회전하고 작동하기 시작하는 데 ~ 30 초가 걸립니다.

프로젝트가 설명되었습니다

따라서 여러분이 현재 제목으로 알아야 할 것처럼 이것은 Quiplash의 무료 오픈 소스 버전입니다. 전체 아키텍처는 모든 게임 데이터를 추적하는 백엔드입니다. 그런 다음 해당 데이터를 2 개의 프론트 엔드에 제공하며 그 중 하나는 모든 플레이어가 게임에서 사용하는 메인/공통 화면입니다. 다른 하나는 각 개별 경쟁자가 특정 데이터를 입력하는 견해입니다. 현재 3 개의 섹션으로 설정되어 있습니다.

백엔드

목적 : Supplies REST API 서비스 및 게임 데이터를 추적합니다.

• Java로 작성되었습니다
• SpringMVC 및 JPA 사용
• 데이터를 H2 메모리 데이터베이스에 저장합니다.

게임 마스터

목적 : 기본/공통 화면 표시

• vue 또는 angular 7
• HTTP REST API 호출에 AXIOS를 사용합니다
• 사람들이 가입 할 때 로비를 보여줍니다
• 투표에 대한 답변을 보여줍니다
• 투표 결과를 보여줍니다
• 최종 게임 결과를 보여줍니다

경쟁자

목적 : 각 경쟁자에 대한 견해

• vue 또는 angular 7
• HTTP REST API 호출에 AXIOS를 사용합니다
• 답변의 프롬프트를 보여줍니다
• 답변에 대한 투표를 허용합니다

전제 조건

• 자바
• Maven
• NPM
• 마디
• axios

개발자 환경에서 실행

현재 사용 가능한 유일한 환경입니다

백엔드

먼저 백엔드를 실행하여 포트 8080에서 실행하여 2 개의 프론트 엔드로 더 쉽게 설정하십시오. 실행하려면 프로젝트 SDK 설정을 사용하여 Intellij와 같은 IDE에 프로젝트를로드하고 기본 파일 (Backend/Src/Main/Com/yodigi/quiplash/quiplashapplication.java)을 실행합니다.

게임 마스터

현재 작동하지 않으며 Angular Frontend 동등한 것을 사용하십시오

백엔드에 대한 위치가있는 액세스 포인트를 설정하십시오. http://localhost:8080 VUE_APP_BACKEND_BASE_URL 것입니다.

기본 폴더 (QuiplashGamemaster)에서 CommandLine에서 다음 명령을 실행하십시오.

npm run serve -- --mode dev

그런 다음 결과 프론트 엔드에 액세스하려면 콘솔에 지정된 URL을 일반 웹 브라우저에 입력하십시오.

콘솔에 표시되지만 http://localhost:8081 일 것입니다.

Gamemaster-angular

백엔드에 대한 위치가있는 액세스 포인트를 설정하십시오. 아마도 http://localhost:8080 일 것입니다. 환경을 설정합니다 .ts 파일 baseUrl 값으로 설정하십시오. Environment.ts 파일은 quiplash-gamemaster-angularsrcenvironments 폴더에서 찾을 수 있습니다.

기본 폴더 (quiplash-gamemaster-angular)에서 commandline에서 다음 명령을 실행하십시오.

ng serve -o

이 명령은 자동으로 브라우저를 열고 각도 응용 프로그램을 제공합니다.

경쟁자

현재 작동하지 않으며 Angular Frontend 동등한 것을 사용하십시오

백엔드에 대한 위치가있는 액세스 포인트를 설정하십시오. http://localhost:8080 VUE_APP_BACKEND_BASE_URL 것입니다.

기본 폴더 (QuiplashGamemaster)에서 CommandLine에서 다음 명령을 실행하십시오.

npm run serve -- --mode dev

그런 다음 결과 프론트 엔드에 액세스하려면 콘솔에 지정된 URL을 일반 웹 브라우저에 입력하십시오.

콘솔에 표시되지만 대부분 http://localhost:8082 일 것입니다.

경쟁자-angular

백엔드에 대한 위치가있는 액세스 포인트를 설정하십시오. 아마도 http://localhost:8080 일 것입니다. 환경을 설정합니다 .ts 파일 baseUrl 값으로 설정하십시오. Environment.ts 파일은 quiplash-contender-angularsrcenvironments 폴더에서 찾을 수 있습니다.

기본 폴더 (Quiplash-Contender-Angular)에서 Commandline에서 다음 명령을 실행하십시오.

ng serve -o --port 4201

이 명령은 자동으로 브라우저를 열고 각도 응용 프로그램을 제공합니다.

추가 --port 의 이유는 Gamemaster가 이미 사용하고있는 4200 포트로 기본적으로 시도하여 오류가 발생하여 대신 4201 포트에서 열 수 있기 때문입니다.

테스트 실행

CommandLine을 사용하여 백엔드 디렉토리를 입력하십시오.

거기에서 모든 현재 테스트를 실행하고 결과를 반환하는 명령 mvn test 입력하십시오.

우리는 여전히 프론트 엔드 테스트를 작성하는 과정에 있습니다.

기여

이 프로젝트에 어떤 식 으로든 기여하는 데 도움을 주시고, 개방형 문제를 확인하고 저에게 연락하여 초보자 인 경우 등장하고 실행하십시오.

저자

Yodigi7 -Anthony Buchholz

특허

GPLV3