#Mendix で最初のアプリを作る

# はじめに

[Mendixを使ってみる](https://qiita.com/puffy/items/b009e0c38214815b7af3) でMendixのアカウントを作成したらアプリを作ってみます。

# テンプレートから作成

一番簡単にアプリを作成する方法は、Mendixで提供されているテンプレートを使用してアプリを作成し、Mendix Studioというブラウザー上で使用するエディターを使用して編集する方法です。

ブラウザーでMendixにログインしたら、「Buzz」または「Apps」の画面で「Create App」ボタンを押します。

![スクリーンショット 2020-09-28 22.21.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/02bd148d-d2bb-8a53-3256-09fa239b1c01.png)

最初に、空のアプリ、Excelシートから、という選択肢があり、次にテンプレートから作成する場合のテンプレートがいくつか表示されます。

![スクリーンショット 2020-09-28 22.22.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/605840a5-3ca7-00c2-77da-925539ec4201.png)

今回、Approvalsというテンプレートを使用してみます。

![スクリーンショット 2020-09-28 22.23.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/6456855d-9684-5d5b-f038-b3fa9972c817.png)

Approvalsのテンプレートをクリックして、「Select Template」を選択します。

![スクリーンショット 2020-09-28 22.24.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/a3af01ba-c7f7-e5ef-6757-a33f79d28316.png)

「Select this template」をクリックすると、アプリの名前を入力するダイアログが表示されます。「Choose a Name」に名前を入力して、「Create App」をクリックします。

![スクリーンショット 2020-09-28 22.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/ccb66edd-4d4d-b06d-3a75-9ea2c63c2249.png)

数分するとアプリが作成されます。

![スクリーンショット 2020-09-28 22.26.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/52812cef-d868-0f27-bfc1-1c53f487111f.png)

# アプリの確認と実行

「Edit App」で編集することができます。アプリの編集は、ブラウザー上で編集できる「Mendix Studio」と、スタンドアローンWindowsアプリの「Mended Studio Pro」があります。今回はブラウザーから編集するので、「Edit in Mendix Studio」を選択します。

![スクリーンショット 2020-09-28 22.27.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/da60f279-8623-8c87-490a-df5b33cc5a7d.png)

Mendix Studioの編集画面が表示されます。

左のサイドバーのメニューは、上から順に開発者ポータルに戻る、画面定義の「Pages」、データベース定義の「Domain Models」、処理を記述する「Microflows」、メニュー構成の「Navigation Document」、検索の「Search」、テーマ編集の「Theme Customizer」、設定の「App Settings」です。これらを使用してアプリの実装を行います。

### Pages

![スクリーンショット 2020-09-28 22.28.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/5fc96b71-c116-5ece-bd3e-9471227d50c0.png)

### Domain Models

![スクリーンショット 2020-09-28 22.28.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/49bfd90f-42cd-5e48-332c-602dc1ec801f.png)

### Microflows

![スクリーンショット 2020-09-28 22.29.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/dd9a6e99-c132-268b-85e1-54863ac1c901.png)

### Navigation Documents

![スクリーンショット 2020-09-28 22.30.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/4c7cbc54-e87e-de61-000b-8b29d9e07d07.png)

### Theme Customizer

![スクリーンショット 2020-09-28 22.31.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/5696f907-6f15-b4a2-5e15-3782589c1f82.png)

### App Settings

![スクリーンショット 2020-09-28 22.32.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/d4465dff-a756-1c4d-d091-a20e2d82116d.png)

# アプリのプレビュー

右上にある「Preview」を押すと実行時の画面レイアウトをプレビューすることができます。

![スクリーンショット 2020-09-28 22.33.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/aaead974-3feb-797a-9904-6f8b518116f4.png)

# アプリの発行(実行)

右上にある「Publish」を押すとアプリをMendi Cloudに展開して実行することができます。

![スクリーンショット 2020-09-28 22.33.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/5fab2f9b-87ab-772b-197b-ff29b5660a4f.png)

アプリの発行は数分かかります。アプリが発行されるとステータスが表示されます。

![スクリーンショット 2020-09-28 22.38.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/1b94a903-6da3-b157-e190-ad1789aef3ef.png)

「View App」を押すと、ブラウザーでWeb画面を表示します。
認証を要求するので「Authorize」を押すと、Mendixにログインしているユーザーで認証してアプリにログインします。

![スクリーンショット 2020-09-28 22.40.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/6d227849-05c9-b24f-9b9c-5128e7fad68b.png)

上記で作成したアプリのWeb画面が表示されます。

![スクリーンショット 2020-09-28 22.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/a137290c-4b1f-e127-356d-4075ecc10506.png)

公開されるアプリは https://testapprovals???-sandbox.mxapps.io/ のようなURLになるようです。（???に数字が入ります）

# まとめ

ブラウザーからMendix Studioを使用して簡単にアプリをデプロイすることができました。スタンドアローンアプリのMendix Studio ProはWindowsでしか使えませんが、Mendix StudioはMacからでもアプリを開発することができます。