클래스룸 부가기능 만들기

클래스룸 부가기능의 첫 번째 둘러보기입니다. 오신 것을 환영합니다

이 둘러보기에서는 웹 애플리케이션 개발을 위한 기초를 다지고 클래스룸 부가기능으로 게시해야 합니다 향후 둘러보기 단계 이 앱을 펼쳐보세요.

이 둘러보기 과정에서 다음을 완료합니다.

• 부가기능을 위한 새 Google Cloud 프로젝트를 만듭니다.
• 자리표시자 로그인 버튼이 있는 스켈레톤 웹 앱을 만듭니다.
• 부가기능의 Google Workspace Marketplace 스토어 등록정보를 게시합니다.

완료되면 부가기능을 설치하고 클래스룸 부가기능 iframe

중요: 이 둘러보기를 진행하기 전에 프로젝트 구성 가이드를 참고하여 개발자 여정의 온보딩 단계를 완료하세요. 결제 애플리케이션의 공개 상태 설정에 주의를 기울여야 합니다. 나중에 변경할 수 있습니다.

기본 요건

언어를 선택하여 적절한 기본 요건을 확인하세요.

Python

Python 예시에서는 Flask 프레임워크를 사용합니다. 전체 버전을 다운로드할 수 있습니다. 소스 코드를 제공합니다. 이 코드의 특정 둘러보기는 /flask/01-basic-app/ 디렉터리에서 찾을 수 있습니다.

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

python -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 프레임워크를 사용합니다. 이 소스 코드를 완료하여 개요 페이지의 모든 둘러보기를 확인할 수 있습니다.

필요한 경우 NodeJS v16.13 이상을 설치합니다.

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

npm install

자바

Java 예에서는 Spring Boot 프레임워크를 사용합니다. 지금 바로 개요 페이지의 모든 둘러보기를 위한 전체 소스 코드를 확인하세요.

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

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

제공된 예를 실행하려면 다음 명령어를 실행합니다. 프로젝트를 다운로드한 디렉터리가 전제조건이 있어야 합니다

java --version
./mvnw --version

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

java -version
mvnw.cmd --version

Google Cloud 프로젝트 설정

Classroom API 액세스 및 필수 인증 방법 Google Cloud 프로젝트로 제어됩니다 다음 안내에 따라 새 프로젝트를 만들고 구성하는 데 필요한 최소한의 단계를 부가기능

프로젝트 만들기

프로젝트 만들기 페이지로 이동하여 새 Google Cloud 프로젝트를 만듭니다. 다음을 수행할 수 있습니다. 새 프로젝트의 이름을 입력합니다. 만들기를 클릭합니다.

새 프로젝트가 완전히 생성되려면 몇 분 정도 걸립니다. 완료되면 프로젝트를 선택해야 합니다. 프로젝트 선택기에서 선택할 수 있습니다 또는 화면 상단의 드롭다운 메뉴에서 프로젝트 선택을 클릭합니다. 알림 메뉴를 클릭합니다.

중요: 계속 진행하기 전에 올바른 프로젝트를 선택했는지 확인하세요.

Google Workspace Marketplace SDK를 Google Cloud 프로젝트에 연결합니다.

API 라이브러리 브라우저로 이동합니다. Google Workspace Marketplace SDK를 찾습니다. 그러면 해당 SDK가 있습니다.

Google Workspace Marketplace SDK 카드를 선택한 다음 사용 설정을 클릭합니다.

Google Workspace Marketplace SDK 구성하기

Google Workspace Marketplace에서는 사용자와 관리자가 부가기능을 설치합니다 구성: Marketplace SDK의 앱 구성 및 스토어 계속 진행하려면 등록정보 및 OAuth 동의 화면을 선택합니다.

앱 구성

Marketplace SDK의 앱 구성 페이지로 이동합니다. 다음 정보를 입력합니다.

• 앱 공개 상태를 Public 또는 Private로 설정합니다.

  • 공개 설정은 향후 출시될 앱을 위한 것입니다. 제공할 수 있습니다 공개 앱은 출시 전에 승인 절차를 거쳐야 합니다. 최종 사용자에게 게시될 수 있지만 특정 애플리케이션을 설치하고 초안으로 테스트합니다. 게시 전 상태로는 부가기능의 테스트 및 개발이 이루어져야 승인을 받을 수 있습니다.
  • 비공개 설정은 내부 테스트 및 개발에 적합합니다. 가 비공개 앱은 프로젝트를 만들었습니다. 따라서 공개 상태를 비공개로 설정해야 합니다. 프로젝트가 Google Workspace for Education을 사용하는 도메인에서 생성된 경우에만 정기 결제를하지 않으면 테스트 사용자가 클래스룸 부가기능
  를 통해 개인정보처리방침을 정의할 수 있습니다.
  경고: 알림을 표시하기 전에 앱 공개 상태 설정이 올바른지 저장합니다. 앱 공개 상태를 설정한 후에는 변경할 수 없습니다. 나 새 Google Cloud 프로젝트를 만들어 다른 앱 공개 상태를 설정해야 합니다.

• 필요한 경우 Installation Settings(설치 설정)를 Admin Only install로 설정합니다. 도메인 관리자로 설치를 제한할 수 있습니다.

• 앱 통합에서 클래스룸 부가기능을 선택합니다. 여러분은 secure 첨부파일 설정 URI를 묻는 메시지가 표시됩니다. 이것이 바로 여러분이 사용자가 부가기능을 열 때 로드될 것으로 예상됩니다. 이 목적에서는 둘러보기에서는 https://<your domain>/addon-discovery여야 합니다.

• 허용된 첨부파일 URI 프리픽스는 AddOnAttachment courses.*.addOnAttachments.create 및 courses.*.addOnAttachments.patch 메서드를 사용합니다. 유효성 검사는 리터럴 문자열 프리픽스 일치가 있으며, 이 문장에서는 와일드 카드 사용을 허용하지 않습니다. 있습니다. 최소한 콘텐츠 서버의 루트 도메인(예: https://localhost:5000/ 또는 https://cdn.myedtech.com/

• OAuth 동의 화면에 제공된 것과 동일한 OAuth 범위를 이전 단계로 넘어갑니다

  중요: 앱 구성에 지정된 OAuth 범위 목록은 OAuth 동의 화면에 표시된 것과 일치해야 합니다.

• 개발자에서 조직에 해당하는 입력란을 작성합니다. 링크를 클릭합니다.

스토어 등록정보

Marketplace SDK의 스토어 등록정보 페이지로 이동합니다. 다음 정보를 입력합니다.

• 앱 세부정보에서 언어를 추가하거나 앱 이미 목록에 있는 언어입니다. 애플리케이션 이름과 설명을 입력합니다. 이러한 항목 부가기능의 Google Workspace Marketplace 스토어 등록정보 페이지에 표시됩니다. 완료를 클릭하여 저장합니다.
• 부가기능의 카테고리를 선택합니다.
• 그래픽 애셋에서 필수 입력란에 이미지를 입력합니다. 이러한 나중에 변경할 수 있으며 지금은 자리표시자가 될 수 있습니다.
• 지원 링크에서 요청된 URL을 입력합니다. 이러한 디바이스는 자리표시자는 이전 버전에서 앱 공개 상태를 비공개로 설정한 경우 단계를 거칩니다.

이전 단계에서 앱 공개 상태를 비공개로 설정한 경우 PUBLISH; 앱을 즉시 설치할 수 있게 됩니다. 이 앱 공개 상태를 공개로 설정하고, 초안 테스터 영역에 이메일 주소를 추가합니다. 초안 저장을 클릭합니다.

핵심사항: 모든 사용자에게 공개된 앱에 대해 게시를 선택하면 Marketplace팀이 검토할 수 있도록 즉시 제출해 주세요. 이 검토팀에서 앱을 테스트하고 승인해야 Marketplace 만들려면 프로젝트 초안을 저장하세요. 테스트 사용자가 검토 없이 설치할 수 있습니다. 초안 게시를 선택할 수 있습니다. 나중에 Marketplace팀이 승인합니다.

OAuth 동의 화면

사용자가 앱을 처음 승인할 때 OAuth 동의 화면이 표시됩니다. 프롬프트 앱에서 개인 정보 및 계정 정보에 액세스하도록 허용할 수 있습니다. 사용하는 범위에 따라 결정됩니다.

OAuth 동의 화면 만들기 페이지로 이동합니다. 다음 정보를 제공하세요. 있습니다.

• 사용자 유형을 외부로 설정합니다. 만들기를 클릭합니다.
• 다음 페이지에서 필수 앱 세부정보와 연락처 정보를 입력합니다. 승인된 도메인에서 앱을 호스팅하는 도메인을 제공합니다. 클릭 저장하고 계속하기.

• 웹 앱에 필요한 OAuth 범위를 추가합니다. 자세한 내용은 OAuth 구성 가이드를 참조하세요.

  Google에서 다음 범위 중 하나 이상을 요청해야 합니다. login_hint 쿼리 매개변수를 전송합니다. 이에 대한 자세한 설명은 OAuth 구성 가이드에서 확인할 수 있습니다.

  • https://www.googleapis.com/auth/userinfo.email (이미 포함됨)
  • https://www.googleapis.com/auth/userinfo.profile (이미 포함됨)

  다음은 클래스룸 부가기능에만 해당하는 범위입니다.

  • https://www.googleapis.com/auth/classroom.addons.teacher
  • https://www.googleapis.com/auth/classroom.addons.student

  앱에 필요한 다른 Google API 범위도 포함합니다. 있습니다.

  저장 후 계속을 클릭합니다.

• 테스트 사용자 페이지에 테스트 계정의 이메일 주소를 나열합니다. 저장하고 계속하기를 클릭합니다.

설정이 올바른지 확인한 후 대시보드로 돌아갑니다.

부가기능 설치

이제 Marketplace SDK의 스토어 등록정보 페이지 앱 URL을 클릭하여 목록을 확인한 후 설치를 선택합니다.

참고: 현재는 특정 사용자만 부가기능을 설치할 수 있습니다. 만약 부가기능이 공개 상태인 경우 초안으로 표시된 사용자만 테스터 부가기능의 공개 상태가 비공개인 경우 Cloud 프로젝트와 동일한 도메인에 있어야 합니다.

기본 웹 앱 빌드

두 가지 경로로 기본 웹 애플리케이션을 설정합니다. 향후 둘러보기 단계 지금은 이 응용 프로그램을 확장하므로 부가기능의 방문 페이지만 만들어 보겠습니다. /addon-discovery 및 '회사 사이트'의 모의 색인 페이지 /.

다음 두 엔드포인트를 구현합니다.

• /: 환영 메시지와 현재 탭을 모두 닫는 버튼을 표시합니다. 부가기능 iframe이 있습니다.
• /addon-discovery: 환영 메시지와 닫는 버튼 2개를 표시합니다. 부가기능 iframe, 그리고 새 탭에서 웹사이트를 열기 위한 하나가 있습니다.

창 또는 iframe을 만들고 닫을 수 있는 버튼이 추가됩니다. 이러한 사용자를 새 탭에 안전하게 표시하는 방법을 보여줍니다. 승인에 대한 자세한 내용은 다음 과정에서 살펴보겠습니다

유틸리티 스크립트 만들기

static/scripts 디렉터리를 만듭니다. 새 파일 addon-utils.js을 만듭니다. 다음 두 함수입니다.

/**
 *   Opens a given destination route in a new window. This function uses
 *   window.open() so as to force window.opener to retain a reference to the
 *   iframe from which it was called.
 *   @param {string} destinationURL The endpoint to open, or "/" if none is
 *   provided.
 */
function openWebsiteInNewTab(destinationURL = '/') {
  window.open(destinationURL, '_blank');
}

/**
 *   Close the iframe by calling postMessage() in the host Classroom page. This
 *   function can be called directly when in a Classroom add-on iframe.
 *
 *   Alternatively, it can be used to close an add-on iframe in another window.
 *   For example, if an add-on iframe in Window 1 opens a link in a new Window 2
 *   using the openWebsiteInNewTab function, you can call
 *   window.opener.closeAddonIframe() from Window 2 to close the iframe in Window
 *   1.
 */
function closeAddonIframe() {
  window.parent.postMessage({
    type: 'Classroom',
    action: 'closeIframe',
  }, '*');
};

경로 만들기

/addon-discovery 및 / 엔드포인트를 구현합니다.

Python

애플리케이션 디렉터리 설정

이 예에서는 애플리케이션 로직을 모듈을 마칩니다 이 디렉터리는 제공된 예에서 webapp 디렉터리입니다.

서버 모듈의 디렉터리를 만듭니다(예: webapp). 이동 static 디렉터리를 모듈 디렉터리로 복사합니다. template 디렉터리 만들기 모듈 디렉터리에도 있습니다 HTML 파일이 여기에 표시됩니다.

서버 모듈 빌드*

모듈 디렉터리에 __init__.py 파일을 만들고 다음을 추가합니다. 여러 가지 방법이 있습니다

from flask import Flask
import config

app = Flask(__name__)
app.config.from_object(config.Config)

# Load other module script files. This import statement refers to the
# 'routes.py' file described below.
from webapp import routes

그런 다음 웹 앱의 경로를 처리할 파일을 만듭니다. 이것은 제공된 예에서는 webapp/routes.py입니다. 이 파일에서 참조됩니다.

from webapp import app
import flask

@app.route("/")
def index():
    return flask.render_template("index.html",
                                message="You've reached the index page.")

@app.route("/classroom-addon")
def classroom_addon():
    return flask.render_template(
        "addon-discovery.html",
        message="You've reached the addon discovery page.")

두 경로는 모두 message 변수를 각각에 전달합니다. Jinja 템플릿 사용자가 어느 페이지에 도달했는지 확인하는 데 유용합니다.

구성 및 실행 파일 만들기

애플리케이션의 루트 디렉터리에서 main.py 및 config.py를 만듭니다. 할 수 있습니다. config.py에서 보안 비밀 키를 구성합니다.

import os

class Config(object):
    # Note: A secret key is included in the sample so that it works.
    # If you use this code in your application, replace this with a truly secret
    # key. See https://flask.palletsprojects.com/quickstart/#sessions.
    SECRET_KEY = os.environ.get(
        'SECRET_KEY') or "REPLACE ME - this value is here as a placeholder."

main.py 파일에서 모듈을 가져오고 Flask 서버를 시작합니다.

from webapp import app

if __name__ == "__main__":
    # Run the application over HTTPs with a locally stored certificate and key.
    # Defaults to https://localhost:5000.
    app.run(
        host="localhost",
        ssl_context=("localhost.pem", "localhost-key.pem"),
        debug=True)

Node.js

경로는 다음 줄과 함께 app.js 파일에 등록됩니다.

const websiteRouter = require('./routes/index');
const addonRouter = require('./routes/classroom-addon');

app.use('/', websiteRouter);
app.use('/addon-discovery', addonRouter);

/01-basic-app/routes/index.js를 열고 코드를 검토합니다. 이 경로는 최종 사용자가 회사 웹사이트를 방문할 때 도달합니다. 경로는 index Handlebars 템플릿을 사용하여 응답을 생성하고 템플릿에 title 및 message 변수를 포함하는 데이터 객체입니다.

router.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Education Technology',
    message: 'Welcome to our website!'
  });
});

두 번째 경로 /01-basic-app/routes/classroom-addon.js를 열고 검토합니다. 생성합니다. 최종 사용자가 부가기능을 방문할 때 이 경로에 연결됩니다. 알림 이 경로는 discovery Handlebars 템플릿을 사용하며 페이지를 회사와 다르게 렌더링하기 위한 addon.hbs 레이아웃 있습니다.

router.get('/', function (req, res, next) {
  res.render('discovery', {
    layout: 'addon.hbs',
    title: 'Education Technology Classroom add-on',
    message: `Welcome.`
  });
});

자바

Java 코드 예에서는 모듈을 사용하여 순차 둘러보기를 패키징합니다. 학습합니다. 첫 번째 둘러보기이므로 코드는 step_01_basic_app 모듈을 통해 학습됩니다. Cloud Shell에서 모듈을 사용하여 하나의 프로젝트 위에 빌드하는 것이 연습해 볼 수 있습니다

이 예시 프로젝트에서 컨트롤러 클래스 Controller.java를 만들어 다음을 실행합니다. 엔드포인트를 정의합니다 이 파일에서 @GetMapping 주석을 spring-boot-starter-web 종속 항목

import org.springframework.web.bind.annotation.GetMapping;

클래스 위에 Spring 프레임워크 컨트롤러 주석을 포함합니다. 정의를 통해 클래스의 목적을 나타냅니다.

@org.springframework.stereotype.Controller
public class Controller {

그런 다음 오류 처리를 위한 두 경로와 추가 경로를 구현합니다.

/** Returns the index page that will be displayed when the add-on opens in a
*   new tab.
*   @param model the Model interface to pass error information that's
*   displayed on the error page.
*   @return the index page template if successful, or the onError method to
*   handle and display the error message.
*/
@GetMapping(value = {"/"})
public String index(Model model) {
  try {
    return "index";
  } catch (Exception e) {
    return onError(e.getMessage(), model);
  }
}

/** Returns the add-on discovery page that will be displayed when the iframe
*   is first opened in Classroom.
*   @param model the Model interface to pass error information that's
*   displayed on the error page.
*   @return the addon-discovery page.
*/
@GetMapping(value = {"/addon-discovery"})
public String addon_discovery(Model model) {
  try {
    return "addon-discovery";
  } catch (Exception e) {
    return onError(e.getMessage(), model);
  }
}

/** Handles application errors.
*   @param errorMessage message to be displayed on the error page.
*   @param model the Model interface to pass error information to display on
*   the error page.
*   @return the error page.
*/
@GetMapping(value = {"/error"})
public String onError(String errorMessage, Model model) {
  model.addAttribute("error", errorMessage);
  return "error";
}

부가기능 테스트

중요: 웹브라우저를 사용하여 직접 애플리케이션을 테스트할 수 있지만 주로 클래스룸 부가기능 iframe에서 테스트해야 합니다. 로드 중 iframe의 웹 앱이 몇 가지 이례적인 동작을 일으킬 수 있습니다. iframe 읽어보기 및 쿼리 매개변수 가이드 페이지를 참조하세요. 전체 이 둘러보기에서 제공하는 안내는 부가기능을 컨텍스트가 포함되어 있습니다.

서버를 실행합니다. 그런 다음 Google 클래스룸에 하나의 계정으로 로그인합니다. 의 교사 테스트 사용자입니다. 수업 과제 탭으로 이동하여 새 수업 만들기 양도. 부가기능 선택 도구에서 부가기능을 선택합니다. iframe이 열립니다. 그러면 부가기능이 첨부파일 설정 URI Marketplace SDK의 앱 구성 페이지

축하합니다. 다음 단계인 사용자 로그인으로 진행할 준비가 되었습니다. 사용할 수 있습니다.