この一連のチュートリアルでは、インフラストラクチャの Classroom アドオン。各チュートリアル ステップでは、 単一のウェブ アプリケーションに実装できます。このガイドは、 設定、構成、起動するうえで役立ちます
アドオンは Google Cloud プロジェクトとやり取りする必要があります。Google Cloud の スタートガイドを一読することをおすすめします。管理者 認証情報、API アクセス、Google Workspace Marketplace SDK を Google Cloud コンソール。詳細については、 Google Workspace Marketplace SDK と リスティングに関するページをご覧ください。
このガイドの内容は次のとおりです。
- Google Cloud を使用して、iframe に表示するページを作成する Classroom。
- Google シングル サインオン(SSO)を追加し、ユーザーがログインできるようにします。
- API 呼び出しを行ってアドオンを課題に添付します。
- アドオンの送信に関する主要な要件と必須機能に対処します。
このガイドは、読者がプログラミングと基本的なウェブ コンテンツに精通していることを前提としています 開発の概念に関するものです。プロジェクトの構成 ガイドをご覧ください。このページには重要な 構成の詳細については、チュートリアルでは説明しません。
実装の例
Python で完全なリファレンス サンプルを確認できます。部分的な実装 Java と Node.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 番目のチュートリアルをご覧ください。mvnw
とmvnw.cmd
は、Unix と Windows 用の Maven ラッパー実行可能ファイルです。 定義します。たとえば、次のように./mvnw --version
を実行すると、 Unix の場合は、Apache Maven のバージョンなどの情報が出力されます。.mvn
ディレクトリには、Maven ラッパーの構成が含まれています。
サンプル サーバーを実行する
サーバーをテストするには、サーバーを起動する必要があります。以下の手順に沿って操作してください。 任意の言語でサンプル サーバーを実行します。
Python
Oauth 認証情報
前述の説明のとおりに OAuth 認証情報を作成してダウンロードします。場所 JSON ファイルは、アプリケーションのサーバーと並行してルート ディレクトリにあります。 指定します。
サーバーを構成する
ウェブサーバーを実行するには、いくつかの方法があります。最後に、 Python ファイルに次のいずれかを追加します。
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)
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 経由でサーバーを実行するには、自己証明書を作成する必要があります
内部 IP アドレスを使用して通信しますこれらの認証情報は、
リポジトリ ルートに sslcert/cert.pem
と sslcert/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.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
で指定します。