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

従来のWebアプリを作成する

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

Service Studioで、［New Application］をクリックし、［Traditional Web］を選択して「Contact Portal」という名前を付けます。

新しいContact Portalアプリケーションで、ContactPortalという名前のTraditional Webモジュールを作成します。

［Create module］をクリックしてモジュールを作成し、編集のために開きます。

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

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

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

• Name
• Address
• Birth date
• Email

ContactPortalモジュールで、右上の［Data］タブを開きます。Entitiesフォルダを右クリックして［Import New Entities from Excel...］を選択し、サンプルファイルContacts.xlsx（こちらから入手可能）を選択します。

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

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

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

これですべての連絡先をリスト表示する画面を作成できるようになりました。

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

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

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

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

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

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

連絡先の削除を許可する

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

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

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

従来のWebアプリをパブリッシュする

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

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