最初のモバイルアプリを作成する

モバイルアプリを作成する

それでは、新しいタスク管理モバイルアプリを作成しましょう。アプリケーションには1つ以上のモジュールが含まれており、アプリケーションの様々な部分をモジュールにカプセル化できます。モジュールとは、アプリケーションのデータモデルを設計し、ロジックを実装し、UIを設計する場所です。

Service Studioで、［Phone］テンプレートを使用してToDoという新しいモバイルアプリを作成してから、アプリケーションの新しいモジュールを作成します。

Excelファイルからデータベーステーブルを作成する

OutSystemsでは、アプリケーションのデータをリレーショナルデータベースに保存します。つまり、アプリケーション作成の最初の手順はデータモデルを定義することです。

これを行うには、以下のタスク情報が含まれているExcelファイルを使用します。

• Description
• Due Date
• Is Active

Service Studioで、右上の［Data］タブを開きます。Entitiesフォルダを右クリックして［Import Entities from Excel...］を選択し、ディレクトリC:\Program Files\OutSystems\Development Environment 10.0\Service Studio\TutorialResourcesにあるデフォルトで使用可能なサンプルファイルTodos.xlsxを選択します。

Excelファイルをインポートする際、OutSystemsはデータベースにデータを保存するために、必要なカラム（OutSystemsでは「アトリビュート」）を持つデータベーステーブル（OutSystemsでは「エンティティ」）を作成します。

また、OutSystemsはバックグラウンドで、Excelファイルの各行を対応するデータベースレコードにインポートするロジックも作成します。アプリケーションをパブリッシュした後、バックグラウンドのロジックによってExcelファイルのデータがデータベースに読み込まれます。

本チュートリアルではサーバーデータベースにのみデータを保存していますが、オフラインで使用する場合は［Local Storage］を使用してモバイルデバイスでローカルにデータを保存することも可能です。

タスクをリスト表示する画面を作成する

これでTo-Doタスクがデータベースに保存されたため、すべてのタスクをリスト表示する画面を作成できるようになりました。

Todoエンティティを、［Data］タブから［Main Editor］ウィンドウに表示されるモバイル画面の［Content］プレースホルダにドラッグ&ドロップします。

これにより、HomeScreenが更新されて最初に20件のタスクが表示されます。ユーザーがリストの最後までスクロールすると、自動的にタスクがさらに読み込まれます。

タスクを編集する画面を作成する

レコードを編集する画面の作成は、リスト画面の作成と同じくらいすばやくできます。

リスト内の最初のタスクのタイトルを右クリックし、［Link to (New Screen)］を選択します。

これにより、タスクのタイトルが新しく作成された画面にリンクされます。この新しい画面を使用してタスクを編集しますが、そのためにはフォームが必要です。

1. Formウィジェットを、ツールボックスから新しいモバイル画面の空いている領域にドラッグ&ドロップします。
2. ［Data］タブにあるTodoエンティティを、事前に作成したFormウィジェットにドラッグ&ドロップします。

次に、エンドユーザーが［Save］ボタンを押したときに実行されるロジックを定義します。

1. ［Save］ボタンの空いている領域をダブルクリックして、ボタンに関連するロジックを定義します。これにより、SaveOnClickという名前の新しい画面アクションが作成されます。
2. TodoエンティティのツリーにあるCreateOrUpdateTodoエンティティアクションを、SaveOnClickアクションにあるIfのTrueブランチにドラッグ&ドロップします。SourceプロパティをGetTodoById.List.Currentに設定します。
3. タスクを保存したらメイン画面にリダイレクトされるように、［HomeScreen］画面を［Interface］タブから［End］ノードにドラッグ&ドロップします。

タスクの追加を許可する

以下のとおり、タスクの編集ですでに使用されている画面にリンクすることで、エンドユーザーはリスト画面から新しいタスクを追加できるようになります。

1. ［Interface］タブのツリーにある［HomeScreen］をダブルクリックして、リスト画面を開きます。
2. Iconウィジェットを、ツールボックスから画面の右上にある［Actions］プレースホルダにドラッグ&ドロップし、プラスアイコンを選択します。
3. アイコンを右クリックし、［Link to MainFlow\Todo］を選択します。

タスクの完了を許可する

次に、タスクを完了したものとしてマークする機能を追加しましょう。では、完了したタスクを削除することでこの機能を実装しましょう。

1. リストの項目を選択してからツールバーの［Swipe Left Action］をクリックします。

2. テキストを「Action」から「Done」に置き換えます。

   

3. ［Swipe Left］領域の空いている領域をダブルクリックして、Swipe Left Actionに関連するロジックを定義します。

4. ［Data］タブのTodoエンティティにあるDeleteTodoエンティティアクションを、Swipe Left Actionのフローにドラッグ&ドロップします。プロパティIDをGetTodos.List.Current.Todo.Idに設定します。

5. Refresh Dataツールをアクションのフローにドラッグ&ドロップし、GetTodos Aggregateを選択して、画面で使用可能なタスクを更新します。

   

モバイルアプリをテストする

この段階でモバイルアプリをテストします。 ［1-Click Publish］ボタンをクリックし、ご利用の環境にアプリケーションをパブリッシュします。

アプリケーションがデプロイされたら、［ Open in Browser］ボタンをクリックして、アプリケーションをブラウザでテストします（ChromeとSafariがサポートされています）。

ご利用のモバイルデバイスでアプリケーションをテストするには、「OutSystems Nowを使用してデバイス上でモバイルアプリをプレビューする」をご覧ください。