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

「ブラウズクラス」機能テンプレートは、特にクラス、コーチングセッション、賃貸物件、その他さまざまな商品やサービスをカテゴリに分類して表示する必要があるアプリに最適な追加機能です！おそらく、あなたは提供物を簡単にナビゲートできるアプリで展示し、潜在的な顧客がビジネスについて詳しく見て学ぶ機会を作りたいと考えているかもしれません。このテンプレートはその役に立ちます。

## 画面概要

📚 **手順画面**

クイックなヒント、ヘルプドキュメント、および興味を持つかもしれない関連テンプレートでテンプレートの概要を素早く把握します。*この画面はいつでも削除できます。*

### ユーザ画面

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

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

以下は、「ブラウズクラス」機能テンプレートで利用可能なユーザ画面の概要です：

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

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

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

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

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

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

## データベース

「ブラウズクラス」機能テンプレートには、サンプルデータが含まれたデータベースが付属しています。各Adaloデータベースにはコレクションが含まれ、各コレクションには関連するプロパティが付属しています。コレクション間の必要な関係も設定されています。

{% hint style="warning" %}
**データベースに関する重要な注意:**

機能テンプレートからコレクションやプロパティを削除すると、アプリの機能に影響する可能性があります。

機能テンプレートにコレクションやプロパティを追加しても、アプリの機能には影響しません。
{% endhint %}

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

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

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

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

* Email \[テキスト] — アプリのサインアップ時に収集されるユーザのメールアドレス。
* Password \[暗号化] — ユーザのパスワード。このフィールドは、管理者を含む誰にも表示されません。
* ユーザー名 \[Text] — アプリのサインアップ時に収集できるユーザーのユーザー名。
* フルネーム \[Text] — サインアップ時に収集されるユーザーのフルネーム。
* プロフィール写真 \[Image] — ユーザーの写真。アプリのサインアップ時に収集できます。
* 管理者？ \[True/False] — ユーザーがアプリの管理者かどうかを示すプロパティ。

#### 🧱 カテゴリ

カテゴリコレクションには、クラスが属する各種カテゴリに関する情報が含まれています。

* 名前 \[Text] — カテゴリの名前を指します。
* 短い説明 \[Text] — カテゴリの簡潔な一行説明。
* 長い説明 \[Text] — カテゴリの詳細な説明で、詳細画面で使用できます。
* クラス \[One-to-Many Relationship] — 1つのカテゴリは複数のクラスに属することができますが、各クラスは1つのカテゴリにのみ属します。

#### 🧑🏾‍🏫 クラス

クラスコレクションには、顧客やクライアントが関心を持つ可能性のある各クラスに関するすべての情報が含まれています。

* 名前 \[Text] — クラスのタイトル。
* プライマリ画像 \[Image] — クラスに関連する画像。
* カテゴリ \[Many-to-One Relationship] — 多くのクラスが1つのカテゴリを持つことができますが、各クラスは1つのカテゴリにのみ属します。
* 短い説明 \[Text] — クラスの簡単な説明。
* 長い説明 \[Text] — 詳細画面で使用できるクラスの詳細な説明。
* 開始時間 \[日付と時刻] — クラスが始まる日時。
* 終了時間 \[日付と時刻] — クラスが終了する日時。
* 合計時間 \[Number] — クラスにかかる合計時間。
* 場所 \[Text] — クラスが行われる場所の住所。
* 価格 \[Number] — クラスに参加するための費用。
* 可能な総スポット数 \[Number] — クラスが満員になる前に顧客やクライアント向けに開いているスポットの数。
* 利用可能な残りスポット \[Number] — 人々がサインアップし始めた後に残っているスポットの数。
* 公開可能？ \[True/False] — クラスがユーザーに表示可能かどうか。TRUE は表示可能を意味します。

## レイアウト設定

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

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

### レイアウト概要

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

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0a98b0144050234aedd2b5e3fb1441156412f400%2FLayoutOverview1.png?alt=media" alt="" width="311"><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%2FLayoutoverview2.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%2FLayoutoverview3.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%2FLayoutoverview4.png?alt=media" alt="" width="347"><figcaption></figcaption></figure>

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

## 使用例

* スキルレベルやプランタイプで分類されたトレーニングセッションを提供するフィットネスインストラクター。
* 様々な媒体を通じて幅広いクラスを提供するアートインストラクター。
* 異なる業界のさまざまなプロフェッショナルにカウンセリングを行うライフコーチ。
* メニューを使いやすく表示したいレストラン。
* その他多数！
