ハンズオン

最初のアプリを開発する

空のディレクトリから NocoBase アプリを作り、エージェントと顧客管理を開発します。顧客、担当営業、次回フォロー日を記録し、役割に応じて閲覧と変更を制限します。完了すると、サインインして顧客データを操作し、次の要件に進めます。

環境を準備する

  • Node.js 24 以降と pnpm 11。
  • Windows では WSL を使います。以下のコマンドは Bash などの POSIX シェルで実行します。

以下の手順では、データベースサーバーを別途用意する必要がない SQLite を使います。他のデータベースを使う場合は、異なるデータベースでアプリを作成するを参照してください。

アプリの作成はエージェントに任せるか、自分でコマンドを実行するかを選べます。

アプリを作成して起動する

エージェントで作成する

アプリを作成するスキルをインストールし、表示されたらエージェントを選びます。

Bash
npx skills@latest add nocobase/skills-v3 --skill nocobase-create-app -g

エージェントをすでに開いている場合は、新しくインストールしたスキルを使えるよう、新しいセッションを始めます。続いて my-app などの空のディレクトリでエージェントを開き、次を送ります。

プロンプト
この空のディレクトリに、既定のテンプレートと SQLite を使うローカル開発用の NocoBase 3 アプリを作成してください。
起動して、URL と初期のサインイン情報を教えてください。

エージェントはアプリを作成し、設定を生成して起動してから、URL と初期のサインイン情報を伝えます。

自分でコマンドを実行する

アプリを置きたい場所で次を実行します。作成ツールが新しい my-app ディレクトリを作り、依存関係をインストールします。

Bash
PNPM_CONFIG_MINIMUM_RELEASE_AGE=0 pnpm create @nocobase/app@beta my-app --template-tag=beta

NocoBase 3 はベータ版です。PNPM_CONFIG_MINIMUM_RELEASE_AGE=0 は、このコマンドに限って、新しく公開されたバージョンを pnpm がインストールできるようにします。

ディレクトリに入り、設定を生成して確認し、アプリを起動します。

Bash
cd my-app
pnpm nocobase config init --dialect sqlite
pnpm nocobase config check
pnpm dev
  • config init はローカルの config.yml とアプリのシークレットを生成します。SQLite では、データベースを別にインストールする必要はありません。config.yml は Git に入れないでください。
  • config check は起動時と同じように設定を読み込み、問題が見つかれば修正方法を提案します。
  • pnpm dev は開発サーバーを起動し、準備ができると Local: の URL を表示します。このターミナルは開いたままにしてください。閉じるとアプリが停止します。

サインインする

アプリの URL を開き、既定の管理者でサインインします。ユーザー名は nocobase、パスワードは admin123 です。URL をどこで確認するかは、アプリの作成方法によって異なります。

  • エージェントで作成した場合:エージェントが伝えた URL を使います。
  • 手動でコマンドを実行した場合:ターミナルに表示された Local: の URL を使います。

URL には /main/ などのアプリのパスが含まれます。開くときはそのパスを残してください。

サインインするとホームページが表示されます。組み込みの機能と、エージェントに渡せる依頼の例が一覧表示されます。

新しく作成したアプリのホームページ。業務機能を追加する前の状態です。
新しく作成したアプリのホームページ。業務機能を追加する前の状態です。

スクリーンショットは、既定のテンプレート 1.0.0-beta.78 を使ったサンプルアプリのものです。インストールしたバージョンによって画面が異なる場合があります。

最初の業務要件を伝える

作成したアプリのルートディレクトリでエージェントを開き、業務要件を伝えます。

エージェントに次を送ります。

プロンプト
顧客管理を作ってください。項目は名前、連絡先、メモ、営業担当者、次回フォロー日です。顧客のステータスは Lead、Following up、Won です。
顧客の作成、閲覧、編集、削除と、名前での検索、ステータスでの絞り込みができるようにしてください。
営業マネージャーはすべての顧客を管理できます。営業担当者は自分の顧客だけを閲覧でき、そのステータスを更新できます。閲覧専用ユーザーはすべての顧客を閲覧できますが、変更はできません。

伝えるのは業務の内容だけです。何を記録するか、どんな操作があるか、だれが実行できるか。ユーザーと権限の管理、翻訳、テスト、完了報告は、エージェントがプロジェクトのスキルに従って扱います。

設計を確認する

実装の前に、エージェントはページの構成、主な操作、あなたに決めてほしいことを含む設計を示し、確認を求めます。質問に答えて設計を確認すると、開発が始まります。

機能と権限を確認する

開発が終わると、エージェントはテストを実行し、ブラウザーでアプリを確認してスクリーンショットを撮ります。続いて、行ったことと検証できなかったことを報告します。検証にサインインが必要な場合は、自分でサインインするよう求めます。

エージェントが伝えた URL を開きます。サイドバーに Customers が表示されます。顧客を作成し、営業担当者と次回フォロー日を割り当て、ステータスを更新し、検索と絞り込みができます。

ステータス、営業担当者、次回フォロー日、ページネーションのある顧客一覧。
ステータス、営業担当者、次回フォロー日、ページネーションのある顧客一覧。

スクリーンショットはサンプルアプリのものです。同じ依頼でも、毎回異なるレイアウトになる場合があります。

エージェントはユーザーと権限の管理も有効にします。営業担当者ができることを試してみましょう。

  1. System settings → Users でユーザーを追加し、Permission sets で営業のロールを割り当てます。サンプルアプリでは Sales rep という名前です。
  2. 顧客を作成し、営業担当者にこのユーザーを選びます。
  3. そのアカウントでサインインします。一覧にはこのユーザーが担当する顧客だけが表示されるはずです。ステータスは更新できますが、詳細の編集や削除はできません。

営業責任者と閲覧専用のアカウントでも確認します。責任者はすべての顧客を管理でき、閲覧専用ユーザーは全顧客を閲覧できますが、作成、編集、削除はできないことを確かめます。レポートに未検証の項目があれば、次の機能を追加する前に確認します。

改善して開発を続ける

結果が間違っている場合や別のものにしたい場合は、何をして、何が起き、何を期待していたかをエージェントに伝えます。

プロンプト
営業担当者のロールだけを割り当てたアカウントでサインインしましたが、ほかの人が担当する顧客も見えてしまいます。
営業担当者には自分の顧客だけが見えるようにしてください。

名前をクリックすると顧客の詳細が開き、そこで編集するかどうかを決められるようにするなど、操作の変更を依頼することもできます。

次は、アプリのルートで開いているエージェントのセッションで、顧客のフォロー履歴を依頼できます。

プロンプト
顧客にフォロー記録を追加してください。連絡するたびに、営業担当者が日付、方法(電話、訪問、メール)、メモを記録します。
フォロー記録は顧客の詳細に新しい順で表示してください。
営業担当者は自分の顧客にだけフォローを追加できます。営業マネージャーはすべての記録を閲覧できます。閲覧専用ユーザーは閲覧だけができます。
既存の顧客に過去のフォロー記録を追加する必要はありません。

設計を確認してから、営業担当、営業責任者、閲覧専用ユーザーで結果を確認します。大きな要件は、フォロー履歴、商談、見積もり、売上レポートなど、単独で使える機能に分け、ひとつずつ検証します。

継続して守るルールは、「今後、日付はすべて会社のタイムゾーンで扱い、プロジェクトの規約に保存してください」のように依頼します。規約は .agents/rules/ に保存され、AGENTS.md の索引から後続のセッションで参照できます。

CRM サンプルのソースと READMEを参照できます。コードの場所はプロジェクト構成、開発、デプロイ、チームでの協働の進め方は学習の進め方を参照してください。

NocoBase ドキュメントアシスタント

NocoBase について何を知りたいですか?

質問は個別に回答され、過去の質問や回答は参照されません。必要な背景をすべて含めてください。