# DreamFactory

[DreamFactory](https://www.dreamfactory.com)は、MySQL、PostgreSQL、SQL Server、Snowflakeなど20以上のデータベース向けにREST APIを生成できるオープンコアAPI生成プラットフォームです。ロールベースのアクセス制御（RBAC）、APIキーの生成と管理、APIの制限とログ記録をサポートしており、世界中の数千の組織によってAPIインフラストラクチャを生成および管理するために使用されています。

{% hint style="info" %}
DreamFactoryについて詳しく知りたい場合は、<https://www.dreamfactory.com/>にアクセスしてください。
{% endhint %}

Adaloの[External Collections](https://help.adalo.com/ja/integrations/external-collections-with-apis)機能を使用すると、DreamFactoryをバックエンドとするモバイルアプリケーションを簡単に作成できます。統合プロセスをデモンストレーションするために、[MySQL Employeesサンプルデータベース](https://dev.mysql.com/doc/employee/en/)を使用して企業ディレクトリアプリケーションを作成します。このデータベースには6つのテーブルと約400万の相互関連レコードが含まれています。まずは、例のアプリケーションを作成してみましょう。

### アプリケーションの作成

AdaloのExternal Collections機能は、外部APIに対してCRUD（作成、取得、更新、削除）操作を実行する機能をサポートしていますが、当社のアプリケーションは読み取り専用の従業員ディレクトリとして機能します。さらに、モバイル専用のアプリケーションの構築に焦点を当てます。手順に従って、Adaloアカウントにログインし、新しいアプリを作成し、Mobile Onlyを選択してください。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d1523279ae4d844e4b72d7350fb1add4af00341b%2Fimage%20(1).png?alt=media" alt="Adaloアプリケーションレイアウトの選択" width="563"><figcaption></figcaption></figure>

次に、Blank Mobile Firstテンプレートを選択します。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-f4725d36d3de9620df4722db6c291c5e4538533d%2Fimage%20(2).png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

最後に、アプリケーション名を定義し、対象とする観客を選択し、プライマリとセカンダリの色を定義します。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-70a9824dca0a8f8d92d0df73882b234e3384ca81%2Fimage%20(3).png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

作成を押すと、Adalo App Builderがスケルトンアプリケーションを表示し、最初に次の3つの画面が含まれています。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-78787035384a6b962de49d3502ce6ed9d7c6df4a%2Fimage%20(4).png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
魅力的な色の組み合わせを特定するのに、[Color Combos](https://www.colorcombos.com/popular-color-combinations)や[Adobe Color](https://color.adobe.com/)などのサイトを利用することがあります。
{% endhint %}

次に、従業員データベースAPIをAdaloに追加して、データをアプリケーションに統合していきます。

### 従業員APIの追加

DreamFactoryにデータベースの資格情報を追加し、APIを生成した後、ユーザーは通常、ロールベースのアクセス制御（RBAC）を定義し、そのRBACをAPIキーにアタッチします。このAPIキーは、クライアントからDreamFactoryに安全なHTTPヘッダーで渡されます。DreamFactoryはこのキーを使用してリクエストの認証と認可の両方を行います。したがって、AdaloにこのAPIを追加するには、DreamFactoryインスタンスから次の情報を取得する必要があります。

* APIエンドポイントのベースURL
* APIキー。このAPIキーは、Adaloからヘッダー`X-DreamFactory-API-Key`を使用して渡されます。

Adaloにこの情報を追加するには、データベースメニューアイテムをクリックして、次にコレクションを追加することができます：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-339f6f62ff046a77f707cea1c723e086e9ab9add%2Fimage%20(5).png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

次のようなモーダルが表示されます：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-ba32dd1beb3d8cf4cf5764b18c463f979a5547a0%2Fimage%20(6).png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

コレクション名を簡単に認識できる名前に設定します。ここではEmployeesを使用します。APIベースURLはコレクションを指し、次のようになります：<https://api.example.com/api/v2/mysql/_table/employees>。最後に、Add Itemをクリックし、Headerを選択して、ヘッダー名とAPIキーを入力する必要があります：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d3dbac33eb72d0f3b258b0f7a555a89e42d7d95c%2Fimage%20(7).png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

この情報を入力した後、Doneを押して次に進み、エンドポイント画面に進んでください：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-cdb520d33fd29c4c4c04e6dc460945edaf7be71c%2Fimage%20(8).png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

Get Allメニューアイテムをクリックし、Results Keyフィールドを`resource`に設定します。これは重要です。DreamFactoryはJSONキーとしてレコードコレクションを返します。以下は例です：

```json
	
{
  "resource": [
    {
      "emp_no": 112,
      "birth_date": "1953-09-02",
      "first_name": "Eddie",
      "last_name": "Smith",
      "gender": "M",
      "hire_date": "1986-06-26"
    },
    {
      "emp_no": 113,
      "birth_date": "1953-09-02",
      "first_name": "Eddie",
      "last_name": "Smith",
      "gender": "M",
      "hire_date": "1986-06-26"
    },
    ...
    ]
}
```

この変更を行った後、Doneを押してNextを押してAPIデータの取得をテストしてください：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-eeb886528466a2ee48c663e70d0fc3a760223cb1%2Fimage%20(9).png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

最後に、Run Testを押し、すべてが適切に構成されている場合は、次のような出力が表示されるはずです：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-a66298118dcbbe37a35bbc10832c716183e0a87b%2Fimage%20(10).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

すべてが問題なければ、コレクションを保存して追加プロセスを完了してください。

### アプリケーション画面リストに従業員データを追加

外部APIが構成されたので、従業員データを取得して表示する準備が整いました。ビルダーのコンポーネントメニューを開いて、Simple Listコンポーネントをアプリケーションのホーム画面にドラッグします。完了したら、画面は次のようになります：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-a4ed468aa585c4b405292b2a2a34a22ae35ab8b8%2Fimage%20(11).png?alt=media" alt="" width="235"><figcaption></figcaption></figure>

リストをクリックしてリスト属性エディタを開き、「What is this a list of?」フィールドをEmployeesに設定します。次に、Titleをクリックして、その後Magic Textアイコンをクリックし、first\_nameを選択します：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-6b301e50441d241732fc0605cb98c066ba25b63e%2Fimage%20(12).png?alt=media" alt="" width="344"><figcaption></figcaption></figure>

次に、`first_name`の後にスペースを追加して`last_name`を選択し、この手順を繰り返します。これで、インターフェースは次のようになります：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d41bd72acaa3a1388f4df1ea45ea50acabf9b42c%2Fimage%20(13).png?alt=media" alt="" width="352"><figcaption></figcaption></figure>

サブタイトルと左側のセクション属性を無効にし、Simple Listは次のようになります：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-35ee5d4778745c790a07454f92447406e5d9c2c4%2Fimage%20(14).png?alt=media" alt="" width="234"><figcaption></figcaption></figure>

信じられないかもしれませんが、これでDreamFactory APIデータをアプリケーションにロードするために必要なすべての手順です。プレビューをクリックしてアカウントを作成した後、ホーム画面に従業員の名前がリストされます：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-e6d2f239c27d49c0f4879e86c2619b0b7b55d546%2Fimage%20(16).png?alt=media" alt="" width="344"><figcaption></figcaption></figure>

従業員プロファイル画面の作成

特定の従業員について詳細を知るために、従業員名をクリックして従業員プロファイル画面を表示できるようにしたいと思います。これを行うには、現在の従業員データ（クリックされた従業員名）を新しい画面に送信するクリックアクションを作成する必要があります。Simple Listをクリックし、属性画面でAdd Actionをクリックして、次にLink > New Screenを選択します：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-420af49a1d2008a2cacf6ec2bbafb0909d00ca6a%2Fimage%20(18).png?alt=media" alt=""><figcaption></figcaption></figure>

新しい画面に名前を割り当て、Blank Screenを選択します。Create Screenをクリックします。Click Actionsの詳細ウィジェットは次のようになります：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-21e6a20f83a082ab5c7456e9b37e802832175739%2Fimage%20(17).png?alt=media" alt=""><figcaption></figcaption></figure>

最後に、従業員プロファイルのユーザーインターフェースを構築します。Adaloは現在の従業員データを新しい画面に渡すため、画面にテキストフィールドコンポーネントをドラッグし、データを宣言するためにマジックテキストを使用するだけです：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-a7b763939eacfc555859c5ddba1b389480210ce7%2Fimage%20(19).png?alt=media" alt=""><figcaption></figcaption></figure>

完了したら、アプリをプレビューして、次のような従業員プロファイル画面が表示されるはずです：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-05329351545fe63fbb5daa9819b3e51eb4ce51b7%2Fimage%20(20).png?alt=media" alt="" width="236"><figcaption></figcaption></figure>

### もっと学ぶ

DreamFactoryはオープンコアであり、コードが公開されており、多くの基本的な機能を無料で使用できます。始めるためのいくつかのリソースは次のとおりです：

* [DreamFactoryのGitHubリポジトリ](https://github.com/dreamfactorysoftware/dreamfactory)：GitHubリポジトリにはコードとDockerおよびHelm環境へのリンクなど、他の有用な情報が含まれています。
* [DreamFactory documentation](https://docs.dreamfactory.com/): ドキュメントには、MySQLを含むさまざまなデータソースでバックアップされたAPIを生成およびセキュリティ保護する方法を詳しく説明したチュートリアルがいくつか含まれています。
