UiPath Platformを活用してウェブアプリケーションを簡単に作成する方法

皆さん、ウェブアプリケーションの開発を想像すると、どんなイメージが浮かぶのでしょうか。規模や要件によって異なりますが、難しくてさまざまなスキルが必要で、かなりの費用がかかると感じる方も多いのではないでしょうか。

以下の図のように、Webアプリを開発するためには、さまざまなハードルがあります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/4d92a1e7-a080-c3c1-b889-e2940caa472b.png" width="600">

しかし、UiPath Platformを利用すれば、フロントエンドやバックエンドの知識も、DBサーバーやWebサーバーを用意する必要もありません。それにもかかわらず、簡単にウェブアプリケーションを開発し、デプロイすることが可能です。

本記事では、以下のウェブアプリケーションを開発します。
1. コールセンターの従業員は特定の作業を開始する際に「開始」ボタンをクリックし、終了する際に「終了」ボタンをクリックすることで、作業の工数がデータベースに自動的に記録されます。
2. コールセンターの管理者は従業員の工数記録をダウンロードし、分析することができます。これにより、個々の従業員や作業の実行状況、生産性の評価、効率改善の機会などを把握することが可能です。

イメージ図は以下の通りです。
- 従業員利用の時間計測<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/408c5fa8-feff-def3-caa2-20ea0eb3db99.png" width="600">

- 管理者利用のデータダウンロード及び閲覧<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/779caba1-ea7e-fb9f-9e39-eff7c8161f3e.png" width="600">


ウェブアプリケーションを通じて、コールセンターの作業工数を正確かつ効率的に記録し、管理者がデータを分析して生産性向上に役立てることができます。

# 利用製品

本記事では、UiPath Platformでの製品を利用して、ウェブアプリケーション開発やデプロイの方法を解説していきます。利用している製品及び役割は以下の通りです。
- UiPath Apps: ウェブアプリケーションの設計及び実行
- UiPath Dataservice: データの保存
- UiPath Studio: ワークフローの開発
- UiPath Assistant: プロセスの実行
- UiPath Orchestrator: プロセス及びAppsアプリのデプロイ

これらの製品はすべてクラウド上で利用できるため、ウェブアプリケーションの開発においては開発端末やホスティングサーバーの用意が不要です。
各製品の役割については、一般的なウェブアプリケーションの開発と比較して、以下に対比図を示します。

- 一般的なウェブアプリケーションの開発の場合<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/f9c75d59-3b36-5e1c-dbb8-de65e8d7d899.png" width="600">

- UiPath Platform製品を利用して開発の場合<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/7767ddd6-e4a2-cdf2-0d25-d4a0484409f5.png" width="600">

# UiPath DataServiceでエンティティの作成

各従業員の作業時間を保存するため、DataServiceで該当エンティティの定義が必要です。こちらで二つのエンティティを定義します。エンティティのスキーマは以下の通りです。
- エンティティ名：作業タイプマスタ(WorktypeMaster)

| 表示名 | 名前 | 型 | 必須 |
|:-:|:-:|:-:|:-:|
|  作業タイプ | 	Worktype |  Text | はい  |

このエンティティは、作業タイプ項目のマスターテーブルです。事前に追加する必要があります。例えば、`購買登録`、`支払い処理`、`カスタマーサポート`、`請求書作成`を追加してみてください。

- エンティティ名：作業時間(WorkingTimeRecords)

| 表示名 | 名前 | 型 | 必須 |
|:-:|:-:|:-:|:-:|
|  作業者 | 	Worker  |  Text | はい  |
| 対象業務  | 	WorkType  | Text | はい  |
| 開始時刻  |  	StartTime | Date-Time  |  	はい |
| 終了時刻  |  		EndTime | Date-Time  |  	はい |
| 作業時間  |  			WorkTime | Number  |  	はい |

UiPath DataServiceでエンティティの作成及びデータ追加は簡単です、不明な方は以下のドキュメントをご確認ください。

https://docs.uipath.com/ja/data-service/automation-cloud/latest/user-guide/creating-an-entity

https://docs.uipath.com/ja/data-service/automation-cloud/latest/user-guide/managing-the-data-for-an-entity


# UiPath Appsを利用してアプリの開発(画面)

次に、アプリを使用して利用者向けの画面を作成します。利用者は、作業時間を登録する従業員と一括で作業時間を確認してダウンロードする管理者ですので、従業員と管理者向けの二つ画面を作成する必要があります。

最初に、新しいアプリを作成しますので、以下の手順で作ります。

**手順：**
1. UiPath Appsへアクセスして、「新しいアプリを作成」ボタンをクリックします。
1. 名前に「作業時間管理システム」を入力して、「作成」ボタンをクリックします。
1. 次の画面で「空のページ」を選択します。
1. 次のMainPageの編集画面で、「コントロール」→「表示」→「タブ」をドラッグして、右側のページにドロップします。属性を以下のように設定します。
    - スタイル
        - サイズの高さ：1000px
        - フォントのサイズ：36px
1. メインページに三つのタブがありますので、一つを消して、残りの二つのタブ名を以下のように修正してください。
    - 作業工数登録
    - 作業工数管理
1. コントロールから二つのページを追加します。ページ名も以下のように修正してください。
    - 作業工数登録
    - 作業工数管理
7. タブのページソースに、上記の二つページを追加します。

## 従業員向け画面の作成

次は、従業員向けの作業工数登録画面を作成します。作業工数登録のページを選択して、必要なコントロールを画面にドラッグアンドドロップをします。

**手順：**
1. 「コントロール」→「入力」→「テキストボックス」をドラッグして、作業工数登録ページにドロップします。
1. 「テキストボックス」の属性を以下のように変更します。
    - 全般：
        - ラベル：作業者
        - 表示→無効化：true
    - スタイル
        - 「画面に合わせて伸縮」を選択
        - ラベル配置：左
        - ラベル幅：240px / 間隔：8px
        - フォント：
            - ラベルサイズ 36px 
            - 入力サイズ 36px
1.  「コントロール」→「入力」→「ドロップダウン」をドラッグして、作業工数登録ページにドロップします。
1.  「ドロップダウン」の属性を以下のようにに変更します。
    - 全般：
        - ラベル：作業タイプ
        - 表示→無効化：true
    - スタイル
        - 「画面に合わせて伸縮」を選択
        - ラベル配置：左
        - ラベル幅：240px / 間隔：8px
        - フォント：
            - ラベルサイズ 36px 
            - 入力サイズ 36px 
1. 開始時刻と終了時刻を記録するので、上記作成した作業者の「テキストボックス」を二つ複製して、コントロールの順番を調整します。
1. 次に、二つのボタンを追加します。テキストを「作業開始」と「作業終了」に変更します。属性を以下の通りで変更します。
    -  スタイル：「画面に合わせて伸縮」を選択
    -  フォントのサイズ：36px
    -  「作業終了」ボタンの背景色：#df4300
1. ここまでできた画面を確認しますので、右上の「プレビュー」ボタンをクリックして、以下のような画面が表示されます。以下のイメージになります。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/a832e44a-4aa3-3fd0-eb27-47ab47896da7.png" width="600">

## 管理者向け画面の作成

次は、管理者向けの作業工数管理画面を作成します。作業工数管理のページを選択して、必要なコントロールを画面にドラッグアンドドロップをします。

**手順：**
1. 「コントロール」→「表示」→「ボタン」ドラッグして、作業工数管理ページにドロップします。
1. 全員の作業記録を表示させるため、「表示」→「表」コントロールを追加します。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/1926dd8f-099b-d5b2-82fc-e147a6671328.png" width="600">

# UiPath Appsを利用してアプリの開発(ロジック)

## DataServiceでのエンティティの接続

UiPath Appsでは、DataServiceでのエンティティのデータを利用できるように、関連エンティティの追加が必要です。

**手順：**
1. コントロールの右の▽ボタンをクリックして、「エンティティ」をクリックします。
1. 次の「エンティティを追加」画面で、以下の二つエンティティを追加します。
    - 作業タイプマスタ
    - 作業時間
 
**<参照画像>**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/435be394-097e-3f98-530b-353205c30622.png" width="600">


## 従業員向け画面でのロジック作成

次は、従業員向け画面で動作できるように、ロジックを追加します。

### 選択した値のバインド

コントロールに入力や選択した値を変数にバインドします。

**手順：**
1. 作業者のテキストボックスを選択して、右側の「全般」→「値のバインド」をクリックします。「リソース」→「ユーザー」の「メールアドレス」をドラッグアンドドロップします。
1. 次に、作業者タイプのドロップダウンを選択して、右側の「全般」→「選択した値のバインド」をクリックします。
1. 「リソース」→「アプリの変数」の「⁺」をクリックして、変数の「作業タイプ」を作成して、「選択した値のバインド」にドラッグアンドドロップします。
1. 作業者タイプのドロップダウンの「リストのソース」をクリックして、エンティティの「作業タイプマスタ」を選定します。列が「作業タイプ」にします。
1. 上記と同じように、開始時刻と終了時刻のテキストボックスにて、以下の変数を作って、値のバインドをします。
    - 開始時刻
    - 終了時刻

### ボタンクリック時の動作

次は、ボタンがクリックされた際の動作ロジックを作成します。

**手順：**
1. 作業開始のボタンを選択して、右側のイベントタブで、「ルールを作成」ボタンをクリックします。
1. 以下の二つのルールを追加します。
    - 値をリセット
        - リセットする項目：「終了時刻」変数
    - 値を設定
        - 設定する項目：「開始時刻」変数
        - 値：「今()」関数 
1. 作業終了ボタンも同様に、以下のルールを追加します。
    - 値を設定
        - 設定する項目：「終了時刻」変数
        - 値：「今()」関数 
    - 値を設定
        - 設定する項目：「作業時間」変数（※該当変数の作成が必要）
        - 値：(終了時刻 - 開始時刻) / 1000
    - エンティティレコードを作成/更新
        - 以下の図のように、エンティティのリソースと値を設定します。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/2da0e1e7-b89e-1a68-b532-e76b55228687.png" width="500">

以上の設定が完了したら、「プレビュー」ボタンをクリックして、動作を確認してみてください。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/5ebcf4fe-6d99-a965-e4c1-596a2c0ac9aa.png" width="500">


## 管理者向け画面でのロジック作成

次に、管理者向け画面の動作ができるように、データソースの設定、及びプロセスの起動を説明します。

**手順：**
1. 作業工数管理 ページをクリックして、データソースにエンティティの「作業時間」を選択します。
1. 事前にOrchestratorにパブリッシュしたプロセスをAppsに追加します。（DataServiceのエンティティの追加と同様な方法）
1. 作業レコードのダウンロード のボタンを選択して、イベントの「ルールを生成」をクリックします。次のルールの設定画面にて：
    - 「プロセスを開始」をクリックして、パブリッシュしたプロセスをリソースとしてドラッグアンドドロップします。
    - 入力の上書き
        - 「in_mail = メールアドレス 」と設定
        <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/b9cec2f0-382f-106e-34a9-116d09f69d47.png" width="500">

## 動作確認

ここまでで主な動作ロジックの作りが完了したので、再度プレビューをクリックして動作を確認します。
![202307311223.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177240/f057db70-fee9-7b5f-9164-75308b517260.gif)

ここまでのサンプル実装で、主な動作ロジックができましたが、さらに使い勝手を向上させるために、以下の改善ポイントがありますので、ぜひご自身で取り込んでみてください。

1. 「作業開始」と「作業終了」ボタンのお互いの有効化・無効化の制御
2. 各ボタンの動作開始時および動作終了後のメッセージ表示など

# 最後に

この記事では、AppsやStudioを利用して、開発を解説しました。開発したアプリの権限設定や社内外のデプロイなどは、以下のオフィシャルページをご参照ください。

https://docs.uipath.com/ja/apps/automation-cloud/latest/user-guide/overview1