概要
このサンプルアプリのアーキテクチャに関する一般的なアプローチ、特に認証と AJAX の実装については、 HttpRequest の使用例を参照してください。
アプリケーションのアーキテクチャ
このアプリの高レベルのアプリケーションロジックは次のとおりです。
- アカウントにアクセスするために必要なユーザーデータを収集する
- ボタンのクリックで、AJAX呼び出しを実行してすべてのプレーヤー情報を取得する
- AJAX呼び出しが成功した場合は、以下を実行します。
- JSON レスポンスデータを HTML ページに注入する
- プレーヤー情報を順序付けられたリストに表示し、それをHTMLページに注入するHTMLを動的に構築する
サンプルアプリ
ソースコード
このサンプルに関連付けられているすべてのコードを、この GitHub リポジトリで検索します。
サンプルアプリ
ペンを見るディスプレイプレーヤー Brightcove Learning Services（ @ rcrooks1969） オンCodePen。
CodePen を使用する
上記のCodePenを効果的に使用するためのヒントは次のとおりです。
- [ 結果 ] ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
- HTML/CSS/JS ボタンをクリックして、コードタイプの 1 つを表示します。
- 右上隅にある CodePen の編集をクリックして、この CodePen を自分のアカウントにフォークします。
- このサンプルに関連付けられているすべてのコードを、この GitHub リポジトリで検索します。
プロキシコード
このページのサンプルアプリを独自のバージョンで作成するには、独自のプロキシを作成してホストする必要があります。（Brightcoveラーニングサービスで使用されるプロキシは、Brightcoveのドメインからのリクエストのみを受け付けます）。サンプルプロキシは、私たちが使用しているものと非常に似ていますが、BrightCove 以外のドメインからのリクエストをブロックするチェックがないサンプルプロキシは、この GitHub リポジトリにあります。また、そこで使用するための基本的な手順と、 REST API の使用で説明されているプロキシの周りにアプリを構築するためのより精巧なガイドがあります。