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

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


# はじめに

以前こちらの記事でIrisのノーコード機能を使って、アプリを作成しました。

https://qiita.com/VoltMX_Team/private/fd2f9a1897b717b94b45

今回もノーコードの機能をフル活用して、
他の人にありがとうを伝えられるThanksアプリを作ってみたいと思います！

詳しい実装方法は、以前の記事で紹介していますので今回は省略しながら進めていきます。
途中で不明な点が出てきたら、上記の記事を参考にしながら進めてみてくださいね！

# 完成イメージ

まず社員一覧を表示し、社員の名前をタップすると次の画面でその人へメッセージを送ることができる画面が表示されます。
メッセージを送る画面で、自分の名前とメッセージを記入しボタンを押すとコメントを送ることができるというアプリになります。

![ .gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8ed1894e-ff23-9f55-d051-404bef5fa593.gif)


# 実装方法
それでは早速実装方法を紹介していきます！

## API作成
まずは、今回のアプリに必要なAPIを作成していきます。

[こちら](https://qiita.com/VoltMX_Team/private/fd2f9a1897b717b94b45)で紹介したのと同じように、FoundryのRelational Databaseを使ってAPIを作成していきます。

今回、社員データを管理するt_addressと、ありがとうコメントを管理するt_thanksというテーブルを作成しました。

|t_address|t_thanks|
|--|--|
|![スクリーンショット 0005-09-25 14.12.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b87b5b4e-6a28-b7d5-ab0a-4d8cf17ca7a5.png)|![スクリーンショット 0005-09-25 14.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6c9e79f4-2dcd-f0fc-1c54-9e4b8eb902fb.png)|

このテーブルを使って、社員データ取得、コメント追加を行うAPIを作成していきます。
取得と追加を行うため、Relational Database作成時にオペレーションを作成する際、
「get」と「create」にチェックを入れましょう。
![スクリーンショット_0005-09-25_14_21_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4f8b4c2e-1877-d545-bcfd-56c830d0319e.png)

### 社員一覧取得
社員一覧を取得するAPIは、getAddressとしてこのように作成しました。


|項目|画像|
|--|--|
|Request Input|![スクリーンショット 0005-09-25 14.24.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/423db55b-0f74-7887-1772-3655d53f0b4c.png)![スクリーンショット 0005-09-25 14.24.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d5d43373-a9bb-29a5-990d-fc7e265a3cf5.png)|
|Response Output|![スクリーンショット 0005-09-25 14.24.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cd68b4c2-5437-9f0e-f7bf-c419c3aeb030.png)![スクリーンショット 0005-09-25 14.24.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9f64031a-2f82-2919-1038-981393187fd8.png)|

リクエスト/リスポンスどちらも特に何もいじらず自動生成されたものを使用していきます。
テスト実行を行うとこのようにデータを取得することができました。
![スクリーンショット 0005-09-25 14.27.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/20788af2-1555-f351-0d90-f5bc742590cf.png)


### コメント追加
ありがとうコメントを追加するAPIは、createThanksとしてこのように作成しました。

リクエストに、ありがとうを送る対象の社員ID、自分の名前とコメントを送信しAPIを実行します。

|項目|画像|
|--|--|
|Request Input|![スクリーンショット 0005-09-25 14.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5cdbf306-c6b4-4aca-f203-1ff5c98b4c07.png)|
|Response Output|![スクリーンショット 0005-09-25 14.28.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5a464cb8-6bd7-64ee-d682-b99194fd81b4.png)|

テスト実行すると、このように送信した情報とAPIの成功・失敗を表す`opstatus`の結果が返ってきます。
![スクリーンショット 0005-09-25 14.30.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/146d8c77-5371-8b8b-d11b-4b99c6966672.png)

これでAPIは作成できました！
早速フロントの実装に入っていきましょう！


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

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

社員一覧を表示する社員一覧画面とコメントを送るコメント送信画面の2画面を作成していきます。

### UI作成

2画面はこのように作成しました。

|画面名|Iris画面|
|--|--|
|社員一覧|![スクリーンショット 0005-09-25 14.35.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e78f07b5-6761-af0a-cac9-49adc9bc15dc.png)|
|コメント送信|![スクリーンショット 0005-09-25 14.35.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8c377230-854c-c9c9-7200-1b4778e318c9.png)|

### 社員一覧

画面が作成できたので、APIを使って社員一覧を表示する実装していきましょう。

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

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

値の紐付け方法がわからない方は、以下のパートを参考にしてみてください。

https://qiita.com/VoltMX_Team/private/fd2f9a1897b717b94b45#%E3%82%AF%E3%83%BC%E3%83%9D%E3%83%B3%E4%B8%80%E8%A6%A7

紐付けが完了すると太文字に変更されます。
下記のように画面に表示させたいデータを紐付けることができたら完了です。
![スクリーンショット 0005-09-25 14.39.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1ed3e0e1-e93f-e45d-c163-7ceaa3639998.png)



#### 一覧タップ
一覧の任意のデータをタップした時のアクションを作っていきます。

次の画面で、社員のIdと社員の名前を渡したいので、[こちら](https://qiita.com/VoltMX_Team/private/fd2f9a1897b717b94b45#%E4%B8%80%E8%A6%A7%E3%82%BF%E3%83%83%E3%83%97)を参考にしながら設定してみましょう。


SegmentのonClickActionにこのように値を渡すよう設定できていればOKです！
![スクリーンショット 0005-09-25 14.49.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/00257505-f56f-6a0b-eca0-b9adab622f93.png)

これで一覧画面のアクション設定も終わったので、コメント作成画面を作っていきます！

### コメント送信

#### データ表示
コメント送信画面では、誰にありがとうを送るのかわかるように一覧画面でタップした社員の情報を表示します。

前の画面でタップした時のデータを受け取り表示できるように、
受け取ったデータを変数に代入し、マッピングでForm上のWidgetに値のマッピングを行います。

FormのonNavigateのアクションに次のように設定できていればOKです。
　![ezgif-3-ce455d702e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/111bd39d-95b8-d773-2c1d-69fbdbaeb4e8.gif)

#### データ追加
自分の名前とコメントを入力し、対象の人にありがとうコメントを送信、
処理が成功した場合は一覧画面に戻るといったアクションを作っていきましょう！

アクションは、ありがとうを贈るボタンのonClickに定義していきます。
createThanksのAPIを呼び出し、成功時失敗時の処理を書いていきましょう。

APIを呼び出す際は、createThanksを選択し、
マッピングで社員Idとコメントを送った人の名前、コメントのデータがバックエンドデータに紐づけられていればOKです。
![スクリーンショット 0005-09-25 15.08.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8759c084-b48b-cd7e-7f16-2bdcae2668a9.png)

またAPIからのコールバックが返ってきた後は、
成功時（opstatus="0"）、失敗時（opstatus="0"以外）で条件分けがされており、
成功時にNavigate to Formで一覧画面へ遷移、
失敗時にはAlertを使ってエラーメッセージを表示できていれば完成です！

|アクション名|画像|
|--|--|
|条件分け|![スクリーンショット 0005-09-25 15.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e78936a6-9a6b-a3b8-8db2-e8bab33483dc.png)|
|成功時|![スクリーンショット 0005-09-25 15.11.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/21652731-74e4-605a-90af-9d4aaab5bd15.png)|
|失敗時|![スクリーンショット 0005-09-25 15.12.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/84dfa222-e890-f544-0456-0cf7b5ede342.png)|


全体のアクションはこのようになりました。
![ezgif-3-c5f546d698.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d8f266e2-4d15-b1dc-832c-878482996270.gif)

これでアプリは完成です。アプリの動きを見ていきましょう！
![ezgif-3-2aa0b22210.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/696d8c79-7ac0-ecba-5288-31ab7c0f925d.gif)

社員一覧をタップすると次の画面で社員の名前が表示され、
名前とコメントを追加してボタンを押すと下記のようにテーブルにデータが追加されました！
![db.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d66fafe4-a3ec-522a-f540-fc844058cdfc.png)

# 最後に
今回もノーコードの機能を使って、簡単なアプリを作ってみました！

全く同じアプリでなくても、紹介した機能を使って様々なアプリを作ることができると思います。
今回紹介した機能をうまく活用して、是非開発を進めてみてくださいね！