Classroom アドオンを作成する

Python

この Python の例では、Flask フレームワークを使用します。Google Cloud SDK の すべてのチュートリアルのソースコードを [概要] ページで確認できます。この関数のコードは、 特定のチュートリアルは /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

この Java の例では、Spring Boot フレームワークを使用しています。次のアプリをダウンロードできます。 すべてのチュートリアルの完全なソースコードは概要ページから入手できます。

Java 11 以降をマシンにインストールしていない場合はインストールします。

Spring Boot アプリケーションで Gradle または Maven を使用してビルドを処理し、 確認します。この例に含まれている Maven ラッパーは、 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 です。2 つのルートを 表示されます。

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!'
  });
});

2 つ目のルート /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

Java コードの例では、モジュールを使用してチュートリアルをパッケージ化しています。 できます。今回は最初のチュートリアルなので、コードは step_01_basic_app モジュール。インフラストラクチャの実装は モジュールを使用したプロジェクト1 つのプロジェクトで構築することを推奨します。 手順を進めていきます。

このサンプル プロジェクトでは、次のコントローラ クラス Controller.java を作成します。 エンドポイントを定義します。このファイルで、@GetMapping アノテーションを spring-boot-starter-web 依存関係を使用します。

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

クラスの上に Spring フレームワーク コントローラ アノテーションを追加する クラスの目的を示す必要があります。

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

次に、2 つのルートと、エラー処理用の追加のルートを実装します。

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