プラントダッシュボード

この例では、Craftを使用してすべての植物とその管理要件を管理し、Lovableで美しいダッシュボードを作成します。これにより、どの植物に注意が必要か一目で把握できます。

ステップ1 — ドキュメントを作成

植物は、クラフトドキュメント内のコレクションで管理されています。各植物について、種類、置かれている部屋、水やりの頻度、前回の水やり日時などの情報を追加します。もちろん、コレクションを調整し、植物について追跡したい項目用のフィールドを追加することも可能です。

テンプレートを使用して、植物ダッシュボード用のコレクションを含む新しいドキュメントを作成してください

プラントダッシュボード

テンプレートをプレビュー

このテンプレートを使用する

ステップ2 — APIアクセスを有効にする

ドキュメントのAPIアクセスを有効化すると、ドキュメントの読み取りや追加に使用できる固有のURLを取得できます。

ステップ1

ドキュメント内で、右上にある「Imagine」ボタンをクリックします。

ステップ2

パネルの下部にある「Enable API」をクリックします。

ステップ3

あなたのドキュメントとやり取りするために使用される API URL が、上部に表示されるようになりました。

ステップ4

「Add Document」から 「Plant Dashboard 」ドキュメントを選択。

ステップ5

このプロジェクトでは、API はあなたのドキュメントへの書き込みだけを行えば十分です。 API の権限を「Write（書き込み）」のみに設定してください。

ステップ6

このプロジェクトでは、「Download AI Bundle」ボタンをクリックしてください。 これにより、API ドキュメントとドキュメントの内容が含まれたフォルダがダウンロードされます。 このフォルダを Lovable にアップロードすることで、Lovable があなたのドキュメントの読み取り方法を理解できるようになります。

ステップ3 — Lovableで構築

それでは、Lovable上でダッシュボードの実際のウェブサイトを構築していきましょう。上記のサンプルサイトでは、以下のプロンプトを使用しました

Lovable にアクセスし、プロンプトをプロンプトボックスに貼り付けてください。先ほどダウンロードしたドキュメント用の AI バンドルを必ず添付してください。

Lovableは作業を開始し、バンドルの内容を分析してドキュメント構造とAPIの使用方法を理解します。その後、指定された指示に従ってウェブサイトの構築を開始します。

これで、植物とその健康状態を表示し、ダッシュボードから直接水やり済みとマークできる美しいサイトが完成しました！