現場演示
這個真實的例子展示了 Craft 文件和 Lovable 應用程式的樣子:
演示版已停用寫入操作
使用Craft和Lovable構建
自己動手構建
在這個例子中,我們將使用 Craft 來管理所有植物及其需求,並使用 Lovable 創建一個漂亮的儀表板,讓我們一眼就知道哪些植物需要關注。
步驟1 — 建立您的文檔
我們的植物保存在 Craft 文件的集合中。對於每株植物,我們都會添加以下資訊:植物的類型、所在房間、需要澆水的頻率以及上次澆水的時間。當然,您可以調整集合,並添加任何您想要追蹤的植物資訊。
使用範本為您的工廠儀表板建立一個包含集合的新文件:
步驟2 — 啟用 API 存取
為您的文件啟用 API 存取以取得可用於讀取和新增文件的唯一 URL。

步驟1
Open the “Imagine” tab

步驟2
Click “Add Your First API Connection”

步驟3
Configure your API connection with a name.

步驟4
Click “Add Document” and select your Plant Dashboard document.

步驟5
The API URL that will be used to interact with your document is now displayed at the top

步驟6
Click the “Download AI Bundle” button. This will download a folder containing the API documentation and the content of your doc.
請記住,任何知道 API URL 的人都可以讀取和寫入您的文檔,包括任何有權訪問您的植物儀表板網站的人。
步驟3 — 以 Lovable 為基礎
現在讓我們繼續在 Lovable 上建立儀表板的實際網站。對於上面顯示的範例網站,我們使用了以下提示:
我想創建儀表板來追蹤我的植物。 __
資訊儲存於 Craft 中。請查看附件,以了解我的 Craft 文件的當前狀態範例,以及用於獲取和更新我的植物的 API 資訊。請仔細閱讀 API 文件並遵循其說明。 __
儀表板應顯示我的植物概覽,並為每株植物配小插圖,並顯示進度指示器以檢查何時需要澆水。我希望能夠按手動順序、按房間順序和按緊急程度設定植物,緊急程度為預設。 __
每株植物都應該有一個「已澆水」按鈕,用於在 Craft 中更新它們上次澆水的日期。
前往 Lovable 並將提示貼到提示框中。請務必附上我們剛剛下載的文檔 AI Bundle。

Lovable 開始工作,分析 bundle 的內容,了解文件結構以及如何使用 API。然後,它開始根據我們的提示建立網站。

現在我們有一個漂亮的網站,可以展示我們的植物及其健康狀況,並讓我們直接從儀表板將它們標記為已澆水!









