ステップー概要
Infinite Toolkit sandbox は、クライアントアプリケーションにTVチャンネル、Video On Demand アセットやユーザ設定に関する一貫した情報にアクセスさせるクラウドインフラストラクチャーです。
REF API は、TV チャンネル、Video On Demand アセット、マネージレコードやユーザ設定の修正について、TV クライアントアプリケーションにメタデータやビデオコンテンツの Infinite Video Platform head-end server から TV クライアントアプリケーションにメタデータやビデオコンテンツにアクセスさせる Infinite Toolkit から提供されるコマンドのセットです。
この API は、様々なフレームワークに簡単に構築することができ、タブレット、スマートフォン、ラップトップや STB などのマルチデバイス指向です。
備考: Infinite Video Platform ( IVP ) ソリューションのさらに完全なプレゼンテーションはこちらからご確認ください。
目的
【必須事項】: ITK sandbox とディスカバー REF-API を使って開始することについて、先に理解しておいてくださいラボ101を終了させた後に、全ての sandbox ユーザは REF-API 内で定義された全ての API を使うことができます。
[オプション]: 2つ目のラボ ” REF-API でビデオコンテンツを再生する ” を終了させてください。
ラボ102 を終了させた後、全ての sandbox ユーザはプレイセッションの管理とビデオコンテンツを見ることができます。
ブラウザ上で実行中の HTML5 アプリケーション経由
【必須】: REF-API の特徴
この API の特徴は、こちらでご確認いただけます。
ご自身の API を現存する Sandbox に追加する。
ステップ2-REF API sandbox 向けのアーキテクチャーデザイン
2.1 スタンダードデザイン
sandbox は、REF-API 経由でクライアントアプリが Head-End リソースにアクセスできるようにします。
2.2 新しい API を追加する。
何らかの理由により、こちらに新しい API を追加したい場合、こちらで簡単にできます。
新しい root URL としてローカル Express サーバを使います。
sandbox のへスタンダードなリクエストを導く新しい API かローカルサーバへの ”新しい API” に関する修正されたリクエストをルートするローカルリクエストは、特定のコントロールにより、ローカルで操作されます。
エクササイズ
”WISHLIST” と言われるこのカテゴリは、あとで確認するためにユーザがパーソナルリストに保存したい VOD アセットや全てのイベントを含みます。
新しいアイテムはこのリストに追加でき、現存するアイテムはリストから削除することができます。
このエクササイズを理解するために、こちらが必要となります。
/agg/library/category' アンサーに新しいノード ”WISHLIST” を追加します。
ウィッシュリストに新しいアイテムを追加する ”追加” 機能を作成するウィッシュリストから存在するアイテムを削除する ”DELETE” を作成します。
存在する sandbox にご自身の API を追加する
ステップ3- Hello World サーバをインストールする
3.1 ソースコードを取得する
ソースコードは、下記の URL で使用可能です。
https://github.com/CiscoDevNet/Infinite-Toolkit---Learning-Labs
ローカルワークスペースにソースコードをインストールするための下記のコマンドを実行してください
git clone https://github.com/CiscoDevNet/Infinite-Toolkit---Learning-Labs.git
cd Infinite-Toolkit---Learning-Labs/labs/itk-ctap-local-104/assets/resources
unzip service-hello-world.zip to your local workspace
service-hello-world.zip をご自身のローカルワークスペースに展開してください。
ローカルワークスペースに遷移し、実行してください
cd labs-feature-service-hello-world
npm install
npm start
数秒後に、”server started” というメッセージが表示されるはずです。
3.2 新しい API をテストする
ステージ上で、いくつかのリクエストはローカルホストで既にテスト可能なはずです。
インスタンスには、下記の URL 上でどんなブラウザでも使って下さい。
もしローカルサーバが正しく動作している場合、下記のメッセージがご自身のブラウザに表示されるはずです。
ブラウザは下記のようにいくつかのリクエストを実行できます。
http://localhost:8090/ctap/r1.3.0/categories
このリクエストへの応答は下記のようなものになるはずです。
{
"count": 3,
"id": "root",
"name": "root",
"type": "root",
"leaf": false,
"categories": [
{
"id": "urn:spvss:ih:zorro:term:7000:TRAILERS~TERM:urn:spvss:ih:zorro:term:7000:TRAILERS",
"name": "TRAILERS",
"type": "content_full",
"isAdult": false,
"leaf": true,
"_links": {
"self": {
"href": "/categories/TERM%3Aurn%3Aspvss%3Aih%3Azorro%3Aterm%3A7000%3ATRAILERS"
},
"content": {
"method": "GET",
"href": "/content?categoryId=urn%3Aspvss%3Aih%3Azorro%3Aterm%3A7000%3ATRAILERS{&offset,limit}"
}
}
},
{
"id": "urn:spvss:ih:zorro:term:7000:ACTION~TERM:urn:spvss:ih:zorro:term:7000:ACTION",
"name": "ACTION",
"type": "content_full",
"isAdult": false,
"leaf": true,
"_links": {
"self": {
"href": "/categories/TERM%3Aurn%3Aspvss%3Aih%3Azorro%3Aterm%3A7000%3AACTION"
},
"content": {
"method": "GET",
"href": "/content?categoryId=urn%3Aspvss%3Aih%3Azorro%3Aterm%3A7000%3AACTION{&offset,limit}"
}
}
},
{
"id": "WATCHLIST_ID",
"name": "WATCHLIST",
"type": "content_full",
"isAdult": false,
"leaf": true,
"_links": {
"self": {
"href": "/categories/WATCHLIST_ID"
},
"content": {
"method": "GET",
"href": "/content?categoryId=WATCHLIST_ID"
}
}
}
],
"_links": {
"self": {
"href": "/categories"
}
}
}
”WATCHLIST" という名前の追加のカテゴリがローカルサーバから返ってくるのを観察するのは興味深いです。
3.3 エクスプレスサーバの目的
こちらのサーバの ”Hello World” のキーパートは、リクエストにより使われているエンドポイントごとに異なる定義をされたコントローラにより app.js に配置されています。
var index = require('./routes/index');
var users = require('./routes/users');
var content = require('./routes/content');
var contentInstances = require('./routes/contentInstances');
var categories = require('./routes/categories');
app.use('/ctap/r1.3.0/agg/content', content);
app.use('/ctap/r1.3.0/categories', categories);
app.use('/ctap/r1.3.0/contentInstances', contentInstances);
もしリクエストが '/categories' エンドポイントを使っている場合、categories.js は、ハードコードされた応答を取得する役割を担うことになるでしょう。
var filename = './data/categories.json';
var filename = './data/categories.json';
しかし、もしアプリが '/contentInstances' エンドポイントを使っている場合 categories.js は sandbox にリクエストをリダイレクトするでしょう。
var apiServerHost= 'https://apx.cisco.com/spvss/infinitehome/ivptoolkit/clientrefapi/sandbox_0.4.1/contentInstances'+req._parsedUrl.search;
var apiServerHost= 'https://apx.cisco.com/spvss/infinitehome/ivptoolkit/clientrefapi/sandbox_0.4.1/contentInstances'+req._parsedUrl.search;
res.redirect(apiServerHost);
res.redirect(apiServerHost);
特定のユースケースが ”Watchlist” カテゴリを扱うのに追加されます。
このケースのみ、ハードコードされた応答が返ってきます。
var filename = './data/contentInstances_watchlist.json';
var filename = './data/contentInstances_watchlist.json';
現存する sandbox にご自身のAPIを追加する
4.1 ソースを取得する
下記の URL でソースコードが利用可能です。
https://github.com/CiscoDevNet/Infinite-Toolkit---Learning-Labs
ローカルワークスペースに、ソースコードをインストールするために、下記のコマンドを実行してください。
git clone https://github.com/CiscoDevNet/Infinite-Toolkit---Learning-Labs.git
cd Infinite-Toolkit---Learning-Labs/labs/itk-ctap-local-104/assets/resources
ご自身のローカルワークスペースで、sample-apps.zip を展開してください。
ルートとして、ご自身のローカルワークスペースをつかったローカルサーバを実行してください。
( ローカルサーバを実行する方法を確認してください )
httpd.conf を選択し、ディレクトリパラメータを検索し、ご自身のワークスペースのパスと置き換えてください<Directory "C:/Users/myname/my_workspace">
4.2 ベース URL の変更
このステージでは、”Hello World ” サーバを使ったサンプルアプリケーションが必要です。
tokenManager/config.js ファイルの小さな変更はベース URL として sandbox に代わり、ローカルホストを使うために必要です。
"sandboxUrl": "https://apx.cisco.com/spvss/infinitehome/ivptoolkit/clientrefapi/sandbox_0.4.1",
"sandboxUrl": "https://apx.cisco.com/spvss/infinitehome/ivptoolkit/clientrefapi/sandbox_0.4.1",
should be modified by:
こちらは、下記のものにより修正されるはずです。
"sandboxUrl": "http://localhost:8090/ctap/r1.3.0",
アプリの挙動を確認する
ラボが正常に稼働しているか確認します。
ご自身のお好きなブラウザを使い、下記のページにアクセスしてください
http://localhost/SampleApps_HTML5/sampleAppsHtml5/storeCategories/index.html
デフォルトの選択ディスプレイは、ヒットしたアイテムを全て表示する、という設定になっています。
リクエストアクセスやトークンマネジメントのせいでエラーが起こった場合は、
ITK lab102 を参照してください。
”REAILERS” カテゴリは全ての” /contentInstances へのリクエストで見つかったすべての TRAILESERS アイテムを表示します。
”アクション” カテゴリーは /contentInstances へのリクエストで見つかった全ての ”ACTION” アイテムを表示しています。
エクササイズのゴールは、ウォッチリストメカニズムの構築をし、結果のリストの各アセットに ”ウォッチリストに追加する” ボタンが追加されます。
”WATCHLIST” カテゴリはシミュレートしたリクエストで見つかった全ての ” WATCHLIST ” アイテムを表示します。
エクササイズでウォッチリストメカニズムの構築をし、 ” リストから削除する ” ボタンをウォッチリストカテゴリの各アセットに追加されます。
しかし、構築はまだ完了しておりません。これは JavaScript フレームワークの ”ローカルストレージ” を使うことで簡単にできます。
各ブラウザはそれぞれ独自の ”ローカルストレージ” を管理していることに気が付くでしょう。
コメント
0件のコメント
サインインしてコメントを残してください。