これは4部構成のブログシリーズの第2部です。 ハイブリッドモバイルアプリの構築 Mendixパート1では、ソフトウェア、デバイス、アカウントの準備について説明します。パート1を読む こちらこの部分では、実際のアプリの構築について説明します。
下の図は、モバイルアプリを作成するときに実行する高レベルの手順を示しています。 Mendixこれらの手順を一つずつ説明し、実用的なヒントをいくつか紹介します。
私は Mendix モバイルアプリを作成するための例として、ワールドアプリを紹介します。これはオフライン対応のアプリで、 Mendix 世界 イベント。アプリではフィードバックを提供でき、投票機能もあります。
モデル
モデルの観点から見ると、モバイルアプリの作成は通常の Mendix Web アプリ。ただし、注意すべき点がいくつかあります。
その Mendix フロントエンドはレスポンシブです。つまり、レイアウトと要素は画面サイズに合わせて自動的に調整され、モデル化したページをモバイル デバイスでレンダリングできます。ただし、モバイル デバイスの使用方法はデスクトップとは大きく異なります。ユーザーがマウスの代わりに画面ジェスチャを使用し、画面が小さく、ユーザーが期待するナビゲーションが異なり、接続の種類が異なり (低速)、その他の理由もあります。
また、モバイル アプリの目的は通常の Web アプリとは異なります。通常、モバイル アプリには複数の機能ではなく、イベント情報の表示や検査の実行など、単一の目的があるからです。
より良いエクスペリエンスを提供するには、プロジェクト ナビゲーションで有効にできるモバイル/タブレット プロファイル (デフォルトで有効) を使用します。このナビゲーションはモバイル アプリによって使用されるため、1 つのモデルからデスクトップ、電話、タブレット用のチャネルを作成できます。
の要件 Mendix ワールドアプリの最大の問題は、インターネット接続なしでも動作する必要があることでしたが、これは Mendixオフラインモバイルアプリの詳細については、 Mendixオフラインドキュメントと オフラインモバイルアプリの作成 Mendix ウェビナー。
モデリングのヒント
モバイル アプリのモデルを作成する際のヒントをいくつか紹介します。
- ユーザーの使いやすさと最適なパフォーマンスのためにページをシンプルに保つ
- パフォーマンスを向上させるには、可能であればマイクロフローアクションの代わりにページを閉じる/ページを開く/新しいボタンを使用してください。
- スマートフォンの場合は、データグリッドではなく、タッチ操作に適したリストビューやテンプレートグリッドを優先します。
- ユーザーがスクロールしなくて済むように、1ページあたりのフィールド数を制限します。
- 透明なCSSプロパティはパフォーマンスに悪影響を与える可能性があるため、使用を制限します。
- モバイルページとマイクロフローに別のモジュールを使用して、プロジェクトの概要を把握しやすくします。
- 電話アプリのレイアウト コンテナーを使用する場合は、col-xs-N クラスを追加します。ここで、N は列のサイズです。
開発中のモバイルアプリの表示とテスト
開発中は、モバイルアプリのテストとプレビューも必要です。 Mendix WYSIWYG 機能を備えた Web Modeler が近日中にリリースされる予定で、モバイル アプリがどのように表示されるかを直接確認できます。現時点では、アプリを表示およびテストする方法はいくつかありますが、それぞれに長所と短所があります。
ブラウザでアプリを直接表示するには、モデラーの「アプリの表示」メニューで表示オプションを選択します。
簡単にテストできます Mendix 実際のアプリとして携帯電話に投影し、 Mendix 開発者アプリ。ダウンロード Mendix 開発者アプリはこちら:
もう 12 つの簡単な方法は、開発者ツール (FXNUMX) を開いて左上隅にあるデバイス アイコンを選択し、Google Chrome でデバイスをシミュレートすることです。
特定のデバイスにアプリを展開する方法については後ほど説明します。
オフライン対応のモバイル アプリのテストは、モデラーが無効な構造をチェックするため、主にブラウザーで実行できます。ブラウザーでオフライン アプリを簡単にテストするには、オフライン プロファイルと同じホームページを電話 (またはタブレット) プロファイルで使用します。最終的には実際のデバイスでもテストする必要があることに注意してください。
ハイブリッドモバイルアプリを生成する
先に述べたように、 Mendix レバレッジ フォンギャップビルド モバイルアプリを作成する Mendix アプリ。開発者ポータルのプロジェクトの [公開] タブで [モバイル アプリ ストアに公開] をクリックすると、ハイブリッド アプリの設定に移動できます。ここで、名前、アプリ ID、説明、スプラッシュ スクリーン、アイコンを入力できます。次に、[モバイル アプリ ストアに公開] ボタンをクリックすると、ハイブリッド アプリを生成できるページに移動できます。ハイブリッド アプリを生成する前に、アプリが接続する環境を指定できます。その後、アプリを PhoneGap Build に直接送信するか、ダウンロードして後で手動でアップロードできます。
PhoneGap Build では、一度に 1 つのアプリを許可する無料アカウントが提供されていることに注意してください。
アプリを構築する
アプリが PhoneGap Build に送信またはアップロードされると、ビルドが自動的に開始されます。
Android の場合、これはすぐに動作し、ビルド後にダウンロード リンクまたは QR コードを介して Android バイナリ (APK ファイル) を直接ダウンロードできます。これはテストと開発目的のみのデバッグ バージョンであることに注意してください。
iOS ビルドまたはプロダクション ビルドには、開発者証明書が必要です。証明書の取得の詳細については、以下を参照してください。
モバイルアプリをアプリストアに公開する
証明書が設定され、アプリの製品版ビルドを作成できるようになると、Google Play ストアや Apple App Store などのアプリ ストアにアプリを公開できるようになります。
Android
AndroidアプリをGoogle Playストアに公開するには、PhoneGap Buildから署名済みのAPKをダウンロードし、アップロードします。 https://play.google.com/apps/publish/.
iOS
Apple App Store に公開するには、Xcode の一部である Application Loader (Xcode / Open Developer Tool / Application Loader 経由) が必要です。Application Loader は、App Store からダウンロードできます。Application Loader を起動すると、PhoneGap Build IPA ファイルを追加して、Apple iTunes Connect にアップロードできます。
ベータテストと受け入れテスト
PhoneGap Buildでは、アプリへのリンクを公開することもできます。 公開共有を許可する アプリケーションの設定タブから。
Androidユーザーは、 未知のソース アプリをインストールする前に、設定 > セキュリティのオプションからデバイスIDを追加する必要があります。iOSアプリの場合は、プロビジョニングプロファイルにデバイスIDを追加する必要があります。 テスト用にアプリをエクスポートする (iOS、tvOS、watchOS).
iOSアプリの場合、TestFlightを使用してテストリリースをユーザーグループに提供することもできます。これは、新しいリリースをアップロードすると自動的にテストユーザーに送信されるため、ベータテストや受け入れテストを行うときに非常に便利です。TestFlightの詳細については、 https://developer.apple.com/testflight/.
これはモバイルアプリケーションのライフサイクルの基礎をカバーしており、 Mendix来週はハイブリッドアプリについて、その仕組みや独自のモバイルウィジェットの作成方法について詳しく説明します。 モバイルアプリの構築 Mendix!