アプリケーションのコーディング
アプリケーションのコーディングを始めましょう。
以下のファイルとディレクトリを作成してコードを格納します：
- プロジェクトのルートディレクトリ（AlienCity/）にPythonコードファイルを作成し、「app.py」と名付けます。このファイルにはアプリケーションのバックエンドロジックが含まれます。
- プロジェクトのルートディレクトリにフォルダを作成し、「static」と名付け、その中に以下のファイルを作成します（AlienCity/static/）：
- index.html：アプリケーションのフロントエンドのHTMLコードを含みます
- main.js：アプリケーションのJavaScriptコードを含みます
以下は、AlienCityプロジェクトの最終的なフォルダ構造です：
app.py、index.html、およびmain.jsファイルをコーディングします。また、app-config.jsonファイルも更新します。
Note: このセクションのコードを確認し、内容を十分に理解してください。
以下のコードをコピーし、IDEを使用してプロジェクトの対応するファイルに貼り付けて保存してください。
app.py
copy
import sys
sys.path.insert(0, './lib')
from flask import Flask, request, jsonify
import os
import zcatalyst_sdk
import logging
tableName = 'AlienCity' # Data Storeに作成したテーブル
columnName = 'CityName'
app = Flask(__name__)
@app.route('/')
def index():
return app.send_static_file('index.html')
@app.route('/alien', methods=['POST'])
def post_alien_encounter():
try:
logger = logging.getLogger()
capp = zcatalyst_sdk.initialize(req=request)
req_data = request.get_json()
name = req_data.get('city_name')
rowid = getAlienCountFromCatalystDataStore(request,name) # Catalyst Data Storeテーブルにクエリを実行し、指定された都市の行が存在するか確認する
if len(rowid) == 0: # 行が存在しない場合、新しい行を挿入する
logger.info("Alien alert!") # ログに書き込まれます。このログはコンソールのMonitorセクションにあるLogsから確認できます
datastore_service = capp.datastore()
table_service = datastore_service.table(tableName)
row_data = {
columnName:name
}
table_service.insert_row(row_data) # Catalyst Data Storeテーブルに都市名を行として挿入する
return jsonify({
"message":"Thanks for reporting!!!"
}),200
else:
return jsonify({
"message": "Looks like you are not the first person to encounter aliens in this city! Someone has already reported an alien encounter here!"
}), 200
except Exception as e: # 行が存在する場合、重複を示すメッセージを送信する
print(e)
return jsonify({
"message": "Internal server error"
}), 500
@app.route('/alien', methods=['GET'])
def get_alien_encounter():
try:
name = request.args.get('city_name')
rowid = getAlienCountFromCatalystDataStore(request,name) # Catalyst Data Storeテーブルにクエリを実行し、指定された都市の行が存在するか確認する
if len(rowid) == 0:
return jsonify({
"message": "Hurray! No alien encounters in this city yet!",
"signal": "negative"
}), 200
else:
return jsonify({
"message": "Uh oh! Looks like there are aliens in this city!",
"signal": "positive"
}), 200
except Exception as e:
print(e)
return jsonify({
"message": "Internal server error"
}), 500
def getAlienCountFromCatalystDataStore(request,cityname): # Data Storeテーブルにクエリを実行し、指定された都市のエイリアン遭遇が既に報告されているか確認する
capp = zcatalyst_sdk.initialize(req=request)
zcql_service = capp.zcql()
query = f"SELECT * FROM {tableName} WHERE {columnName} = '{cityname}'"
output = zcql_service.execute_query(query)
return output
if __name__ == '__main__':
port = int(os.environ.get('X_ZOHO_CATALYST_LISTEN_PORT', 9000))
app.run(host='0.0.0.0', port=port)
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="static/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
function postAlienEncounter() {
debugger;
var city = $("#city-post-input").val();
$.ajax({
url: "/alien",
type: "post",
contentType: "application/json",
data: JSON.stringify({
"city_name": city
}),
success: function (data) {
alert(data.message);
},
error: function (error) {
alert(error.message);
}
});
}
function getAlienEncounter() {
debugger
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();
$.ajax({
url: "/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();
},
error: function (error) {
alert(error.message);
}
});
}
function showLoader()
{
$("#result-container").hide();
$("#loader").show();
}
function hideLoader()
{
$("#loader").hide();
$("#result-container").show();
}
app-config.jsonファイルのキーcommandの値を「python3 app.py」に更新します。これは、このプログラミングスタックとフレームワーク固有の起動コマンドです。
app-config.json
copy
{
"command": "python3 app.py",
"buildPath": "/Users/amelia-426/Catalyst/Alien City", // ビルドパスを指定してください
"stack": "python_3_9",
"env_variables": {},
"memory": 256,
"scripts": {}
}
アプリケーションの動作を簡単に確認しましょう：
-
GETオペレーション
- アプリケーションで都市名を入力して過去のエイリアン遭遇の記録を確認すると、index.htmlのCheckボタンのonClickイベントがmain.jsで定義されたgetAlienEncounter()関数をトリガーします。
- これにより、関数で定義されたURLルートにAjaxコールが発行されます。app.pyで定義されたGET APIがgetAlienCountFromCatalystDataStore()関数を呼び出し、リクエストクエリを渡します。
- この関数は、ZCQLクエリを実行してData StoreのAlienCityテーブル内のデータを検索します。
- テーブルで都市名に一致する記録が見つかった場合、レスポンスとしてpositiveシグナルが送信されます。見つからない場合は、negativeシグナルが送信されます。
- アプリケーションはレスポンスに対応するメッセージを表示します。main.jsで定義されたレスポンスに対応するGIFも表示されます。
-
POSTオペレーション
- アプリケーションで都市名を入力してエイリアン遭遇を報告すると、index.htmlのReportボタンのonClickイベントがmain.jsで定義されたpostAlienEncounter()関数をトリガーします。
- これにより、関数で定義されたURLルートにAjaxコールが発行されます。app.pyで定義されたPOST APIがgetAlienCountFromCatalystDataStore()関数を呼び出し、同じ都市名の記録が既に存在するかどうかを確認するリクエストクエリを渡します。
- この関数は、ZCQLクエリを実行してData StoreのAlienCityテーブル内のデータを検索します。記録が既に存在する場合、レスポンスが送信され、クライアントはユーザーに適切なメッセージを表示します。
- 都市名の記録がない場合、ユーザーが入力した都市名でAlienCityテーブルに新しい行が作成されます。クライアントにポップアップボックスが表示され、Data Storeへの記録の挿入が確認されます。適切なメッセージもログにプッシュされ、コンソールのDevOpsサービスセクションのMonitorセクション内にあるCatalyst DevOpsコンポーネントのLogsから確認できます。
最終更新日 2026-03-05 11:43:24 +0530 IST