一种基于React Native框架的换宿系统实现方法

瞿文政，许志明，王嘉茵，倪伟传，万智萍

(中山大学新华学院，广东 东莞 512133)

0 引 言

打工换宿模式在国外深受追捧，但是在国内还鲜为人知。究其原因，一是打工换宿这一符合年轻人个性化旅游发展趋势的风口尚未完全到来；二是国内类似软件平台暂未出现，用户无法快速、准确获取打工换宿信息。换宿平台就是在这样的背景下产生的。

换宿平台是一款服务于国内“年轻”人的打工换宿交易平台。目的主要是为大学生提供一个集信息发布、过程监督及旅行分享功能的规范化的换宿交易平台。产品定位为国内文艺旅行分享社区，以“打工换宿”为核心主打发现和分享优质旅行及旅行过程中发生的故事并强化用户UGC社交属性。除此之外，换宿平台通过高端定制服务实现B端和C端的交互，打破了传统打工换宿的模式。

换宿平台技术上采用React Native开发框架，以Flexbox弹性盒子来进行布局与Koa框架下的MongoDB数据库结合，使用ES5语法，用React基础语法来搭建页面，组合多种第三方组件如TabBarIOS导航栏组件等实现原生iOS应用开发。

文中主要介绍换宿平台的关键技术，包括React Native框架、Koa框架下Mongo DB在iOS上的实现及Geohash算法和LatentFactor算法的实际应用，该平台使用户可以快速、准确地获取打工换宿的信息。

1 React Native框架

React Native是移动端的跨平台框架，可以满足在Android和iOS平台下的移动应用的开发工作，提供了基本的跨平台组件[1]。RN可以看作是基于React之上的一种针对特定平台的技术开发方案，既能进行网页开发也能完成iOS和Android跨平台APP开发。

RN使用的是Javascript开发语言，组件形态的生命周期机制和状态与属性的数据交互机制让应用开发变得更加灵活而又富有章法，不再是过去的Html/Css/Javascript杂糅一起，事件、行为、展现，强行分离和抽象的状态[2]。同时，性能上尽管RN使用Javascript语言进行APP开发，但是编译后却是原生应用，并非Hybrid的混合应用，也非Codava将网页内容内嵌到WebView里面的黏合应用[3]。最后，使用RN使团队之间合作的门槛也得到降低，仅需要JS基础即可。

综上所述，React Native作为iOS、Android的开发平台，具有开发效率高及协作门槛低等特点。所以，选择在RN框架的基础上进行换宿平台的设计与实现。

在语法技术层面上，RN的优势也非常明显。首先，RN是单纯的Javascript组件化，没有掺和不同的语言形态；其次，RN的技术框架，允许使用者很方便地介入和调用到各个平台下的API，仅仅借助JS就可以实现只有原生语言才可以实现的效果，这也是RN框架的核心竞争力；最后，RN的布局用到的是Flex布局，不用去深究iOS底层UIview的算法及布局，能更快地构建APP原型。RN框架中JS调用OC模块方法的流程见图1。

图1 RN框架中JS调用OC模块方法的流程

2 功能需求分析

根据2 000余份针对大学生(18～25岁)的调查问卷结果显示，大学生打工换宿平台需要满足的8个基本功能分别是：查询打工换宿信息/收藏、申请/取消换宿、即时通信、UGC旅行分享、登录/注册、高端定制服务、实名认证及一键切换房东，功能之间的相互关系框架见图2。

图2 平台流程结构

每个功能的具体需求如下：

(1)查询打工换宿信息/收藏:可以按照民宿关键字、目的地及换宿时间等搜索具体的打工换宿信息，包括换宿概要、费用、评论等，也可以将搜索到的换宿信息收藏至个人界面。

(2)申请/取消换宿:提供了一键申请/取消功能，通过预先设置的简历模板对心仪的打工换宿项目进行快速申请。

(3)即时通信:传统的换宿申请过程中B端与C端以邮件交流为主，通信效率较低。现在通过线上即时通信来增强信息的交流效率及时效性。

(4)UGC旅行分享:UGC旅行分享社区为用户提供了发布、浏览、点赞及评论原创游记的功能，一方面可以增强用户黏性，另一方面也符合目标人群的行为标准。同时，社区也实现了附近的人、附近的美食及同城攻略等信息的个性化推送功能。

(5)登录/注册:用户采用手机验证码进行快速登录及注册[4]。

(6)高端定制服务:在申请打工换宿的同时，也可以通过付费选择定制服务，以满足用户个性化旅行的需求。

(7)实名认证:不仅在换宿过程中为年轻人提供安全保障，而且在某种程度上也对C端利益保障及行为规范起到一定作用。

(8)一键切换房东:在设置界面提供B端和C端用户的一键切换功能，有效解决传统过程中多个APP繁琐切换造成用户体验感下降等问题。

3 平台实现

平台是基于React Native开发框架在Macbook OS X系统下，使用Sublime、Xcode模拟器工具、Homebrew包管理工具结合Facebook开源项目Watchman和Flow及Nodejs等进行开发的。后台使用Mongodb数据库和Koa框架相结合进行上层服务的开发。主要技术关键点是在RN框架下调用第三方组件、RN中获取异步数据请求、RN中AsyncStorage的异步储存、Koa架构的搭建、Geohash算法及LatentFactor算法的应用等。

3.1 RN中调用第三方组件

RN框架常借助第三方组件实现软件的各种功能，从而达到快速、高效的开发。换宿平台的登录及注册功能是通过借助第三方平台-螺丝帽发送一个4位手机验证码的方式实现的。螺丝帽官方是使用Https传输协议，通过Https Request发起一个Options请求，是一个回调方式。但是，对于Koa数据库框架，需要通过封装把它转化成一个Promise，这样可以更方便地通过Yield调用这个异步过程。Speakeasy方法是在生成验证码的过程中采用加密功能，避免被模拟生成验证码的这套算法。短信API接口关键代码为：

var https=require('https')//

//通过Https的Require发起一个Post请求

var querystring=require('querystring')//

var Promise=require('bluebird')

//引入Promise对代码进行封装

var speakeasy=require('speakeasy')

//生成验证码

exports.getCode=function() {//

//对外暴露生成验证码的接口

var code=speakeasy.totp({//

//对totp方法传入一个对象

secret:'Yisuisnice',

//对生成验证码的过程进行加密

digits:4})

//短信字符数为4位

return code

//返回

}

3.2 RN中获取异步数据请求

iOS应用中数据请求总共有四种，分别是同步请求、异步请求、Get请求、Post请求。异步请求解决了同步请求中线程阻塞的问题，当发生异步请求之后，程序会建立新的线程进行操作，用户交互丝毫不会受到影响[5]。

RN里常用的获取异步数据的网络请求有Fetch、WebSocket和XMLHttpRequest。该换宿平台中异步数据请求是通过在componentDidMoun中调用fetchData的方式进行异步数据的获取。

3.3 RN中AsyncStorage的异步储存

在Android的开发中，大多数开发者会使用SharedPreferences以键值对的形式对用户的账号密码进行存储。而在本次RN开发中，选择了同样采用键值对存储方式的AsyncStorage(异步持久化的方案)轻量存储系统来进行数据及用户操作路径的存储。AsyncStorage跟浏览器的Localatorage本地存储有相似之处。因为AsyncStorage是全局操作的，所以文中对AsyncStorage抽象封装后才进行使用。

··图3 平台展示图

3.4 Koa(Koajs)架构的搭建

Koa是使用ES5规范的Generator和异步编程的轻量级Web开发框架[6]。Koa不在内核方法中绑定任何中间件，仅仅提供了一个轻量优雅的函数库，使得编写Web应用变得得心应手，大大提高了软件的开发效率。

在Koa架构的搭建过程中，首先安装Koa模块，然后在应用的最开始部分放入Koa-logger开发环境下的日志中间件，统计整个请求所花费的时间及记录状态等。同时，为了保持用户会话状态，安装了基于cookie的会话中间件Koa-session；表单数据的解析上是使用Koa-bodyparser来生成对象结构数据；路由中间件使用Koa-router为不同的Url地址分配不同的规则，从而调用不同的函数；使用针对Mongodb数据库的对象建模工具Mongoose实现与数据库Mongodb进行通信；数据加密上采用的是哈希算法库Sha1及基于安全算法生成随机数字的工具库的Speakeasy生成短信验证码[7]；使用Uuid生成不会重复的ID；同时，为避免XSS恶意攻击选择使用XSS模块；最后，使用Promise规范(标准)实现对封装后的Promise库Bluebird提供优雅的API设计和更好的性能。

3.5 Geohash算法实现“附近”功能

Geohash是一种地理编码格式，它沿着经度和纬度的方向交替二分地球表面，并使用一个二进制数(Geohash编码)表示所形成的互不重叠网格。

Geohash编码的优点在于既能表明用户的大概位置，又不至于暴露自己的精确坐标，有助于隐私保护；而且只需使用一维索引即可表示一个矩形区域；另外，编码的前缀可以表示更大的区域，更方便查询附近的区域。

文中采用Geohash算法对用户的位置坐标进行多次编码，每次形成一个由n个编码组成的长度为n的Geohash编码。达到位置从粗划分到细划分的变化，从而进行精确计算，获取附近(距离小于10 km)的物理信息，并进行地理位置移动距离计算，实现UGC社区中的“附近”功能。

Geohash算法实际就是将一个经纬度信息，转换成一个可以排序，可以比较的字符串编码。具体实现方法是先根据用户当前坐标计算Geohash，然后取其前缀进行查询，即可查询附近的所有地点[8-9]。

3.6 Latent Factor算法的个性推荐

Latent Factor Models是基于潜在因子模型将用户和资源的特征同时映射到相同的潜在因子空间(Latent Factor Space)，以使得它们可以直接比较的一种算法[10]。

在换宿平台UGC社区中通过使用Latent Factor(潜在因子)算法，对用户进行精准的地点及游记等个性化推荐。原理就是通过对每个用户的偏好进行分类，比如A喜欢清净的、理想、民族风等元素，如果有一个地点带有这些元素，那么就将这个地点或游记推荐给该用户，也就是用元素将用户和地点或游记连接起来。但是，每个人对不同的元素偏好不同，同时每个地点或每篇游记包含的元素也不一样，所以采用以下的矩阵进行简单分析。

3.6.1 用户-潜在因子矩阵Q

用户-潜在因子矩阵Q表示不同的用户对于不用元素的偏好程度，从0到1依次表示偏好的强弱，1为非常偏好，0为无偏好，如表1所示。

表1 潜在因子矩阵Q

3.6.2 潜在因子-地点矩阵P

潜在因子-地点矩阵P表示每个地点或分享所含有的各种元素。比如表2，丽江是一个偏民族风和理想孤独的地方，含有民族风这个元素的成分是0.9，理想的成分是0.8，孤独的成分是0.8……如表2所示。

表2 潜在因子矩阵P

利用这两个矩阵，可以计算出张三对丽江的喜欢程度是：张三对民族风的偏好*丽江含有民族风的成分+对理想的偏好*丽江含有理想的成分+对孤独的偏好*丽江含有孤独的成分+……。

表3 可推荐数值

因此对张三推荐四个地点中得分最高的丽江，对李四推荐得分最高的丽江。矩阵可表示为：

(1)

由于实际应用中所获得的数据是异常巨大的，而且只能通过用户行为数据来进行分析，无法使用户自己进行分类并返回自己的偏好系数。所以，在实际分析时获得的是实际评分矩阵R，这是一个非常稀松的矩阵。所以需要对矩阵的UV进行分解。也就是将实际的评分矩阵分解为两个低维度的矩阵，再利用Q和P两个矩阵的乘积对实际矩阵中的未知评分进行预测,实际上就是求解下面的目标函数的过程[12]。

(2)

4 应用测试

从全面的角度出发，平台应用测试阶段进行了功能测试、兼容性测试、稳定性测试、安全性测试、分发测试及BUG遍历测试[3]等。目前平台已经完成了在百度MTC测试上通过获取UDID进行的100份的分发内测及BUG遍历测试。测试结果证明，换宿平台已完成基本功能的开发和运行。主要功能测试结果如表4所示。

表4 平台主要功能BUG遍历测试结果

5 结束语

文中提出了一种基于React Native框架集合了Geohash算法和Latent Factor算法的iOS换宿平台开发方法，该平台不仅解决了用户无法快速、准确获取打工换宿信息的痛点，还通过高端定制服务实现了B端和C端的交互，同时一定程度上强化了用户UGC原创属性。在后期的研究中考虑继续加入AI客服系统及VR虚拟场景预览等功能。最后，文中阐述的开发思路与关键技术，打破了传统APP开发的模式，以更加快速、高效、低门槛的方式进行APP原生开发，对基于iOS及Android或React Native框架的相关研究有重大的借鉴意义。