最初のWebアプリを作成する

Webアプリを作成する

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

Service Studioで、ContactPortalという新しいWebアプリを作成してから、アプリケーション用の新しいモジュールを作成します。

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

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

今回の例でこれを行うには、以下の連絡先情報が含まれているExcelのサンプルファイルを使用します。

• Name
• Job title
• Phone
• Email

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

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

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

連絡先をリスト表示する画面を作成する

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

右上の［Interface］タブを開き、［UI Flows］の下にある［MainFlow］をダブルクリックします。次に、Contactエンティティを［Data］タブから［Main Editor］ウィンドウのHomeScreenにドラッグ&ドロップします。

これにより、HomeScreenが更新されて一度に50件の連絡先が表示され、ページ数と検索機能が表示されます。

連絡先を作成・編集する画面を作成する

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

Contactエンティティを［Data］タブから［Main Editor］ウィンドウの空いている領域にドラッグ&ドロップします。

これにより、新規レコードの作成や既存のレコードの編集を行うフォームのある新しい画面が作成されます。また、OutSystemsは、レコードを自動的に作成および編集するサーバー側のロジックも追加します。

連絡先の削除を許可する

連絡先を管理するアプリケーションを実装するには、削除機能が不足しています。それでは、実装しましょう！

［ContactDetail］画面をダブルクリックして開きます。Buttonウィジェットを、ツールボックスから画面の［Cancel］ボタンの右側にドラッグ&ドロップし、新しいボタンを右クリックして［Link to New 'DeleteContact' Screen Action］を選択します。

OutSystemsは、連絡先レコードを削除するサーバー側のロジックを追加し、ボタンをそのロジックに関連付けます。

Webアプリのパブリッシュ

あとは、アプリケーションを稼働するだけです。 ［1-Click Publish］ボタンをクリックし、ご利用の環境にアプリケーションをパブリッシュします。

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