MAに向けてTwilioと楽天トラベル空室検索APIを使ってアプリを作りたい(http://qiita.com/fumishitan/items/6b9944ed9d4daec6a3a8)
の５回目
ここまでで、下記のことができた。
・ホテルの空室を検索し一覧で取得・表示する。
・monacaで現在地の一情報を取得する
・データベースに宿泊履歴を更新する・宿泊が数多すぎたらアラートを上げる
上記の各項目のまとめとして何をやったかを書いていく
ホテルの空室を検索し一覧で取得・表示する
ホテル空室情報取得・表示のため以下のことを行った
・楽天WebServiceでのアプリIDの発行
・楽天トラベル空室検索APIを叩いて・レスポンスを処理する（詳細は下記）
・http://qiita.com/fumishitan/items/8e576184315d275a2d52
※monacaを使っていますが、少し変更すればWebでも使えます
monacaで現在地の一情報を取得する
monacaで現在地を取得するには以下のことを行った。
・monacaの新規登録
・https://ja.monaca.io/
・プロジェクトの作成(テンプレート：ToDo App)
・位置情報取得ロジックをコーディング（詳細は下記）
・http://qiita.com/fumishitan/items/6bee754bf31cf77e0afe
データベースに宿泊履歴を更新する・宿泊が数多すぎたらアラートを上げる
今回はニフティクラウドmobile backend(mBaaS)のデータストアをデータベースとして利用した
ニフティクラウド mobile backend
http://mb.cloud.nifty.com/about.htm
行ったことは以下
・アカウントの作成
・SDKのDL・monaca www>jsフォルダへの配置
・http://mb.cloud.nifty.com/doc/current/introduction/quickstart_javascript.html#/JavaScript/
・アプリの作成・キーの取得
・SDKの初期化
・更新ロジックのコーディング(詳細は下記)
・http://qiita.com/fumishitan/items/747582a3120a0be2da39
・データベースを検索し、宿泊数を数えるコーディング(詳細は下記)
・http://qiita.com/fumishitan/items/1975fd9f0ef99fc590d8
上記の一連の作業をまとめた結果
monacaでTODO Appのテンプレートでプロジェクトを作成し
下記のコードをindex.htmlに貼り付けてください
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/ncmb-latest.min.js"></script>
<script src="js/cssua.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div data-role="page" id="list-page">
<div data-role="header" data-position="fixed" data-theme="c">
<h1>Hotelを探そう！</h1>
<input id="search-button" type="button" value="Search" onclick="rakutenTravelApi()">
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="hotel-list"></ul>
</div>
</div>
</body>
</html>
下記のコードをapp.jsに貼り付けてください。
app.js
var xhr = new XMLHttpRequest();
var current;
var YOUR_APP_KEY = "YOUR_APP_KEY";
var YOUR_CLIENT_KEY = "YOUR_CLIENT_KEY";
$(function(){
//起動時にmobile backend APIキーを設定
NCMB.initialize(YOUR_APP_KEY,YOUR_CLIENT_KEY);
});
function rakutenTravelApi(){
navigator.geolocation.getCurrentPosition(onSuccess, onError, option);
var lat = current.geopoint.latitude;
var lng = current.geopoint.longitude;
var rakutentravelApi = "https://app.rakuten.co.jp/services/api/Travel/VacantHotelSearch/20131024";
var rakutentravelKey ="*************";
var RANGE = 3;
var datumType = 1;
var checkInDate = new Date();
var checkOutDate = checkInDate;
checkOutDate.setDate(checkOutDate.getDate() + 1);
var queri = rakutentravelApi + "?applicationId=" + rakutentravelKey + "&checkinDate=" + checkInDate.toISOString().substring(0,10) + "&checkoutDate=" + checkOutDate.toISOString().substring(0,10) + "&latitude=" + lat + "&longitude=" + lng + "&searchRadius=" + RANGE + "&datumType=" + datumType;
console.log(queri);
// XMLHttpRequest オブジェクトを作成
xhr.open("GET",queri,true);
xhr.onreadystatechange = processResponse;
xhr.send();
}
//位置情報取得に成功した場合のコールバック
var onSuccess = function(position){
current = new CurrentPoint();
current.distance = CurrentPoint.distance; //検索範囲の半径を保持する
current.geopoint = position.coords; //位置情報を保存する
//search(current);
};
//位置情報取得に失敗した場合のコールバック
var onError = function(error){
console.log("現在位置を取得できませんでした");
};
//位置情報取得時に設定するオプション
var option = {
timeout: 6000 //タイムアウト値(ミリ秒)
};
//現在地を保持するクラスを作成
function CurrentPoint(){
geopoint=null; //端末の位置情報を保持する
distance=0; //位置情報検索に利用するための検索距離を指定する
}
function processResponse() {
if(xhr.readyState == 4) {
if(xhr.status == 200 || xhr.status == 201) {
// リクエストの処理
var rakutentravel = JSON.parse(xhr.responseText);
for(var i in rakutentravel.hotels){
var hotelName = JSON.stringify(rakutentravel.hotels[i].hotel[0].hotelBasicInfo["hotelName"]);
var hotelInfoUrl = JSON.stringify(rakutentravel.hotels[i].hotel[0].hotelBasicInfo["hotelInformationUrl"]);
var clickInput = "search-button" + i;
$("#hotel-list").append("<li>" + "<p><h3>" + hotelName + "</h3><h4>" + hotelInfoUrl + "</h4>");
//$("#hotel-list").append("<p>" );
$("#hotel-list").append("<h4>"+ "<input id=" + clickInput + " " + "type=" + "'button'" + "value=" + "'reserve'" +"></h4>");
clickInput = "#" + clickInput ;
$(clickInput).click({name : hotelName,url : hotelInfoUrl},reserve);
$("#hotel-list").append("</p>" );
$("#hotel-list").append("</li>" );
$("#hotel-list").listview('refresh');
}
} else {
// エラー処理
}
}
}
function reserve(event){
var today = new Date();
var beforeOneWeek = new Date();
var HotelClass = NCMB.Object.extend("ReserveHotel");
var query = new NCMB.Query(HotelClass);
beforeOneWeek.setDate(beforeOneWeek.getDate() - 7);
query.greaterThan("Date", beforeOneWeek.toISOString());
query.count({
success: function(number) {
if(number > 1){
navigator.notification.alert("しっかり休み",alertDismissed , "今週もう３日目やで" , "気をつけます");
}
},
error: function(error) {
navigator.notification.alert("失敗",alertDismissed , "失敗" , "了解");
}
});
//どのクラス (テーブルのようなイメージと思ってください)にデータを入れるか指定する
var ReserveHotelClass = NCMB.Object.extend("ReserveHotel");
var reserveHotelClass = new ReserveHotelClass();
//HotelNameカラムを指定しホテルの名前を指定する
reserveHotelClass.set("HotelName", event.data.name);
//HotelUrlカラムを指定しホテルのURLを指定する
reserveHotelClass.set("HotelUrl", event.data.url);
//Dateカラムを指定しホテルの日付を指定する
reserveHotelClass.set("Date", today.toISOString());
//非同期でデータを更新する
reserveHotelClass.save(null, {
success: function(object) {
// 保存完了後に実行される
},
error: function(object, error) {
// エラー時に実行される
}
});
}
function alertDismissed() {
// 任意のコード
}