클래스룸 부가기능 만들기

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

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";
}