チュートリアル: 空のアプリケーションから構築を開始する - AWS App Studio

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

チュートリアル: 空のアプリケーションから構築を開始する

このチュートリアルでは、 AWS App Studio を使用して内部の Customer Meeting Request アプリケーションを構築します。App Studio でアプリケーションを構築する方法について説明し、実際のユースケースと実践的な例に焦点を当てます。また、データ構造、UI 設計、アプリケーションのデプロイの定義についても説明します。

注記

このチュートリアルでは、空のアプリケーションから始めて、アプリケーションをゼロから構築する方法について詳しく説明します。通常、AI を使用すると、作成するアプリケーションの説明を指定することで、アプリケーションとそのリソースを生成しやすくなります。詳細については、「チュートリアル: AI を使用してアプリを生成する」を参照してください。

App Studio でアプリケーションを構築する方法を理解するための鍵は、コンポーネント、オートメーションデータコネクタの 4 つの主要概念と、それらがどのように連携するかを理解することです。

  • コンポーネント: コンポーネントは、アプリケーションのユーザーインターフェイスの構成要素です。テーブル、フォーム、ボタンなどのビジュアル要素を表します。各コンポーネントには独自のプロパティセットがあり、特定の要件に合わせてカスタマイズできます。

  • 自動化: 自動化を使用すると、アプリケーションの動作を管理するロジックとワークフローを定義できます。オートメーションを使用して、データテーブル内の行を作成、更新、読み取り、または削除したり、Amazon S3 バケット内のオブジェクトとやり取りしたりできます。また、データ検証、通知、他のシステムとの統合などのタスクを処理するためにも使用できます。

  • データ: データはアプリケーションを強化する情報です。App Studio では、エンティティと呼ばれるデータモデルを定義できます。エンティティは、カスタマーミーティングのリクエスト、アジェンダ、参加者など、保存して操作する必要があるさまざまなタイプのデータを表します。App Studio コネクタを使用して、これらのデータモデルを AWS サービスや外部 APIs などのさまざまなデータソースに接続できます。

  • コネクタ: App Studio は、Aurora、DynamoDB、Amazon Redshift などの AWS サービスを含む、幅広いデータソースとの接続を提供します。データソースには、Salesforce などのサードパーティーサービスや、OpenAPI または汎用 API コネクタを使用するその他の多くのサービスも含まれます。App Studio コネクタを使用すると、これらのエンタープライズグレードのサービスや外部アプリケーションからのデータや機能をアプリケーションに簡単に組み込むことができます。

チュートリアルを進めながら、コンポーネント、データ、オートメーションの主要な概念がどのように組み合わされて、内部の Customer Meeting Request アプリケーションを構築するかを説明します。

以下は、このチュートリアルで実行する内容を説明する大まかなステップです。

  1. データから始める: 多くのアプリケーションはデータモデルから始まるため、このチュートリアルもデータから始めます。Customer Meeting Request アプリを構築するには、まずMeetingRequestsエンティティを作成します。このエンティティは、顧客名、会議日、スケジュール、参加者など、関連するすべての会議リクエスト情報を保存するためのデータ構造を表します。このデータモデルはアプリケーションの基盤として機能し、構築するさまざまなコンポーネントとオートメーションを強化します。

  2. ユーザーインターフェイス (UI) を作成する: データモデルが整うと、チュートリアルでユーザーインターフェイス (UI) の構築をガイドします。App Studio では、ページを追加し、コンポーネントを追加して UI を構築します。テーブル詳細ビューカレンダーなどのコンポーネントを会議リクエストダッシュボードページに追加します。これらのコンポーネントは、MeetingRequestsエンティティに保存されているデータを表示して操作するように設計されています。これにより、ユーザーはカスタマー会議を表示、管理、スケジュールできます。また、会議リクエストの作成ページを作成します。このページには、データを収集するためのフォームコンポーネントと、送信するためのボタンコンポーネントが含まれています。

  3. 自動化でビジネスロジックを追加する: アプリケーションの機能を強化するには、ユーザーインタラクションを有効にするように一部のコンポーネントを設定します。例としては、ページに移動したり、MeetingRequestsエンティティに新しい会議リクエストレコードを作成したりすることが挙げられます。

  4. 検証と式による機能強化: データの整合性と正確性を確保するために、検証ルールをフォームコンポーネントに追加します。これにより、新しい会議リクエストレコードを作成するときに、ユーザーが完全で有効な情報を提供できるようになります。また、式を使用してアプリケーション内のデータを参照および操作し、ユーザーインターフェイス全体で動的およびコンテキスト情報を表示できます。

  5. プレビューとテスト: アプリケーションをデプロイする前に、アプリケーションを完全にプレビューしてテストすることができます。これにより、コンポーネント、データ、オートメーションがすべてシームレスに連携していることを確認できます。これにより、ユーザーはスムーズで直感的に操作できます。

  6. アプリケーションを公開する: 最後に、完成した内部 Customer Meeting Request アプリケーションをデプロイし、ユーザーがアクセスできるようにします。App Studio のローコードアプローチにより、プログラミングに関する広範な専門知識を必要とせずに、組織の特定のニーズを満たすカスタムアプリケーションを構築できます。

前提条件

開始する前に、以下の前提条件を確認して完了してください。

  • AWS App Studio へのアクセス。詳細については、「AWS App Studio のセットアップとサインイン」を参照してください。

  • オプション: を確認してAWS App Studio の概念、App Studio の重要な概念を理解します。

  • オプション: JavaScript 構文などの基本的なウェブ開発概念の理解。

  • オプション: AWS サービスに精通していること。

ステップ 1: アプリケーションを作成する

  1. App Studio にサインインします。

  2. 左側のナビゲーションで、ビルダーハブを選択し、+ アプリの作成を選択します。

  3. [最初から開始] を選択します。

  4. アプリ名 フィールドに、 などのアプリの名前を指定しますCustomer Meeting Requests

  5. データソースまたはコネクタを選択するように求められたら、このチュートリアルではスキップを選択します。

  6. [Next] (次へ) をクリックして先に進みます。

  7. (オプション): App Studio でアプリケーションを構築する方法の概要については、ビデオチュートリアルをご覧ください。

  8. アプリの編集 を選択すると、App Studio アプリビルダーに移動します。

ステップ 2: エンティティを作成してアプリケーションのデータを定義する

エンティティは、データベース内のテーブルと同様に、アプリケーションのデータを保持するテーブルを表します。アプリケーションのユーザーインターフェイス (UI) やオートメーションがデータソースに直接接続する代わりに、最初にエンティティに接続します。エンティティは、実際のデータソースと App Studio アプリの間の仲介として機能し、データを管理およびアクセスするための単一の場所を提供します。

エンティティを作成するには 4 つの方法があります。このチュートリアルでは、App Studio マネージドエンティティを使用します。

マネージドエンティティを作成する

マネージドエンティティを作成すると、App Studio が管理する対応する DynamoDB テーブルも作成されます。App Studio アプリでエンティティが変更されると、DynamoDB テーブルが自動的に更新されます。このオプションを使用すると、サードパーティーのデータソースを手動で作成、管理、接続したり、エンティティフィールドからテーブル列へのマッピングを指定したりする必要はありません。

エンティティを作成するときは、プライマリキーフィールドを定義する必要があります。プライマリキーは、エンティティ内の各レコードまたは行の一意の識別子として機能します。これにより、各レコードをあいまいさなく簡単に識別して取得できます。プライマリキーは、次のプロパティで構成されます。

  • プライマリキー名: エンティティのプライマリキーフィールドの名前。

  • プライマリキーデータ型: プライマリキーフィールドのタイプ。App Studio では、サポートされているプライマリキータイプはテキストの場合は文字列、数値の場合は浮動小数点です。テキストのプライマリキー ( meetingName など) は文字列型で、数値のプライマリキー ( meetingId など) は Float 型です。

プライマリキーは、データの整合性を強制し、データの重複を防ぎ、効率的なデータの取得とクエリを可能にするため、エンティティの重要なコンポーネントです。

マネージドエンティティを作成するには
  1. 上部のバーメニューからデータを選択します。

  2. + エンティティの作成を選択します。

  3. App Studio マネージドエンティティの作成を選択します。

  4. エンティティ名 フィールドに、エンティティの名前を指定します。このチュートリアルでは、MeetingRequests と入力します。

  5. プライマリキー フィールドに、エンティティのプライマリキー列に付けるプライマリキー名ラベルを入力します。このチュートリアルでは、requestID と入力します。

  6. プライマリキーのデータ型で、浮動小数点を選択します。

  7. [エンティティの作成] を選択します。

エンティティにフィールドを追加する

フィールドごとに、表示名を指定します。これは、アプリユーザーに表示されるラベルです。表示名にはスペースと特殊文字を含めることができますが、エンティティ内で一意である必要があります。表示名は、 フィールドのわかりやすいラベルとして機能し、ユーザーがその目的を簡単に識別して理解するのに役立ちます。

次に、 フィールドを参照するためにアプリケーションによって内部的に使用される一意の識別子であるシステム名を指定します。システム名は簡潔で、スペースや特殊文字は使用できません。システム名を使用すると、アプリケーションはフィールドのデータを変更することができます。これは、アプリケーション内の フィールドの一意の参照ポイントとして機能します。

最後に、文字列 (テキスト)、ブール値 (true/false)、日付、10 進数、浮動小数点数、整数、DateTimeなど、 フィールドに保存するデータの種類を最もよく表すデータ型を選択します。適切なデータ型を定義すると、データの整合性が確保され、フィールドの値の適切な処理と処理が可能になります。例えば、会議リクエストに顧客名を保存する場合は、テキスト値に対応するStringデータ型を選択します。

MeetingRequests エンティティにフィールドを追加するには
  • + 追加フィールドを選択して、次の 4 つのフィールドを追加します。

    1. 顧客の名前を表すフィールドを次の情報で追加します。

      • 表示名: Customer name

      • システム名: customerName

      • データ型: String

    2. 次の情報を使用して、会議の日付を表すフィールドを追加します。

      • 表示名: Meeting date

      • システム名: meetingDate

      • データ型: DateTime

    3. 次の情報を使用して、会議の予定を表すフィールドを追加します。

      • 表示名: Agenda

      • システム名: agenda

      • データ型: String

    4. 次の情報を使用して、会議の参加者を表すフィールドを追加します。

      • 表示名: Attendees

      • システム名: attendees

      • データ型: String

サンプルデータをエンティティに追加して、公開する前にアプリケーションをテストおよびプレビューできます。最大 500 行の模擬データを追加することで、実際のデータを信頼したり、外部サービスに接続したりすることなく、実際のシナリオをシミュレートし、アプリケーションがさまざまなタイプのデータをどのように処理して表示するかを調べることができます。これにより、開発プロセスの早い段階で問題や不整合を特定して解決できます。これにより、実際のデータを処理する際に、アプリケーションが意図したとおりに機能することが保証されます。

サンプルデータをエンティティに追加するには
  1. バナーでサンプルデータタブを選択します。

  2. サンプルデータをさらに生成を選択します。

  3. [Save] を選択します。

オプションで、バナーで接続 を選択して、コネクタの詳細と作成された DynamoDB テーブルを確認します。

ステップ 3: ユーザーインターフェイス (UI) とロジックを設計する

会議リクエストダッシュボードページを追加する

App Studio では、各ページは、ユーザーが操作するアプリケーションのユーザーインターフェイス (UI) の画面を表します。これらのページ内で、テーブル、フォーム、ボタンなどのさまざまなコンポーネントを追加して、目的のレイアウトと機能を作成できます。

新しく作成されたアプリケーションにはデフォルトのページがあるため、シンプルな会議リクエストダッシュボードページとして使用する新しいアプリケーションを追加する代わりに、そのアプリケーションの名前を変更します。

デフォルトページの名前を変更するには
  1. 上部のナビゲーションメニューで、ページを選択します。

  2. 左側のパネルで PagePage1をダブルクリックし、名前を に変更して MeetingRequestsDashboardEnter キーを押します。

次に、会議リクエストの表示に使用されるテーブルコンポーネントをページに追加します。

会議リクエストダッシュボードページにテーブルコンポーネントを追加するには
  1. 右側のコンポーネントパネルで、テーブルコンポーネントを見つけてキャンバスにドラッグします。

  2. キャンバス内のテーブルを選択して選択します。

  3. 右側のプロパティパネルで、次の設定を更新します。

    1. 鉛筆アイコンを選択して、テーブルの名前を に変更しますmeetingRequestsTable

    2. ソースドロップダウンで、エンティティを選択します。

    3. データアクションドロップダウンで、作成したエンティティ (MeetingRequests) を選択し、 + データアクションを追加を選択します。

  4. プロンプトが表示されたら、getAll を選択します。

    注記

    getAll データアクションは、指定されたエンティティからすべてのレコード (行) を取得する特定のタイプのデータアクションです。たとえば、getAll データアクションをテーブルコンポーネントに関連付けると、テーブルは接続されたエンティティのすべてのデータを自動的に入力し、各レコードをテーブルの行として表示します。

会議リクエスト作成ページを追加する

次に、エンドユーザーが会議リクエストの作成に使用するフォームを含むページを作成します。また、MeetingRequestsエンティティにレコードを作成する送信ボタンを追加し、エンドユーザーをMeetingRequestsDashboardページに戻します。

会議リクエストの作成ページを追加するには
  1. 上部のバナーで、ページを選択します。

  2. 左側のパネルで + 追加を選択します

  3. 右側のプロパティパネルで、鉛筆アイコンを選択し、ページの名前を に変更しますCreateMeetingRequest

ページが追加されたら、エンドユーザーが情報を入力してMeetingRequestsエンティティに会議リクエストを作成するために使用するフォームをページに追加します。App Studio には、既存のエンティティからフォームを生成する方法が用意されています。これにより、エンティティのフィールドに基づいてフォームフィールドが自動的に入力され、フォーム入力を使用してエンティティにレコードを作成するための送信ボタンも生成されます。

会議リクエストの作成ページでエンティティからフォームを自動的に生成するには
  1. 右側のコンポーネントメニューで、フォームコンポーネントを見つけてキャンバスにドラッグします。

  2. フォームの生成を選択します。

  3. ドロップダウンからエンティティを選択しますMeetingRequests

  4. [Generate] (生成) を選択します。

  5. キャンバスの送信ボタンを選択して選択します。

  6. 右側のプロパティパネルのトリガーセクションで + 追加を選択します。

  7. 移動 を選択します。

  8. 右側のプロパティパネルで、アクション名を などのわかりやすい名前に変更しますNavigate to MeetingRequestsDashboard

  9. ナビゲーションタイプをページに変更します。移動ドロップダウンで、 を選択しますMeetingRequestsDashboard

会議リクエストの作成ページとフォームができたので、このページからこのページに簡単に移動できるようにしてMeetingRequestsDashboard、ダッシュボードを確認するエンドユーザーが会議リクエストを簡単に作成できるようにしたいと考えています。次の手順に従って、MeetingRequestsDashboardページに移動するボタンを作成しますCreateMeetingRequest

から に移動するボタンを追加するには MeetingRequestsDashboardCreateMeetingRequest
  1. 上部のバナーで、ページを選択します。

  2. MeetingRequestsDashboard ページを選択します。

  3. 右側のコンポーネントパネルで、ボタンコンポーネントを見つけてキャンバスにドラッグし、テーブルの上に置きます。

  4. 新しく追加されたボタンを選択して選択します。

  5. 右側のプロパティパネルで、次の設定を更新します。

    1. 鉛筆アイコンを選択して、ボタンの名前を に変更しますcreateMeetingRequestButton

    2. ボタンラベル: Create Meeting Request。これは、エンドユーザーに表示される名前です。

    3. アイコンドロップダウンで + Plus を選択します。

    4. エンドユーザーをMeetingRequestsDashboardページに移動するトリガーを作成します。

      1. トリガー セクションで、 + 追加 を選択します。

      2. アクションタイプで、ナビゲーションを選択します。

      3. 先ほど作成したトリガーを選択して設定します。

      4. アクション名で、 などのわかりやすい名前を指定しますNavigateToCreateMeetingRequest

      5. ナビゲーションタイプのドロップダウンで、ページを選択します。

      6. 移動ドロップダウンで、CreateMeetingRequestページを選択します。

ステップ 4: アプリケーションをプレビューする

App Studio でアプリケーションをプレビューして、ユーザーにどのように表示されるかを確認できます。また、この機能を使用してデバッグパネルでログを確認することで、機能をテストすることもできます。

アプリケーションプレビュー環境は、ライブデータの表示をサポートしていません。また、データソースなどのコネクタを持つ外部リソースとの接続もサポートしていません。代わりに、サンプルデータとモック出力を使用して機能をテストできます。

テスト用にアプリケーションをプレビューするには
  1. App Builder の右上隅で、プレビューを選択します。

  2. MeetingRequestsDashboard ページを操作し、テーブル、フォーム、ボタンをテストします。

ステップ 5: アプリケーションをテスト環境に公開する

アプリケーションの作成、設定、テストが完了したら、テスト環境に公開して最終テストを実行し、ユーザーと共有します。

アプリケーションをテスト環境に公開するには
  1. App Builder の右上隅で、発行を選択します。

  2. テスト環境のバージョンの説明を追加します。

  3. SLA に関するチェックボックスを確認して選択します。

  4. [開始] を選択します。発行には最大 15 分かかる場合があります。

  5. (オプション) 準備ができたら、共有を選択し、プロンプトに従って他のユーザーにアクセスを許可できます。

    注記

    アプリを共有するには、管理者がエンドユーザーグループを作成している必要があります。

テスト後、もう一度発行を選択してアプリケーションを本稼働環境に昇格させます。さまざまなアプリケーション環境の詳細については、「」を参照してくださいアプリケーション環境

次のステップ

最初のアプリケーションを作成したら、次のステップをいくつか示します。

  1. チュートリアルアプリの構築を継続します。これで、データ、一部のページ、オートメーションが設定されたので、ページを追加したり、コンポーネントを追加したりして、アプリケーションの構築の詳細を確認することができます。

  2. アプリケーションの構築の詳細については、「」を参照してくださいBuilder ドキュメント。具体的には、以下のトピックが役立ちます。

    さらに、以下のトピックには、チュートリアルで説明されている概念に関する詳細が含まれています。