# api_ai_ml

**Repository Path**: xing-qian/api_ai_ml

## Basic Information

- **Project Name**: api_ai_ml
- **Description**: API 课程笔记与练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-22
- **Last Updated**: 2022-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

|项目名称|“为食”产品需求文档|
|-|-|
|产品名称|为食——民以食为天|
|产品版本|3.0|
|文档作者|邱星倩|
|产品描述|“为食”是一款提供周边美食信息服务的小程序|

 
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E2%80%9C%E4%B8%BA%E9%A3%9F%E2%80%9D.png)
 

# 一、价值宣言
项目运用高德周边搜索API、路线规划API、天气API以及百度开发平台图像识别API等，通过周边搜索获取美食信息，向用户提供周边美食信息和路线规划的服务，同时还添加所在地的天气和菜品识别的增值服务，解决用户不了解周边美食和天气、来到一个新的地方不了解美食位置的痛点，以便捷、迅速的方式满足用户享受美食的需求，提高用户生活幸福感。

# 二、问题表述
## （一）产品概述
### 1.1 产品LOGO
 
 
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E4%B8%BA%E9%A3%9F.png)
 
 
 
 
### 1.2 产品介绍
“为食”是一款周边美食搜索和推荐的小程序。产品面对想要到店餐饮的学生党、上班族以及热爱旅游的用户，主要由“首页”、“附近”、“发布”、“社区”以及“我的”5大板块组成，主要功能是为用户提供周边美食搜索（包括中餐厅、西餐厅、快餐厅、休闲饮品等）、附近地图地位显示、社区周边美食点评/打卡/攻略的浏览、发布以及讨论，同时添加天气信息查询和菜品卡路里查询，为用户提供优质的周边美食搜索服务。

### 1.3 产品定位
大众（面向用户广）、便捷（易操作）、优质（用户体验好）、宝藏（功能实用）的小程序

### 1.4 价值主张画布
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E4%B8%BA%E9%A3%9F%E4%BB%B7%E5%80%BC%E4%B8%BB%E5%BC%A0%E7%94%BB%E5%B8%83.png)


## （二）背景分析
宏观来看，国内餐饮产业保持着健康可持续的常态化发展速度，全国总餐饮收入呈逐年上升的趋势，对整个消费市场增长的贡献率和拉动作用明显。由于餐饮市场线下体量巨大，且具有高频、刚需、容易规模化的特征，用户培育与市场开拓难度相对较小。
 
 
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/xUhpcwggzmb0m9JwGTDX.webp)
 
 

根据艾瑞发布的《2018年中国智慧餐饮行业报告》，在2017年，中国餐饮O2O行业市场规模已达7799.6亿元，较去年同期增长87.0%，发展速度极为可观。根据易观发布的《中国本地生活服务O2O行业分析2018》，2017年全年，中国本地生活O2O整体市场规模达9992.1亿元，较2016年增长71.5%，其中，到店O2O市场规模7611.9亿元，在本地O2O整体市场中交易占比76.2%。综合来看，虽然外卖行业表现强势，但是到店餐饮仍将是餐饮O2O最重要场景之一。
 
 
 
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/CNBivCazH4MQcCC1HptF.webp)
 
 
 



## （三）用户画像
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E6%97%A0%E6%A0%87%E9%A2%98%E5%B9%BB%E7%81%AF%E7%89%87.png)
 
 

## （四）需求列表
* 需求来源：包括用户需求，产品自身需求，竞争的需求，相关部门需求，头脑风暴，业务的需求等。
* 需求类型：包括基本型，期望型，兴奋型，反向型。基本型一般来源于用户需求和产品自身需求；期望型一般来源于竞争的需求和相关部门需求；兴奋型需求一般来源于头脑风暴的需求；反向型需求一般来源于业务的需求。
* 优先级：按照四象限法则进行划分，重要紧急对应P0，重要不紧急对应P1，不重要紧急对应P2，不重要不紧急对应P3。
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E4%BA%A7%E5%93%81%E9%9C%80%E6%B1%82%E5%88%97%E8%A1%A8.jpg)


## （五）用例图
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/Untitled.png)

## （六）结构图
### 6.1 产品结构图
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E2%80%9C%E4%B8%BA%E9%A3%9F%E2%80%9D%E4%BA%A7%E5%93%81%E7%BB%93%E6%9E%84%E5%9B%BE.png)
### 6.2 功能结构图
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E2%80%9C%E4%B8%BA%E9%A3%9F%E2%80%9D%E5%8A%9F%E8%83%BD%E7%BB%93%E6%9E%84%E5%9B%BE.png)
### 6.3 信息结构图
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E2%80%9C%E4%B8%BA%E9%A3%9F%E2%80%9D%E4%BF%A1%E6%81%AF%E7%BB%93%E6%9E%84%E5%9B%BE.png)

## （七）用户旅程图
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E7%94%A8%E6%88%B7%E6%97%85%E7%A8%8B%E5%9C%B0%E5%9B%BE%20(1).png)


# 三、解决方案
## （一）界面设计--原型图
### 1.1 页面交互逻辑
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%20(7).png)
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%20(5).png)
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%20(4).png)



### 1.2 页面逻辑与核心功能说明
为食小程序共有5个页面，分别是首页、附近、发布、社区、我的。

#### (1)首页页
该页面可以进行查看周边美食信息、天气信息以及菜品识别。  
* 1. 查看周边美食店铺信息。分为“猜你喜欢”的系统推送，和金刚区（中餐厅、西餐厅、快餐厅和休闲饮品）的分类查询；用户可以在首页直接浏览周边美食信息，查看店铺详细信息；也可以根据喜好以及缩小范围，自己点击金刚区查询所要的美食类型，用户可以根据自己的喜好、距离、评分等因素来选择美食店铺到店用餐。  
* 2. 查询天气信息。在首页的顶部搜索栏右边，有一个天气的icon，根据天气的变化，icon也会随之变化。点击icon，便会进入当前位置天气信息的详细页，同时系统根据当地的天气会给予出一些外出措施建议。（比如：做好防晒、带雨伞等）  
* 3. 菜品识别。在首页顶部右边，有一个相机形状的icon，点击icon，便可以调用相机或相册，通过选择图片，便会在识别结果页出现该图片，以及图片的菜品名称、卡路里以及识别的准确性。  

#### (2)附近页
*该页面以地图的形式显示用户的当前位置、可以查看周围美食店铺，以及到心仪店铺的路线规划。

#### (3)发布页
* 用户可以在该页面上发布美食打卡、攻略、点评等相关内容。

#### (4)社区页
* 该页面可以浏览和搜索其他用户发布的相关美食信息（点评、攻略、打卡），以及可以点赞评论，还可以通过其他用户分享的链接直接查看店铺信息。

#### (5)我的页
* 该页面用户可以了解到自己的关注数、粉丝数、足迹、设置，以及已发布的内容。



## （二）三性分析（以人为本三镜头）
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6.png)


## （三）数据流程图
![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/%E4%B8%BA%E9%A3%9F%E6%95%B0%E6%8D%AE%E6%B5%81%E7%A8%8B%E5%9B%BE%20(1).png)


## （四）小程序代码说明

* 周边搜索API

```
 
wx.request({         // api请求              
      url: 'https://restapi.amap.com/v3/place/around?parameters ', 
      data: {       //需要填的参数
        key: 'f3a907403f1a05c5629a2662624b7391',
        location: longitude+','+latitude // 当前位置的经纬度

      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {        //响应成功
        console.log(res.data)       // console==>python中的print，打印出请求成功的数据
        that.setData({             //使用that，便可获取到page页面
          geo_around:res.data      //将 response 响应数据存入 home页面的 data当中
        })  
      }
    })


```

* 地理编码转为逆地理编码API

```
wx.request({
      url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
      data:{
        key:"f3a907403f1a05c5629a2662624b7391",
        location: longitude+','+latitude
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {        //响应成功
        console.log("数据为=",res.data)       
        that.setData({             
          location:res.data  
        })  
      }
    })

```




* 实时天气API

```
wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now?', 
      data: {
        key: 'd0579e87c8ce46e7917045a501fca8bb',
        location: longitude+','+latitude
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
        that.setData({
          now_weather:res.data
        })
      }
    })
```




* 菜品识别API

```
var that = this

    //接收从page.home传过来的图片数据
    console.log("--------options_CV-----------:", options)
    that.setData({
      user_img: options.user_image
    })

    // 0. 将图片转化为base64编码
    wx.getFileSystemManager().readFile({
      filePath: options.user_image, //选择图片返回的相对路径
      encoding: 'base64', //编码格式
      success(res) {
        console.log('data:image/png;base64,' + res.data) //成功的回调
        that.setData({
          base64_img: 'data:image/png;base64,' +res.data
        })

    // 1. 获取百度AI开放平台的 token
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token', 
      data: {
        grant_type: 'client_credentials',
        client_id: '6wESwZxKqy83cWrYg0EIKRgx',
        client_secret: 'lOBHtua8XnGAZly2ncd35MxQsPXk7yI9'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data)
        that.setData({
          access_token:res.data.access_token
        })
        console.log(that.data.access_token)
        
        // 2. 获取图片识别的数据
        wx.request({
          url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/dish', //百度AI-图像识别-菜品识别的URL
          data: {
            access_token: that.data.access_token,
            image: that.data.base64_img
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值
          },
          method:"POST",
          success(res) {
            console.log(res.data)
            that.setData({
              dish_result: res.data.result
            })
          }
        })
      }
    })
  }
})
```





* 页面跳转

```

navgeo:function(e){
    console.log("事件长什么样子=",e)
    console.log("事件数据=",e.currentTarget.dataset)
    var title = e.currentTarget.dataset.name
    wx.navigateTo({
      url: '/pages/detail/detail?title='+title,
    })
  },
```





* 获取当前地理位置

```
// 周边搜索页面跳转home-->detail
wx.getLocation({
      type: 'wgs84',
      success (res) {
        console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        that.setData({
          lat: latitude,
          long: longitude
        })
      }
   })
```



* 调用相机或相册

```
 wx.chooseMedia({
      count: 9,
      mediaType: ['image', 'video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        console.log(res.tempFiles[0].tempFilePath)
        console.log(res.tempFiles[0].size)
        
        // 2. 带着用户选择的图片跳转到百度API识别的页面
        wx.navigateTo({
          url: '/pages/ai/ai?user_image='+res.tempFiles[0].tempFilePath,
        })
      }
    })
```




## （五）编程功能基本描述
### 5.1 小程序文件与变量命名
为了方便记忆查找以及开发，变量以及文件命名根据用户常用思维，用英语、英语缩写或拼音来命名，如：“首页”页面的文件命名为home；“我的”页面的文件命名为“my”; 背景图片的WXSS 的变量名称为“bg”—background的 缩写。

### 5.2 API的使用
* （1）高德地图开发平台：周边搜索POI、逆地理编码
* （2）和风天气开发平台：实时天气API
* （3）百度开放平台：菜品识别API

### 5.3 基础知识点运用
* （1）获取当前位置信息，数据储存与显示
* （2）request请求
* （3）API在小程序的运用
* （4）colorUI样式的使用
* （5）for循环
* （6）页面跳转
* （7）相机调用或使用相册


## （六）产品的未来规划
在未来产品规划中，在技术方面，项目会投入精力去提高API实现的准确性；在人文方面，项目会在前期的用户反馈以及调研中，增加与完善相关功能；同时，也会加强用户隐私信息的保护；在商业方面，项目会根据实际需求情况以及商家调查，考虑增加商家入驻，实时更新美食店铺信息，以及可以提前预定。


# 四、学习心得与感谢
在这次项目训练中，我收获颇丰。在这次课程实践中，锻炼和巩固我所学的知识——API引用、request请求、PRD产品需求文档、界面设计以及小程序开发等，以及回顾了之前所学习的html和CSS的课程内容，拓展我的逻辑和代码思维，丰富了我对机器学习和人工智能的思考，增强相关的产品经理能力。虽然过程中遇到很多困难，比如小程序运行出错，后来仔细检查后发现是一些标点符号的多余/缺少；还有就是调用Color UI的样式使用时，不会修改成自己想要的样式，后来去查阅相关的网页和资料，将JS文件的内容也复制过来，便可开始合理运用。但是这个项目从0到1，从发现问题到解决问题，这个过程是刺激的，结果收获很多！！
[哔哩哔哩](https://www.bilibili.com/) 和 [CSDN-开发者社区](https://www.csdn.net/)以及[简书](https://www.bilibili.com/) 、[小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)  对我这次项目的完成帮助非常大，其中博主的视频教程讲解和文章都为我解答疑惑，让我收益匪浅，非常感谢他们的分享和帮助。同时也非常感谢这次项目，不仅锻炼了我的动手能力，同时也培养了我的耐心和细心以及独立思考的能力。

详细URL:
[小程序部分功能介绍](https://blog.csdn.net/weixin_48678602/article/details/107549901)
[引用map地图，显示当前位置](https://www.cnblogs.com/siyecao2010/p/9476277.html?ivk_sa=1024320u)
[产品需求列表](https://baijiahao.baidu.com/s?id=1708398831178883047&wfr=spider&for=pc&searchword=%E9%9C%80%E6%B1%82%E5%88%97%E8%A1%A8&sShare=1)
[用例图](https://blog.csdn.net/m0_53291740/article/details/122073445)
[colorUI的使用与技巧](https://blog.csdn.net/Linlietao0587/article/details/122109834)
[上线后获取不到定位信息的解决办法](https://blog.csdn.net/lyn1772671980/article/details/124624100)


# 五、附录

![输入图片说明](week19_%E6%9C%9F%E6%9C%AB%E9%A1%B9%E7%9B%AE/assets/gh_608eb7a2d197_344.jpg)

注：由于是个人类型小程序，部分功能上传时受限，更多功能可移步小程序开发工具的真机调试中尝试，谢谢。