# API **Repository Path**: luoyuios/api ## Basic Information - **Project Name**: API - **Description**: 为学习api使用的仓库 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-03-27 - **Last Updated**: 2024-12-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 趣索 | 项目名称 | 趣索_产品需求文档 | |------|------------------------------| | 产品描述 | 一款提供扫描和探索周边的app，帮助人们了解周围的世界。 | | 产品名称 | 趣索 | | 产品版本 | 2.5版本 | | 产品现状 | 进行中 | | 文档作者 | 罗宇 | # 一、 价值宣言 随着智能手机普及度的提高和移动互联网技术的高速发展，人们日渐沉浸在虚拟世界无法自拔，本小程序以此为出发点帮助人们发现身边的一切及其美好。 # 二、 产品概述 ## 1. 期末作业目的与要求 期末作业的目的是：运用在本次课程中学到的知识来指导实践，了解程序设计其实现方法，学会解决实际问题。掌握微信小程序设计的具体步骤与基本方法，针对选定的程序做调研分析。通过课程大作业，提高实践动手技能，培养独立分析分析问题和解决问题的能力。 期末作业的要求：本次作业的选题比较灵活，可以自主选题并且具备一定的水平和深度。 ## 2. 产品简介 图像识别是指利用计算机对图像进行处理、分析和理解，以识别各种不同模式的目标和对像的技术。在众多的图像识别分支中，拍照识别是一个重要的应用。利用图像识别技术，识别拍摄到的图片内容，已经广泛应用于各类图像识别App中。 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的“触手可及”和“即用即走”，用户扫一扫或搜一下即可打开应用。本应用实现了基于微信小程序的人脸识别，动植物识别，车辆识别和周边功能（实时天气和附近设施），使用便捷，充分发挥了微信小程序“即用即走”的特点。 同时，本次大作业项目制作过程只用了Git进行进度跟踪，便于进行版本回退和功能更新。 本次查阅的资料主要包括两方面：API的选择以及微信小程序UI框架的选择。 # 三、 数据流程使用 ## 1. 图片识别API 首先需要查阅图片识别API的相关资料，以便确定课题最终使用哪个API。下面我将在接口能力、是否有参考例程、个人评价三方面简要分析一下常见的几种图片识别API。 * 接口能力 ![输入图片说明](week03/image.png) * 调用方式 API 和 SDK 两种方式，SDK文档包含 Java、PHP、Python、C#、C++、Node语言，有丰富的 Demo。 ![输入图片说明](image/pimage.png) 接口包含OCR、人体与人脸识别、物体识别、图片特效、图片识别、敏感信息审核、闲聊机器人、基础文本分析、语义解析、语音识别 等等，有 PHP 参考例程。 ![输入图片说明](image/zimage.png) 接口包含人脸识别、人体识别、图片识别、图像分辨率、场景识别、文档检测矫正、人像分割、视频语音等等。有详细的开发指南，但是其针对的是 Android 手机平台的开发。 ![输入图片说明](image/ximage.png) 接口包含人脸识别、人体识别、证件识别、图像识别，拥有详细的开发指南。 综合比较之后，决定采用百度大脑 API平台。 ## 2. 设计方案 在需求分析的基础上，查阅资料，对在小程序设计中可能用到的相关技术做一定的调研分析，做一个概要性的描述。 因为微信小程序本身就是联网的应用平台，因此在微信小程序平台进行图片识别，就不必担心网络连接问题。从源头上追溯，实现图片识别需要用户首先上传图片或拍摄图片，需要解决图片上传问题；之后发送API请求时，图片需要作为请求的参数，需要解决图片转码的问题；最后API请求调用成功后，需要将识别的数据输出，就涉及数据处理以及UI界面设计的问题。通过解决关键的“图片上传”、“图片转码”、“API调用”、“界面设计”这几个问题，就可以实现基本的图片识别小程序了。 ## 3. 设计过程 ![输入图片说明](image/cimage.png) ### 百度AI平台注册 首先登陆百度智能云平台，同意它的服务条款。 之后填写相关的信息，在控制台概览中创建应用。 ![输入图片说明](image/vimage.png) 现在已经申请好了百度的API接口，下面尝试在微信小程序中进行调用。 ### 获取access_token 在百度AI的官方文档中可以看到，这个API接口有两种调用方式，两种不同的调用方式有相同的接口URL地址，区别在于请求方式和鉴权方式不同。下面我将尝试使用微信小程序中常用的POST请求方式，调用该接口。 ![输入图片说明](image/bimage.png) 在官方文档中可以看到，使用post请求需要用到access_token，所以现在去查看如何获取access_token。 ![输入图片说明](image/nimage.png) 获取access_token需要下个授权的服务器地址发送post请求，使用固定的参数，即可得到服务器json数据。 ![输入图片说明](image/mimage.png) 下面就开始进行小程序的编写，实现access_token的获取。 首先，在空的小程序中添加一个按钮，在按钮按下后，调用wx.request方法向服务器发送POST请求。 ![输入图片说明](image/aimage.png) ![输入图片说明](image/simage.png) 上面图片就是编写的事件处理函数，利用wx.request方法，请求百度API的URL地址，请求方式按要求是POST方式。然后分别编写了请求完成、请求成功、请求失败的回调函数，目的就是让我能在控制台中看到请求的状态。 下面就需要在微信小程序的后台添加合法域名或者设置不校检合法域名，以便wx.request方法和Access Token能够正确使用。 ![输入图片说明](image/dimage.png) 我们首先需要使用微信封装的request方法请求这个API的URL地址，注意要使用该POST方式。然后这个URL的具体内容就是文档中给出的地址，不同的API接口有不同的请求地址。URL地址需要添加一些参数，如access_token、Content-Type等等。同时，还需要一个image参数作为图片的标识，这个image是将图片转换成了base64编码的格式，也就是将图片传换成了一串字符。 再查阅微信小程序wx.request方法就可以知道，image这个参数可以通过小程序的data属性表示。这样，API接口的请求过程就可以在小程序中表示出来了。 ### 图片上传 现在有一个问题，微信小程序怎样获取图片数据呢？微信常用的方式是将用户的图片文件上传到微信开发者的服务器上，服务器接收到图片数据后再进行相关的处理。不管怎样，都首先需要使用微信提供的接口上传图片文件。那么首先研究一下怎样使用微信的图片上传接口。 微信提供了“从本地选择图片或使用相机拍照”的接口“wx.chooseImage”。 ![输入图片说明](image/fimage.png) ### 图片格式转化 经过查找资料，发现将图片转换成base64格式的方式也有不少。我是用一种微信提供的文件管理接口实现的。在上传图片的成功回调函数中（此时已经得到了本地图片地址），使用文件系统管理方法，读取本地文件的内容。这里指定读取文件的编码格式为base64，然后通过控制台显示出来就可以了。 ![输入图片说明](image/fimage.png) ### API请求 图片已经准备好了，现在已经可以去调用百度图片识别的API了。下面需要对包括“access_token”、“base64编码”等数据进行整合，并以动物识别为例尝试该API的调用。 首先添加识别按钮，然后编写相应的事件处理函数。 ![输入图片说明](image/1image.png) * 下面就是按照百度动物识别API文档的要求，结合小程序wx.request方法的属性写出来的事件处理函数。 ![输入图片说明](image/gimage.png) * 程序做到这里，可以说最大的障碍已经被克服了。目前已经实现了“动物识别”，下面就是逐步实现“植物识别”、“车型识别”等功能就可以了，他们的基本流程是一样的，通过阅读API文档可以看出，其实这几种不同的图像识别的接口，只是URL地址不同，其他参数都是一样的。 ![输入图片说明](image/himage.png) ![输入图片说明](image/jimage.png) ### 页面布局 ![输入图片说明](image/kimage.png) 刚开始的页面样式较为简陋 现在尝试将许智超老师上课提供的ColorUI样式移植到我的小程序中。以引入的方式将样式文件引入到项目中。 首先将colorui文件夹和component文件夹整体复制到我的工程目录中，在全局样式中导入ColorUI的样式文件。 ![输入图片说明](image/limage.png) 为了界面的美观性，我加入了其他来自ColorUI的格式和网上的图片，并且添加了提示图片和提示信息。 ![输入图片说明](image/qimage.png) ![输入图片说明](image/wimage.png) 最终的样式如下图所示。 ![输入图片说明](image/eimage.png) ## 四、 产品页面 ![输入图片说明](image/rimage.png) 登录界面 ![输入图片说明](image/timage.png) ![输入图片说明](image/yimage.png) ![输入图片说明](image/uimage.png) ![输入图片说明](image/iimage.png) 功能界面 # 五、 需求分析 ## 1. 目标用户： * 喜欢探索的年轻人 * 对周围事物不了解的老年人 ## 2. 用户画像 ![输入图片说明](image/o%E6%9C%AA%E6%A0%87%E9%A2%98-2.jpg) ## 3. 产品市场 日渐沉浸在虚拟世界无法自拔的人们，开始有意识的探索周边追求更好的生活模式。大部分年轻人接受能力强，喜欢探索世界，因此产品拥有广阔的市场群体。目前该领域鲜少有人踏足，存在较大的市场空白，发展潜力较大是一片蓝海市场。现该产品还有很多功能未实现，希望为未来想涉足该领域的人们一些启发。 ## 4. 用户痛点 帮助人们感受生活，获取周边天气和周边信息，用户只需要简单拍张照，就可以了解直接反馈的识别信息。 ## 5. 价值主张画布 ![输入图片说明](image/%E4%BB%B7%E5%80%BC%E4%B8%BB%E5%BC%A0%E7%94%BB%E5%B8%83.jpg) ## 6. 用户旅程地图 ![输入图片说明](image/image.png) ## 7. 产品结构展示 产品结构图 ![输入图片说明](image/2image.png) 产品流程图 ![输入图片说明](image/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%20(1).jpg) # 六、 心得总结及感谢 通过学习与完成《API、机器学习与人工智能》的课程与期末项目，我从中学习到了很多东西，对API，小程序制作和书写PRD文档有了更加深刻的了解，并且通过对项目进行了系统的梳理，帮助我深究制作一个产品所要的思考，明确了自己想要做什么产品，为什么做这个产品，怎么做这个产品。 完成此次作业也让我深刻的认识到要成为一名优秀的产品开发人员并不是一件容易的事情。万事开头难，必须要对自己狠下心，用心钻研专业知识才能有所收获，不要还没开始就被困难吓倒，要保持足够的干劲和热情，最后感谢老师18周的悉心教诲，同学的指导与帮助和百度AI开发平台提供的免费资源。