Workatoの新機能 Workflow Apps を触ってみた

今年リリースされたWorkatoの新機能 Workflow Apps を皆さんご利用されてますでしょうか？
先日 Workflow Apps でサンプルアプリを作る機会があり、その時の備忘を記事にまとめました。

# Workflow Apps とは:question:
Workflow Apps は、WorkatoでGUIアプリを直感的に作れる機能です。
複数のシステムを連携した自動化ワークフローをもとに、アプリ上でタスクの作成・ステージ変更（例：申請→承認→完了）ができます。

Workflow Apps は、以下の3つで構成されています。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/eea28c83-e0bd-cbfe-be80-aceaa8f8b1d1.png">

### UI
* ポータル
    * 作成されたタスク、承認操作が必要なタスクを一覧で確認できる画面
* 各ステージのページ
    * ステージ変更（例：申請→承認→完了）のタイミングで、情報を入力・編集できる画面

<font color="silver">ポータル</font>
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/39e85de7-b3d9-7db8-683a-2dae1611f21a.png">

<font color="silver">各ステージのページ</font>
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/d1fd53b8-9b32-1b12-f209-35f5f072a447.png">



### テーブル
* ワークフローのタスクを完了するのに必要な情報を保存する場所
* ステージ ページでユーザーが入力した情報や、連携システムから取得した情報等を保存できる

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/07ed264f-cf63-18cf-b9bc-89910078242f.png">

### レシピ
* 様々なシステムを連携して業務プロセスを自動化するワークフロー
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/5917c0fc-26d7-f282-53f3-5f9ddbc45de2.png">

<br>
<br>

プロジェクト作成画面で [ Start with a workflow app ] を選択して進むことで、上記３つが自動的に作成されます。
要件に応じて、上記３つを編集することで、アプリが簡単に出来上がります。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/ef2d368e-39cd-481a-b79b-c2fd024ff83b.png">

# 個人的おすすめポイント :bulb:
Workflow Apps は直感的にGUIアプリを作れるだけでなく、以下もおすすめポイントだと思いました。
### Workatoユーザー以外も利用可能

Apps portal画面で招待したユーザーがアプリを利用できる為、Workatoのレシピ実装に関わっていないメンバーもアプリをご活用いただけます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/c7821053-6dcd-6974-c6dd-b62096b9c023.png">

### アプリにアクセスできるユーザーを制限できる
アプリは複数作成でき、「どのユーザーグループ を  どのアプリ にアクセスさせるか」を柔軟に設定することが可能です。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/db2aa8ee-ff79-7dce-9f65-7236ea6c28fe.png">

###  iframeで埋め込みが可能
既にある社内の WEBサイト等に、ポータル画面をiframeで埋め込みすることができます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/9df86d29-9764-0f5a-62dc-055f65d185bd.png">

### モバイル端末で操作が可能
ポータルはモバイル端末からでも操作ができます。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/d6aca8c6-5bc3-15ea-6f3b-bc2456987955.png">

# サンプルアプリの作成の流れ :scroll:
今回、以下の流れでサンプルアプリを作っていきました。

### 1. どういったワークフローにしたいかを決める
以下の整理を行いました。
* 必要なステージ（例：申請、承認、完了）は何か
* 申請/承認のプロセスはあるか
* ユーザーが情報を閲覧・編集するステージ ページはいくつあるか
* どのメンバーがアプリを利用するか

### 2. UIの設定
必要となるステージ ページ の編集を行いました。
配置したいコンポーネントを左から右にドラック&ドロップするだけで簡単にページ作成ができました。
また、この段階で要件にあわせてテーブルの編集もしました。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/44cd3f96-cb2f-5de4-0375-dd8f450409c5.png">

### 3. レシピの編集
トリガー、アクションに [Workflow apps by Workato] を利用してレシピを作っていきました。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/7d657552-1ba4-9c1c-c098-5bb557fd48aa.png">


### 4. アプリとレシピを有効化
設定が一通り終わった後に、アプリとレシピをアクティブな状態にしました。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/207e0c44-f6b5-90d0-bebd-40a60be3bcc9.png">

# 作ったサンプルアプリ :gear:
今回、以下を想定したサンプルアプリを作りました。

▼想定ケース
* 前提
    * A会社ではSIサービスをお客様に提供している
    * 契約時にお客様と想定作業時間（工数）を取り決めている
    * 実施した作業内容及び消費工数の定期的な報告が必要
* 現在の運用
    * お客様ごとに月1で作業報告書を手動でメール送付している
    * 作業後に残工数が不足していることに気づくことがある
* 今後の運用
    * 申請→承認のプロセスを踏んで自動的に作業報告書をメール送付したい
    * 工数不足を早めに把握できるよう毎月残工数を確認したい

▼連携システム
* Slack（A社でコミュニケーションツールとして利用）
* Google Sheets（工数管理ツール導入前で、A社で工数管理マスターとして利用）
※今回はサンプルとして上記システムを利用していますが、Workatoは要件に応じて様々なシステムとの連携が可能です。

<font color="silver">ワークフロー</font>
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/79dc022d-7957-ce14-44cd-b4e01a3d25b3.png">

|順番  |処理  |
|---|---|
|①  |作業者が消費工数の申請を行う<br> <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/42a154fb-d9b0-c34b-34a2-3cd3dc938fa3.png">|
|②  |Google Sheetsから残工数の情報が取得される  |
|③  |②で取得した残工数から消費工数を引いたものを申請に反映  |
|④  |指定のSlackチャンネルに承認依頼を通知<br> <img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/c50e08d8-e9f7-bcb3-d199-f8e35a8ae9f5.png">|
|➄  |上長が申請内容を確認し、承認/差戻しを行う<br> <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/f715fcfd-29d6-79de-35ee-08d3d9295ec7.png">|
|⑥  |②で取得した残工数から消費工数を引いたものをGoogle Sheetsへ反映  |
|⑦  |作業報告書を添付したメールを自動送信<br>  <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638388/ab83649d-cbb2-6f11-aae7-faf9cc95d1dc.png">|
|⑧  |承認完了のステージへ変更  |





# 感想
今回アプリを作ってみて、Workflow Apps は要件に応じて、色々な使い方ができる新機能だと感じました。
 [Workato Automate 2023](https://note.ricksoft.jp/n/n07ac53b5259e) では今後のロードマップが発表されており、ユースケースが広がりそうで楽しみです。
Workflow Apps の詳細な機能は以下ドキュメントからご確認いただけます。

https://docs.workato.com/workflow-apps.html