Autonomous Database と APEX で BIデータ更新アプリ をクイックに作成する

#はじめに

経営の意思決定を目的としたデータ分析のために、BIのデータウェアハウスとして、Autonomous Databaseを採用するケースが増えています。
BIを運用していく中で、DWHのデータを手動で少し更新したいという要件も出てくるかと思います。
Autonomous Databaseでは、APEX（Oracle Application Express）というローコード開発プラットフォームを無料で使用し、簡単にWebアプリケーションを作成することができます。
データベース開発ツールの用意やスクラッチでWebアプリを開発する必要がなく、OCI上のAPEXだけで画面やREST APIをカスタマイズできるのは大変便利です。

【参照】[Oracle APEXとは](https://apex.oracle.com/ja/ "Oracle APEXとは")
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/14aff2c4-d20c-993a-cf98-8e8131e09b32.png)

#この記事はこんな人向け

・AutonomousDatabaseのデータ更新画面を簡単に作成したい人
・APEXでとりあえず何かサクッと作ってみたい人

#作るもの・ゴール
**AutonomousDatabase / サンプルデータ / REST API / Web操作画面**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/d30dabff-ec0a-c004-9a67-0e8c4ca01418.png)

AutonomousDatabaseとAPEXでBIテーブル更新用のWebアプリを作成し、画面からデータを更新することがゴールです。


#構築手順

1. Autonomous Databaseの作成
2. APEXの開始
3. RESTサービス用のワークスペースの作成
4. サンプルテーブルの作成
5. RESTによるテーブルの有効化
6. アプリケーション用のワークスペースの作成
7. アプリケーションの作成
8. Webソースの追加
9. ページの作成
10. ページの更新


#1. Autonomous Databaseの作成

まずはAutonomousDatabaseを作成していきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/44137908-1c4e-28bf-91ca-3d7a85f435c3.png)
画面左上のハンバーガーメニューからOracle Databaseを選択します。
今回はBIツールのデータウェアハウスを想定し、Autonomous DataWarehouseを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/c46dd9c1-fe69-7352-2cf7-06f90c972500.png)
「Autonomous Databaseの作成」ボタンを押下します。

Autonomous Databaseの基本情報の指定エリアで、**コンパートメント**の選択、**表示名**、**データベース名**を編集します。**ワークロード・タイプの選択**は、「データ・ウェアハウス」となっていることを確認してください。
**デプロイメントタイプの選択**は、「共有インフラストラクチャ」となっていることを確認してください。
今回はハンズオン想定ですので、OCPU数、ストレージはそれぞれ最小値の1で十分です。
**管理者資格証明の作成**のDBユーザパスワードは必須です。任意の文字列を入力してください。

:::note warn
ハンズオン想定のため、ネットワーク・アクセスの選択では、「すべての場所からのセキュア・アクセス」を選択します。セキュリティの観点から、本番環境では、Autonomous DatabaseをVCN内にデプロイメントすることを検討してください。
:::
**ライセンスタイプ**は、「ライセンス込み」を選択してください。
**運用上の通知およびお知らせ用の連絡先**は、任意のメールアドレスを入力してください。
ここまで入力したら、**「Autonomous Databaseの作成」ボタン**を押下します。
押下後、次の画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/e86caf7e-71d2-2f24-322e-aa1ae90938c6.png)
1分ほどでADWが使用可能となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/962166fa-ae84-a362-2695-3aed1d4da9a3.png)

これで、Autonomous Databaseが使用可能となりました。
Autonomous Database作成について、さらなる詳細は、下記リファレンスをご参照ください。
【参照】[共有ExadataインフラストラクチャでのAutonomous Databaseの作成](https://docs.oracle.com/ja-jp/iaas/Content/Database/Tasks/adbcreating.htm "共有ExadataインフラストラクチャでのAutonomous Databaseの作成")

#2. APEXの開始
では、本題のAPEXをはじめましょう！
起動しているAutonomousDatabaseの画面から、**「サービス・コンソール」ボタン**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/82c63e95-36d6-df26-02a3-ef896bc00030.png)

別タブでAutonomous Data Warehouseの画面が立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/0697903c-0f55-a8f5-b220-56f31effbc02.png)
この画面で、左ナビゲーションペインの、**「開発」ラベル**を押下します。
すると、AutonomousDatabaseで扱える各種開発ツールが表示されます。
**Oracle APEX**を押下してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/809c5013-af5f-7d50-c1d1-0071eb5c179c.png)
すると、APEXのログイン画面が別タブで起動します。
ここで、Autonomous Databaseの作成時に設定したパスワードを入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/5b83107b-fd75-5e38-3da2-d02b72ed9678.png)
ログイン後、APEXの画面に遷移します。

#3. RESTサービス用のAPEXワークスペースの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/4667b193-5b5a-4b6d-854d-bf675445dbd5.png)

ハンズオンのスタートラインに立ちました。
いま、AutonomousDatabaseの管理者ユーザでログインしている状態です。
APEXでは、ワークスペースという単位で作成するアプリケーションを管理します。
**Create Workspaceボタン**を押下して、ワークスペースを作りましょう。
ワークスペースは手順の中で２つ作成することになります。
まずは、DBからのデータのやりとりを定義するREST API用のワークスペースを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/8c3f30e4-9064-e6a3-969c-1debd1eb708b.png)
すると、ポップアップ画面で**Database User**と**Password**、**Workspace Name**の必須入力が求められます。Database UserとPasswordは、ADMIN以外の任意の名前を設定できます。今回は、ワークスペースの役割を明示的に区別するため、RESTAPIとしておきましょう。入力後、Create Workspaceボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/5e9a0879-f206-69dc-fb70-e9998bcbf0d3.png)

現在、ADMINユーザでAPEXにログインしていますが、このRESTAPIユーザで操作していきます。
APEX画面右上のユーザボタンを押下し、Sign Outラベルを押下します。
今度は、Workspace名、ユーザ名パスワードの入力画面が表示されるので、前画面で作成した情報を入力してSign Inボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/aff0d7ff-d222-f2a5-9893-be43e3485d15.png)

#4. サンプルテーブルの作成
まだAutonomous Databaseは空なので、OCI側であらかじめ用意されているサンプルデータをインポートします。
**SQL Workshop**のタブから、**Utilities**を選択し、**Sample Database**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/2c1cc365-fa9d-0823-cfac-8b254027254d.png)

今回は、**EMP / DEPT**を使用しましょう。**Install**ボタンを押下してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/1c4c6d67-2408-ba2c-6df1-9baa1e330417.png)

任意の言語を選択肢、**Nextボタン**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/9d6b74a6-e9d2-4eb5-1901-b8f5e5e86e0a.png)
DEPT、EMPテーブルとEMP_DEPT_VIEWというビューがひとつ作成されることを確認します。
**Install Datasetボタン**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/5910ec5a-2284-5449-9feb-91bce4b7e0fb.png)
**Exitボタン**を押下します。
※今回は、テーブルに直接アプリケーションを作成する手順は踏みません。このあと、REST APIでサンプルデータを呼び出し、別ワークスペースで作成したアプリケーションからデータを参照します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/3a27c16a-99d7-c5a3-3836-fa502a66f83d.png)


#5. RESTによるテーブルの有効化
メインメニューから**SQLワークショップ**を選択し、**SQLスクリプト**を選択します。
画面遷移後、**Createボタン**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/6157cdc0-8c99-5521-56e1-c1010c1e3b26.png)
スクリプト編集画面に、下記URLのSQL分をコピー＆ペーストします。
【参照】[REST API スクリプト](https://www.oracle.com/technetwork/developer-tools/apex/application-express/apex-hol-rest-enable-5478504.txt "REST API スクリプト")
さらに、Script Nameに""と入力します。（REST APIの命名なので任意の文字列でOKです）
**RUNボタン**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/f884a925-ecca-994e-0163-29b50201031f.png)

画面遷移後、**Run Now**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/0cf8aea7-18a6-bee2-fe45-9cd05dec7c7e.png)

実行結果として、4つのSQL文が実行されたことがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/275bb7b5-1bd6-77a5-e139-b1b0d8a9a281.png)

作成したAPIを確認しましょう。
メインメニューから**SQLワークショップ**を選択し、**RESTful Service**を選択します。
画面遷移後、Modules->emp.rest->holを展開し、GETを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/e1b61b39-7681-393d-01fb-c452db62eb50.png)
FileURLをコピーし、ブラウザの新規タブにペーストします。
下記のように、AutonomousDatabaseにインサートしたサンプルデータの値が表示されたら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/57f3a1d9-0409-feb1-8d1e-d8dd48d10489.png)
これで、REST APIからAutonomousDatabaseのデータを操作できるようになりました。
次は、このAPIを利用したアプリケーションの作成を進めていきます。

#6. アプリケーション用のAPEXワークスペースの作成
まずは、ワークスペースを作成します。
ワークスペース作成のために、管理者ユーザに切り替えます。
RESTAPIユーザをサインアウトし、下記情報を入力し、管理者ユーザでAPEXにサインインします。
**Workspace**：Internal（固定値）
**Username**：Admin（固定値）
**Password**：Autonomous Database作成時に入力したパスワード

ログイン後、**ワークスペースの作成**を選択します。
REST APIユーザを作成したときと同様、作成を進めます。
**Database User**、**Workspace Name**はApp（任意の値でOK）にしておきましょう。

作成後、下記の画面のようにワークスペースが作成されたこと、作成したワークスペースにサインインすることをおすすめしてくれるラベルが表示されるので、APP（Workspace Name）をクリックして、サインインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/090769a3-7808-55ae-d3ce-f44a8c702275.png)

#7. アプリケーションの作成
さあ、アプリケーションを作成していきましょう。
App Builderを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/c05856e5-a07c-4837-84f5-9618c8381abc.png)
画面遷移後、Create、New Applicationを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/8b33f9bd-01f0-c7bf-7d30-0ee422b95211.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/c77262bf-3b67-50ad-5b99-4d42645e1f2b.png)
アプリケーション作成画面で、**Name**にREST Employeesと入力します。（任意の文字列でOK）
**Create Application**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/5f830d6c-4c95-3f8f-8df3-1760c419d541.png)
モーダル画面表示後、アプリケーション作成の管理画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/2d5d033e-0986-d4bc-4d41-5b56ad6cdb27.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/c3f24dc7-79c3-fc13-a545-8f574c66a951.png)
次章以降、この画面からアプリケーションの作成を進めていきます。

#8. EMPのWebソースの追加

このアプリケーションに連携するREST APIをインポートします。
**Shared Components**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/787883b7-1086-4dc1-6482-c9a7255eb117.png)
画面遷移後、画面左下の**Data Sources**エリア内の**REST Data Sources**ラベルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/ee03922d-5f8c-245c-803f-61dec9784277.png)
画面遷移後、**Create**ボタンを押下します。ポップアップ画面が起動します。
Create REST Data SourceがFrom Scratchとなっていることを確認し、**Next**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/8ebd8c10-0420-4dda-8ef9-38c96c9a1e7d.png)

画面遷移後、REST Data Source Typeに **Oracle REST Data Services**を選択します。
Nameに**REST EMP Source**（任意の文字列）と入力し、URL Endpointに**5. RESTによるテーブルの有効化**で確認したURLを入力します。**Next**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/f8e9aafc-a055-d21d-3334-1f76e6f2e09f.png)
次画面で、ベースURLおよびサービスURLパスを確認します。**Next**ボタンを押下します。
次画面は、認証画面となります。

:::note warn
今回は認証をオフにして作成します。
本番環境では認証の導入を検討してください。
:::

**Discoverボタン**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/48cc7909-d059-57f1-950c-79896b624eab.png)

**Create REST Data Source**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/775c85d4-8b43-6040-8fdd-4d7adf2892fb.png)

アプリケーションにREST Sourceが登録されたことが確認できました。
REST Source Nameのラベルを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/e38cc348-5275-c49e-621a-acb853566e2a.png)

GETおよびPOST操作のみが追加されていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/c4ef82d1-d801-1c01-7ef5-ac07101907a6.png)
これは、先ほど指定した**5. RESTによるテーブルの有効化**で確認したURLで定義したAPIメソッドが複数行のGET（取得）とPOST（追加）のみだからです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/996ce189-3b69-0a9a-dc59-767eaa1e5381.png)

ここに、単一行のGET、PUTとDELETEのメソッドを追加していきましょう。

**単一行のGET**
**Add Operation**ボタンを押下します。
**URL Pattern**に**:empno**、**HTTP Method**に**GET**を選択します。
**Database Operation**に**Fetch single row**を選択します。
**Createボタン**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/5308eb28-5e8e-1dd4-5bb9-ee313086e027.png)

**PUT(更新)**
**Add Operation**ボタンを押下します。
**URL Pattern**に**:empno**、**HTTP Method**に**PUT**を選択します。
**Database Operation**に**Update row**を選択します。
**Createボタン**を押下します。

**DELETE(削除)**
**Add Operation**ボタンを押下します。
**URL Pattern**に**:empno**、**HTTP Method**に**DELETE**を選択します。
**Database Operation**に**Delete row**を選択します。
**Createボタン**を押下します。

作成後、REST Data Source画面で下記のようにOperationsが登録されていればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/18854c21-459b-a35f-d9c9-ab9bf1354793.png)

ここまでで、アプリケーション画面からのデータ取得準備が整いました。

#9. ページの作成
アプリケーションのホーム画面に戻り、ページを作成していきます。
**Create Page**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/997461dc-29f6-5e8d-b906-5df6f8413bb7.png)

Create a Pageポップアップ画面で、Page TypeにReportを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/b50697e7-eab7-865e-fa9e-c49d250af397.png)

Report Typeには、Report with Formを選択します。**Next**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/c7a449b7-259b-1626-edb2-8af20ce9ce79.png)

遷移後の画面で、下記情報を入力します。
**Report Page Name**：Employees
**Form Page Name**：Maintain Employee
**Form Page Mode**：Modal Dialog
**Breadcrumb**：Breadcrumb
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/ba1ee549-c0ea-5b9b-bc47-223db740edbe.png)

**Next**ボタンを押下します。

**Create Report with Form**画面に遷移後、
**Navigation Preference**で**Create a new navigation menu entry**を選択します。
**Next**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/5746ecef-bc3a-6c92-d205-a2669ea5cd92.png)

**Data Source**画面に遷移後、次の操作を行います。
**Data Source**：REST Data Source
**REST Data Source**：REST Data Source Type
**Next**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/5f83dc11-c695-dc4e-1843-e4d9e799c40f.png)

**Primary Key Column**にEMPNOを選択します。
**Create**ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/dc77214e-fe04-a873-ef8d-69c16664415e.png)

これでページが作成されました。

#10. ページの更新
作成されたページを確認し、登録したAPIからデータを更新してみましょう。
ADMINユーザで一度サインアウトし、Appユーザでサインインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/2c9c708c-f58a-3b33-50ff-78237c10e8ed.png)

**App Builder**を押下し、**REST Employees**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/d153a756-dad8-9c12-0959-4061c1cf1995.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/aba13f65-3edb-9903-38c7-9272f31c1180.png)

ページ遷移後、**Run Application**を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/11d0dbb2-974e-57fc-7fd4-4743c54206e8.png)
別タブでログイン画面が表示されます。Usernameにapp、パスワードにappユーザ作成時のパスワードを入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/924a6267-58ff-b242-a301-10ccfe9ffe7b.png)

ログイン後、アプリケーションのトップページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/a15b4754-17f7-6904-b866-0ea626144014.png)

画面左上のハンバーガーメニューを開き、**Employees**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/36833c41-017e-2ec3-2ab4-c7bfcf1f0efc.png)

先ほどREST APIで取得したデータと同じ情報がアプリケーション画面にも表示されることが確認できました。
データを更新してみましょう。
任意行の編集アイコンを押下します。

すると、行の情報編集ポップアップ画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/82fdcfa5-8401-0c28-7648-05f51644226b.png)

試しにJob項目を社長から会長に変え、**Apply Changes**ボタンを押下してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/5392a7cd-3341-2279-cdfc-1bc499457945.png)

データが更新されたことを確認できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325706/2794974c-2f07-45a2-3a27-23971dab926c.png)

#まとめ

AutonomousDatabaseを作成するところから、ここまで15分～30分ほどでハンズオンできたのではないでしょうか。BIツールのデータセットとしてAutonomousDatabaseを扱うとき、ちょっとしたデータの更新に使用できるかと思います。