クライアントの設定
次に、クライアントコンポーネントを設定しましょう。クライアントディレクトリには以下が含まれています：
- フロントエンドアプリケーションのHTMLコードを含むindex.htmlファイル
- フロントエンドアプリケーションのCSSコードを含むmain.cssファイル
- JavaScriptコードを含むmain.jsファイル
- client-package.json設定ファイル
index.htmlとmain.jsをコーディングします。
注意: このセクションのコードを十分に理解するために、必ず目を通してください。
以下のコードをコピーして、IDEを使用してプロジェクトのclient/directoryにある各ファイルに貼り付け、保存してください。
index.html
copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AlientCityAppClient</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="main.js"></script>
</head>
<body>
<br>
<br>
<center>
<h1>ALIEN CITY</h1>
</center>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="check-tab" data-toggle="tab" href="#check" role="tab"
aria-controls="check" aria-selected="true">Check My City</a>
</li>
<li class="nav-item">
<a class="nav-link" id="report-tab" data-toggle="tab" href="#report" role="tab" aria-controls="report"
aria-selected="false">Report Alien Encounter</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="check" role="tabpanel" aria-labelledby="check-tab">
<br>
<br>
<form>
<div class="form-group">
<label for="city-get-input"><b>Check if your city has aliens:</b></label>
<input type="text" class="form-control" id="city-get-input" aria-describedby="checkCity"
placeholder="Enter City Name">
</div>
<button type="submit" class="btn btn-primary"
onclick="getAlienEncounter();return false;">Check</button>
</form>
<br>
<br>
<div id="result-container">
<div id="result-text">
</div>
<br>
<div id="result-image">
</div>
</div>
<div id="loader" style="display: none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab">
<br>
<br>
<form>
<div class="form-group">
<div class="city-post-input">
<label for="exampleInputEmail1"><b>Enter the name of the city where you encountered an alien:</b></label>
<input type="text" class="form-control" id="city-post-input" aria-describedby="cityPost"
placeholder="Enter City Name">
</div>
</div>
<button type="submit" class="btn btn-primary"
onclick="postAlienEncounter();return false;">Report</button>
</form>
</div>
</div>
</div>
</body>
</html>
main.js
copy
/* サーバーにAPIコールを実行し、報告された都市をエイリアン都市として追加します
*/
function postAlienEncounter() {
var city = $("#city-post-input").val();
// index.js functionファイルで定義されたURLにAjaxコールを実行します
// Advanced I/O functionへのすべてのURLは /server/{function_name}/{url_path} のパターンになります
$.ajax({
url: "/server/alien_city_function/alien",
type: "post",
contentType: "application/json",
data: JSON.stringify({
"city_name": city
}),
success: function (data) {
alert(data.message);
},
error: function (error) {
alert(error.message);
}
});
}
/**
* サーバーにAPIコールを実行し、指定された都市がエイリアン都市かどうかを確認します
*/
function getAlienEncounter() {
showLoader();
var positive = "https://media.giphy.com/media/Y1GYiLui9NHcxVKhdo/giphy.gif";
var negative = "https://media.giphy.com/media/fsPcMdeXPxSP6zKxCA/giphy.gif";
var city = $("#city-get-input").val();
// index.js functionファイルで定義されたURLにAjaxコールを実行します
// Advanced I/O functionへのすべてのURLは /server/{function_name}/{url_path} のパターンになります
$.ajax({
url: "/server/alien_city_function/alien?city_name=" + city,
type: "get",
success: function (data) {
console.log(data);
$("#result-text").text("");
$("#result-text").text(data.message);
var imagesrc = negative;
if (data.signal == 'positive') {
imagesrc = positive;
}
$("#result-image").html("");
$("#result-image").html("<img src='" + imagesrc + "' />");
hideLoader();
},
errror: function (error) {
alert(error.message);
}
});
}
function showLoader()
{
$("#result-container").hide();
$("#loader").show();
}
function hideLoader()
{
$("#loader").hide();
$("#result-container").show();
}
クライアントディレクトリの設定が完了しました。
ここで、アプリケーションのfunctionコンポーネントとクライアントコンポーネントの動作を確認しましょう：
- GET操作
- クライアントで都市名を入力して過去のエイリアン遭遇の記録を確認すると、index.htmlのCheckボタンのonClickイベントがmain.jsで定義されたgetAlienEncounter()関数をトリガーします。
- これにより、Advanced I/O functionで定義されたURLルートにAjaxコールが実行されます。index.jsで定義されたGET APIがgetDataFromCatalystDataStore関数を呼び出し、リクエストクエリを渡します。
- この関数は、ZCQLクエリを実行してData StoreのAlienCityテーブルからデータを検索します。
- 都市名に一致する記録がテーブルに見つかった場合、positiveシグナルがレスポンスとして送信されます。見つからない場合は、negativeシグナルが送信されます。
- クライアントは、レスポンスに対応するメッセージを表示します。main.jsで定義されたレスポンスに対応するGIFも表示されます。
- POST操作
- クライアントで都市名を入力してエイリアン遭遇を報告すると、index.htmlのReportボタンのonClickイベントがmain.jsで定義されたpostAlienEncounter()関数をトリガーします。
- これにより、Advanced I/O functionで定義されたURLルートにAjaxコールが実行されます。index.jsで定義されたPOST APIがgetDataFromCatalystDataStore関数を呼び出し、同じ都市名の記録が既に存在するかを確認するリクエストクエリを渡します。
- この関数は、ZCQLクエリを実行してData StoreのAlienCityテーブルからデータを検索します。記録が既に存在する場合、レスポンスが送信され、クライアントがユーザーに適切なメッセージを表示します。
- 都市名の記録が存在しない場合、ユーザーが入力した都市名でAlienCityテーブルに新しい行が作成されます。Data Storeへの記録の挿入を確認するポップアップボックスがクライアントに表示されます。適切なメッセージがログにも送信され、コンソールのMonitorセクションにあるLogsから確認できます。
最終更新日 2026-03-05 11:43:24 +0530 IST