# 概要 - スクリーン、データベース、レイアウト設定、ユースケース

ブラウズ、購入、およびクラス管理機能テンプレートは、製品、サービス、または体験を販売する方法をお探しの場合に、アプリに最適な追加機能です。各画面は、製品やサービスの購入を容易にするだけでなく、それらの購入の管理や作成も容易にするために最適なユーザーエクスペリエンスに設計されています。

### 画面概要

📚 **インストラクション画面**

テンプレートの概要を素早く把握できるように、ヒント、ヘルプドキュメント、および興味を引く関連テンプレートが表示されます。*この画面はいつでも削除できます。*

### ユーザー画面

*これらの画面は、アプリの顧客やクライアントが対話する画面です*。

「ユーザー画面」セクションの各画面には、ビルダーで制御されるテキストと画像コンポーネントのバリエーションが含まれており、他のコンポーネントは動的で、データベースで見つかる情報によって表示されます。

ブラウズ、購入、およびクラス管理テンプレートで利用可能なユーザー画面の概要は以下の通りです:

📝 **カテゴリリスト画面**

この画面には、商品やサービスを分類するための画像、タイトル、説明、およびカテゴリのリストが含まれています。

📔 **クラスリスト画面**

カテゴリ内で提供されるクラスにダイブします。この画面には、ユーザー向けのカスタマイズ可能なパンくずナビゲーションとカスタムリストがあります。

🔎 **クラス詳細画面**

クラス詳細画面で、クラスに関連するすべての情報を表示します。場所、時間、可用性から価格、画像など、この画面にはすべてが含まれています！

💰 **購入画面**

Stripeアカウントを設定して、エンドユーザーの購入プロセスをシームレスに管理します。

✅ **おめでとう画面**

ユーザーが購入を成功させたときに通知します。

### 管理者画面

*管理者画面は、それらの画面を表示および対話できるユーザーにアクセス可能です。*

「管理者画面」セクションの各画面は、ビルダーで制御されるテキストと画像コンポーネントのバリエーションで構成されており、他のコンポーネントはデータベースで見つかる情報によって制御されます。

ブラウズ、購入、およびクラス管理テンプレートで利用可能な管理者画面の概要は以下の通りです:

👩🏾‍💻 **管理者クリニック管理画面**

この画面から提供されるクリニックやクラスを確認し、それぞれの提供を追加、編集、または削除するオプションがあります。

🏦 **管理者取引画面**

ダッシュボードビューですべての取引を確認および監視し、関連するデータテーブルを表示します。

⚒️ **クリニック作成画面**

アプリで提供する新しいクラスを作成する管理者がクリニックを追加します。

🔄 **クリニック編集画面**

管理者が既存のクリニックやクラスを更新するための画面です。

***

### データベース

ブラウズ、購入、およびクラス管理機能テンプレートには、サンプルデータが含まれたデータベースが付属しています。各Adaloデータベースには、関連するプロパティを持つコレクションが含まれています。コレクション間の必要な関係も設定されています。 **データベースに関する重要な注意事項:**

Feature Templateからコレクションまたはプロパティを**削除**すると、アプリの機能に影響を与える可能性があります。

Feature Templateにコレクションまたはプロパティを**追加**すると、アプリの機能に影響を与えません。

以下は含まれるコレクションとそれらのプロパティの概要です。コレクション名は太字で表示され、説明が含まれています。プロパティには、名前、プロパティタイプ（角かっこ内）、説明が含まれています。

#### 基本的なコレクションとプロパティ:

#### 👥 **ユーザー**

**ユーザーコレクションは、すべてのAdaloアプリに自動的に付属しています。このコレクションには、アプリを使用するすべてのユーザーに関連する情報が格納されます。この情報は、ユーザーがアプリの使用を開始する際に最初に収集されます。**

* Email \[テキスト] — ユーザーのメールアドレス。サインアップ時に作成されます。
* Password \[暗号化されたテキスト] — ユーザーのパスワード。サインアップ時に作成されます。
* Username \[テキスト] — ユーザーのユーザー名。サインアップ時に作成されます。
* Full Name \[テキスト] — ユーザーの名前。サインアップ時に作成されます。
* Transactions \[1対多の関係] — ユーザーとその取引の間の関連フィールド。各ユーザーは多くの取引を持つことができますが、ユニークな取引は1人のユーザーにのみ属することができます。
* Profile Photo \[画像] — ユーザーの画像。サインアップ時に作成されます。
* Admin? \[True / False] — ユーザーの権限を認識するためのプロパティ。ユーザーが管理者である場合、このプロパティはtrueに設定され、インターフェースにチェックマークが付けられます。

#### 🧑🏾‍🏫 **クラス**

**クラスコレクションには、提供するクラスに関する情報が格納されます。この情報は、Adaloインターフェース（手動または.csvアップロードを介して）または「管理者がクリニックを作成」または「管理者がクリニックを編集」画面から追加できます。**

* Name \[テキスト] — クラスのタイトル。これはクラスを外部から参照する方法です。
* Primary Image \[画像] — クラスの表示に使用する画像。
* Category \[1対多の関係] — クラスが属するカテゴリ。多くのクラスが1つのカテゴリに属する関連プロパティですが、各クラスは1つのカテゴリしか持つことができません。
* Short Description \[テキスト] — クラスの簡単な説明。通常、1文です。
* Long Description \[テキスト] — より詳細なクラスの説明。すべての重要な詳細を含めます。
* Starting Time \[日付と時刻] — クラスが開始する日時。
* Ending Time \[日付と時刻] — クラスが終了する日時。
* Total Time \[数値] — 各個々のクラスが続く時間の数。
* Location \[テキスト] — クラスが行われる場所。
* Price \[数値] — クラスの費用。
* Total Possible Spots \[数値] — クラスに登録できる人数。
* Available Spots Remaining \[数値] — クラスの登録可能な残りスポットの合計数。最初は、この数値は「Total Possible Spots」の値と一致する必要があります。
* トランザクション \[多対1の関係] — これらはクラスに関連付けられたトランザクションです。これは、多くのトランザクションが1つのクラスに属し、各トランザクションがそのクラスに固有であるリレーションフィールドです。
* 公開可能？ \[True / False] — 顧客に表示されるべきかどうかを認識するためのプロパティです。クラスを表示する必要がある場合は、このプロパティをTRUEに設定します。表示しない場合は、プロパティをFALSEに設定します。

#### 💰 トランザクション

**トランザクションコレクションには、行われた購入に関する情報が含まれています。この情報は、ユーザーが「購入」画面でプロセスを完了した後に作成されます。**

* 名前 \[テキスト] — トランザクションに付けられた名前。テンプレートを最初にダウンロードした際、名前は次の形式で入力されます: ユーザーのフルネーム — クラスの名前
* ステータス \[テキスト] — トランザクションの結果。
* 購入したクラス \[1対多の関係] — 1つのトランザクションが1つのクラスを購入するリレーションフィールド。ただし、1つのクラスには複数のトランザクションが存在できます。
* 購入者 \[1対多の関係] — 1人のユーザーが1つのクラスを購入したことを表示するリレーションフィールド。ただし、1つのクラスには複数のユーザーがいます。
* 費用 \[数値] — クラスの価格。

#### 📚 カテゴリ

**カテゴリコレクションには、クラスが属する各カテゴリに関する情報が含まれています。この情報は、Adaloインターフェース（手動または.csvアップロードを介して）で追加できます。**

* 名前 \[テキスト] — カテゴリの名前。
* 短い説明 \[テキスト] — カテゴリの簡単な説明。通常、1文の長さです。
* 長い説明 \[テキスト] — ユーザーにとって関連するすべての詳細を含むカテゴリの長い説明。
* クラス \[1対多の関係] — 1つのカテゴリが複数のクラスに属するリレーションフィールド。ただし、1つのクラスは1つのカテゴリしか持つことができません。

***

### レイアウト設定

ブラウズ、購入、および管理機能テンプレートの各画面は、レスポンシブデザインを使用して作成されています。画面はどのデバイスやタブレットでも見栄えがします。

ほとんどの画面はカスタムレイアウトで設計されています。画面に新しいコンポーネントを追加すると、他の画面サイズに影響を与える場合があります。

#### レイアウトの概要:

異なる画面サイズのレイアウトを表示または編集するには — 画面タイトルをクリックしてドロップダウンを表示します。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0a98b0144050234aedd2b5e3fb1441156412f400%2FLayout%20Settings.png?alt=media" alt=""><figcaption></figcaption></figure>

このテンプレートのデフォルトビューはデスクトップです。ビルダーで1つの画面のサイズを変更しても、キャンバス上の他の画面のサイズは変更されません。

**非表示コンポーネント**

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0c0c6290c48169cd05f8be4e76ce60f303a0cad0%2FHidden%20Components.png?alt=media" alt="" width="476"><figcaption></figcaption></figure>

各ビューには、デスクトップには表示されないがモバイルで表示されるコンポーネントがある場合があります。これらは左側パネルでグレーアウトされ、アイコンで示されています。 別の方法で、どのデバイスコンポーネントが表示されているかを確認するには、こちらの「レイアウト」タブをご覧ください：

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-2bbea52ddce833a1d274220fbf1f4148195cd901%2FVisibility%20Settings.png?alt=media" alt="" width="540"><figcaption></figcaption></figure>

**カスタムレイアウト**

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5b867757643ee4aa22bb0c83ad9a711eabdb00f8%2FCustom%20Layout.png?alt=media" alt="" width="347"><figcaption></figcaption></figure>

一部のコンポーネントには、画面サイズに基づいたカスタムレイアウトが付属しています。これらの設定を表示するには、レイアウトタブを確認し、カスタムレイアウト設定までスクロールしてください。

***

### 使用例

コレクション名、プロパティ名、および使用されるグラフィックをわずかに調整することで、このテンプレートは以下に限らず、さまざまな方法で使用できます：

* 個別のクラスや個人トレーニングセッションを販売するフィットネスインストラクター。
* 幅広いスキルレベルのクリニックを販売するピクルボールクラブ。
* 様々なカテゴリーでデジタルトレーニングを販売するライフコーチ。
* 複数の対面ブートキャンプを提供するアートインストラクター。
