# moe_kee_apiend

**Repository Path**: Xinyi-media/moe_kee_apiend

## Basic Information

- **Project Name**: moe_kee_apiend
- **Description**: API项目的期末产品——萌记app的完整介绍及界面交互。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2022-07-06
- **Last Updated**: 2025-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 萌记   
<img src="images/tu.png" />    
   
|项目名称|萌记_产品需求文档|
|---|---|
|产品名称|萌记|
|产品描述|萌记是一款以青年用户为主，将Q版宠物拟人化的方式帮助用户控制体重的记录型APP。|
|产品版本|3.0版本|
|产品现状|进行中|
|文档作者|刘心怡、唐子君、李桂华|

## 价值宣言 

  &emsp;&emsp;本项目是对萌记产品的一个需求分析文档，本产品使用了API技术，使用了百度智能云菜品识别和语音识别，用户不仅可以通过搜索的方式记录自己的饮食，同时可以使用拍照上传的方式，智能识别出用户的食物，帮助用户快速实现饮食记录的同时，还能识别出菜品的卡路里等一系列详细信息.

## 一、问题需求

### (一)用户需求

 &emsp;&emsp;萌记作为一款控制体重的记录型APP，饮食记录功能目的是为了帮助用户快速记录，食谱功能目的是为了推荐适合用户当前身体需求的减肥食谱。传统的记录类软件需要用户手动输入食物名称并进行甄选，对于用户来说，一些食物可能并不知晓其具体名称，也无从下手记录，不仅用户体验不友好，效率也较低。而萌记API的拍照识图功能不仅不需要用户知晓具体的食谱名称，还拓展了萌记的功能，不仅能在饭后拍照记录，也能在识图知晓具体食物食谱。

### (二)价值主张画布   

<img src="images/huabu.png" />

### (三)需求概述  

#### 1.产品背景  

&emsp;&emsp;随着新业态和新场景与健康话题的不断融合，传统而不科学的瘦身方式，比如药物减肥、饥饿减肥法、抽脂缩胃手术等极端方法已逐渐被公众摒弃。低卡类、低热量类、抗糖类、健身类、代餐类、运动营养类、运动类、体脂监测类等一切与塑形、体型相关的新消费细分领域，顺应着消费者生活方式习惯的重视及改变，时尚健康的社会风潮应运而生。

#### 2.产品市场

&emsp;&emsp;大健康观念的普及，使得减肥且保持高品质的健康生活开始成为减肥群体的刚需。据iiMedia Research的《2020中国健康瘦身行业发展监测及分析报告》显示，分别有68.9％和53％的受访网民通过健身和饮食调配这两种健康的方式达到瘦身目标。在瘦身相关的付费意愿方面，91.6％的受访网民表示愿意为瘦身进行付费，其中近六成愿意付费1000元以上，若根据中国超重人口数而预测市场规模的话，有望在2021年超过万亿规模。  
&emsp;&emsp;从针对健康瘦身类APP的调研报告得知，对于整体减肥人群中有53％希望减肥方法和膳食配方是合理科学的。有61％表示难以忍受饥饿与美食的诱惑，48％的瘦身者难以坚持运动，改变生活方式存在一定的挑战。由此说明，减肥人群的低自律性是目前减肥瘦身的核心痛点。

####  3.产品介绍

&emsp;&emsp;萌记针对减肥人群的低自律性这一核心痛点，开发了三个核心功能。一是通过Q版宠物IP形象帮助用户降低对自己体重管理的焦虑性，同时以云养宠物的模式提高用户记录和自律的积极性；二是利用拍照识图API帮助用户快速记录饮食，简化用户的记录步骤提高效率。三是结合API的食谱推荐，（根据用户痛点和核心价值进行补充）

#### 4.竞品分析

**直接竞品：饭橘**    

饭橘是一款用于记录每日体重、饮食、运动的生活类APP   

【功能介绍】   

* 每日体重、饮食、运动记录，数据长期保存，随时可查周期内的体重变化和热量积累。
* 分享：把识别结果以精美海报的形式分享给微信好友或朋友圈，让大家见证你的改变。
* 饮食记录：海量食物库，营养元素和卡路里热量精准查询，让你吃的明白。
* 体重记录：记录你的体重曲线，减肥历程一览无余。
* 运动记录：上百种运动热量消耗查询，连走路、洗碗也不放过~
* 心情记录：减肥心情自由切换，不管是开心减肥、还是自暴自弃，都会帮你记录。
* 计划：提供丰富的减肥饮食食谱，制定适合的饮食计划，让你在减肥的过程中不再拒绝美 食，在营养均衡的基础上塑造完美身材，开启减重、美食两不误的健康生活吧！  
  

**间接竞品：薄荷健康**    

薄荷健康是一款健康减肥工具，给专业瘦身指导    

【功能介绍】    

* 健康高效管理系统： 管理减肥过程，高效、科学、健康定制减肥方案、减脂食谱，记录体重、体脂、围度等多维数据变化，符合中国饮食习惯，健康高效管理。
* 食物数据库：海量食物数据库，热量、营养成分随时查，吃得明白。涵盖80万+条食物的热量及营养素数据，以中国食物为主，方便实用。
* 记录：摄入和消耗，便捷记录、专业分析，高效管理三餐热量、运动消耗、身体数据随手记， HealthKit、智能手表绑定后可同步数据，记录更加便捷准确。
* 减肥社区：优质的减肥社区，结伴减肥、饮食记录、运动打卡。
  
#### 5.目标用户群

<img src="images/hx1.png" />  

<img src="images/hx2.png" />   

|目标用户群|群体|
|---|---|
|目标用户|18-40岁的青年用户|
|核心用户|18-40岁的女性用户|
|潜在用户|有减肥需求的广大用户|


#### 6.用户痛点和核心加值


|用户痛点|功能|API加值|
|---|---|---|
|不清楚如何通过饮食调配方式减肥|食谱推荐| 智能推荐系统 |
|对摄入食物的热量不清楚|分析卡路里|百度智能平台菜谱识别|
|字太多不想看|朗读文章|语音识别api|


#### 7.用户画像与使用场景

<img src="images/hx3.png" />   
 
使用场景：苏三三先是被萌记的IP形象秋田犬吸引了，于是她好奇地进行了每日记录，因为萌记有拍照识图记录，因此饮食记录对她来说也不算麻烦。而且萌记有食谱推荐功能，能根据她的身体情况和她的需求（爱吃）给她推荐好吃顶饱但热量又不高的食物。她兴趣不减，持续进行了一个月每日记录，她的体重在合理的饮食和运动下终于有减少，她在这个途中也惊奇的发现，她那只肥肥的秋田犬的体型也轻微的变瘦了。    

#### 8.用户旅程地图

<img src="images/dt1.png" />     

### (四)需求列表

#### 1.API产品对比  

|API平台|产品名|价格|请求参数|支持语言|
|:-:|:-:|:--|:--|---|
|百度智能云|菜品识别|免费/1000次<br/>7元/10000次<br/>34元/50000次<br/>66元/100000次|access_token<br/>Content-Type<br/>image|bash<br/>PHP<br/>Java<br/>Python<br/>CPP<br/>C#|
|阿里云视觉智能开放平台|菜品识别|0.0007元/次|Action<br/>ImageURL|无说明|
|NeuHub京东人工智能开放平台|菜品识别|免费/500次<br/>170元/100000次<br/>7500元/500000次<br/>|appkey<br/>timestamp<br/>sign<br/>image|无说明|
|百度智能云|语音识别|免费/50000次<br>2400元/1000000次<br>19200元/1000000次|sampleRate<br>numberOfChannels<br>|bash<br/>PHP<br/>Java<br/>Python<br/>CPP<br/>C#|
|讯飞开放文档|语音合成|免费/500000次<br>5800元/1000000次<br>|app_id<br>signa<br>ts<br>file_len<br>file_name<br>slice_num|Python<br>Java<br>nodejs<br>PHP|

#### 2.API产品优先级排序

|序号|API技术|用户场景|优先级|
|:-:|:-:|:-:|:-:|
|  1   |百度智能云菜品识别|用户通过手机拍照或者上传图片|A(重要)|
|2|讯飞语音合成|朗读文章内容|A(重要)|
|3|智能推荐系统|通过用户数据在首页智能推荐用户可能感兴趣的内容|B(次要)|


## 二、解决方案:界面流程及交互

### (一)界面流程及关键交互

#### 1.交互设计

[产品原型交互设计图](https://modao.cc/app/Q44KRhggrdf29bXrfbZq6V)   

<img src="images/jiaohu.png" />       

#### 2.页面流程图
<img src="images/liucheng.png" />    

#### 3.三性分析
<img src="images/3xing.png" />    

### (二)数据流程及关键智能API使用

#### 1.产品功能结构图

<img src="images/kj2.png" />      

## 三、编程思路、方法及流程

### 1.编程思路及方法流程

**点击识别页面(cv.wmxl)的拍照上传按钮,进行拍照或者上传图片,然后点击识别按钮,在下方可以识别出菜谱中对应的食物名字和卡路里,然后拍照上传按钮和点击识别按钮会隐藏**

> 具体实现:
>
> ①使用**wx:if  和 wx:else**,当content不为空的时候,显示按钮,当为空的时候,隐藏按钮
>
> ②使用**for**循环来循环遍历返回的数据情况

```html
<!-- cv.wxml -->
<!-- 内容 -->
<view wx:if="{{!content}}" style="text-align: center;">
  <!-- <camera></camera> -->
  <button bindtap="chooseimgTap" class="btn cu-btn lines-green round lg shadow" style="width: 300rpx; margin-right: 40rpx;">拍照上传</button>
  <button bindtap="generalTap" class="btn cu-btn lines-green round lg shadow" style="width: 300rpx;">点击识别</button>
</view>

<!-- 返回结果 -->
<view wx:else>
  <view wx:for="{{content}}" wx:key="index" class="result bg-green padding margin text-center" style="font-size: 30rpx;">
    <view bindtap="goMore" data-baike="{{item.baike_info}}" data-title="{{item.name}}">
      <text class="text-left padding">{{item.name}}{{item.keyword}}</text>
      <text class="text-right padding">卡路里: {{item.calorie}}</text>
    </view>
  </view>
  <button class="btn cu-btn line-olive round shadow" style="display: flex;"bindtap="again">重新识别</button>
</view>
```

> 菜品识别(CV.js) -->获取数据

  ```js
// cv.js
//获取token
getToken: function (callback) {
	wx.request({
    url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=cxb09hxA168RMCdyxNFx7zZ8&client_secret=85Nca1YweSadYpekXRxGGmiT5Gi4Xj3T',
    data: {},
    header: {
      'content-type': 'application/x-www-form-urlencoded' // 默认值
    },
    success(res) {
      var token = res.data.access_token;
      return callback(token);
    }
  });
},
// 菜品识别
generalTap: function (e) {
  const imgB64 = that.data.imgB64;
  if (!imgB64) {
    that.setData({
      ishow: true
    });
    return;
  };
  that.getToken(function (token) {
    that.getGeneralTapResult(token);
  });
},
getGeneralTapResult: function (token) {
  wx.request({
    url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/dish?access_token=' + token, 
    method: "post",
    data: {
      image: that.data.imgB64,
      baike_num: 5
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded' // 默认值
    },
    success(res) {
      console.log(res);
      that.setData({
        content: res.data.result
      });
    }
  });
},
  ```

**拍照识别完之后可以按重新选择按钮,来进行重新选择图片上传**

> 具体实现: 为button按钮设置一个again函数,将content里的内容清空

```js
// cv.js  
again: function () {
    this.setData({
      content: ''
    })
  }
```


**点击相对应的食物,可以跳转前往对应数据的详情页面(demo.wxml)**

> 具体实现: 设置一个goMore函数,点击对应的食物,可以跳转到demo页面,同时将食物的名字 图片 和相关描述传递到demo页面

```js
// cv.js
goMore: function (e) {
    console.log(e);
    var title = e.currentTarget.dataset.title;
    var image = e.currentTarget.dataset.baike.image_url;
    var description = e.currentTarget.dataset.baike.description;
    wx.navigateTo({
      url: '/pages/demo/demo?title=' + title + '&image=' + image + '&description=' + description,
    })
  },
```

**在详情页面(demo.wxml),可以看到相关食物的图片和描述**

> 具体实现:
> ①通过onLoad函数可以拿到从cv.wxml页面传递过来的参数

```js
// demo.js
onLoad(options) {
      console.log(options);
      var that = this;
      that.setData({
        title: options.title,
        image: options.image,
        description: options.description,
      })
  },
```
```html
<!-- demo.wxml -->
<view>
  <!-- 标题 -->
  <view class="cu-bar bg-white solid-bottom">
    <view class="action">
      <text class="cuIcon-title text-orange "></text> {{title}}
    </view>
  </view>
  <!-- 图片 -->
  <view class="bg-img padding-tb-xl" style="background-image: url('{{image}}');height: 414rpx;"></view>
  <view class="text-left padding text-center text-shadow text-black cuIcon-ellipse text-xxl" style="font-size: 36rpx;">{{description}}</view>
</view>
```
**同时在最下方可以点击播放按钮,实现语音播放文章内容**

>具体实现:为播放按钮和结束播放按钮分别设置begin和end函数

```js
// demo.js
onReady(e) {
    //创建内部 audio 上下文 InnerAudioContext 对象。
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError(function (res) {
      console.log(res);
      wx.showToast({
        title: '语音播放失败',
        icon: 'none',
      })
    }) 
  },
  change:function(){
    var that = this;
    that.robot()
  },
// 文字转语音
begin:function (e) {
  var that = this;
  var msg = this.data.description
  plugin.textToSpeech({
    lang: "zh_CN",
    tts: true,
    content: msg,
    success: function (res) {
      console.log(res);
          console.log("succ tts", res.filename);
          that.setData({
            src: res.filename
          })
          that.yuyinPlay();
   
        },
        fail: function (res) {
          console.log("fail tts", res)
        }
      })
    },
      
  //播放语音
  yuyinPlay: function (e) {
    if (this.data.src == '') {
      console.log(暂无语音);
      return;
    }
    this.innerAudioContext.src = this.data.src //设置音频地址
    this.innerAudioContext.play(); //播放音频
  },
     
  // 结束语音
  end: function (e) {
    this.innerAudioContext.pause();//暂停音频
  },
```

**有些食物可能没有图片和内容描述,避免传递过来的参数出现undefined的情况**

> 具体实现: 在onLoad函数中用**if条件语句**判断 description 中的内容是否为undefined,如果是,则将 description 中的内容修改成其他

```js
// demo.js
onLoad(options) {
  console.log(options);
  var that = this;
  that.setData({
    title: options.title,
    image: options.image,
    description: options.description,
  })
  console.log(that.data.description);
  if (that.data.description === 'undefined') {
    that.setData({
      image: '../../images/plant.jpg',
      description:'暂时没有相关信息噢~~~'
    })
  }
  console.log('LATER',that.data.description);
},
```

### 2.视频演示

[点击观看视频](https://www.bilibili.com/video/BV1BN4y1M7W7?share_source=copy_web)

## 四、产品未来规划

### 发展理念

&emsp;&emsp;一款根据用户实时体重进行记录并展示的记录型app，在满足用户日常记录需求的同时，还需兼顾用户的良好体验，我们将持续的推出新功能，在主功能保持不变的前提下，使萌记更加贴近用户的使用需求。

### 产品迭代  

<img src="images/diedai.png" />      


## 五、心得总结及感谢

### 心得总结：  

* 在本学期的API、机器学习与人工智能课程中，不仅学到了如何调用API接口进行相关程序的开发，而且了解到一份完整的产品需求文档需要不断的打磨、版本迭代，才能呈现出最终的效果。  

* 更加深刻的了解到产品经理与API的关系，一名产品经理需要对团队进行良好的规划，产品需求文档是势在必得的。  

* 能够调用百度api实现语音识别、语音合成等功能，通过调用图灵机器人实现人与机器的交流。  

* 当今时代科技飞速发展，越来越多的高科技被应用于学习、生活之中。作为网络与新媒体这个新兴专业的一名成员，我认为前景是十分光明的，在学习API之后，对于后续的小程序或是技术开发这方面也会有很大的帮助。  

### 感谢：  

本文档的撰写参考了往届师兄师姐的作品，在此表示由衷的感谢：  

* [张渚师兄的仓库地址](https://gitee.com/zhang_zhu/api-final-project)  

* [刘心如师姐的仓库地址](https://gitee.com/liuxinrujiayou/api_final_project)   

同时非常感谢百度AI提供的免费资源调用：  

* [菜品识别接口](https://ai.baidu.com/tech/imagerecognition/dish)   

感谢Process on提供的流程图及数据图的绘制：   

* [Process on](https://www.processon.com/)      

感谢墨刀提供的原型图绘制及交互功能的使用：     

* [墨刀](https://modao.cc/brand) 

**再次进行由衷的感谢，谢谢！**