ライブデモ
この実際の例は、CraftドキュメントとLovableアプリの外観を示しています
このデモでは書き込み操作が無効になっています
CraftとLovableで構築
自分で構築する
この例では、Craftを使用してすべての植物とその管理要件を管理し、Lovableで美しいダッシュボードを作成します。これにより、どの植物に注意が必要か一目で把握できます。
ステップ1 — ドキュメントを作成
植物は、Craftドキュメントのコレクションで管理されています。各植物について、種類、置かれている部屋、水やりの頻度、前回の水やり日時などの情報を追加します。もちろん、コレクションを調整し、植物について追跡したい項目用のフィールドを追加することも可能です。
テンプレートを使用して、植物ダッシュボード用のコレクションを含む新しいドキュメントを作成してください
ステップ2 — APIアクセスを有効にする
ドキュメントのAPIアクセスを有効化すると、ドキュメントの読み取りや追加に使用できる固有のURLを取得できます。
ステップ1
ステップ2
ステップ3
ステップ4
ステップ5
ステップ6
ステップ3 — Lovableで構築
それでは、Lovable上でダッシュボードの実際のウェブサイトを構築していきましょう。上記のサンプルサイトでは、以下のプロンプトを使用しました
植物の状態を把握するためのダッシュボードを作成したいと考えています。
情報はCraftに保存されています。現在のCraftドキュメントの状態例と、植物の取得・更新に使用すべきAPIに関する情報は添付ファイルをご確認ください。APIドキュメントを注意深く読み、指示に従ってください。
ダッシュボードには植物の概況を表示し、各植物に小さなイラストと、水やりのタイミングを確認できる進捗インジケーターを配置してください。手動順序・部屋別・緊急度別（デフォルトは緊急度）で並べ替えられるようにします。
各植物には「水やり済み」ボタンを設置し、Craft内の最終水やり日付を更新できるようにしてください。
Lovable にアクセスし、プロンプトをプロンプトボックスに貼り付けてください。先ほどダウンロードしたドキュメント用の AI バンドルを必ず添付してください。
Lovableは作業を開始し、バンドルの内容を分析してドキュメント構造とAPIの使用方法を理解します。その後、指定された指示に従ってウェブサイトの構築を開始します。
これで、植物とその健康状態を表示し、ダッシュボードから直接水やり済みとマークできる美しいサイトが完成しました！
