Mendix でモバイルアプリを開発する（ネイティブアプリ）

# はじめに

[Mendixでモバイルアプリを開発する（ハイブリッドアプリ）](https://qiita.com/puffy/items/619f1d2d598d15978964) に続き、ネイティブアプリ編です。


Mendixのモバイルアプリは、Web、ハイブリッドアプリ、ネイティブアプリが選択できます。

![スクリーンショット 2020-09-30 12.17.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/e146f3a4-0fdf-2541-ba4a-975a80cb9529.png)

<dl>
<dt>レスポンシブWeb</dt>
<dd>MendixのWebアプリケーションを最速でモバイルに展開できます(React JS)</dd>

<dt>PWA</dt>
<dd>アプリストアに依存でずに、シンプルに展開できます。</dd>

<dt>ハイブリッドアプリ</dt>
<dd>既存のWeb機能を活用しながら、アプリを展開できます。PhoneGap/Apache Cordovaをベースにしています</dd>

<dt>ネイティブアプリ</dt>
<dd>最適なユーザーエクスペリエンスとデバイス統合できます(React Native)</dd>

</dl>

どれか１つの形態に縛られるのではなく、これらを目的に合わせて選択して利用することができるのがMendixのメリットの１つです。

# Mendix Studio Pro 8.15.0

Mendix Studio Pro 8.15.0より前のバージョンではNative Builderがコマンドラインツールとして提供されていましたが、Mendix Studio Pro 8.15.0からNative Builderが組み込まれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/d85623d3-8185-801f-6768-481349381bba.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/884a6d82-358f-2f17-345d-d7a796b5fc1e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/5c1f5037-3852-e6d4-d65e-f70dae833cf4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/073168f8-ee01-964d-0529-4e8e3d065631.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/baa9ad38-6ba9-ca4a-e3d2-c5c360da4720.png)

コマンドライン版もプロキシは通らなかったけど、GUI版もプロキシは通らないみたいです。今日はここまで


# ネイティブアプリを作る - 概要（8.14.1以前）

ネイティブアプリは、Mendixが公開しているドキュメント [Deploy Your First Mendix Native Mobile App](https://docs.mendix.com/howto/mobile/deploying-native-app) の流れで作成します。

Bendix Studio Proで作成したプロジェクトを元にして、Native Builderというコマンドラインツールを使用して、GitHubリポジトリを作成し、Microsoft Azure Visual Studio App Centerを利用してビルドします。

# ネイティブアプリを作る - 前提

ネイティブアプリの開発には以下が必要です、

- Mendix Studio Pro（ネイティブアプリの開発はMendix Studio Proを使用します）
- Java JDK 11（Mendix Studio Proに含まれてインストールされます）
- Native Builder（[こちらのDropbox](https://www.dropbox.com/sh/hpw7sshut9bco68/AABackrr75rPSgW7u5LBMkMra?dl=0) のサイトからダウンロードします。最新版は3.2.1です）
- ネイティブ対応アプリ（以下で説明します）
- GitHub アカウント（無償で使えます）
- App Center アカウント（無償で使えますが、頻繁にアプリをビルドする場合は有償が推奨されています）

# ネイティブアプリを作る - アカウントの準備

### GitHub のトークン


1. GitHub にログインします。
1. 右上のプロファイル画像をクリックして Settings に移動します。
1. メニュー左下の Developer settings をクリックします。
1. Personal access tokens に移動して、Generate new token をクリックし、アクセストークンを作成します。
1. Note 欄には Native Builder と入力します。
1. Select scopes の下で repo を選択します。
1. Generate token をクリックします。
1. 表示されたトークンを安全な場所に記録します。再表示はできないので、なくした場合は新しく作成して古いものを削除します。

![mendixnative21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/9d2ae887-dbc0-c064-d3df-1c0cb83007f3.png)

![mendixnative22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/ad91fe5b-1e9d-01cb-ba22-4d1689f3aa9b.png)

### App Center のトークン

1. App Center にログインします。
1. 右上のプロファイルアイコンをクリックして Settings をクリックして Account Settings に移動します。
1. API Tokens タブで、New API token をクリックします。
1. トークンの説明を Description に追加し、Full Access を選択して、Add new API token をクリックして API トークンを作成します。
1. 表示されたトークンを安全な場所に記録します。再表示はできないので、なくした場合は新しく作成して古いものを削除します。

![mendixnative24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/53976ba3-0878-8fce-ef9a-56aefc204795.png)

![mendixnative25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/f89b0bcb-2eb9-60ed-5ec2-fef4769e1378.png)

![mendixnative26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/e626e0a6-c846-9af7-1df5-8ee19711f035.png)

# ネイティブアプリを作る - アプリの作成

まず、Bendix Studio Proでアプリを作成します。今回は「Native Mobile Quickstart App」テンプレートを使用して作成します。

![mendixnative11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/b18dafd9-2789-db5f-a9e6-42bf3bed7446.png)

![mendixnative12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/9c3c9ca8-60f2-7094-6a44-9ff381ef404e.png)

アプリを作成したら、「Run locally」をクリックしてローカルでテストします。

![mendixnative13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/06dfb2b9-1ff8-f39a-a4c1-69aec18f34b8.png)

アプリストアからスマホに「Make it Native」アプリをダウンロード＆インストールしてテストします。

![mendixnative14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/d41e1b50-8a88-7729-0638-c1d621a21ed4.png)

# ネイティブアプリを作る - Native Builder

### 準備

Native Builder の prepare コマンドでネイティブアプリ開発環境を準備します。Mendix Studio Proのプロジェクトから、GitHubリポジトリとApp Centerのアプリを作成します。

prepare コマンドの実行例です。

```sh:
native-builder.exe prepare --project-name MyFirstNativeApp --java-home "C:\Program Files\AdoptOpenJDK\jdk-11.0.3.7-hotspot" --project-path "C:\Users\<user>\Documents\Mendix\MyFirstNativeApp-main\MyFirstNativeApp.mpr" --mxbuild-path "C:\Program Files\Mendix\8.14.1.6605\modeler\mxbuild.exe" --github-access-token <github-access-token> --appcenter-api-token <appcenter-api-token> --runtime-url "https://myfirstnativeapp102-sandbox.mxapps.io" --app-name "MyFirstNativeApp" --app-identifier "com.mendix.myfirstnativeapp" --mendix-version "8.14.1"
```

一回目は下記のようなメッセージでエラーが出力されました。

![mendixnative27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/9c1b77f2-e147-e969-5d0f-2b7aa450cd31.png)

この場合、App Centerにログインして、BuildからアプリとGitHubリポジトリを手動で接続（connect）します。iOS、Androidそれぞれ接続を確認します。

![mendixnative28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/4f465014-43ec-f1a4-22bd-8f5d2f12a5c1.png)

prepare コマンドを再度実行します。

![mendixnative29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/a24e8cf7-4db2-408b-102e-cc787b2a6f9b.png)

### ビルド

準備ができたらビルドです。次のようなコマンドでビルドが実行されます。

```sh:
native-builder.exe build --project-name MyFirstNativeApp --build-number 1 --app-version 0.1.0
```

ビルドできました。自分の環境では20分くらいかかりました。

![mendixnative30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/c11f4367-9dbe-afa3-f19d-fa9df44abb8f.png)

### テスト

Native Builderを配置したフォルダーの下に、buildsフォルダーが作成され、その中にiOS、Androidの実行モジュールがzip形式で格納されます。

Androidの実行モジュールapkを解凍して、Androidに転送します。

```sh:
adb install app-appstore-debug.apk
```

動きました！

![Screenshot_20201008-090331.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/9d617efc-4606-5395-b095-e9d368854579.png)

# 最後に

環境構築に少し手間がかかりますが、一旦準備ができれば、Native Builderを使用してApp CenterとGitHubを連携して簡単にビルドを繰り返すことができます。