如何建立食譜應用程式：食譜、份量調整、購物清單及搜尋

食譜應用程式是一個食譜集合，具備良好的搜尋功能、清晰的烹飪頁面，以及幾項廚房小幫手功能：按人數調整份量、換算單位，以及把食譜轉為購物清單。無論是家庭食譜集、附有食譜卡的美食網誌，還是提供給其他人使用的食譜產品，最關鍵的決定是把食材儲存為結構化數據，而不是一段文字。做好這一點，其他實用功能就很容易實現。

決定你要做的是哪一種食譜應用程式

四種類型的數據模型都是相同的。不同之處在於誰可以撰寫內容，以及頁面是否需要被搜尋引擎找到。

食譜應用程式需要什麼

頁面

• 食譜列表或首頁：卡片，包括相片、標題、總時間及標籤。
• 食譜頁面：烹飪時使用的畫面，包括相片、份量控制、食材列表、編號步驟及備註。
• 搜尋及篩選：按名稱、按食材、按標籤（素食、快速、甜點）、按時間。
• 新增及編輯食譜：一個可逐行輸入食材的表格。
• 收藏集：「平日快餐」、「聖誕」、「媽媽的食譜」。
• 購物清單：由一份或多份食譜生成。

數據

• 食譜：標題、slug、描述、份量、準備時間、烹調時間、相片、標籤、來源、作者、可見性。
• 食材：食譜、排列次序、份量、單位、名稱、備註（「切碎」）、選填分組（「醬汁用料」）。
• 步驟：食譜、排列次序、文字、選填計時器。
• 收藏集及收藏集項目。
• 購物清單項目：使用者、食材名稱、份量、單位、是否已勾選。

份量應儲存為數字。「1½ 杯」應儲存為份量 1.5、單位 cup。保留一份應用程式能辨識的單位列表，同時容許自由文字（「一小撮」、「按口味調整」），這類項目則不設份量。

權限

個人食譜集需要一個帳戶及私密食譜。家庭食譜集需要可供多人共同編輯的收藏集。公開網站需要供讀者瀏覽（無須登入）及供編輯者使用。社群則需要會員擁有自己的食譜，並需要版主可以隱藏任何內容。

令人想用下去的功能

按人數調整份量。 把每個份量乘以新人數 ÷ 原本人數。顯示合理的分數（¾ 杯，而不是 0.75 杯），並把尷尬的數量作適當四捨五入。有些東西不會按比例改變，例如調味、烘焙時間、烤盤尺寸，因此在食譜上加一句簡短的備註會有幫助。

單位換算。 提供公制與美制的切換。只在同類單位之間換算（體積與體積、重量與重量）；要把杯裝麵粉換算成克，則需要每種食材的密度資料，那是之後才加入的功能，不應列入第一版。

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

購物清單。 合併多份食譜的食材，把相同食材及相同單位合併，按貨架區域分組，並讓人在超市中逐一勾選。

按食材搜尋。 「用雞肉和韭蔥可以做什麼？」之所以可行，是因為食材是獨立的紀錄。參閱如何為應用程式加入搜尋功能。

公開食譜頁面的搜尋引擎優化

如果希望人們透過搜尋找到你的食譜，每個食譜都需要有自己的網址、獨特的標題及描述，而且食譜內容必須在頁面載入時就已存在於 HTML 中，而不是之後由 JavaScript 繪製。請加入 schema.org Recipe 結構化數據，包括食材、步驟、時間、份量及圖片，並從資料庫自動產生，確保與頁面內容一致。只有在真實用家留下評分的情況下，才可加入評分。我們的結構化數據介紹解釋了這些標記，而 Google 的說明文件列出了它使用的欄位。

範例第一條提示

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

建立步驟

1. 以示範數據建立食譜頁面。 先把烹飪畫面在手機上做到出色，再處理其他事項。
2. 結構化食材輸入。 一個表格，每行分別是份量、單位、食材及備註。同時提供「貼上列表」欄位，把文字分成多行，然後讓下廚的人修正任何切錯的地方。
3. 份量及單位調整。 用特別的情況測試：一杯的三分之一加倍、一隻雞蛋減半、「鹽按口味」。
4. 搜尋及篩選。
5. 購物清單。 把「2 個洋蔥」和「1 個洋蔥」合併為「3 個洋蔥」；單位不同的則分開列出，不要自行猜測換算。
6. 登入及分享。 參閱如何為應用程式加入登入功能。
7. 相片。 上載時縮小尺寸，令頁面保持快速。
8. 公開頁面及標記（如果是公開的）。然後發布，並檢查食譜頁面的原始碼。

常見錯誤

• 食材儲存為單一文字欄位。 你會失去按比例調整份量、購物清單及按食材搜尋的功能。
• 螢幕上顯示小數。 「0.333 杯」無法使用，應顯示分數。
• 食譜前有大段的故事。 在你自己的應用程式中，食材應該靠近頁面頂部；如果有故事，可加上「跳至食譜」的連結。
• 使用原始大小的相片。 手機拍攝的相片很大，應縮小及壓縮。
• 公開複製其他網站的食譜。 為個人使用而匯入是一回事；公開重新發布別人的文字和相片則是另一回事。
• 結構化數據中的虛假評分。 搜尋引擎可能會因誤導性的標記而降低排名。
• 把營養數字呈現為精確數值。 如果你計算營養資料，應說明這是估算，並註明數據來源。

何時使用現成的食譜應用程式較好

如果你只想儲存及烹調自己的食譜，現成的食譜管理應用程式已經可以從網站匯入、跨裝置同步，並支援離線使用。至於美食網誌，網誌平台配合食譜卡外掛，已經能處理標記及列印版面。

當你需要那些產品做不到的功能時，就值得自行建立，例如為企業而設、附有成本計算或過敏原追蹤的食譜系統，為大家庭而設、按你自己結構編排的共用食譜集，與餐單或超市相連的食譜，或完全符合你品牌設計的食譜。如果你真正的目標是規劃每週的餐單，請接著閱讀如何建立餐單規劃應用程式。

用 Mythex 建立

在 Mythex 中，你在聊天中描述食譜應用程式，然後在即時預覽的手機尺寸畫面中檢查烹飪畫面，並把它發布到一個公開網址，讓家人或讀者可以在手機上打開，並加入主畫面。當應用程式需要時，Mythex 會為食譜及食材加入專用的 Postgres 資料庫，並為相片加入檔案儲存空間。登入功能採用自備方式：由你選擇驗證方式，代理商負責接駁。在 Pro 方案中，Mythex 還可以把它包裝成 Android 及 iPhone 應用程式，並送交 Google Play 內部測試及 TestFlight。如果是公開的食譜網站，可參閱美食網誌範本，以及我們有關建立手機友善網頁應用程式的指南。

常見問題