hybird app 植物图鉴开发细节介绍 #42
Description
hybird app 植物图鉴开发细节介绍
系统总体设计
- 整个项目采用30%安卓、70% web 的hybird开发架构, 并且在 web 方面通过 restful api 把重点交给了 web 前端（不过植物识别部分也是花了好大力气，是在后端完成的）。
- hybird 的开发架构中，web 前端开发在安卓 app 内部访问的网页，以加速性能和模拟原生的界面来达到媲美原生的效果。并具有跨平台、开发效率高、更新方便等特点。
系统设计图
各模块、功能概述
和系统设计图所描述一致，整个项目分为3个大模块：
- 安卓原生开发部分
- web 前端开发部分（移动和电脑端）
- web 后端开发部分
功能有：
- pc 端植物美景页面投稿
- 手机端植物美景展示、收藏、评论
- 植物词条搜索
- 附近美景植物
- 地图功能
- 登陆退出
- 树叶图片识别
由于功能的开发是嵌入在模块之中的、有的功能是几个模块联合完成的，我们后面将详细的把 3 个开发模块，一一详细介绍，并对功能的实现原理进行介绍。
现在我们先将三个模块做简单概述。
web 后端
我们将运行在服务器端的代码和程序称之为 web 后端部分
web 后端搭建在阿里云，搭建环境为 linux(ubuntu 操作系统) + node.js（后端开发技术） + mongodb（数据库）
web 后端的工作内容和系统总设计图里一致，总共有4部分内容：
- 根据 url 渲染返回网页（安卓 app 部分功能通过移动端网页来实现，安卓只需向服务器发送请求，之后的页面和交互等功能由 web 前端完成）
- 数据库（存储数据）
- restful api 接口（客户端通过 http 请求来 对服务器端数据库数据增删改查）
- 树叶图片识别（特征提取、机器学习、识别程序）
web 前端
我们将运行在浏览器、手机 webview 里面的代码、程序称之为 web 前端部分
采用框架工具： vue、zepto 等前端开发框架，webpack 前端开发打包工具， MVC 开发架构，高德地图 JS SDK。
性能优化：采用雅虎的性能优化方案、cdn 使得移动端页面打开速度加速5倍。
开发内容有：
- pc 端美景、植物投稿页面
- 移动端附近植物页面
- 移动端美景、植物页面
- 地图页面
安卓端
Android端设计的核心是：漂亮的UI和人性化的交互。尽量将高运算量交给服务器后端（图像识别），保留
较小的运算（搜索功能）；使用第三方库和API减小开发难度；主要以listview形式展示UI；与后端的交互所需的网络请求函数封装调用；主线程和子线程的合理切换。
开发内容有：
- 本地数据库
- 用户登陆退出功能
- 植物搜索功能
- 植物美景列表
- 图像识别功能（拍照、上传部分）
详细设计及功能实现原理和成果
Android（安卓）
数据库设计与管理
使用本地缓存的方法实现用户流量使用的最小化，包括主页面listview的美景数据库和植物收藏的植物数据库；本地建立用户信息数据库（昵称、头像、密码、openid）；本地建立历史搜索数据库，显示历史搜索等。
美景植物列表
使用Android listview控件呈现美景植物，Android本地缓存植物美景的图片并显示在listview中，listview点击后请求服务器美景或植物页面url，并开启新的活动显示具体页面内容；使用类适配器（adapter）修改listview页面的显示。
植物搜索
使用popupwindow实现搜索框的置顶动画；重载文本框（EditText）的OnTextChange()函数监听输入的变化并实现对输入内容的搜索，在EditText下面放置listview用于显示搜索结果或是显示历史搜索；使用线程处理具体的搜索过程实现主线程的流畅性。
QQ第三方登录
调用QQ第三方API，实现无需注册的第三方登录，获取QQ昵称、openid、头像等信息，并存于本地数据库，将头像信息显示在主页标题栏和个人信息页面。
图像识别（拍照、裁剪、上传部分）
调用系统的拍照和裁剪功能，使得操作简单化和灵活化并更好地符合所需的要求，裁剪功能实现长宽任意比的裁剪，使得特征值的提取更加精确；使用七牛云的API，实现图片的上传，使得后端图像识别可行。
web 前端
采用框架工具： vue、zepto 等前端开发框架，webpack 前端开发打包工具， MVC 开发架构，高德地图 JS SDK。
性能优化：采用雅虎的性能优化方案、cdn 使得移动端页面打开速度加速5倍。
开发内容有：
pc 端美景、植物投稿页面
（王莉帮忙补充一些简单的描述文字给每个页面，我写不动了）
// TODO:
移动端附近植物页面
// TODO:
移动端美景、植物页面
// TODO:
评论页面
// TODO:
地图页面
// TODO:
web 后端
主要介绍：数据库、api 文档
数据库
数据库方面的工作主要有：
- linux 下部署 mongodb 数据库并运行
- 表结构设计
- 提供数据的增删改查接口
数据库部署和运行
主要是通过 ssh 到远程服务器使用 linux 命令，在服务器中下载数据库，创建数据库管理用户，启动数据库，在后端程序中连接数据库。
表结构设计
提供数据的增删改查接口
web 后端程序提供数据的增删改查接口，主要体现在构建 restful api 上，我们使用 node-restful 库，运行 web 后端程序登陆、连接数据库，将node-restful 库和数据库连接，创建 restful api
api 文档
因为我们开发模块分为3部分，为了使每部分各司其职，我们要约定好 api 接口。
我们通过 api 文档的形式来保证 api 的功能和规范。主要包括
- 后端 api
- 返回网页的 url api （安卓端通过调用这个 api，可以进入 web 前端页面，并且传递一些参数数据给 web前端，比如当前登陆用户数据 id）
- restful api （web 前端和安卓端通过调用这个 api 来对数据库进行增删改查）
- 安卓端api
- web 前端调用安卓本地方法(比如进入新的 activity，退出 activity，得到 GPS 信息等)。
树叶图片识别
特征提取
本方法是基于opencv的环境下利用强大的库实现了从轮廓到纹理双维度的特征的提取。
主要包括多方向多尺度的gabor特征值、保持旋转放缩不变性的hu不变矩、以及图像均值和方差等构成。前期对图像进行预处理，包括为更清晰的得到叶片纹理转化成灰度图和实现轮廓边缘清晰进行二值化以及调整图像尺寸到相同大小 𝑝 ×𝑞进行尺寸归一化处理；
然后获取第一个特征 Gabor 特征；Gabor 特征通过频率参数和高斯函数参数的选取，Gabor变换可以选取很多纹理特征，但是Gabor是非正交的，不同特征分量之间有冗余。 Gabor是有高斯核函数与复正弦函数调制而成。
其次对需要处理的图像I(x,y)进行gabor实部变换之后,图像大小依然不变，这使得我们提取特征时遇到了困难，所以需要对特征进行降维处理。
然后获取图像边缘，为了使图像具有平移、旋转和尺度不变性，本系统采用Hu不变矩来描述边缘信息，作为第二个特征向量。
机器学习
机器学习中主要就是使用算法将数据建立成模型（这个过程在机器学习中叫做训练），这样以来就可以通过此模型对新的数据进行预测。
我们的机器学习中的训练算法，采用的是神经网络算法。
我们就通过神经网络的算法将训练样本的特征值和训练样本的叶子种类构建成一个能“识别树叶的神经网络”系统。
我们采集了100个树叶的训练样本，提取它们的特征，使用它们的特征的特征值去建立模型，这样以来，我们之后就可以根据训练出的模型对新的树叶（测试样本）进行预测，给出一个概率——新的树叶是哪一种树叶的可能性（只要可能性大于50%的叶子种类是测试样本原来的种类，我们就认为预测正确）。目前我们只要新的树叶（测试样本）的种类属于100个训练样本的种类之中，预测的正确率非常高，结果几乎全对。并且给出的正确种类的可能性非常高（普遍大于80%）
识别程序
和安卓约定好 api 接口后，识别程序实现以下步骤以完成功能：
0. 在服务器端训练样本，建立模型
- 接收安卓端上传的树叶图片
- 提取树叶图片的特征值
- 模型对树叶图片的特征值进行预测，得到预测数据，处理成更易读的数据
- 通过 http 协议传输，将测试样本识别结果的数据传送给安卓端
识别结果效果图:
