“轻享健康”微信小程序的设计与实现.pdf

SOFTWARE2023软 件第 44 卷 第 8期2023 年Vol.44,No.8基金项目：广东省大学生创新创业训练计划项目资助（S202210566004X）作者简介：吴思源（2002），男，广东汕尾人，本科，研究方向：软件开发。通讯作者：曹湛慧（1975），女，广东信宜人，硕士，实验师，研究方向：食品质量与安全。“轻享健康”微信小程序的设计与实现吴思源1 曹湛慧2 黄志豪3 杨樱洁2 吕文极1 廖永康1（1.广东海洋大学数学与计算机学院，广东湛江 524088；2.广东海洋大学食品科技学院，广东湛江 524088；3.广东海洋大学船舶与海运学院，广东湛江 524088）摘要：随着人们对健康问题的关注度不断提升，用户对健康有着多样化的需求。本文设计了一款健康饮食外卖应用，该应用基于微信小程序框架采用 MVC 模式进行设计与开发，使用 ResNet 神经网络模型和 PaddleJS 工具实现了菜品图像识别功能，能够识别各类菜品。此外，本文基于协同过滤算法，根据用户的行为习惯和偏好，提供个性化美食推荐服务。该小程序运行正常，功能与设计要求相符，能够为用户提供健康饮食方案与服务。关键词：健康饮食；微信小程序；菜品图像识别；协同过滤算法中图分类号：TP311.5 文献标识码：A DOI：10.3969/j.issn.1003-6970.2023.08.016本文著录格式：吴思源,曹湛慧,黄志豪,等.“轻享健康”微信小程序的设计与实现J.软件,2023,44(08):069-071+079Design and Implementation of Light Health WeChat AppletWU Siyuan1,CAO Zhanhui2,HUANG Zhihao3,YANG Yingjie2,LV Wenji1,LIAO Yongkang1(1.School of Mathematics and Computer,Guangdong Ocean University,Zhanjiang Guangdong 524088;2.School of Food Science and Technology,Guangdong Ocean University,Zhanjiang Guangdong 524088;3.School of Naval Architecture and Shipping,Guangdong Ocean University,Zhanjiang Guangdong 524088)【Abstract】：As peoples attention to health issues continues to increase,users have diverse needs for health.This paper designs a healthy food delivery application.The application is designed and developed based on the wechat mini program framework using the MVC pattern,and the ResNet neural network model and PaddleJS tools are used to realize the image recognition function of dishes,which can identify all kinds of dishes.In addition,based on collaborative filtering algorithm,this paper provides personalized food recommendation service according to users behavior habits and preferences.The small program runs normally,the function is consistent with the design requirements,and can provide users with healthy diet programs and services.【Key words】：health diet;WeChat mini program;dish image recognition;collaborative filtering algorithm基金项目论文0 引言近年来，随着我国国民经济的快速增长，人们对健康问题的关注度不断提升，我国轻食消费规模逐年上涨1，健康餐饮行业发展前景巨大。在移动互联网概念推动下，O2O 电商模式飞速发展2。然而，市场上的外卖产业生态仍有待完善，如外卖软件使用复杂、缺乏个性化的健康餐饮、食品营养结构不均衡等问题亟待解决3。因此，本文开发了一款以健康营养为核心理念的生态型赋能外卖小程序平台轻享健康，该小程序旨在填补健康外卖产品的缺口，提升用户体验，满足用户对健康的多样化需求。1 开发技术1.1 微信小程序框架微信小程序框架4是一种基于微信平台开发的应用程序框架，它提供了一套完整的开发工具和开发文档，具备高效的开发框架和 API，减少了开发和维护成本。在本文中，基于微信小程序框架下，使用微信开发者工具实现前端页面功能。1.2 图像识别算法图像识别5算法是一种基于深度学习的计算机视觉70软 件第 44 卷 第 8 期SOFTWARE技术，其目标是通过使用算法自动识别输入图像中的对象或特征。本文中，基于 Pytorch 框架6构建并训练ResNet 残差神经网络模型7，通过优化调整超参数并利用数据增强等技术处理数据，完成菜品图像识别模型的训练。1.3 PaddleJS 工具PaddleJS 是由百度飞桨8团队开发的基于 Web 技术的深度学习前端部署工具，它可以将经过训练的深度学习模型转换为前端 JavaScript 模型，在浏览器和移动设备上运行，以此高效地构建交互式数据驱动的深度学习应用程序，本文将借助该工具实现菜品图像识别功能。2 功能需求分析2.1 总体功能分析本文基于健康饮食的理念，开展了相关功能的设计，其功能模块涵盖了功能性服务和交互性服务，以满足消费者和商家的需求，将平台打造成生态型服务产品，本系统总体功能模块设计如图 1 所示。基于健康饮食理念生态型健康外卖平台 功能性服务交互性服务美食推荐美食直播美食论坛DIY菜篮菜品识别个性化定制套餐图 1 系统功能模块设计Fig.1 System function module design2.2 功能性服务分析（1）DIY 菜篮功能。用户可以根据需求，点击添加搭配食物种类、数量等，并将其加入到购物车中进行结算。（2）菜品识别功能。用户可以通过“图库上传”或“直接拍照”的形式将图片上传到小程序，可识别并获取菜品的名称、热量和百度百科链接。（3）个性化定制推荐套餐功能。系统提供丰富的套餐组合，综合考虑各种膳食营养素的比例，根据用户的体重等不同特征，为其定制出营养均衡膳食套餐。2.3 交互性服务分析（1）美食推荐功能。基于用户的行为习惯和偏好，通过算法为用户提供美食推荐服务，帮助用户发现新的美食。（2）美食直播功能。商家可以进行美食直播，提供美食知识、烹调技巧等相关内容的直播活动，以打造“阳光厨房”与用户分享烹饪的乐趣。（3）美食论坛功能。商家可以邀请美食博主试吃美食，评价用餐体验，用户们可以讨论互动。3 系统设计3.1 微信小程序架构设计对于小程序的开发，基于微信小程序框架，采用MVC(Model-View-Controller)的架构模式进行组织和设计，使用 JavaScript、WXML 和 WXSS 语言开发前端界面，使用 Java、PHP 作为后台开发语言，使用 MySQL 作为数据库保存数据信息。在 MVC 模式中，视图层(View)负责展示用户界面，并通过微信小程序框架提供的组件和 API 与用户进行交互。控制层(Controller)负责处理用户交互和业务逻辑，包括接收用户输入、调用数据层(Model)进行数据处理和更新 View 的显示。Model 负责数据地获取、处理和存储。同时，微信小程序框架已经提供了一些默认的 MVC 功能，如控制层的 JS 逻辑文件、模型层的 App 实例等。因此，在基于微信小程序框架下使用MVC 架构时，可以更方便地实现。3.2 菜品图像识别设计本文基于 ResNet 残差神经网络模型和 PaddleJS工具实现了菜品图像识别功能，对拍摄的菜品图片进行分析和处理，从而精准识别出菜品的名称，实现过程如图 2 所示。前端后端云端接收教据上传图片调用业务接口结果展示模型训练收集数据引入注册、Web部署预测推理模型转化返回识别结果调用图 2 在线图像识别Fig.2 Online image recognition在图像识别模型方面，使用 ResNet 神经网络模型，其网络结构由多个残差块组成，每个残差块内部包含了跳跃连接(Shortcut Connection)，允许信息在同一层级中跨越直接传递，以此缓解了深层神经网络训练71吴思源 曹湛慧 黄志豪等：“轻享健康”微信小程序的设计与实现中的梯度问题，能够轻松增加网络深度而不影响性能。此外，ResNet 还包含一个全局平均池化层将特征图转换为向量表示，最终通过 Softmax 层来完成分类任务。在模型部署方面基于 PaddleJS 工具实现部署，先将训练好的神经网络模型使用 PaddleJS-converter 将其变成浏览器友好的模型供在线推理预测使用，而无需后台服务器的支持，转化完成后，将 PaddleJS 引入注册至小程序中，进行初始化加载模型数据。当用户上传数据时，会调用 PaddleJS-mediapipe 模块对数据流进行预处理，最终在注册的 Backend 环境通过神经网络层层计算得出推理结果。3.3 美食推荐算法设计本系统设计并实现了基于协同过滤推荐算法9的美食推荐功能，协同过滤推荐算法是一种基于用户历史行为数据的推荐算法。在评分预测阶段，首先根据所有用户的历史行为数据构建一个用户物品矩阵 M，其中该矩阵中的每个元素 M(i,j)表示用户 i 对物品 j 的评分情况。对于给定的目标用户 u 和物品 k，通过加权平均的方式，根据与目标用户 u 相似的其他用户对物品 i 的评分情况来预测目标用户 u 对物品 k 的评分值，如式（1）所示：()()()()(),*,S u vR v kR u kS u v=(1)其中，S(u,v)表示用户 u 和 v 之间的相似度，R(v,k)表示用户 v 对物品 k 的评分值。在推荐结果生成阶段，需要根据目标用户 u 的历史评价记录和评分预测结果，确定一组最可能会被目标用户 u 感兴趣的物品集合 P，如式（2）所示：P(u)=k|R(u,k)T (2)其中，T 是一个阈值参数，用来过滤掉低分或不合适的物品，以提高推荐结果的质量和准确性。在保证推荐结果的多样性和覆盖率的情况下，将生成的推荐列表呈现给目标用户 u。4 核心功能实现4.1 主页面小程序界面整体设计风格简洁，避免过多繁杂的元素和干扰，扁平化设计突出信息的传达效果。使用WXML 语言编写小程序的骨架结构，再使用 WXSS 语言为其骨架组件添加颜色、位置等样式。使用 JS 实现动态效果和数据渲染，如使用 wx.navigateTo()方法实现页面之间的跳转，使用 wx.request()方法向后台发送请求获取数据信息。如图 3 所示，主界面功能模块有“推荐”“菜谱”“菜品识别”等模块。4.2 菜品识别在该模块中，点击上传食物，使用wx.chooseImage()调用本地相册，上传完成后图片会显示在该页面。点击识别菜品调用 PaddleJS 图像识别在线推理引擎，结果如图 4 所示，可返回获取菜品的名称、热量和置信度，点击查看百科即可进行网页跳转至百度百科。4.3 美食推荐基于协同过滤推荐算法，为用户提供美食推荐服务，收集美食相关数据并存储在后端自建数据库中。在推荐页面中，轮播图中定时更新“今日推荐”，根据用户的行为习惯和偏好建立用户物品矩阵，进行协同过图 3 小程序主页面Fig.3 The main page of the applet图 4 菜品图像识别Fig.4 Dish image recognition图 5 美食推荐Fig.5 Food recommendations轻享健康#轻松享受健康生活直播论坛菜谱推荐WeChat20:12主页菜品识别菜篮我的菜品详情识别菜品上传食物1、识别结果紫菜汤2、所含热量:174卡路里(每100g)置信度:0.525169查看百科主页 菜品识别 菜篮我的菜品识别WeChat20:13爱好推荐今日推荐推荐WeChat18:11 下转第79页79张智森 刘睿思 孙迎春等：浅析电子商务系统分析与设计4 电子商务系统功能测试为验证此次电子商务系统设计运行情况，本次还安排了系统测试工作，其中单元测试采用 JUnit 工具，屏蔽不同模块以防干扰，结果发现冒烟测试一次通过，能够满足基本功能快速验证需求。然后在 Windows 环境下展开性能测试，使用的设备配置为 CPU Intel i3-2310M、4G DDR3 内存，结果发现静态化页面数为 10 时，系统HTML 文件生成速率小于 1min，静态化页面数为 100时，生成速率为 7min，将页面数提升至 2000 后，耗时增加到了 149min。据此对 Freemarker 模块进行优化，剔除重复部分再次生成流程，采用一次生成、自动拼接的方式进行优化，优化后系统仅需 90min 即可生成 2000 静态化页面数，响应能力明显上升。登录平台对各模块进行测试，结果发现系统功能较为完整，商品创建、查询、修改、删除均能够较好完成，系统运行较为稳定，且能够兼容 Chrome、Firefox、InternetExplorer7.0/8.0/9.0等主流浏览器5，界面简洁清晰、一目了然，有助于提升用户满意度。5 结论综上所述，电子商务系统分析设计环节需要兼顾的要素、功能较为多样，梳理控制不当很可能出现页面设计混乱、操作流程繁琐等问题，实践中务必要给予充分重视。要深入分析系统设计的内在需求，灵活运用Spring MVC 框架、iBatis 技术等，对商品管理模块、系统管理模块、会员管理模块等功能板块进行优化设计，不断健全角色删改功能、订单状态修改功能等，为用户提供更加全面、优质的服务体验。参考文献1 陈静静.关于电子商务大数据导购系统设计与实现研究J.信息记录材料,2022,23(6):108-111.2 尹雪婷.基于大数据的跨境电子商务系统设计J.集成电路应用,2022,39(5):256-258.3 王艳.基于个性化推荐的农产品电子商务系统设计J.自动化技术与应用,2021,40(4):153-156+174.4 贾雅娟.电子商务推广系统设计与实现J.电子技术与软件工程,2021(6):144-145.5 吴一凡,姚敦红.基于UML技术的电子商务系统设计J.办公自动化,2020,25(13):45-47.滤计算从而实时推荐美食，如图 5 所示，点击相关图片即可进入食物详细页面进行查看。5 结语本文通过分析用户对于健康餐饮服务的需求，设计了一款以健康营养为核心理念的外卖小程序。小程序实现了菜品图像识别功能，帮助用户更好地掌握菜品信息，提供了美食推荐功能帮助用户发现美食，提供了个性化的健康饮食套餐等服务功能，提升了用户体验。在现阶段仍存在一些图像识别置信度较差、界面设计不够美观等不足，后续将进一步优化算法模型、改进 UI 设计等完善措施，旨在将健康营养饮食转为一种营养方案和服务方式融入到用户生活中，为用户提供更好的服务。参考文献1 段丹,刘慧.“轻食”消费及其影响因素J.食品安全导刊,2021(22):114+116.2 张文红.O2O模式下的餐饮外卖行业分析研究J.农村经济与科技,2019,30(22):116-117.3 李猛.餐饮外卖行业发展中存在的问题及其对策J.现代食品,2019(21):62-64+76.4 刘宇豪,刘佳.基于微信小程序的健康饮食软件设计与实现J.电脑编程技巧与维护,2020(7):69-71.5 闵巍庆,刘林虎,刘宇昕,等.食品图像识别方法综述J.计算机学报,2022,45(3):542-566.6 黄玉萍,梁炜萱,肖祖环.基于TensorFlow和PyTorch的深度学习框架对比分析J.现代信息科技,2020,4(4):80-82+87.7 王海燕,张渺,刘虎林,等.基于改进的ResNet网络的中餐图像识别方法J.陕西科技大学学报,2022,40(1):154-160.8 陈玫玫,玄玉波,李兆玺,等.基于百度飞桨AI Studio的机器学习教学新模式实践与探索J.计算机教育,2021(9):46-50.9 熊聪聪,邓滢,史艳翠,等.基于协同过滤的美食推荐算法J.计算机应用研究,2017,34(7):1985-1988.上接第71页