VoltMX Irisでノーコード機能を使ってクーポンアプリを作成してみた

# 目次
1. はじめに
1. 完成イメージ
1. 実装方法
1. 最後に


# はじめに
Irisにはアクションエディタというアクションを設定する画面がありますが、
アクションメニューにはコーディングを書かなくても
アクションを実装できる素敵なメニューがたくさんあります。
アクションメニューの機能を紹介をしつつ、簡単なクーポンアプリを作成していきたいと思います！

今回アプリ作成にかかった時間は、なんと3時間でした🙌（APIを作成含む）

慣れるまで少しかかるかもしれませんが、使いこなせばさくっと実装できるようになります。
是非、使い方を学んで活用してみてください！

# 完成イメージ
今回のアプリの完成イメージは以下の通りです。
![ezgif-2-10562fe7a9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cf219ed6-15e4-a5d9-8763-cd9cfc715ef2.gif)

一覧画面でクーポンの一覧を表示し、クーポンをタップすると詳細画面に遷移します。
詳細画面で使うボタンをタップすると使用済みになり、一覧画面には表示されなくなるというような簡単なクーポン機能を搭載したアプリを作成していきます！


# 実装方法
## API作成
まずは今回使用するAPIをFoundryで作成していきましょう！
簡単にAPIを作成できる、Relational Databaseを使って作成していきます。

Relational Databaseの使用方法は今回は詳しく説明は行わないため、
初めて使う方は、下記の記事をご参考にしてください👀
https://qiita.com/VoltMX_Team/items/5236864ada5b825b7792

今回、クーポンデータを管理する`t_coupon`というテーブルを作成しました。
![スクリーンショット 0005-09-22 11.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/56dcd567-e2aa-d8c2-d060-2c5f409b85c1.png)

このテーブルを使って、データ取得、データ更新を行うAPIを作成していきます。  
取得と更新を行うため、Relational Database作成時にオペレーションを作成する際、
「get」と「update」にチェックを入れましょう。  
![スクリーンショット_0005-09-22_11_50_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/855e9ecb-8f36-c5c1-ae91-ebb78c34a576.png)

### クーポン一覧取得

一覧取得は、getCouponとしてこのように作成しました。

|項目|画像|
|--|--|
|Request Input|![スクリーンショット 0005-09-22 12.12.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d589f284-e05e-aa37-ca6b-22162daece81.png)![スクリーンショット 0005-09-22 12.12.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9b335abe-b7be-c5ab-e522-5ff1dadc31b0.png)|
|Response Output|![スクリーンショット 0005-09-22 12.12.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dc7af399-9870-3e75-37fe-9791689604bb.png)|

Request OutputのOdata Queryでは値を設定することで特定のデータを取得のみをすることができます。

今回使用済みのクーポンはデータ取得しないように、`$filter`のDEFAULT VALUEに`used_flag ep 0`を設定しました。
ここではODataを使って記述する必要があり使い慣れていない人も多いかと思いますが、[公式ドキュメント](https://docs.kony.com/konylibrary/konyfabric/kony_fabric_user_guide/Content/Relational_Database_Adapter.htm)を参考にするか、ChatGPTに聞くと教えてくれます👀
![スクリーンショット 0005-09-22 12.06.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a130ecc3-da29-b648-119c-828af0674a50.png)

テスト実行を行うとこのようにデータを取得することができました。
![スクリーンショット 0005-09-22 12.12.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f4445589-d671-0b05-4cbc-d29539e2b5c3.png)

### クーポン情報更新　　
データの更新を行うAPIは、updateCouponとしてこのように作成しました。

更新するIdを指定し、使用済みフラグであるused_flagを更新するというAPIです。

|項目|画像|
|--|--|
|Request Input|![スクリーンショット 0005-09-22 12.22.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3d52c0f2-2f02-bdd9-2d81-93655a55ee4a.png)|
|Response Output|![スクリーンショット 0005-09-22 12.22.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/22ff1392-8957-98f5-97e2-1f0d1ff6aaaf.png)|

テスト実行をすると、このようにデータを更新することができました。
![スクリーンショット 0005-09-22 12.21.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/984ff834-0d94-53b6-7ca8-f8b08d4ebb98.png)

APIが完成したので、Irisで画面を作っていきましょう！

## フロント実装
IrisからAPIを呼べるように、Foundry Appと接続を行なっておきましょう。  
接続方法がわからない方は以下をご参考ください。

https://qiita.com/VoltMX_Team/items/80d6bbab808699ab7bef#2visualizer%E3%81%A8fabric%E3%81%AE%E6%8E%A5%E7%B6%9A

![スクリーンショット_0005-09-22_14_14_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/014acaf4-43f4-2965-8204-64c2ebc8e1c2.png)

### UI作成
クーポン一覧と詳細画面のUIはこのように作成しました。

|画面名|Iris画面|
|--|--|
|クーポン一覧|![スクリーンショット 0005-09-22 14.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ca5d8b51-cc8b-37fe-1b58-79c4be91d250.png)|
|クーポン詳細|![スクリーンショット 0005-09-22 14.11.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/eddddf2f-99c8-4df9-ef53-41568bd87551.png)|

### クーポン一覧

画面が作成できたので、APIを使って一覧表示処理を実装していきます。

#### データ取得
まずは、一覧画面でgetCouponを使ってセグメントにデータを表示させるアクションを作成します。
Irisの右にあるDATA & SERVICESのタブを開き、PROJECT SERVICESを開きます。
すると、接続しているAppで作成されたAPIを表示することができます。

getCouponを使用したいので、getCouponを開くとFoundryで設定したResponse値が表示されます。
これらを画面上のWidgetと紐づけることで、対象データを画面内のWidgetに表示させることができます。

動画でマッピングする方法を見てみましょう👀
![ezgif-5-0781c9b911.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bbbbc589-8efc-eee4-b20f-0dab1154c2d2.gif)

紐付けが完了した値は、太字に変化します。
ここでマッピングを行うことで画面表示時に起こるonMappingアクションにアクションが設定されるようになります。
View Mappingのボタンを押して、アクションの中身を見てみましょう。
![スクリーンショット_0005-09-22_14_27_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/738ee0a7-d891-010c-b387-eecfd27ae3e9.png)

先ほどのマッピングを行うだけで、ローディング表示からAPIの呼び出しコールバックまでの流れを自動で生成してくれました。
![ezgif-5-49d6ebe51f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e65f0368-774d-d249-fa71-58d12942e0b6.gif)

表示するデータを変更したい場合は、Add Mappingのアクションメニューを開いた後、
マッピングを修正することができます。
![スクリーンショット 0005-09-22 14.34.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/660d9ca9-2943-8ee8-8665-96e8a4c683c6.png)

その他、アラートの文言などはデフォルトで英語表記となっているため適宜修正を行ってください。

#### 一覧タップ
次に一覧のデータをクリックした時のアクションを設定していきます。
Segment WidgetのonRowClickを編集します。

![スクリーンショット_0005-09-22_14_36_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/86ba92c2-849c-170b-3e27-0b68dbdfcc24.png)

アクションエディタが開いたら、アクションメニューから画面遷移アクションの「Navigate to Form」を選択します。
右側で遷移先のフォームを選択し、Pass data with the navigationにチェックを入れることで次の画面にデータを渡すことができます。
渡したいデータのWidget名を選択したら完成です。
![スクリーンショット 0005-09-22 14.47.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/76d68a4e-1280-c95d-58a2-7c2c3312a76e.png)

渡す値を解除したい場合は、対象の値の上で右クリックし「Unbind」をクリックすればOKです。
![スクリーンショット_0005-09-25_14_47_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/536c350c-f97f-47d0-2e03-eb492c8b1268.png)
変更したら、Saveボタンで忘れず保存をしておきましょう。

一覧画面が完成したので、詳細画面を作成していきましょう！

### クーポン詳細

#### 詳細表示
一覧画面でタップしたクーポンの詳細を表示します。
タップ時にいくつかデータを渡すよう設定したため、詳細画面でそれらのデータを受け取り表示しましょう。

前の画面からのデータを受け取るには、onNavigateのアクションを編集していきます。
![スクリーンショット 0005-09-22 14.56.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/756096eb-56b2-04b9-2095-194360692deb.png)

前の画面で受け取ったデータは、eventobjectの中に入ってきます。
これらのデータを表示するために、まず受け取ったデータを変数に入れていきましょう。

![スクリーンショット 0005-09-22 15.58.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/97a56915-6a6b-ef58-6fe6-a533d48ee5bc.png)

変数に入れるアクションは、「Add Variable」で行うことができます。

|項目|詳細|
|--|--|
|Name|変数名|
|Value Type|値の型（Constant:定数、Expression:コーディングを記載）|
|Value|変数に入れたい値|

受け取るデータは、クーポンID,クーポン名,有効期限,クーポン詳細,クーポン画像のため、
それぞれ変数名を指定して、対象データを指定します。
クーポンIDの場合は、このように設定しました。
![スクリーンショット 0005-09-22 17.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/678f5373-e374-4945-fd50-6537d5f68051.png)

データの指定方法は、`eventobject.セグメント名_widget名`で指定することができます。
他のデータも同じように設定していきます。

変数を指定できたら、フォーム上のWidgetに値をマッピングしていきます。
アクションメニューから「Add Mapping」を選択し、変数とWidgetをマッピングしましょう。
![スクリーンショット 0005-09-22 17.28.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2a20b06c-f47e-b7fc-af2d-6edbb0717b4f.png)

全体のアクションはこのようになりました。
![ezgif-1-82dc21f872.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ad51738a-a501-d011-c22f-f17cfa6090b3.gif)

#### 使うボタンタップ
次に「使う」ボタンをクリックした時のアクションを作成します。
今回、使用したクーポンは一覧に表示させないようにしたいため、
「使う」ボタンをクリックしたら使用済みフラグを更新させるようにします。

ボタンのonClickアクションを編集してきます。
![スクリーンショット_0005-09-22_17_31_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/050ea7d2-4abb-d34d-31ae-9c8288fe92df.png)

まずは、ボタン押下時に使用しても良いか確認ポップアップを表示させたいので、
アラートアクションを使います。

アクションメニューから、「Show Alert」を選択します。
項目を以下のように設定することで、ボタン押下時にポップアップを表示させることができるようになりました。
![スクリーンショット 0005-09-22 17.34.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2fab2b8a-51d0-c725-4af4-7eee0d6f9be3.png)

ポップアップで「はい」を押下すると、データを更新したいので、
「Invoke Service」を選択し、Trueの場合のフローに紐づけます。
また、右側のプルダウンで呼び出すAPIを選択します。

![スクリーンショット 0005-09-22 17.37.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a6b1a045-e961-6c50-a63d-2722a02eaed9.png)

マッピングを変更するには、プルダウンの下にある「Update Mapping」をクリックします。

APIリクエストにクーポンIDを指定するため、
クーポンIDのデータが入っている`lblId`とバックエンドのリクエスト値`id`と紐付けを行います。
また、データ更新時、used_flagを1（使用済）に更新する必要があるため、
デフォルトで1が送られるように、値を右クリックしEdit Expressionをクリックすると、値の指定ができます。
"1"と入力し、値の左に赤い丸が表示されればOKです。

![ezgif-1-17830dc383.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4b0b2586-1bb9-1cad-eca4-13c759f9a0e1.gif)


APIからコールバックが返ってきたら、条件文Ifを使って成功時・失敗時の処理を書いていきます。
アクションメニューから「If」を選択し、Callbackに紐づけます。
右側メニューで条件文を記載できるため、
API呼び出し後のステータスが0（成功）の場合、成功の処理を記載、
それ以外の場合は、失敗の処理を記載していきましょう。

API名.opstatusを指定することで、API呼び出し後のステータスを取得することができます。
![スクリーンショット 0005-09-22 17.45.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7b553609-10ed-0d02-a10e-ca16483a3d0b.png)



成功時の処理は、If文のYesに接続を行います。
更新処理が成功した場合、一覧画面に自動的に遷移するようにしたいので、
「Navigate to Form」のメニューを使用して、遷移先に一覧画面を指定します。
![スクリーンショット 0005-09-22 17.51.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c45d4dbd-63b8-fdc2-f87f-4366edc5fa23.png)

失敗時の処理は、If文のNoに「Else」のアクションメニューを紐づけます。
![スクリーンショット 0005-09-22 17.52.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7637c74a-6667-d273-4b90-168a7c9b4819.png)

アラートを表示しAPIの呼び出しに失敗したポップアップを表示させたいため、
「Show Alert」を選択し、文言を指定したら完成です。
![スクリーンショット 0005-09-22 17.53.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c6a465b7-b9f0-b961-ceff-eb71c61bd34e.png)

全体のアクションフローは次のようになりました。
![ezgif-1-bd5a02e04e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a95afb71-4bd9-8734-9180-aae282c8f419.gif)

これでアプリは完成です！アプリの動きを見ていきましょう！

![ezgif-2-10562fe7a9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cf219ed6-15e4-a5d9-8763-cd9cfc715ef2.gif)

クーポンの一覧が表示され、使用すると一覧に表示されるようになりました！
# 最後に
ノーコードの機能をフル活用して、よく使われているアプリの開発を行ってみました。

簡単なアプリであれば、コーディングは最小限でさくっとアプリを作ることができます。
今回紹介した機能をうまく活用して、是非アプリを作成してみてくださいね！