APPInvenor开发——拍照识花

1.设计思路

踏青时看到很多美丽的花却不知道名字……感觉很尴尬。于是我便想到用手机APP识别植物，显示出各种花草的名字、介绍，这样既解决了尴尬也学到了知识。

应用主要是通过调用百度智能云的植物识别API接口，向API服务地址使用POST请求和GET请求获取相关数据，试验证明大多数花草都能识别（图1）。

开发这个程序，会从简单到复杂，功能逐渐完善，后续还会在此程序基础上添加更多识别种类，敬请关注。

2.准备工作

1.首先要在百度智能云申请申请apiKey和secretkey。之前的文章已经介绍过，这里不再赘述。

2.HTTP协议与GET、POST请求

HTTP：超文本传输协议

HTTP 的工作方式是客户机与服务器之间的请求-响应协议，通过协议保证客户机与服务器之间的正常通信。常见的Web 浏览器就是客户机，而计算机上的网络应用程序也能作为服务器端。

两种 HTTP 请求方法：GET 和 POST

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是GET 和 POST：

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据，处理后返回对应的数据（图2）。

3.组件设计

本程序使用wxbit在线版（app.wxbit.com）（图3）。

组件

所属面板

命名

作用

属性

Screen1

Screen1

主屏幕

标题：智能植物识别APP

是否允许滚动：勾选

标签

用户界面

标题标签

文本：AI植物识别 文本颜色：红

字号：256 粗体：勾选：

背景颜色 ：橙色

标签

用户界面

版权标签

文本：2021.4.8 Copyright By WZY

字号：16 粗体：勾选

水平布局

页面布局

水平布局1

放置按键

水平对齐：居中 宽度：充满

按钮

用户界面

按钮_拍照

拍照按钮

文本：拍照 文本对齐：居中

背景：#c79c00ff 字号：18 宽度：100

图像选择框

多媒体

图像选择框_选择图片

选择植物图片

文本对齐：居中 文本：选择图片 背景：蓝色 字号：18 宽度：100

是否粗体：勾选

按钮

用户界面

按钮_开始识别

识别图片

文本：拍照 文本对齐：居中

背景：#c79c00ff 字号：18 宽度：100

垂直布局

界面布局

垂直布局1

标签

用户界面

名称标签

文本：空 字号：16 粗体：勾选

标签

用户界面

置信度标签

文本：空 字号：16 粗体：勾选

标签

用户界面

简介标签

文本：空 字号：14 粗体：勾选

图像

用户界面

图像

显示植物图片

照相机

多媒体

照相机1

拍照

SimpleBase64

插件

SimpleBase641

图像编码

TaifunImage

插件

TaifunImage1

图像转换

Http客户端

通讯连接

Http客户端1

GET请求

Http客户端

通讯连接

Http客户端2

POST请求

4.程序设计

1.变量和初始化

变量Apikey和Secretkey存储申请获得的两个KEY。

初始化程序利用Apikey和Secretkey，通过HTTP客户端1GET请求的实时申请，得到JSON文本，然后将返回的JSON保存在列表Access_token_list中，再提取令牌值保存在变量Access_token中。

请求网址格式为（需要替换你的apikey和Scretkey）：

https://aip.baidubce.com/oauth/2.0/token?

grant_type=client_credentials&client_id=【你的Apikey】&client_secret=【你的Scretkey】

请求头格式如下（Header如下）：

参数

值

Content-Type

application/x-www-form-urlencoded

列表变量returnplant、plantlist、highscoreplant和baike分别存储通过HTTP客户端2POST请求返回的JSON文本、植物列表、最高置信度的植物列表和相关的百科简介。变量image存储植物照片（图4）。

2.GET请求文本处理

初始化GET请求成功后，获得的JSON文本保存起来，并提取令牌口令，保存在变量Access_token中备用（图5）。

3.重设图片尺寸函数

由于照片大小不一，识别过程可能会很长，将图片的最大宽度改为500像素，高度按比例调整。

这里需要导入一个图像处理插件TaifunImage.aix，可以百度搜索在网上下载（图6、图7）。

4.选择植物图片

将需要识别的植物图片导入图像组件中，调整大小后，显示出来，同时清空上一次识别植物的所有数据（图8）。

5. 拍照植物图片

通过手机的拍照功能，把植物照片直接拍照，注意一定尽量的清晰，对比度适中，否则会影响识别。拍摄完成后，处理图片过程与选择图片一样（图9）。

6. 开始识别

将图片路径中的无用字符清除，做为HTTP客户端2的POST请求地址。请求地址有格式要求，必须有请求头和令牌口令才能请求成功。

POST请求网址（用变量access_token替换）：

https://aip.baidubce.com/rest/2.0/image-classify/v1/plant?access_token=【access_token令牌口令（get请求获得）】

POST请求时，必须将植物图片转换成BASE64编码，存储在HTTP客户端创建的列表中，然后通过HTTP客户端2获取这些数据后，进行处理和提取，得到我们想要的有用数据。

BASE64编码是数据传输中常用的编码，以前有相关文章介绍。SimpleImage.aix组件是BASE64编码插件，需要去网上下载，导入后即可使用（如图6）。也就是说，POST请求数据时，是按照BASE64编码请求的（如图10）。

7.POST请求获得文本

如果请求成功（响应代码为200），返回参数如图11（3个层级）。将返回的数组解码为JSON文本，保存在列表变量returnplant中。然后将识别结果存储在列表plantlist中，它包括所有置信度的植物信息，即识别的种类可能很多，但置信度(也可以理解为可信度)不同，其值从高到低排列，我们只取置信度最高的一项，存储在列表highscoreplant中。并从中提取植物的名字和置信度值，在文本中显示出来。

在列表highscoreplant中还有相关百科知识，只是列表维度太高，提取时稍有难度。百科简介显示出来，从中也能学到很多相关知识（图11、图12）。

5.调试

边写代码边调试，以保证每一步的正确性。最后优化程序设计和UI设计。本例重点在处理数据列表时，稍微复杂一点。检索数据时，需要一步步测试，才能了解数组（列表或字典）的意义。相关代码和素材请在壹零社下载。

欢迎加入壹零社群

请添加壹零社小助理：yls10she