移动端开发&蓝牙调试的那些事儿 | 项目复盘

这篇复盘文章主要回顾之前做过的一个移动端项目。采用 Hybrid App 的开发方式，前端开发 H5 页面，通过 JSBridge 调用原生应用的一些方法，来实现项目的功能。比如调用原生应用的蓝牙模块的方法来与其他硬件设施通信。

项目简介

项目的功能

通过手机客户端就能实现路由器的配网以及管理工作，也是这个团队一个产品尝试，后续规划基于这个路由器项目，打造“智联网”生态。

传统路由器的配置需要通过 PC 电脑连接上路由器然网络后，访问指定的 IP，然后完成路由器的网络配置。这个项目的作用就是用我们平时用的手机就能完成这些操作，非常方便快捷。

(PS：现在这种手机配置的方式已经很普及了，这个项目当时是在 2017 年年末做的，在当时这种配置方式应该说是刚刚兴起吧，当时调用的原生应用的蓝牙模块方法还是这次项目才开始开发第一版本。

担任的角色和贡献

这个项目前端 2 到 3 人，后端 1 人，硬件开发 5 人，测试 2 到 3 人。我主要是负责路由器配网功能的前端开发，包括路由器的蓝牙配网和本地配网功能。

开发过程

第一次开发这种硬件相关的移动端项目，一边要解决移动端开发的难题，一边还要解决硬件开发过程中的问题，特别是调试问题。比如调试依赖硬件工程师配合的问题，本地开发环境没有办法调试蓝牙功能的问题，蓝牙调试日志查看不方便的问题。调试的问题相当于影响开发效率，遇到问题也不好找到问题原因进而不好解决。

遇到的问题及解决方案

一、调试依赖硬件工程师配合的问题

前端在进行开发时，需要路由器处于某种状态，比如本地页面环境搭建、蓝牙搜索不到、已经配网成功、配网重置。这个时候就需要登录到路由器的控制台进行设置，在不了解路由器控制台设置的情况下，每次都要硬件开发工程师配合来完成这些操作，但是前端在调试的时候，他们不一定有时间，他们本身也有开发任务，精力分配不过来。这样就导致前端调试起来不太顺畅，影响开发进度。

为了解决这个问题，保证项目的开发进度，就通过向硬件工程师学习路由器控制台配置方面的知识，自己完成路由器的控制台设置，通过 ssh 登录路由器的控制台，设置前端调试需要的路由状态。这样既解放了硬件开发工程师，前端也能更独立自主地完成开发工作，保证了开发进度。

二、本地开发环境没有办法调试蓝牙功能的问题

这个问题主要包含两点：

1. 本地开发（浏览器网页）环境没有办法调试应用的蓝牙功能的，调试蓝牙功能需要在手机应用内打开网页才能调试。
   • 正常可以访问应用的测试包，来访问项目页面来调试，但是这样每次都需要把代码发到测试环境才能调试效果，严重影响开发效率，也影响测试同学测试。
   • 所以换种方式，通过手机应用扫本地页面的二维码，这样在手机应用内打开网页来调试蓝牙功能。
2. 绑定过程是路由器与应用账号绑定，所以还需要先登录，本地开发环境是没有登录的，所以同样还有登录的问题。
   • 怎么把登录信息拿到，并能正常请求到数据。
   • 登录的话，可以通过单点登录的测试环境拿到一个可用的 Token，然后问题是怎么把这个 Token 给后端，以及接口返回因为涉及到不同域而产生跨域的问题。

首先怎么把拿到的 Token 给后端，解决方案：判断是否是本地开发环境，然后手动通过传 Cookie 的方式，给 NodeJS 服务，NodeJS 服务判断是请求日常环境的接口，且里面的 Cookie 数据有登录数据，就使用这个登录数据进行登录，然后接口正常能请求到数据。(下面是请求过程流程图)

这个时候请求到了数据返回给前端是有跨域问题，需要在返回的响应头里面添加跨域头信息，防止浏览器因为跨域问题而拦截请求结果。

res.header('Access-Control-Allow-Origin', 'request.origin');
res.header('Access-Control-Allow-Credentials', 'true'); // 允许服务器端发送 Cookie 数据
res.header('Access-Control-Allow-Methods', 'GET,POST');

至此就完整解决了本地开发环境没有办法调试蓝牙功能的问题。

三、蓝牙调试日志查看不方便的问题

这个问题有三个点：

1. 本身蓝牙调试日志查看就不方便，得手机连接上电脑，然后页面扫描一个二维码才能看到到蓝牙连接日志。
2. 兼容性问题，这种方式只支持 iOS 端，安卓端没有办法查看，要通过打印 console.log 的方式来调试。
3. 便捷性和实时性，由于只支持手机连接上电脑和扫码才能查看，不方便，测试同学在测试的时候报了 bug 之后，拿不到当时的日志信息，影响问题排查。

解决思路：

1. 自己来收集，自己来设计显示方式。
2. 收集过程
   • 单独用一个 MobX store 来存日志信息。
   • 对日志信息分类，比如：success、warnning、error、log。
   • 日志列表有一个最大条目数，超出会 shift 列表头部的条目数据。
3. 日志显示
   • 有一个日志显示组件。
   • 判断在开发环境下才会显示。
   • 初始是一个按钮，放在右下角（支持设置），不影响页面的操作。点击按钮，全屏显示日志信息。支持对日志类型和特定日志信息进行筛选。

(下面是日志收集与显示流程图)

解决问题达成的效果

之前因为调试问题，蓝牙调试过程非常痛苦，遇到了问题调试过程缓慢，问题找不到原因，让蓝牙配网的成功率一直高不起来，在解决完调试问题之后，蓝牙配网的成功率从 4、50% 提升到 98% 左右，保证了用户的使用体验。

小总结

1. 在这个项目中，关注的技术细节是什么？
   • 项目完成之后，在团队的周会上成功展示过这个配网流程，也是团队第一次做这种硬件相关的移动端项目，感觉还是挺有意义的。
   • 调试是开发过程中非常重要的一环，直接是影响到项目的开发节奏和开发体验，所以需要着重解决这个问题。

Photo by eberhard grossgasteiger on Unsplash