如何打造食譜 App：食譜、份量換算、購物清單與搜尋

食譜 App 是一個食譜的集合，具備好用的搜尋、清楚的烹飪頁面，以及幾個廚房小幫手：份量換算、單位轉換，以及把食譜變成購物清單。無論它是你的家庭食譜本、附食譜卡的美食部落格，還是給他人使用的食譜產品，讓一切順利運作的關鍵決定只有一個：把食材存成結構化資料，而不是一段文字。做對這一點，實用的功能就會變得容易實現。

先決定食譜 App 的類型

四種類型的資料模型都相同。不同的只是誰可以寫入，以及頁面是否需要被搜尋引擎找到。

食譜 App 需要什麼

頁面

• 食譜列表或首頁：以卡片呈現，包含照片、標題、總時間與標籤。
• 食譜頁面：烹飪時使用的檢視畫面，包含照片、份量控制、食材清單、編號步驟與備註。
• 搜尋與篩選：依名稱、依食材、依標籤（素食、快速、甜點）、依時間。
• 新增與編輯食譜：一個可以逐行處理食材的表單。
• 收藏集：「平日晚餐」、「聖誕節」、「媽媽的食譜」。
• 購物清單：由一份或多份食譜產生。

資料

• 食譜：標題、slug、說明、份量、準備時間、烹煮時間、照片、標籤、來源、作者、可見性。
• 食材：所屬食譜、順序、數量、單位、名稱、備註（「切細末」）、選填的分組（「醬汁用」）。
• 步驟：所屬食譜、順序、文字內容、選填的計時器。
• 收藏集與收藏集項目。
• 購物清單項目：使用者、食材名稱、數量、單位、是否已勾選。

數量應該以數字儲存。「1 ½ 杯」應存為數量 1.5、單位 cup。請保留一份應用程式能理解的單位清單，並允許自由文字（「一小撮」、「依口味調整」），這類內容則不含數量。

權限

個人食譜本只需要一個帳號與私人食譜。家庭食譜本則需要可以共同編輯的共享收藏集。公開網站需要讓讀者無須登入即可瀏覽，並為編輯者提供登入。社群則需要會員擁有自己的食譜，而版主可以隱藏任何內容。

讓人願意使用的功能

份量換算。 把每個數量乘以「新份量 ÷ 原始份量」。顯示合理的分數（¾ 杯，而不是 0.75 杯），並把尷尬的數字做適當四捨五入。有些東西不會等比例變化，例如調味、烘焙時間、烤盤尺寸，因此在食譜上附一段簡短的備註會很有幫助。

單位轉換。 提供公制與美制的切換。體積與重量只能在各自的類型內換算；要把「杯」的麵粉換成公克，需要每種食材的密度資料，這是之後的功能，不是第一版就要做的。

烹飪模式。 大字體、一次一個步驟或可捲動的清單搭配勾選框，並在烹飪時讓螢幕保持開啟（許多裝置的瀏覽器支援螢幕喚醒鎖）。這是最讓人感激的功能。

購物清單。 合併多份食譜的食材，把同一食材與同一單位的項目合併，依賣場區域分類，並讓人在採買時勾選已購買的項目。

依食材搜尋。 「用雞肉和韭蔥可以做什麼？」之所以能做到，正是因為食材是獨立的紀錄。請參閱如何為你的 App 加入搜尋。

公開食譜頁面的 SEO

如果希望人們能透過搜尋找到你的食譜，每份食譜都需要自己的網址、獨特的標題與說明，而且食譜內容要在頁面載入時就存在於 HTML 中，而不是之後才由 JavaScript 繪製。請加入 schema.org Recipe 結構化資料（食材、步驟、時間、份量、圖片），並由你的資料庫產生，確保它始終與頁面一致。只有在真實使用者於頁面上留下評分時，才加入評分資料。我們的結構化資料是什麼指南說明了這些標記，Google 自己的文件也列出了它所使用的欄位。

範例第一個提示詞

打造一個家庭食譜 App，以手機為優先設計。每份食譜包含標題、照片、份量、準備時間與烹煮時間、標籤、食材，以及編號步驟。每項食材都作為獨立的紀錄儲存，包含數量、單位、名稱與備註，並可分組到「醬汁用」等選填的區段。食譜頁面提供份量控制，可以等比例調整所有數量，並顯示易讀的分數；另有公制與美制的單位切換，以及烹飪模式，包含大字體、步驟勾選框，並讓螢幕保持開啟。可依食譜名稱或食材搜尋，並可依標籤與總時間篩選。使用者可以把食譜加入收藏集，也可以把一份或多份食譜加入購物清單，清單會合併相同的食材，並讓我勾選已購買的項目。家庭成員以電子郵件與密碼登入，共享一本大家都能編輯的食譜本。所有資料存於資料庫，照片存於檔案儲存空間。加入六份範例食譜。

逐步打造

1. 以範例資料打造食譜頁面。 在其他功能之前，先讓烹飪畫面在手機上表現出色。
2. 結構化的食材輸入。 每一行都是數量、單位、食材與備註的表單。同時提供「貼上清單」的文字框，把文字分割成多行，然後讓下廚的人修正分割錯誤的地方。
3. 份量與單位換算。 用棘手的情況測試：兩倍的三分之一杯、一顆雞蛋減半、「依口味加鹽」。
4. 搜尋與篩選。
5. 購物清單。 把「2 顆洋蔥」和「1 顆洋蔥」合併為「3 顆洋蔥」；單位不同的則分開保留，不要自行猜測換算。
6. 登入與分享。 請參閱如何為你的 App 加入登入功能。
7. 照片。 上傳時就縮小尺寸，確保頁面維持快速。
8. 公開頁面與標記（若為公開網站）。然後發布，並檢查食譜頁面的原始碼。

常見錯誤

• 食材存成一個文字欄位。 你會失去份量換算、購物清單與依食材搜尋的功能。
• 螢幕上顯示小數。 「0.333 杯」無法使用。請顯示分數。
• 食譜前面先是一大段人生故事。 在你自己的 App 上，把食材放在靠近頂部的位置；若有故事，可加一個「跳到食譜」的連結。
• 全尺寸照片。 手機拍的照片很大；請縮小並壓縮。
• 公開複製其他網站的食譜。 為個人使用而匯入是一回事；公開重新發布他人的文字與照片，則是另一回事。
• 結構化資料中的假評分。 搜尋引擎可能會因誤導性的標記而施以處罰。
• 把營養數字呈現為精確值。 如果你是自行計算營養資訊，請註明這是估計值，並說明資料來源。

何時現成的食譜 App 是更好的選擇

如果你只想儲存並烹調自己的食譜，現成的食譜管理 App 已經能從網站匯入、跨裝置同步，並支援離線使用。若是經營美食部落格，部落格平台搭配的食譜卡外掛，已經內建標記與列印檢視。

當你需要的東西是這些工具做不到的，就應該自行打造：為企業設計、具備成本計算或過敏原追蹤的食譜系統；為大家庭量身設計、自有結構的共享食譜本；與餐點計畫或商店相連的食譜；或是完全屬於你自己風格的設計。如果規劃每週餐點才是真正的目標，接下來請閱讀如何打造餐點規劃 App。

用 Mythex 打造

在 Mythex 中，你用對話描述食譜 App，在即時預覽的手機尺寸框架中檢查烹飪畫面，然後把它發布到一個公開網址，讓家人或讀者可以在手機上打開，並加到主畫面。Mythex 會為食譜與食材加入專用的 Postgres 資料庫，並在需要時為照片加入檔案儲存空間。登入採用自備驗證：由你選擇方式，AI 代理負責接上。在 Pro 方案中，Mythex 也可以將它包裝為 Android 與 iPhone App，並送到 Google Play 內部測試與 TestFlight。若是公開的食譜網站，可參考美食部落格範本，以及我們的如何打造行動版網頁 App指南。

常見問題