이제 Google 클래스룸 부가기능이 일반적으로 개발자에게 제공됩니다. 자세한 내용은 부가기능 문서를 참고하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

둘러보기

이 둘러보기 시리즈는 작동 중인 운영 체제의 모든 움직이는 부분을 보여줍니다. 클래스룸 부가기능. 각 둘러보기 단계에서는 단일 웹 애플리케이션에서 구현하는 방법에 대해 다루었습니다. 여러분의 목표는 기능적인 부가기능을 설정하고, 구성하고, 실행하는 데 도움을 줍니다

부가기능은 Google Cloud 프로젝트와 상호작용해야 합니다. 이 기능에 대해 시작 가이드를 읽어보는 것이 좋습니다. 관리 계정 Google Workspace Marketplace SDK를 Google Cloud 콘솔 자세한 내용은 Marketplace SDK를 확인하려면 Google Workspace Marketplace로 이동하세요. 목록 가이드 페이지를 참조하세요.

이 가이드에는 다음 주제가 포함되어 있습니다.

Google Cloud를 사용하여 iframe에 표시할 페이지를 만듭니다. 클래스룸.
Google 싱글 사인온 (SSO)을 추가하고 사용자가 로그인하도록 허용합니다.
API를 호출하여 과제에 부가기능을 첨부합니다.
주요 부가기능 제출 요구사항 및 필수 기능을 해결합니다.

이 가이드는 프로그래밍 및 기본 웹에 익숙하다고 가정합니다. 살펴봤습니다 프로젝트 구성 가이드를 검토하세요. 이 페이지에는 중요한 구성 세부정보에 대해 알아보겠습니다.

구현 예

전체 참조 예는 Python에서 확인할 수 있습니다. 부분 구현 자바와 Node.js로도 사용할 수 있습니다. 이러한 구현은 다음 페이지에 있는 예제 코드의 소스입니다.

다운로드 위치

Python 및 Java 예는 GitHub 저장소에서 제공됩니다.

Node.js 샘플은 ZIP 파일로 다운로드할 수 있습니다.

Node.js 보관 파일

기본 요건

다음 섹션을 검토하여 새 부가기능 프로젝트를 준비하세요.

HTTPS 인증서

모든 개발 환경에서 앱을 호스팅할 수 있지만 클래스룸 부가기능은 https://을(를) 통해서만 사용할 수 있습니다. 따라서 SSL 암호화 서버가 있어야만 앱을 배포하거나 있습니다.

SSL 인증서와 함께 localhost를 사용할 수 있습니다. 다음과 같은 경우 mkcert를 고려합니다. 로컬 개발용 인증서를 만들어야 합니다

Google Cloud 프로젝트

이 예시를 사용하려면 Google Cloud 프로젝트를 구성해야 합니다. Google Cloud 프로젝트 만들기 가이드를 통해 필요한 개요에 대해 알아보세요. 방법을 알아보겠습니다. Google Cloud 프로젝트 설정 섹션에서 특정 구성을 자세히 알아볼 수도 있습니다. 필요한 조치를 취할 수 있습니다

완료되면 OAuth 2.0 클라이언트 ID를 JSON 파일로 다운로드합니다. 여기에 이 사용자 인증 정보 파일을 압축 해제된 예시 디렉터리에 복사합니다. 자세한 내용은 파일을 참고하세요.

OAuth 사용자 인증 정보

새 OAuth 사용자 인증 정보를 만들려면 다음 단계를 따르세요.

Google Cloud 사용자 인증 정보 페이지로 이동합니다. 올바른 프로젝트가 선택되었는지 확인합니다.
사용자 인증 정보 만들기를 클릭하고 메뉴에서 OAuth 클라이언트 ID를 선택합니다. 드롭다운 메뉴에서 선택합니다.
다음 페이지에서 다음 단계를 따릅니다.
- 애플리케이션 유형을 웹 애플리케이션으로 설정합니다.
- 승인된 리디렉션 URI에서 URI 추가를 클릭합니다. 전체 path를 지정하여 애플리케이션의 콜백 경로를 지정할 수 있습니다. 예를 들어 https://my.domain.com/auth-callback 또는 https://localhost:5000/callback입니다. 이 경로를 만들고 처리 이 둘러보기의 후반부에서 살펴보겠습니다 언제든지 이러한 경로를 수정하거나 추가할 수 있습니다.
- 만들기를 클릭합니다.
그러면 새로 만든 사용자 인증 정보가 포함된 대화상자가 표시됩니다. 그런 다음 JSON 다운로드 옵션 다운로드한 JSON 파일을 서버에 복사 를 참조하세요.

언어별 기본 요건

각 저장소에 있는 README 파일의 최신 목록을 보려면 을(를) 참조하십시오. 전제조건이 있습니다

Python

Python 예시에서는 Flask 프레임워크를 사용합니다. 이 제공된 링크에서 전체 소스 코드를 확인합니다.

필요한 경우 Python 3.7 이상을 설치하고 pip를 사용할 수 있는지 확인합니다.

python3 -m ensurepip --upgrade

또한 새로운 Python 가상 머신을 설정하고 활성화하는 것이 좋습니다. 환경입니다

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

다음 디렉터리의 각 둘러보기 하위 디렉터리에 requirements.txt가 있습니다. 다운로드한 예시를 확인해 보세요. 다음 명령어를 사용하여 필요한 라이브러리를 빠르게 설치할 수 있습니다. pip 다음 명령어를 사용하여 확인할 수 있습니다

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

Node.js 예시에서는 Express 프레임워크를 사용합니다. 지금 바로 제공된 링크에서 전체 소스 코드를 확인합니다.

이 예에서는 Node.js v16.13 이상이 필요합니다.

npm를 사용하여 필수 노드 모듈을 설치합니다.

npm install

자바

Java 예에서는 Spring Boot 프레임워크를 사용합니다. 지금 바로 제공된 링크에서 전체 소스 코드를 확인합니다.

컴퓨터에 아직 Java 11+가 설치되어 있지 않으면 설치합니다.

Spring Boot 애플리케이션은 Gradle 또는 Maven을 사용하여 빌드를 처리하고 종속 항목이 포함됩니다 이 예에는 빌드를 성공적으로 빌드할 수 있습니다.

프로젝트를 다운로드하거나 클론한 디렉터리에서 다음 명령어를 사용하여 프로젝트를 실행하기 위한 기본 요건이 있는지 확인합니다.

java --version
./mvnw --version

또는 Windows에서는 다음 스크립트를 실행합니다.

java -version
mvnw.cmd --version

파일 이해하기

다음 섹션에서는 예제 디렉터리의 레이아웃을 설명합니다.

디렉터리 이름

각 저장소에는 이름이 숫자로 시작하는 여러 디렉터리가 포함됩니다. /01-basic-app/ 등). 숫자는 구체적인 둘러보기 단계에 해당합니다. 각 디렉터리에는 기능을 구현하는 완전한 기능의 웹 앱이 포함되어 있습니다. 자세히 알아볼 수 있습니다 예를 들면 /01-basic-app/입니다. 디렉터리에는 부가기능 만들기의 최종 구현이 포함되어 있습니다. 확인하세요.

디렉터리 콘텐츠

디렉터리 콘텐츠는 구현 언어에 따라 다릅니다.

Python

디렉터리 루트에는 다음 파일이 포함됩니다.
- main.py - Python 애플리케이션 진입점입니다. 서버 지정 원하는 구성을 선택하고 서버를 시작합니다
- requirements.txt - 웹 앱을 실행하는 데 필요한 Python 모듈입니다. 이러한 앱은 pip install -r requirements.txt를 사용하여 자동으로 설치할 수 있습니다.
- client_secret.json - Google에서 다운로드한 클라이언트 보안 비밀번호 파일 있습니다. 예시 자료실에는 포함되어 있지 않습니다. 나 다운로드한 사용자 인증 정보 파일의 이름을 변경하고 복사하여 디렉터리 루트로 이동합니다.
  
  중요: Google Cloud 프로젝트에 있어야 예시를 실행할 수 있습니다.
config.py - Flask 서버의 구성 옵션입니다.
webapp 디렉터리에는 웹 애플리케이션의 콘텐츠가 포함됩니다. 이 패키지에는 다음 도구가 포함되어 있습니다.
다양한 페이지를 위한 Jinja 템플릿이 있는 /templates/ 디렉터리
이미지, CSS, 보조 JavaScript가 있는 /static/ 디렉터리 할 수 있습니다.
routes.py - 웹 애플리케이션 경로의 핸들러 메서드입니다.
__init__.py - webapp 모듈의 이니셜라이저입니다. 이 이니셜라이저는 Flask 서버를 시작하고 구성 옵션을 로드합니다. config.py에서 설정됩니다.
특정 둘러보기 단계에 필요한 추가 파일.

Node.js

도보 여정의 각 단계는 자체 <step>에서 찾을 수 있습니다. 하위 폴더로 이동합니다. 각 단계에는 다음 항목이 포함됩니다.

JavaScript, CSS, 이미지와 같은 정적 파일은 ./<step>/public 폴더.
익스프레스 라우터는 ./<step>/routes 폴더에 있습니다.
HTML 템플릿은 ./<step>/views 폴더에 있습니다.
서버 애플리케이션은 ./<step>/app.js입니다.

자바

프로젝트 디렉터리에는 다음이 포함됩니다.

src.main 디렉터리에는 실행할 소스 코드와 구성이 포함되어 있습니다. 애플리케이션을 성공적으로 실행합니다 이 디렉터리에는 다음이 포함됩니다. + java.com.addons.spring 디렉터리에는 Application.java 및 Controller.java 파일 이 Application.java 파일은 다음을 실행하는 역할을 합니다. Controller.java 파일이 엔드포인트 로직을 + resources 디렉터리에 templates 디렉터리가 포함되어 있습니다. HTML 및 자바스크립트 파일 또한 application.properties 파일은 포드를 실행할 포트를 지정하는 키 저장소 파일 경로, 키 저장소 파일의 경로 templates 디렉터리 이 예에는 키 저장소 파일이 포함되어 있습니다. resources 디렉터리에 있습니다. 어디에나 저장할 수 있습니다. 하지만 application.properties 파일에 경로를 적절하게 변경합니다.
- pom.xml에는 프로젝트를 빌드하는 데 필요한 정보가 포함됩니다. 필요한 종속 항목을 정의합니다
- .gitignore에는 git에 업로드하면 안 되는 파일 이름이 포함되어 있습니다. 이 .gitignore의 키 저장소에 경로를 추가해야 합니다. 제공된 예에서는 secrets/*.p12( 키 저장소는 아래 섹션에서 설명합니다.) 둘러보기 2 및 를 넘어서 URL에 대한 경로도 client_secret.json 파일을 추가하여 보안 비밀을 원격 저장소에 저장합니다 둘러보기 3 이상에서는 H2 데이터베이스 파일과 파일 데이터 스토어에 경로를 추가해야 함 있습니다. 이러한 데이터 스토어 설정에 대한 자세한 내용은 재방문 처리에 대한 세 번째 둘러보기에 나와 있습니다.
- mvnw 및 mvnw.cmd는 Unix 및 윈도우를 기준으로 했습니다. 예를 들어 ./mvnw --version을 Unix는 다른 정보 중에서도 Apache Maven 버전을 출력합니다.
- .mvn 디렉터리에는 Maven 래퍼의 구성이 포함되어 있습니다.

샘플 서버 실행

테스트하려면 서버를 시작해야 합니다. 다음 안내를 따르세요. 선택한 언어로 예시 서버를 실행합니다.

Python

OAuth 사용자 인증 정보

앞에서 설명한 대로 OAuth 사용자 인증 정보를 만들고 다운로드합니다. 장소 JSON 파일(애플리케이션 서버 옆 루트 디렉터리에 있음) 시작 파일을 찾습니다.

서버 구성

웹 서버를 실행하는 데는 여러 옵션이 있습니다. Python 파일에 다음 중 하나를 추가합니다.

안전하지 않은 localhost입니다. 이 방법은 브라우저 창에서만 안전하지 않은 도메인은 클래스룸 부가기능 iframe

if __name__ == "__main__":
  # Disable OAuthlib's HTTPs verification.
  os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

  # Run the web app at http://localhost:5000.
  app.run(debug=True)

localhost을(를) 보호합니다. SSL 키 파일의 튜플을 ssl_context 인수.

if __name__ == "__main__":
  # Run the web app at https://localhost:5000.
  app.run(host="localhost",
          ssl_context=("localhost.pem", "localhost-key.pem"),
          debug=True)

Gunicorn 서버도 포함됩니다. 프로덕션에 즉시 사용할 수 있는 서버나 살펴봤습니다 PORT 환경 변수를 설정하는 것이 좋습니다. 사용할 수 있습니다.

if __name__ == "__main__":
  # Run the web app at https://<your domain>:<server_port>.
  # Defaults to https://<your domain>:8080.
  server_port = os.environ.get("PORT", "8080")
  app.run(debug=True, port=server_port, host="0.0.0.0")

서버 실행

Python 애플리케이션을 실행하여 이전 단계로 넘어갑니다.

python main.py

표시되는 URL을 클릭하여 브라우저에서 웹 앱을 확인합니다. 확인하는 것입니다.

Node.js

서버 구성

HTTPS를 통해 서버를 실행하려면 자체 인증서를 만들어야 합니다. HTTPS를 통해 애플리케이션을 실행하는 데 사용됩니다. 이러한 사용자 인증 정보는 저장소 루트에 sslcert/cert.pem 및 sslcert/key.pem로 저장됨 있습니다. 이러한 키를 OS 키 체인에 추가해야 할 수도 있습니다. 수락해야 합니다.

*.pem가 .gitignore 파일에 있는지 확인합니다. git에 파일을 커밋합니다.

서버 실행

step01를 대체하여 다음 명령어를 사용하여 애플리케이션을 실행할 수 있습니다. 서버로 실행할 올바른 단계를 확인합니다 (예: step01). 01-basic-app의 경우, 02-sign-in의 경우 step02).

npm run step01

또는

npm run step02

그러면 웹 서버가 https://localhost:5000에서 실행됩니다.

터미널에서 Control + C를 사용하여 서버를 종료할 수도 있습니다.

자바

서버 구성

HTTPS를 통해 서버를 실행하려면 자체 인증서를 만들어야 합니다. HTTPS를 통해 애플리케이션을 실행하는 데 사용됩니다.

로컬 개발에는 mkcert 사용을 고려합니다. mkcert를 설치하면 다음 명령은 로컬에 저장된 인증서를 생성하여 HTTPS를 사용합니다.

mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>

이 예에는 리소스 디렉터리에 키 저장소 파일이 포함되어 있습니다. 다음을 수행할 수 있습니다. 원하는 위치에 저장할 수 있지만 application.properties 파일을 적절하게 변경합니다. 도메인 이름은 프로젝트를 실행하는 도메인 (예: localhost)

*.p12가 .gitignore 파일에 있는지 확인합니다. git에 파일을 커밋합니다.

서버 실행

Application.java에서 main 메서드를 실행하여 서버를 실행합니다. 파일에서 참조됩니다. 예를 들어 IntelliJ에서는 Application.java > Run 'Application'에 src/main/java/com/addons/spring 디렉터리를 만들거나 Application.java를 엽니다. 파일을 클릭하여 main(String[] args) 왼쪽에 있는 녹색 화살표를 클릭합니다. 메서드 서명 또는 터미널에서 프로젝트를 실행할 수 있습니다. 기간:

./mvnw spring-boot:run

또는 Windows:

mvnw.cmd spring-boot:run

이렇게 하면 https://localhost:5000 또는 지정한 포트에서 서버가 실행됩니다. application.properties에 지정됩니다.