온라인 학습 평가를 위한 퀴즈 앱 만들기

코로나19(COVID-19)의 대유행으로 인해 온라인으로 학습과 협업이 이루어지고 있으므로 개발자들은 원격 학습을 지원하는 마이크로서비스를 구축해야 합니다. 이러한 온라인 교육을 수행하는 과정에서 강사는 교육 과정의 내용에 대한 학생의 이해도를 평가할 수 있어야 합니다.

이 튜토리얼에서는 학습자의 이해도를 평가하기 위한 간단한 퀴즈 앱을 구축하는 방법에 대해 설명합니다. 이 앱의 주된 장점은 유연성입니다. 이 스타터 킷을 수정하면 쉽게 주관식 서술형 테스트 앱, 채점 앱 또는 기타 교육용 도구를 만들 수 있습니다.

Loopback은 애플리케이션을 위한 데이터 API를 간편하게 구축하도록 지원하는 오픈소스 툴입니다. 특정 애플리케이션의 목적이 무엇이든 Loopback을 사용하면 데이터 처리 코드 대신 애플리케이션 로직을 간편하게 작성할 수 있습니다.

Quiz app interface

함께 제공된 GitHub 저장소에서 이 튜토리얼을 위한 코드와 관련 파일을 찾을 수 있습니다.

학습 목표

이 튜토리얼을 완료하면 React 프론트엔드와 Loopback 생성 Express 앱을 사용하는 간단한 퀴즈 애플리케이션을 만드는 방법에 대해 배울 수 있습니다.

수강 전 준비사항

이 예시의 핵심 요소는 Loopback 유틸리티로부터 생성된 코드입니다. 참고로 이 튜토리얼에서는 현재 더 이상 제공되지 않는 Loopback 라이브러리 버전 3.0을 사용합니다. 버전 3.0을 사용하면 쉽게 앱을 만들기 시작할 수 있지만 최신 기능과 보안 업데이트를 활용하려면 Loopback v4로 업그레이드하는 것이 좋습니다.

예상 소요 시간

이 튜토리얼을 완료하는 데 약 30분이 소요됩니다.

아키텍처 다이어그램

Quiz app architecture diagram

  1. 사용자가 사이트로 이동합니다.
  2. 사용자에게 웹사이트, 즉 React 프론트엔드가 제공됩니다.
  3. (a) 사용자가 Express 앱 내에서 작업을 수행합니다. (b) LoopBack 생성 코드가 Express 앱 내에서 필요한 작업을 수행합니다.
  4. 변경 사항이 PluggableDB에 저장됩니다.

1. 환경 설정하기

이 스타터 킷을 최대한 활용하려면 자신만의 Loopback 앱을 만들어 보는 것이 좋습니다. 아주 빠르게 만들 수 있습니다!.

하지만, 이 앱을 시작하려면 아래의 단계를 따르세요. (참고: 생성된 데이터와 React 빌드를 사용하려면 아래에서 빠른 시작 안내를 확인하세요.)

  1. 아래 명령을 실행합니다.

    npm install
    npm serve
    
  2. API가 나타나면 https://localhost:3000/explorer에서 Swagger API 탐색기로 이동합니다. 여기에서 즉시 API에 데이터를 추가할 수 있습니다.

    Swagger API explorer - adding data

  3. 아래의 JSON 블롭(blob)을 사용하여 퀴즈를 만듭니다:

    {
     "author": "Scientist's Limited",
     "title": "Eight Science Questions You Don't Know the Answer to",
     "pass_pct": 0.8
    }
    

    Swagger API explorer - creating a quiz

4.아래의 JSON 블롭(blob)을 사용하여 질문을 만듭니다:

   {
     "question_text": "Which immobile ground unit has the longest range?",
     "answers": [
       "Siege Tank",
       "Spore Colony",
       "Photon Cannon",
       "Bunker (Marines"
     ],
     "correct_answer_index": 0,
     "quizId": 1
   }
![Swagger API explorer - creating a question](https://developer.ibm.com/developer/default/tutorials/cfc-starter-kit-quiz-app-example/images/quiz-app-3.png)

2. 앱 프론트엔드 만들기

앱 프론트엔드는 사용자 인터페이스용 라이브러리인 React로 코딩합니다. React를 사용해 본 적이 없거나 더 단순한 툴을 사용하고 싶다면 BootstrapjQuery와 같은 툴을 사용해도 비슷한 결과를 얻을 수 있습니다. 프론트엔드 코드는 한 번 컴파일링된 다음 Loopback으로 생성한 Express 앱에 의해 서비스됩니다.

프론트엔드 코드를 구축하여 설치하려면 아래 명령을 실행하세요:

cd frontend
npm install
SKIP_PREFLIGHT_CHECK=true npm run build
# this creates a build in build/
rm -fr ../public/*
cp -r build/* ../public/

3. IBM Cloud에 배포하기

이 애플리케이션은 표준 Express 애플리케이션이므로 Cloud Foundry 또는 Kubernetes를 사용하여 호스팅할 수 있습니다. Dockerfile이 포함됩니다.

  • Cloud Foundry를 사용하여 배포하려면 이 단계를 따르세요.

  • Kubernetes를 사용하여 배포하려면 deployment/deploy.yaml에 포함된 매니페스트를 사용하세요. 참고: Ingress를 사용하는 경우, 클러스터의 Ingress 서브도메인으로 Ingress 호스트 이름을 채웁니다. 그 예는 아래와 같습니다:

```
$ ibmcloud ks cluster get --cluster nibz-falco-test-2 | grep Ingress
Ingress Subdomain:              nibz-falco-test-2-5290c8c8e5797924dc1ad5d1b85b37c0-0000.us-east.containers.appdomain.cloud
```

빠른 시작 안내

모든 이전 단계를 건너뛰고 빨리 시작하려면(물론 이전 단계를 먼저 학습하는 것이 좋습니다!) 사전 로드된 데이터와 프론트엔드 코드의 사전 구축 빌드를 사용할 수 있습니다:

```
npm install
cp examples/data.db data.db
cp -r examples/public/* public/
npm start
```

요약

이 튜토리얼에서는 학생이 강의 내용을 얼마나 잘 이해했는지 평가하기 위한 앱을 간편하게 만들고 구성하는 방법에 대해 알아보았습니다. 또한, 다른 교육적 요구사항에 맞게 퀴즈 앱을 간편하게 수정하는 방법도 알아보았습니다. 이제 여러분은 간편하고 유연한 툴을 만드는 데 필요한 모든 지식을 얻었으며, 그러한 지식을 활용하면 최근 들어 그 어느 때보다도 더 많이 온라인 학습을 이용하게 된 교사와 학생에게 보탬이 되는 툴을 만들 수 있습니다.