public API でメタデータを拡張する

Infinite Toolkit sandbox は、TV チャンネル、Video On Demand ( VOD ) アセットとユーザ設定のような情報にクライアントアプリがアクセスできるクラウドインフラストラクチャーです。

REF API は、TV チャンネル、Video On Demand アセット、管理記録にユーザ設定の修正について Infinite Video Platform head-end サーバからメタデータやビデオコンテンツに TV クライアントアプリがアクセスできるようにします。
この API は、簡単に様々なフレームワーク（ HMTL5,JavaScript,Angular JS, RDK など）に実装することができ、タブレットやスマートフォン、ラップトップ、set top box のマルチデバイス指向です。

備考：
さらに完全な IVP ソリューションのプレゼンテーションは、こちらでご確認いただけます。
https://developer.cisco.com/site/infinite-toolkit/

ステップ１－オブジェクティブ

このラボの目的は、 ITK 初心者が外部のメタデータで EPG アプリを強化するためのパブリック API を使えるようになることです。
例として、MovieOrg API は、存在する sandbox REF-API と結合されます。
EPG アプリは、Learning Labs103 で既にご説明している Angular JS 1.5アプリケーションです。

前提条件

この学習を始める前に
【必須】： 'Book an event and manage records with ITK sandbox' ラボを完了させておくこと
ラボ103 を達成したら、sandbox ユーザは EPG アプリケーションの理解ができ、新し EPG 機能を開発することができるはずです。
【義務】：Angular 1.5 JS スキル

Angular JS のいくつかの基礎知識とどのように Infinite EPG アプリが動くのかという理解は必要です。こちらのリンクをご確認してください。
https://docs.angularjs.org/guide/ ( Angular portal )
https://docs.angularjs.org/tutorial/index ( official tutorial )

MovieOrg パブリック API の詳細なプレゼンテーションは、こちらで利用できます。

パブリック API と外部メタデータを取得します。
ステップ２－外部 ”Infinite EPG” のサンプルアプリを使う。
外部 Infinite EPG サンプルアプリをインストールする。
GIT からローカルリポジトリでソースコードをコピーすします。

サブディレクトリに遷移します。
外部 EPG ブランチを使います。
全ての "NodeJS" の必要なパッケージをインストールする npm を実行する npm を実行し、メインプロセスを実行する

備考：下記、ブランチのリストを取得するための git コマンド

もしご自身がこの git クローンコマンドを実行すると、 zip ファイルバージョンが下記のコマンドによりダウンロードされます。
サブディレクトリに遷移し、 "Infinite-Toolkit-RefAPI-TestApp" と入力する。
全ての ”NodeJS” の必要なパッケージをインストールする npm を実行する
npm を実行し、メインプロセスを実行する

これで、お好きなブラウザから ”外部Infinite EPG” にアクセスできます。

コンテンツセクションに遷移します。
追加された新しい ”HyperMetaData” の青いボタンを確認できます。

”HyperMetaData” ボタンを押下すると、クエリが ”MoiveOrg” に送信され、選択された映画についての利用可能な情報を正しくします。
キーワード検索は、新しいスクリーンは、これらの映画のメタデータを表示しています。

”Actor List” ボタンを押下すること、アコーディオンリストが、展開され、前のクエリの結果で見つかった全ての俳優を表示します。

"Personal Metadata" ボタンを押下すると、新しいクエリが MovieOrg データベースに送られ、選択された俳優の情報が正しく修正されます。
そして、新しいスクリーンが表示され、これらのパーソナルメタデータが表示されます。

public APIC でメタデータを拡張した。
ステップ３－メタデータの拡張のための修正が完了した。

3.1　モデル - ビュー - コントローラデザイン
Angular フレームワークは、Model-View-Controller ( MVC ) デザインで動いています。

モデル：モデルとはビューで表示することを求められるデータを指しています。時にそれは、ビジネスレイヤーやそれのバリエーションから取得される正確なデータエンティティとなります。
ビュー：　ビューはユーザに表示するものです。 MVC パターンでは、ビューはシンプルでビジネスロジックの実装の自由であるべきである。ビューは、ユーザアクションによってコントローラ上のメソッドを呼び出します。MVC パターンではビューはモデルの状態変化を監視し、更新されたモデルを表示します。モデルとビューはオブザーバーパターンを使用し、お互いに相互作用しています。
コントローラ：コントローラはビューによって呼び出され、モデルで相互作用し、モデルの更新を実行しています。
コントローラは、モデル上で更新された変更がビューになったという認識はしていません。 MVC パターンでよく誤解されることは、MVC パターンでの役割についてです。ビューとモデル間では仲介しません。
そして、ビューの更新についても関与していません。これは単純にユーザアクションとモデルの更新、そのクエリへのビューの役割、更新されたモデルのステータスを取得しレンダリングするという工程です。コントローラが唯一絵に入る時間は、新しいビューがレンダリングされるときです。

各 EPG の特徴:

ビューパートは、 HTML ページによって操作されています。
コントローラは、 JavaScript コントローラによって操作されています。
モデルは JavaScript パートで vm リソースとして定義されています。

ステップ４：ハイパーメタデータビューパート

movie presentation view を操作しているファイルは：
hypermetadata.template.html
hypyermetadata.template.html

下記のディレクトリ内で見つけることができます。：
Infinite-Toolkit-RefAPI-TestApp\public\src\app\hypermetadata
Infinite-Toolkit-RefAPI-TestApp\public\src\app\hypermetadata

4.1 MovieOrg カンパニーヘッダー

<div class="container-fluid">
<div id="tmdb_title" class="page-header"
style="background-color: #ccffcc">
<img height="40" src='src/app/img/powered_by_tmdb.png'>
<pt>Hypermetadata from The Movie DataBase</pt>
</div>
<div role="alert" ng-show="vm.error" class="alert alert-danger">{{vm.error}}</div>

4.2 映画のポスター

このソースコードでは全てのモデルからくる情報が vm.moieorgmetadata[0] として記述されています。
Angular は、自動的にモデルがメタデータ情報を取得すると同時にビューを更新します。
<form class="form-horizontal" role="form">
<div class="col-sm-4">
<div class="container-fluid">
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10">

<div class="form-right-col">
<img height="300"
src='https://image.tmdb.org/t/p/original{{ vm.movieorgmetadata[0].poster_path }}'
onerror="this.src='src/app/img/movie.jpg'" />
<div>
<hh>{{ vm.movieorgmetadata[0].overview }} </hh>
</div>
</div>
</div>
</div>
</div>
</div>

コントローラがそのモデルから情報を取得すると同時に、そのビューはその取得情報によって更新されます。
このスクリーンでは、moive poster URL は、動的に下記のとおり構築されます。
src='https://image.tmdb.org/t/p/original{{ vm.movieorgmetadata[0].poster_path }}'

4.3 映画情報
MovieOrg データベースから取得された情報は、
vm.movieorgmetadata[0].title
vm.movieorgmetadata[0].genre_ids
vm.movieorgmetadata[0].original_language
vm.movieorgmetadata[0].vote_average
vm.movieorgmetadata[0].vote_count

応答する HTML５コードは次のとおりです。
<div class="col-sm-17">
<div class="container-fluid">
<div class="form-group">
<ul class="specs">
<li><ht> Title: </ht> <hh>{{vm.movieorgmetadata[0].title
}} </hh></li>
<li><ht> Original: </ht> <hh>{{vm.movieorgmetadata[0].original_title
}} </hh></li>
<li><ht> Released: </ht> <hh>{{vm.movieorgmetadata[0].release_date
}} </hh></li>
<li><ht> Genre: </ht> <hh>{{vm.movieorgmetadata[0].genre_ids
}} </hh></li>
<li><ht> Language: </ht> <hh>{{vm.movieorgmetadata[0].original_language
}} </hh></li>
<li><ht> Vote Average: </ht> <hh>{{vm.movieorgmetadata[0].vote_average
}} </hh></li>
<li><ht> Vote Count: </ht> <hh>{{vm.movieorgmetadata[0].vote_count
}} </hh></li>
</ul>
</div>
</div>

4.4 アクターリスト

アクターリストは、vm.movieorgmetadata[0].cast[0].cast を満たしていなければならない
ng-repeat="actor in vm.movieorgmetadata[0].cast[0].cast"
は、見つかった各アクターのループを反復します。

アクターリストは、ユーザアクション毎に拡大できるアコーディオン GUI コンポーネントです。
応答 HTML コードは、下記のとおりです。
<div class="col-xs-12 col-sm-12">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="Actor List"
is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
<div class="panel-body">
<div class="list-group-item list-group-item-default"
ng-repeat="actor in vm.movieorgmetadata[0].cast[0].cast">
<div class="media-left">
<img width="128" ng-init="i=content.content.media[0]"
ng-src='https://image.tmdb.org/t/p/w500{{actor.profile_path}}'
onerror="this.src='src/app/img/person.png'" />
</div>
<div class="media-body">
<ul class="specs">
<li><hz>Actor Name : </hz>{{actor.name}}</li>
<li><hz>Character Name : </hz>{{actor.character}}</li>
<li><hz>Order : </hz>{{actor.order}}</li>
<li><hz>Id : </hz>{{actor.id}}</li>
<li><hz>birthday : </hz>{{actor.biography[0].birthday}}</li>
<li><hz>place_of_birth : </hz>{{actor.biography[0].place_of_birth}}
</li>
</ul>
<button class="btn btn-info"
ng-click="vm.getPersonalMetaData(actor)">PersonalMetaData</button>
</div>
</div>
</div>
</div>
</uib-accordion>
</div>

ステップ5：モデルーコントローラ

メタデータ検索は、ユーザが ”コンテンツ” ページの ”Hypermetadata” ボタンを押下すると同時に開始します。
aggContentController.js において
vm.getHyperMetaData = function(content){
console.log("getHyperMetaData content.title ==> "+content.title);
if(content.title !== undefined) {
$location.path("/hypermetadata/"+content.title);
}
}

$location.path "/hypermedata/" は、下記のコードの一部により hypermetadataCtrl コントローラを使った

.when("/hypermetadata/:query", {
templateUrl: "src/app/hypermetadata/hypermetadata.template.html",
controller: "hypermetadataCtrl",
controllerAs: "vm"
})

$location.path で提供された ontent.title は、モデルで $routeParams.query の値を初期化するために使われます。
hypermetadataController.js では、

実行されるメインコードは、ローディングするページで
var query = $routeParams.query;
if (query){
vm.query=query;
vm.getHyperMetadataMovieOrg(false);
}

hypermetadataController.js において、getHyperMetadataMovieOrg は、スタンダード Java Script HTTP リクエストの実装です。

vm.busy は、同時に複数の Call を避けるために使われます。
vm.error は、レッドバナーでエラーメッセージを表示するために使われます。
vm.hypermedata は、取得時のメタデータの結果を保管するために使われるアレーです。

The main call is delegated to a common service defined in hypermetadata.js
hypermetadata.getHyperMetadataMovieOrg().then(
function(response){
processResponseMovieOrg(response);
}, function(error){
processErrorMovieOrg(error);
}
);

hypermetadata.controller.js では MovieOrgAPI でメタデータを拡張するために、６つのステップを実行します。
3 ステップは、ユーザ認証に必要です。
そのため、3ステップはメタデータを検索するためのものです。

１． Get トークン
2. 有効なトークン
3. セッションの取得
4. キーワードで映画を検索する
5. 最初の映画の IMDB ID を見つける。
6. IMDB ID で movie メタデータと俳優リストを見つける。

hypermetadata.js において、 getHyperMetadataMovieOrg() は、下記のリクエストを実行します。
var getHyperMetadataMovieOrg = function(){
return $http.get(settings.getGetTokenMovieOrg(), {
});
};

hypermetadata.controller.js において、 ”Get Token” リクエストは正確に進んでおりトークンバリューが取得され2つ目のステップが始まります。
function processResponseMovieOrg(response) {
var queryContent = response.data;
token=queryContent.request_token;
vm.busy = false;
vm.validateTokenMovieOrg(token);
}

2. 有効なトークン

hypermetadata.controller.js において、
有効な TokenMovieOrg は、hypermetadata.js に託されます。
hypermetadata.validateTokenMovieOrg(token).then(
function(response){
processResponseValidateToken(response);
}, function(error){
processErrorValidateToken(error);
}
);
hypermetadata.js において
有効な TokenMovieOrg(token) は、リクエストを実行します。
var validateTokenMovieOrg = function(token){
return $http.get(settings.validateTokenMovieOrg()+token , {
});
};

hypermetadata.controller.js において、”validate Token” リクエストが正確に進んでいるとき、 3つ目のステップが始まります。
3. ゲットセッション
hypermetadata.controller.js において
getSessionMovieOrg(token) は、hypermetadata.js に託されます。
hypermetadata.getSessionMovieOrg(token).then(
function(response){
processResponse(response);
}, function(error){
processError(error);
}
);

hypermetadata.js において、
getSessionMovieOrg(token) は、下記のリクエストを実行します。

var getSessionMovieOrg = function(token){
return $http.get(settings.getSessionMovieOrg()+token , {
});
};

hypermetadata.controller.js において、'Get Session' リクエストが正確に進んでいるときに、
キーワード検索が開始します。

function processResponse(response) {
vm.busy = false;
vm.searchMovieOrg(keyword);
}

4. MovieOrg database において、キーワード検索を実行する

hypermetadata.controller.js では、
searchMovieOrg(token) は、hypermetadata.js に託されます。
hypermetadata.searchMovieOrg(keyword).then(
function(response){
processResponse(response);
}, function(error){
processError(error);
}
);

hypermetadata.js において、searchMovieOrg(token) は、次のリクエストを実行します。
var searchMovieOrg = function(keyword){
return $http.get(settings.getUrlMovieOrg() + "search/movie?query="+keyword+"&"+settings.getApiKeyMovieOrg(), {
});
};

hypermetadata.controller.js において、”キーワード検索” リクエストが正確に進んでいるときに
リストの最初の映画が IMD サーチを実行するのに使われます。

function processResponse(response) {
vm.busy = false;
var queryContent = response.data;
if(queryContent.results && queryContent.results.length>0) {
vm.findMovieOrg(queryContent.results[0].id)
}

}

5. MovieOrg database で IMDB ID を見つける

hypermetadata.controller.js において、
findMovieOrg(id) は、hypermetadata.js に託されています。
hypermetadata.findMovieOrg(id).then(
function(response){
processResponse(response);
}, function(error){
processError(error);
}
);

hypermetadata.js において findMovieOrg(id) は下記のリクエストを実行します。

var findMovieOrg = function(id){
return $http.get(settings.getUrlMovieOrg() + "movie/"+id+"?"+settings.getApiKeyMovieOrg(), {
});
};

hypermetadata.controller.js において、'Find movie by MovieOrg ID' リクエストが正確に進んでいるときに
IMDB ID は MovieMovie metadata について１つのリクエストを実行するために使われ、１つのリクエストはアクターリストを取得するために使われます。

function processResponse(response) {
console.log("MovieOrg response OK. FIND MOVIE="+response.data.success);
vm.busy = false;
var queryContent = response.data;
if(queryContent) {
console.log("findImdbMovieOrg MOVIE ==>"+queryContent.imdb_id);
vm.findImdbMovieOrg(queryContent.imdb_id)
vm.findImdbCastMovieOrg(queryContent.imdb_id)
}
}

6. IMDB Id からメタデータを取得する

hypermetadata.controller.js において、findImdbMovieOrg(id) は hypermetadata.js に託されます。
hypermetadata.findImdbMovieOrg(id).then(
function(response){
processResponse(response);
}, function(error){
processError(error);
}
);

hypermetadata.js において findImdbMovieOrg(id) は、下記のリクエストを実行します。
var findImdbMovieOrg = function(id){
return $http.get(settings.getUrlMovieOrg() + "find/"+id+"?external_source=imdb_id&"+settings.getApiKeyMovieOrg(), {
});
};

モデルは下記のインストラクションにより、拡張メタデータとアクターリストで更新されます。
function processResponse(response) {
vm.busy = false;
var queryContent = response.data;
if(queryContent.movie_results.length>0) {
vm.movieorgmetadata.push(queryContent.movie_results[0]);
}

if(queryContent.person_results.length>0) {
vm.movieorgmetadata.push(queryContent.person_results);
}
}

このセクションの記事

コメント