コラム

サンプルアプリケーション

サンプルアプリケーションについて

Mendixで作成したアプリケーションを実際に動かしてみましょう!

Mendix Studio Pro で作成したサンプルのアプリケーションを2つ用意しました。アプリケーションはmpkファイルでパッケージ化されるため、簡単にエクスポートやインポートが可能です。

アプリケーションはイントロダクションコースで学習する機能を利用して作成しました。3日間の学習だけでこのようなアプリケーションを簡単に作成できます。

このページではあなたのPC上で実際にアプリケーションを動かす方法を説明しています。ぜひ試してみて下さい!

デモのダウンロードはこちら

読み込みに30秒ほど時間がかかる場合があります。

Mendix Studio Pro の導入方法

サンプルアプリケーションをインポート、実行、編集するソフトウェア、Mendix Studio Pro を導入します

1. Mendix Studio Pro 8.12.5をダウンロードします

2. ファイルを実行してインストールします

3. インストールが完了したらMendix Studio Pro を起動します

サンプルアプリケーションのインポート方法

1. サンプル1(sample1.mpk)やサンプル2(sample2.mpk)を任意の場所にダウンロードします

2. Mendix Studio Pro メニュー「File」→「Import Project Package」を選択します

3. ファイル選択画面でダウンロードしたファイルを指定します

4. 「Locally on disk」を選択して「OK」を押します

5. サンプルアプリケーションのインポートができました

サンプルアプリケーションの動かし方

画面上部の「Run Locally」を押してアプリケーションを実行します
(実行が完了するまで少し時間がかかります)

ブラウザが起動してアプリケーションにアクセスすることができました
実際にアプリケーションを利用してみましょう!

サンプルアプリケーション「セミナー運営会社の管理システム」について

※このサンプルアプリケーションはイントロダクションコースで実際に作成します

セミナー運営会社では色々なセミナーを開催しています。英会話やヨガ、書道などたくさんの種類があり、大勢のインストラクターが登録しています。また、セミナー会場も複数あり、そして数多くの生徒が参加しています。

いつどのようなセミナーがどこで開催され、インストラクターが誰で生徒は何人参加するのか。。突然参加をキャンセルする生徒もいますし、残念ながら退会する生徒もいます。運営会社は常に変化する情報をリアルタイムに管理する必要があります。

また、利用者に応じた画面デザインや機能も重要です。管理者は色々な機能が利用できる画面、インストラクターは生徒の出席状況を管理できる画面、生徒はセミナーの一覧の画面など、利用者別の画面を作成します。使いやすさはアプリケーションの重要な要素の1つです。

セミナー運営会社の管理システム」の使い方

トップページは各ページへのリンクがあります

1. ナビゲーションメニューのホームボタンでトップページに戻ります

2. 「Training Events」を押して開催予定のセミナー一覧ページに移動します

「Add」を押して新しいセミナーを開催してみましょう!

3. 好きなセミナー、開始日、場所、先生を指定して「Save」を押します

開催予定のセミナーを新しく追加することができました!

セミナーの終了日が自動的に計算されたことに気がついたでしょうか?
セミナーと開始日を指定すると終了日が自動的に計算される便利な機能【マイクロフロー】が実装されています

Mendix Studio Pro 画面左のツリー(Project Explorer)の「OCH_TrainingEvent_CalculateEndDate」を選択してこのマイクロフローを表示します

このようにマイクロフローではビジネスロジックやデータの処理方法を視覚的に作成することができます

「セミナー運営会社の管理システム」のカスタマイズ

アプリケーションをカスタマイズしてみましょう!
1. セミナー会場の情報として電話番号を追加します

画面左のツリー(Project Explorer)の「Domain Model」を選択してデータモデルを表示します

2. 「Location」をダブルクリックして設定画面を開きます

3. 「NEW」を押して「Name」欄の文字列「Attribute」を「Tell」に変更して「OK」を押します

4. 「Location」の設定画面に戻るので「OK」を押します
データモデル内にセミナー会場の電話番号を追加することができました

次はセミナー会場の一覧ページに電話番号を画面に表示しましょう
5. 画面左のツリー(Project Explorer)の「Location Overview」を選択します
今は電話番号が表示されていません

6. 画面右「ToolBox」内の「Widget」の検索欄に「text」と入力します

7. 「Common widgets」→「Text」の部品をドラッグして画面中央の「{Address}」の下にドロップします

「Text」の部分に電話番号を表示しましょう
8. 「Text」をダブルクリックしてプロパティ画面を開きます

9. 「Edit」を押してキャプションの文字を変更します。
10. 「Caption」欄の文字列「Text」を「{1}」に変更します。
11. 「New」を押して「Select」から「Tell(String(200))」を選択して「Select」を押します

12. 「OK」を3回押してセミナー会場の一覧ページ「Location Overview」に戻ると「{Tell}」と表示されています

次はセミナー会場の編集ページ&登録ページに電話番号を画面に表示しましょう
13. 画面左のツリー(Project Explorer)の「Location NewEdit」を選択します

今は電話番号が表示されていません

14. 画面中央の「Location page parameter」をダブルクリックして編集画面を表示します
15. 「Data source」の「Entity(Path)」が「MyFirstModule.Location」と表示されていることを確認して「Select」を押します
画面下の「None」を押すと「Entity(Path)」が「None」と変更されます

16. 「OK」を押すと画面中央に「Unknown」と表示されています

再度データモデルの「Location」を設定して電話番号を含むセミナー会場のデータを表示します
17. 画面中央の「Unknown」をダブルクリックして編集画面を表示します
18. 「Data source」の「Entity(Path)」が「None」と表示されていることを確認して「Select」を押します
19. 今回は「Location」を選択して「Select」を押すと「Entity(Path)」が「MyFirstModule.Location」に戻ります
20. 「OK」を押すと確認画面が表示されるので「Yes」を押します

「Location NewEdit」に電話番号が表示されています

ここまでの変更作業を反映して確認しましょう!
21. 画面上部の「Run Locally」→「Save and Continue」を押してアプリケーションを実行後に「View」を押します
22. トップページから「Locations」を押してセミナー会場の一覧ページ(Location_Overview)に移動します
23. 表示されているセミナー会場の「Details」を押すと編集画面(Location_NewEdit)がポップアップで開き電話番号の入力欄が表示されています

編集画面に電話番号を入力すると一覧ページに反映されていることが確認できます
このようにデータモデルの変更を伴うようなアプリケーションのカスタマイズも簡単に行うことができます!

サンプルアプリケーション「中古車マーケットアプリ」

※このサンプルアプリケーションはイントロダクションコース相当のスキルで作成できます
フリマアプリのように中古車を売買する場所を提供するアプリケーションです。ユーザーは自分の車を売りに出したり、欲しい車に質問をしてから購入できます。
この会社では配送や書類の手続きを代行するオプションを提供したり、自動車保険、車検や整備のサービスも提供しています。
詳しい車の情報はもちろん、売買を活性化させる写真をアップロードする機能がもあります。
また、利用者が使いやすいと感じる要素として検索機能やソート機能も搭載しています。

「中古車マーケットアプリ」の使い方

トップページは各ページへのリンクがあります

・Sell your Car:中古車を売る

・Buy a Car:中古車を買う

・My Account:アカウント設定

・My Orders:売買履歴

1. 中古車を買う場合は「Buy a Car」またはナビゲーションメニュー「Car Marketplace」を選択します

2. 目的の車の「Buy now」を選択します

配送日と配送場所を入力します

3. トップページの「My Orders」で注文内容を確認できます

4. 中古車を販売する時は「Sell your car」から車の情報を入力し、画像ファイルを選択してアップロードします

このようにMendixを利用することで簡単にアプリケーションを作成することができます。

ぜひ、ご自身で考えたアプリケーションをMendixで作成してみてください!

デモのダウンロードはこちら

読み込みに30秒ほど時間がかかる場合があります。

一覧に戻る