AppGyverからGoogle Driveにファイルをアップロードする

## はじめに
この記事では、[こちら](https://qiita.com/tami/items/272bd74c97919293d590)の記事で作成したCloud Integration (CPI) -> Open Connector -> Google Driveの連携をAppGyverで作成したアプリケーションから呼び出します。AppGyverは[コミュニティ版](https://www.appgyver.com/)を使用します。
※シリーズ先頭の記事は[こちら](https://qiita.com/tami/items/9fd12cbdeef81bed3984)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f78044e9-f6f5-656b-918e-6839b256a7e3.png)

## 動作
"Take a picture"を押すと、カメラが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1dd3d245-f30c-36b0-d67c-1ae84968a428.png)
写真を撮るとアップロードが始まります。アプロード中はボタンが無効化され、アップロード中であることを示すメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9409bcbc-808a-ac8a-2f19-5279291ccc71.png)
アップロードが完了するとメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/37cecb28-5717-b25f-f950-f0212add5aed.png)
Google Driveに撮った写真が格納されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2d148447-4197-2d88-50bf-7c822c65d1aa.png)

## 実装
アプリの動作と使用している変数は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ff051a1a-c3e2-feea-66d7-47dc34dff313.png)
以下はPage Variablesの定義です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a109eedc-54d8-fc68-850f-3af2e817d937.png)

### 1. トークン取得
CPIのフローを呼ぶ際に、ヘッダにトークンを設定する必要があります。トークンを取得するためのAPIをDataとして定義します。

**Resource URL**: Process Integrationのインスタンスのサービスキーに設定されたtokenurl
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/8ea1db3b-0215-33e5-89f9-0cdc3f7ce3af.png)
（参考）Process Integrationのインスタンス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1a6246a6-4afb-f8f5-8dc6-6c4cad352039.png)
GET RECORD (GET)を選択し、以下を定義します。

|セクション  |Key  |Value|
|---|---|---|
|HTTP Header  |content-type  |application/x-www-form-urlencoded  |
|Query parameter  |grant_type  |client_credentials  |
|  |client_id  |サービスキーに設定されたclientid  |
|  |client_secret  |サービスキーに設定されたclientsecret  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e5ebea6c-da95-b504-fcb8-310b609e74fc.png)
テストを実行し、返ってきた値をもとにスキーマを定義します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/fb2189b4-1e8a-fdb9-2829-a3efd0ac550e.png)
スキーマは以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/97d95d12-f63f-02c4-6797-44397e283062.png)
スキーマを利用してData Variableを登録します。トークンは5分ごとに再取得するようにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/451d2cee-e034-f329-2080-cded284fdea1.png)

### 2. ボタン押下時の動作
番号を振ったロジックについて、以下で解説します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d725134a-821b-3aa4-e18f-b3cfdf866e2b.png)

#### 2.1. アップロードデータ作成
Page Variableで定義した"photo"というオブジェクトに撮影した写真の情報と、後続のUpload filesで必要なプロパティ（UploadUrl）をセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c54aa062-1b65-7a9b-f377-7e6f8f4f8e01.png)
設定値は以下のようになっています。
|項目  |設定値  |備考  |
|---|---|---|
|mimeType|image/jpeg|Take photoのアウトプットにmimeTypeがあるが、なぜか値が設定されないため固定値で設定|
|name|"AppGyver_" + NOW("YYYYMMDDHHmmss") + ".jpg"|Formulaで設定|
|path|Take photoのアウトプットの"path"||
|size|Take photoのアウトプットの"size"||
|uploadUrl|CPIのiFlowのエンドポイント||

#### 2.2. アップロード中の表示
アップロード中、ボタンを非活性にし、"Upload in progress..."というメッセージを表示します。
このための事前設定として、ボタンのDisabledプロパティに以下の式をバインドします。
`IS_EQUAL(pageVars.uploadInProgress, "true")` 
uploadInProgressはPage Variableで定義したテキスト型の変数です。Page Variableにbooleanの型がないためDisabledプロパティに直接バインドできず、IS_EQUALの式を使ってbooleanに変換しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/bec0ce01-0425-14be-4b14-5e59bb94ed65.png)
同様に、"Upload in progress..."のVisibleプロパティにも同じ式をバインドします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d525a7a2-d55f-befa-0bab-29fb5b9293d7.png)
②の処理ではuploadInProgressにtrueを設定します。これにより、ボタンのDisabled、およびメッセージのVisibleプロパティがtrueになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e05330c6-e176-e9f2-20a4-e9ce7a6bb38b.png)

#### 2.3. アップロード
[Upload files](https://docs.appgyver.com/docs/upload-files)というファンクションをインストールして使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b6645007-d893-9882-0ca7-14ecf528ab43.png)
設定値は以下の通りです。
|項目  |設定値  |備考  |
|---|---|---|
|HTTP method|POST||
|Files to upload|[pageVars.photo]|ファイルデータを配列で渡す|
|Headers|`{"Authorization": "Bearer " + data.Token1.access_token, "filename": pageVars.photo.name, "Content-Type": pageVars.photo.mimeType}`|filename, Content-Typeは前回作成したiFlowで必要なパラメータ|

#### 2.4. アップロード中の表示終了
アップロードが完了したら、ボタンを活性に戻し、メッセージを非表示にします。そのためuploadInProgressにfalseを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f61afecd-6314-9155-26df-f6dcda4d9973.png)

#### 2.5. アラート表示（正常終了）
正常終了の場合、アップロードされたファイル名をアラートで表示します。Dialog titleに以下の式を設定します。
`"Uploaded file '" + pageVars.photo.name + "'!"`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1581878a-fa41-8a41-a8e0-122c640492fb.png)

#### 2.6. アラート表示（異常終了）
異常終了のアラートは、Upload filesの3つ目のアウトプットからつながっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/37329fb2-a79b-6964-5764-2860ef5bd53d.png)
Dialog messageにUpload filesのアウトプットであるErrorオブジェクトのrawErrorを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2338691f-909f-bb12-6b98-18f1dc3e467f.png)