チュートリアル

この一連のチュートリアルでは、インフラストラクチャの Classroom アドオン。各チュートリアル ステップでは、 単一のウェブ アプリケーションに実装できます。このガイドは、 設定、構成、起動するうえで役立ちます

アドオンは Google Cloud プロジェクトとやり取りする必要があります。Google Cloud の スタートガイドを一読することをおすすめします。管理者 認証情報、API アクセス、Google Workspace Marketplace SDK を Google Cloud コンソール。詳細については、 Google Workspace Marketplace SDK と リスティングに関するページをご覧ください。

このガイドの内容は次のとおりです。

  • Google Cloud を使用して、iframe に表示するページを作成する Classroom。
  • Google シングル サインオン(SSO)を追加し、ユーザーがログインできるようにします。
  • API 呼び出しを行ってアドオンを課題に添付します。
  • アドオンの送信に関する主要な要件と必須機能に対処します。

このガイドは、読者がプログラミングと基本的なウェブ コンテンツに精通していることを前提としています 開発の概念に関するものです。プロジェクトの構成 ガイドをご覧ください。このページには重要な 構成の詳細については、チュートリアルでは説明しません。

実装の例

Python で完全なリファレンス サンプルを確認できます。部分的な実装 JavaNode.js でも使用できます。これらの実装は、 後続のページにあるサンプルコードのソースを参照します。

ダウンロード場所

Python と Java のサンプルは、GitHub リポジトリで入手できます。

Node.js サンプルは、zip ファイルとしてダウンロードできます。

前提条件

以下のセクションを確認して、新しいアドオン プロジェクトを準備します。

HTTPS 証明書

アプリはどの開発環境でもホストできますが、 Classroom アドオンは https:// からのみご利用いただけます。したがって、 アプリのデプロイや内部テストのために、SSL で暗号化されたサーバーを 追加します。

localhost は SSL 証明書で使用できます。次の場合は 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

この Java の例では、Spring Boot フレームワークを使用しています。次のアプリをダウンロードできます。 提供されたリンクから完全なソースコードを入手する。

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

Spring Boot アプリケーションで Gradle または Maven を使用してビルドを処理し、 確認します。この例に含まれている Maven ラッパーは、 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 からダウンロードされたクライアント シークレット ファイル 説明します。これはサンプル アーカイブには含まれていません。 ダウンロードした認証情報ファイルの名前を変更し、各ファイルに ディレクトリのルートです。

  • config.py - Flask サーバーの構成オプション。

  • webapp ディレクトリには、ウェブ アプリケーションのコンテンツが含まれています。 次のツールが含まれています。

  • さまざまなページ用の Jinja テンプレートが格納されている /templates/ ディレクトリ。

  • 画像、CSS、補助的な JavaScript が含まれる /static/ ディレクトリ できます。

  • routes.py - ウェブ アプリケーション ルートのハンドラ メソッド。

  • __init__.py - webapp モジュールのイニシャライザ。この イニシャライザが Flask サーバーを起動し、構成オプションを読み込む config.py で設定。

  • 特定のチュートリアル ステップで必要となる追加のファイル。

Node.js

ウォークスルーの各ステップは、それぞれの <step> で確認できます 表示されます。各ステップには以下が含まれます。

  • JavaScript、CSS、画像などの静的ファイルは、 ./<step>/public フォルダ。
  • Express ルーターは ./<step>/routes フォルダにあります。
  • HTML テンプレートは ./<step>/views フォルダにあります。
  • サーバー アプリケーションは ./<step>/app.js です。

Java

プロジェクト ディレクトリには次のものが含まれます。

  • src.main ディレクトリには、ソースコードと実行の構成が含まれます。 ダウンロードされます。このディレクトリには次のものが含まれます。 + java.com.addons.spring ディレクトリには、 Application.java ファイルと Controller.java ファイル。「 Application.java ファイルは、次のタスクの実行を担当します。 アプリケーション サーバーは処理され、Controller.java ファイルは ロジックを記述できます。 + resources ディレクトリには、次の内容を含む templates ディレクトリが含まれます。 HTML ファイルと JavaScript ファイル。また、 実行するポートを指定する application.properties ファイル サーバー、キーストア ファイルへのパス、 templates ディレクトリ。この例にはキーストアファイルが resources ディレクトリ。どこにでも保存できます 好みですが、application.properties を必ず更新してください。 そのパスを適宜指定します。
    • pom.xml には、プロジェクトのビルドに必要な情報が含まれています。 必要な依存関係を定義します。
    • .gitignore には、git にアップロードすべきでないファイル名が含まれています。 この .gitignore にキーストアへのパスを必ず追加してください。 上記の例では、これは secrets/*.p12 です( キーストアについては後述します)。チュートリアル 2 と さらに、環境変数に client_secret.json ファイルを含め、 保存する必要があります。チュートリアル 3 以降では H2 データベース ファイルとファイル データストアへのパスを追加する必要があります。 できます。これらのデータストアの設定については、 再訪問の処理に関する 3 番目のチュートリアルをご覧ください。
    • mvnwmvnw.cmd は、Unix と Windows 用の Maven ラッパー実行可能ファイルです。 定義します。たとえば、次のように ./mvnw --version を実行すると、 Unix の場合は、Apache Maven のバージョンなどの情報が出力されます。
    • .mvn ディレクトリには、Maven ラッパーの構成が含まれています。

サンプル サーバーを実行する

サーバーをテストするには、サーバーを起動する必要があります。以下の手順に沿って操作してください。 任意の言語でサンプル サーバーを実行します。

Python

Oauth 認証情報

前述の説明のとおりに OAuth 認証情報を作成してダウンロードします。場所 JSON ファイルは、アプリケーションのサーバーと並行してルート ディレクトリにあります。 指定します。

サーバーを構成する

ウェブサーバーを実行するには、いくつかの方法があります。最後に、 Python ファイルに次のいずれかを追加します。

  1. localhost は保護されていません。なお、この方法は、 ブラウザ ウィンドウのみに表示されます。セキュリティで保護されていないドメインは、 Classroom アドオン 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)
    
  2. 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)
    
  3. 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 経由でサーバーを実行するには、自己証明書を作成する必要があります 内部 IP アドレスを使用して通信しますこれらの認証情報は、 リポジトリ ルートに sslcert/cert.pemsslcert/key.pem として保存 フォルダに配置されます。以下の目的のために、これらのキーを OS キーチェーンに追加する必要があります 受け入れることができます。

.gitignore ファイルに *.pem が含まれていないことを確認してください。 git に commit します

サーバーを起動する

step01 を置き換えて次のコマンドでアプリケーションを実行できます。 サーバーとして実行する適切なステップ(例: step01) 01-basic-app 用、02-sign-in 用 step02)。

npm run step01

または

npm run step02

これにより、https://localhost:5000 のウェブサーバーが起動します。

ターミナルで Control + C を使用してサーバーを終了することもできます。

Java

サーバーを構成する

HTTPS 経由でサーバーを実行するには、自己証明書を作成する必要があります 内部 IP アドレスを使用して通信します

ローカルでの開発には mkcert の使用を検討してください。mkcert をインストールすると、 次のコマンドは、ローカルに保存された証明書を生成して実行します。 提供します。

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

この例では、キーストア ファイルがリソース ディレクトリに含まれています。。 任意の場所に保存できますが、 application.properties ファイルを適切なパスに置き換えます。ドメイン名は プロジェクトを実行しているドメイン(例: localhost)。

.gitignore ファイルに *.p12 が含まれていることを確認してください。 git に commit します

サーバーを起動する

Application.javamain メソッドを実行してサーバーを起動します。 表示されます。たとえば 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 で指定します。