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

# AWS App Studio の開始方法
<a name="getting-started"></a>

以下の入門チュートリアルでは、App Studio で最初のアプリケーションを構築する方法について説明します。
+ **推奨**: 生成 AI を使用して作成するアプリを記述し、そのアプリとそのリソースを自動的に作成するには、「」を参照してください[チュートリアル: AI を使用してアプリを生成する](getting-started-tutorial-ai.md)。
+ 空のアプリケーションから構築を開始するには、「」を参照してください[チュートリアル: 空のアプリから構築を開始する](getting-started-tutorial-empty.md)。

# チュートリアル: AI を使用してアプリを生成する
<a name="getting-started-tutorial-ai"></a>

AWS App Studio には、アプリケーション構築を高速化するために、サービス全体で生成 AI 機能が含まれています。このチュートリアルでは、自然言語を使用してアプリを記述することで、AI を使用してアプリを生成する方法について説明します。

AI を使用してアプリケーションを生成することは、アプリケーションのリソースの多くが自動的に作成されるため、構築を開始するのに最適な方法です。通常、空のアプリケーションから開始するよりも、既存のリソースを使用して生成されたアプリケーションから構築を開始する方がはるかに簡単です。

**注記**  
ブログ記事[「Build enterprise-grade applications with natural language using AWS App Studio (preview)](https://aws.amazon.com/blogs/aws/build-custom-business-applications-without-cloud-expertise-using-aws-app-studio-preview)」を参照してください。このブログ記事には、管理者関連のリソースの設定と設定に関する情報も含まれていますが、必要に応じてアプリケーションの構築に関する部分に進むことができます。

App Studio が AI でアプリを生成すると、説明したアプリに合わせた以下のリソースでアプリが作成されます。
+ **ページとコンポーネント**: *コンポーネント*は、アプリケーションのユーザーインターフェイスの構成要素です。テーブル、フォーム、ボタンなどのビジュアル要素を表します。各コンポーネントには独自のプロパティセットがあり、特定の要件に合わせてコンポーネントをカスタマイズできます。*ページ*はコンポーネントのコンテナです。
+ **自動化**: *自動化*を使用して、アプリケーションの動作を管理するロジックとワークフローを定義します。たとえば、オートメーションを使用して、データテーブル内の行を作成、更新、読み取り、または削除したり、Amazon S3 バケット内のオブジェクトとやり取りしたりできます。これらを使用して、データ検証、通知、他のシステムとの統合などのタスクを処理することもできます。
+ **エンティティ**: データは、アプリケーションを強化する情報です。生成されたアプリケーションは、テーブルに似た*エンティティ*を作成します。エンティティは、顧客、製品、注文など、保存して操作する必要があるさまざまなタイプのデータを表します。App Studio コネクタを使用して、これらのデータモデルを AWS サービスや外部 APIsなどのさまざまなデータソースに接続できます。

**Contents**
+ [前提条件](#getting-started-tutorial-ai-prerequisites)
+ [ステップ 1: アプリケーションを作成する](#getting-started-tutorial-ai-steps-create-application)
+ [ステップ 2: 新しいアプリケーションを調べる](#getting-started-tutorial-ai-steps-explore)
  + [ページとコンポーネントを調べる](#getting-started-tutorial-ai-steps-explore-pages)
  + [オートメーションとアクションを調べる](#getting-started-tutorial-ai-steps-explore-automations)
  + [エンティティを使用してデータを探索する](#getting-started-tutorial-ai-steps-explore-data-entities)
+ [ステップ 3: アプリケーションをプレビューする](#getting-started-tutorial-ai-steps-preview)
+ [次の手順](#getting-started-tutorial-ai-next-steps)

## 前提条件
<a name="getting-started-tutorial-ai-prerequisites"></a>

開始する前に、以下の前提条件を確認して完了してください。
+  AWS App Studio へのアクセス。詳細については、「[AWS App Studio のセットアップとサインイン](setting-up.md)」を参照してください。
+ オプション: を確認して[AWS App Studio の概念](concepts.md)、App Studio の重要な概念を理解します。

## ステップ 1: アプリケーションを作成する
<a name="getting-started-tutorial-ai-steps-create-application"></a>

アプリを生成する最初のステップは、作成するアプリを App Studio の AI アシスタントに記述することです。生成されるアプリケーションを確認し、必要に応じて反復処理してから生成できます。

**AI を使用してアプリを生成するには**

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

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

1. **AI でアプリを生成する**を選択します。

1. **アプリ名** フィールドで、アプリの名前を指定します。

1. **「データソースの選択**」ダイアログボックスで、**「スキップ**」を選択します。

1. 生成するアプリの定義を開始するには、テキストボックスに記述するか、サンプルプロンプトで**カスタマイズ**を選択します。アプリを記述すると、App Studio はアプリの要件と詳細を生成して確認できるようにします。これには、ユースケース、ユーザーフロー、データモデルが含まれます。

1. テキストボックスを使用して、要件と詳細に満足するまで、必要に応じてアプリを反復処理します。

1. アプリを生成して構築を開始する準備ができたら、**アプリの生成**を選択します。

1. オプションで、新しいアプリ内を移動する方法を詳しく説明した短い動画を表示できます。

1. **アプリの編集** を選択して、アプリの開発環境に入ります。

## ステップ 2: 新しいアプリケーションを調べる
<a name="getting-started-tutorial-ai-steps-explore"></a>

開発環境には、次のリソースがあります。
+ アプリケーションを表示または編集するために使用するキャンバス。キャンバスは、選択したリソースに応じて変わります。
+ キャンバスの上部にあるナビゲーションタブ。タブについては、次のリストで説明します。
  + **ページ**: ページとコンポーネントを使用してアプリケーションの UI を設計する場所。
  + **自動化**: 自動化でアクションを使用してアプリケーションのビジネスロジックを定義する場所。
  + **データ**: エンティティ、そのフィールド、サンプルデータ、データアクションを定義して、アプリケーションのデータモデルを定義する場所。
  + **アプリ設定**: エンドユーザーのページのロールベースの可視性を定義するために使用するアプリロールなど、アプリの設定を定義する場所。
+ 表示しているタブに基づくリソースを含む左側のナビゲーションメニュー。
+ **Pages** and **Automations** タブで、選択したリソースのリソースとプロパティを一覧表示する右側メニュー。
+ ビルダーの下部に警告とエラーを表示するデバッグコンソール。生成されたアプリにエラーが存在する可能性があります。これは、Amazon Simple Email Service で E メールを送信するなどのアクションを実行するために設定されたコネクタを必要とするオートメーションが原因である可能性があります。
+ AI **チャットウィンドウで AI** ビルダーアシスタントからコンテキストに応じたヘルプを取得します。

**ページ**、**オートメーション**、**データ**タブを詳しく見てみましょう。

### ページとコンポーネントを調べる
<a name="getting-started-tutorial-ai-steps-explore-pages"></a>

**ページ**タブには、生成されたページとそのコンポーネントが表示されます。

各ページは、ユーザーが操作するアプリケーションのユーザーインターフェイス (UI) の画面を表します。これらのページには、必要なレイアウトと機能を作成するためのさまざまなコンポーネント (テーブル、フォーム、ボタンなど) があります。

左側のナビゲーションメニューを使用して、ページとそのコンポーネントを表示する時間を取ります。ページまたはコンポーネントを選択すると、右側のメニューで**プロパティ**を選択できます。

### オートメーションとアクションを調べる
<a name="getting-started-tutorial-ai-steps-explore-automations"></a>

**Automations** タブには、生成されたオートメーションとそのアクションが表示されます。

自動化は、データエントリの作成、表示、更新、削除、E メールの送信、APIs や Lambda 関数の呼び出しなど、アプリのビジネスロジックを定義します。

左側のナビゲーションメニューを使用して、自動化を表示する時間を取ります。オートメーションを選択すると、右側の Properties メニューでその**プロパティ**を表示できます。オートメーションには、次のリソースが含まれています。
+ 自動化は、アプリのビジネスロジックの構成要素である個々のアクションで構成されます。オートメーションのアクションは、左側のナビゲーションメニュー、または選択したオートメーションのキャンバスで表示できます。アクションを選択すると、右側の Properties メニューでその**プロパティ**を表示できます。
+ オートメーションパラメータは、データをオートメーションに渡す方法です。パラメータはプレースホルダーとして機能し、自動化の実行時に実際の値に置き換えられます。これにより、毎回異なる入力で同じオートメーションを使用できます。
+ 自動化出力は、自動化の結果を設定する場所です。デフォルトでは、オートメーションには出力がないため、オートメーションの結果をコンポーネントや他のオートメーションで使用するには、ここで定義する必要があります。

詳細については、「[オートメーションの概念](automations-concepts.md)」を参照してください。

### エンティティを使用してデータを探索する
<a name="getting-started-tutorial-ai-steps-explore-data-entities"></a>

**データ**タブには、生成されたエンティティが表示されます。

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

左側のナビゲーションメニューからエンティティを選択して、生成されたエンティティを表示します。以下の詳細を確認できます。
+ **設定**タブには、エンティティ名とそのフィールドが表示され、エンティティの列を表します。
+ **データアクション**タブには、エンティティで生成されたデータアクションが表示されます。コンポーネントとオートメーションは、データアクションを使用してエンティティからデータを取得できます。
+ **サンプルデータ**タブには、開発環境でアプリをテストするために使用できるサンプルデータが表示されます (外部サービスと通信しません）。環境の詳細については、「[アプリケーション環境](applications-publish.md#application-environments)」を参照してください。
+ **Connection** タブには、エンティティが接続されている外部データソースに関する情報が表示されます。App Studio は、DynamoDB テーブルを使用するマネージドデータストレージソリューションを提供します。詳細については、「[AWS App Studio のマネージドデータエンティティ](managed-data-entities.md)」を参照してください。

## ステップ 3: アプリケーションをプレビューする
<a name="getting-started-tutorial-ai-steps-preview"></a>

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

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

**テスト用にアプリケーションをプレビューするには**

1. App Builder の右上隅で、**プレビュー**を選択します。

1. アプリのページを操作します。

## 次の手順
<a name="getting-started-tutorial-ai-next-steps"></a>

最初のアプリを作成したら、次のステップをいくつか示します。
+ イメージを含む別の入門チュートリアルについては、ブログ記事[「Build enterprise-grade applications with natural language using AWS App Studio (preview)](https://aws.amazon.com/blogs/aws/build-custom-business-applications-without-cloud-expertise-using-aws-app-studio-preview)」を参照してください。
+ アプリは、コネクタを使用してデータを送受信したり、外部サービス ( サービスとサードパーティー AWS サービスの両方) と通信したりします。コネクタの詳細と、アプリケーションを構築するようにコネクタを設定する方法を学ぶ必要があります。コネクタを管理するには**、管理者**ロールが必要です。詳細については[コネクタを使用して App Studio を他の サービスに接続する](connectors.md)を参照してください。
+ アプリケーションをエンドユーザーにプレビュー、公開、最終的に共有する方法の詳細については、「」を参照してください[アプリケーションのプレビュー、公開、共有](applications-preview-publish-share.md)。
+ 実践的な経験のために生成したアプリを探索して更新し続けます。
+ アプリケーションの構築の詳細については、「」を参照してください[Builder ドキュメント](builder-documentation.md)。具体的には、以下のトピックを参考にしてください。
  + [オートメーションアクションのリファレンス](automations-actions-reference.md)
  + [コンポーネントリファレンス](components-reference.md)
  + [Amazon Simple Storage Service とコンポーネントおよびオートメーションの操作](automations-s3.md)
  + [セキュリティに関する考慮事項と緩和策](security-considerations-and-mitigations.md)

# チュートリアル: 空のアプリから構築を開始する
<a name="getting-started-tutorial-empty"></a>

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

**注記**  
このチュートリアルでは、空のアプリケーションから始めて、アプリケーションをゼロから構築する方法について詳しく説明します。通常、作成するアプリケーションの説明を提供することで、AI を使用してアプリケーションとそのリソースを生成する方がはるかに迅速かつ簡単です。詳細については、「[チュートリアル: AI を使用してアプリを生成する](getting-started-tutorial-ai.md)」を参照してください。

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`エンティティを作成します。このエンティティは、顧客名、会議日、アジェンダ、参加者など、関連するすべての会議リクエスト情報を保存するためのデータ構造を表します。このデータモデルはアプリケーションの基盤として機能し、構築するさまざまなコンポーネントとオートメーションを強化します。

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

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

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

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

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

**Contents**
+ [前提条件](#getting-started-tutorial-prerequisites)
+ [ステップ 1: アプリケーションを作成する](#getting-started-tutorial-steps-create-application)
+ [ステップ 2: エンティティを作成してアプリのデータを定義する](#getting-started-tutorial-steps-create-entity)
  + [マネージドエンティティを作成する](#getting-started-tutorial-steps-create-managed-entity)
  + [エンティティにフィールドを追加する](#getting-started-tutorial-steps-add-fields)
+ [ステップ 3: ユーザーインターフェイス (UI) とロジックを設計する](#getting-started-tutorial-steps-user-interface)
  + [会議リクエストダッシュボードページを追加する](#getting-started-tutorial-steps-user-interface-create-page)
  + [会議リクエストの作成ページを追加する](#getting-started-tutorial-steps-user-interface-add-create-customer-page)
+ [ステップ 4: アプリケーションをプレビューする](#getting-started-tutorial-steps-preview)
+ [ステップ 5: アプリケーションを**テスト**環境に公開する](#getting-started-tutorial-steps-publish)
+ [次の手順](#getting-started-tutorial-next-steps)

## 前提条件
<a name="getting-started-tutorial-prerequisites"></a>

開始する前に、以下の前提条件を確認して完了してください。
+  AWS App Studio へのアクセス。詳細については、「[AWS App Studio のセットアップとサインイン](setting-up.md)」を参照してください。
+ オプション: を確認して[AWS App Studio の概念](concepts.md)、App Studio の重要な概念を理解します。
+ オプション: JavaScript 構文などの基本的なウェブ開発概念の理解。
+ オプション: AWS サービスに精通していること。

## ステップ 1: アプリケーションを作成する
<a name="getting-started-tutorial-steps-create-application"></a>

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

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

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

1. **アプリ名**フィールドに、 などのアプリの名前を入力します**Customer Meeting Requests**。

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

1. **次へ** をクリックして先に進みます。

1. (オプション): App Studio でのアプリ構築の簡単な概要については、ビデオチュートリアルをご覧ください。

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

## ステップ 2: エンティティを作成してアプリのデータを定義する
<a name="getting-started-tutorial-steps-create-entity"></a>

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

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

### マネージドエンティティを作成する
<a name="getting-started-tutorial-steps-create-managed-entity"></a>

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

エンティティを作成するときは、**プライマリキー**フィールドを定義する必要があります。プライマリキーは、エンティティ内の各レコードまたは行の一意の識別子として機能します。これにより、各レコードをあいまいさなく簡単に識別して取得できます。プライマリキーは、次のプロパティで構成されます。
+ プライマリキー名: エンティティのプライマリキーフィールドの名前。
+ プライマリキーデータ型: プライマリキーフィールドのタイプ。App Studio では、サポートされているプライマリキータイプはテキストの場合は**文字列**、数値の場合は**浮動**小数点です。テキストプライマリキー ( *meetingName* など) には**文字列**のタイプがあり、数値プライマリキー ( *meetingId* など) には **Float** のタイプがあります。

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

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

1. 上部のバーメニューから**データ**を選択します。

1. **\$1 エンティティ**の作成を選択します。

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

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

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

1. **プライマリキーデータ型**で、**Float** を選択します。

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

### エンティティにフィールドを追加する
<a name="getting-started-tutorial-steps-add-fields"></a>

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

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

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

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

  1. 顧客の名前を表すフィールドを以下の情報とともに追加します。
     + **表示名**: **Customer name**
     + **システム名**: **customerName**
     + **データ型**: **String**

  1. 次の情報を含む会議の日付を表すフィールドを追加します。
     + **表示名**: **Meeting date**
     + **システム名**: **meetingDate**
     + **データ型**: **DateTime**

  1. 会議アジェンダを表すフィールドを以下の情報とともに追加します。
     + **表示名**: **Agenda**
     + **システム名**: **agenda**
     + **データ型**: **String**

  1. 次の情報を使用して、会議の参加者を表すフィールドを追加します。
     + **表示名**: **Attendees**
     + **システム名**: **attendees**
     + **データ型**: **String**

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

**サンプルデータをエンティティに追加するには**

1. バナーで**サンプルデータ**タブを選択します。

1. **「さらにサンプルデータを生成する**」を選択します。

1. **[保存]** を選択します。

必要に応じて、バナーで **Connection** を選択して、コネクタと作成された DynamoDB テーブルの詳細を確認します。

## ステップ 3: ユーザーインターフェイス (UI) とロジックを設計する
<a name="getting-started-tutorial-steps-user-interface"></a>

### 会議リクエストダッシュボードページを追加する
<a name="getting-started-tutorial-steps-user-interface-create-page"></a>

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

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

**デフォルトページの名前を変更するには**

1. 上部のバーナビゲーションメニューで、**ページ**を選択します。

1. 左側のパネルで Page**Page1**をダブルクリックし、名前を に変更して **MeetingRequestsDashboard**Enter ****キーを押します。

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

**会議リクエストダッシュボードページにテーブルコンポーネントを追加するには**

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

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

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

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

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

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

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

### 会議リクエストの作成ページを追加する
<a name="getting-started-tutorial-steps-user-interface-add-create-customer-page"></a>

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

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

1. 上部のバナーで、**ページ**を選択します。

1. 左側のパネルで \$1 **追加** を選択します。

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

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

**会議リクエストの作成ページでエンティティからフォームを自動的に生成するには**

1. 右側の**コンポーネント**メニューで、**フォーム**コンポーネントを見つけてキャンバスにドラッグします。

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

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

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

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

1. 右側のプロパティパネルの**「トリガー**」セクションで \$1 **追加**を選択します。

1. **「ナビゲート**」を選択します。

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

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

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

**から `MeetingRequestsDashboard`に移動するボタンを追加するには `CreateMeetingRequest`**

1. 上部のバナーで、**ページ**を選択します。

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

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

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

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

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

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

   1. **アイコン**ドロップダウンで \$1 **Plus **を選択します。

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

      1. **Triggers** セクションで \$1 **Add** を選択します。

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

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

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

      1. **移動タイプの**ドロップダウンで、**ページ**を選択します。

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

## ステップ 4: アプリケーションをプレビューする
<a name="getting-started-tutorial-steps-preview"></a>

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

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

**テスト用にアプリケーションをプレビューするには**

1. App Builder の右上隅で、**プレビュー**を選択します。

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

## ステップ 5: アプリケーションを**テスト**環境に公開する
<a name="getting-started-tutorial-steps-publish"></a>

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

**アプリケーションをテスト環境に公開するには**

1. App Builder の右上隅で、**発行**を選択します。

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

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

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

1. (オプション) 準備ができたら、**共有**を選択し、プロンプトに従って他のユーザーにアクセスを許可できます。
**注記**  
アプリを共有するには、管理者がエンドユーザーグループを作成している必要があります。

テスト後、再度**発行**を選択してアプリケーションを本番環境に昇格させます。さまざまなアプリケーション環境の詳細については、「」を参照してください[アプリケーション環境](applications-publish.md#application-environments)。

## 次の手順
<a name="getting-started-tutorial-next-steps"></a>

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

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

1. アプリケーションの構築の詳細については、「」を参照してください[Builder ドキュメント](builder-documentation.md)。具体的には、以下のトピックを参考にしてください。
   + [オートメーションアクションのリファレンス](automations-actions-reference.md)
   + [コンポーネントリファレンス](components-reference.md)
   + [Amazon Simple Storage Service とコンポーネントおよびオートメーションの操作](automations-s3.md)
   + [セキュリティに関する考慮事項と緩和策](security-considerations-and-mitigations.md)

   さらに、以下のトピックには、チュートリアルで説明されている概念に関する詳細が含まれています。
   + [アプリケーションのプレビュー、公開、共有](applications-preview-publish-share.md)
   + [App Studio アプリでのエンティティの作成](data-entities-create.md)