如何搭建食谱应用：食谱、份量换算、购物清单与搜索

食谱应用是一组食谱，配有良好的搜索、清晰的烹饪页面，以及几个厨房小工具 — 按人份换算、单位转换，以及把食谱变成购物清单。无论它是你的家庭菜谱，是带食谱卡片的美食博客，还是面向他人的食谱产品，有一个决定会让其他一切顺利运转：把食材存储为结构化数据，而不是一段文字。做对这一点，有用的功能就会变得容易实现。

先确定它是哪种食谱应用

这四种类型的数据模型是相同的。不同之处在于谁可以编辑，以及页面是否需要被搜索引擎收录。

食谱应用需要什么

页面

• 食谱列表或首页 — 卡片式展示照片、标题、总时长和标签。
• 食谱页面 — 烹饪视图：照片、份量调节、食材清单、编号步骤、备注。
• 搜索和筛选 — 按名称、按食材、按标签（素食、快手、甜点）、按时长。
• 添加和编辑食谱 — 逐行录入食材的表单。
• 合集 — “工作日晚餐”“圣诞节”“妈妈的食谱”。
• 购物清单 — 由一份或多份食谱生成。

数据

• 食谱 — 标题、slug、描述、份数、备料时间、烹饪时间、照片、标签、来源、作者、可见性。
• 食材 — 所属食谱、顺序、数量、单位、名称、备注（“切碎”）、可选分组（“酱汁部分”）。
• 步骤 — 所属食谱、顺序、文字、可选计时器。
• 合集及合集条目。
• 购物清单条目 — 用户、食材名称、数量、单位、是否已勾选。

数量应使用数字存储。“1 ½ 杯”应存为数量 1.5、单位 杯。维护一份应用能识别的单位列表，同时允许不带数量的自由文本（“一小撮”“按口味添加”）。

权限

个人食谱本需要一个账号和私密食谱。家庭食谱本需要一个可供多人共同编辑的共享合集。面向公众的网站需要读者（无需登录）和编辑者。社区需要会员（各自拥有自己的食谱）以及可以隐藏任何内容的版主。

让人愿意使用的功能

按人份换算。 把每个数量乘以“新份数 ÷ 原份数”。显示合理的分数（显示 ¾ 杯，而不是 0.75 杯），并对不便的数量进行取整。有些东西不是线性缩放的 — 调味料、烘焙时间、锅具尺寸 — 因此在食谱中加一段简短说明会很有帮助。

单位转换。 公制 / 美制切换。在同类单位内转换体积或重量；把面粉的杯数换算成克，则需要每种食材的密度数据，这属于之后的功能，而不是第一版的功能。

烹饪模式。 大字体、逐步显示或带复选框的可滚动列表，并在烹饪时保持屏幕常亮（许多设备的浏览器都支持屏幕常亮锁）。这是用户最感谢的功能。

购物清单。 合并多份食谱中的食材，将相同食材和相同单位合并，按货架区域分组，并让人们在超市里勾选已买的物品。

按食材搜索。 “用鸡肉和韭葱能做什么？”之所以可行，正是因为食材是独立的记录。参见如何为应用添加搜索。

面向公众的食谱页面的 SEO

如果希望人们通过搜索找到你的食谱，每个食谱都需要有自己的 URL、独特的标题和描述，并且食谱内容在页面加载时就已存在于 HTML 中，而不是之后由 JavaScript 绘制。请添加 schema.org Recipe 结构化数据 — 食材、步骤、时长、份数、图片 — 并根据数据库生成，确保始终与页面内容一致。只有当真实用户在页面上留下评分时，才应包含评分。我们的结构化数据入门指南讲解了这些标记，谷歌的官方文档也列出了它使用的字段。

示例第一条提示词

搭建一个家庭食谱应用，优先为手机设计。每份食谱包含标题、照片、份数、备料和烹饪时间、标签、食材和编号步骤。将每种食材作为独立记录存储，包含数量、单位、名称和备注，并可按可选分组（如“酱汁部分”）归类。食谱页面提供份数控制，可按比例缩放所有数量，并显示易读的分数；提供公制 / 美制单位切换；还有烹饪模式，包括大字体、步骤复选框，并在使用时保持屏幕常亮。支持按食谱名称或食材搜索，并可按标签和总时长筛选。用户可以把食谱保存到合集中，也可以把一份或多份食谱加入购物清单，清单会合并相同的食材，并允许我勾选已购买的物品。家庭成员使用邮箱和密码登录，共享一本所有人都可以编辑的食谱本。所有数据保存在数据库中，照片存储在文件存储中。添加六份示例食谱。

分步搭建

1. 使用示例数据搭建食谱页面。 在做其他任何事情之前，先把烹饪视图在手机上做到最好。
2. 结构化食材录入。 每一行都是数量、单位、食材和备注的表单。同时提供一个“粘贴清单”文本框，把文本拆分成多行，然后让厨师修正拆分错误的内容。
3. 换算和单位。 用棘手的情况测试：⅓ 杯加倍、1 个鸡蛋减半、“盐少许”。
4. 搜索和筛选。
5. 购物清单。 将“2 个洋葱”和“1 个洋葱”合并为“3 个洋葱”；单位不同的食材分开保存，而不是去猜测换算。
6. 登录和分享。 参见如何为应用添加登录。
7. 照片。 上传时压缩尺寸，让页面保持快速。
8. 公开页面和标记（如果是公开的）。然后发布，并检查一个食谱页面的源代码。

常见错误

• 把食材存成一个文本字段。 你会失去按人份换算、购物清单和按食材搜索的功能。
• 屏幕上显示小数。 “0.333 杯”没法用。应显示分数。
• 先讲一大段人生故事，再给食谱。 在你自己的应用中，应把食材放在靠上的位置；如果有故事，可以加一个“跳到食谱”的链接。
• 使用全尺寸照片。 手机拍摄的照片很大；请压缩并调整尺寸。
• 公开转载别人网站上的食谱。 为个人使用而导入是一回事；公开转发别人的文字和照片则是另一回事。
• 在结构化数据中伪造评分。 搜索引擎可能会因误导性标记而降低排名。
• 把营养数据当作精确数字呈现。 如果你计算营养成分，请说明这是估算值，并注明数据来源。

什么时候现成的食谱应用更好

如果你只想保存和烹饪自己的食谱，成熟的食谱管理应用已经支持从网站导入、跨设备同步和离线使用。如果是美食博客，带食谱卡片插件的博客平台开箱即可处理标记和打印视图。

当你需要那些工具无法提供的功能时，就值得自己搭建：例如带成本核算或过敏原追踪的企业食谱系统，结构由你自己设计、需要在大家庭中共享的食谱本，与餐单或门店相连的食谱，或者完全由你设计的界面。如果你的真正目标是规划每周的饮食，接下来可以阅读如何搭建餐单规划应用。

使用 Mythex 搭建

在 Mythex 中，你在聊天中描述食谱应用，在实时预览的手机尺寸画框中检查烹饪视图，然后将其发布到一个公开地址，家人或读者可以在手机上打开，并添加到主屏幕。当应用需要时，Mythex 会为食谱和食材添加专用的 Postgres 数据库，并为照片添加文件存储。登录方式由你自带：你选择方案，智能体负责接入。在 Pro 版中，Mythex 还可以将应用打包为 Android 和 iPhone 应用，分别提交到 Google Play 内部测试和 TestFlight。如果是公开的食谱网站，可以参考美食博客模板，以及我们关于如何搭建适合手机的网页应用的指南。

常见问题