a method to generates fake data for you on both iOS and Andriod platform
前段时间,公司项目有一个新的需求模块,功能还算简单,几天差不多就写好了,涉及到与后台数据交互的部分没法继续写了,然后去问了问后台的同学,叫他们给个排期,大概什么时候可以联调,然而他们也不清楚,可能后台那边处理的逻辑挺多。所以回来各种google,看有什么办法能够做到移动端与后端分离,这是对那天小小成果的记录,也在我们团队中分享了下,都觉得挺好,可以在一定程度上提高开发效率。
我们都在强调好的代码应该是各个模块具有较低的耦合性,这样不管是日后需求的更改还是模块的复用都有很大好处,不至于牵一发而动全身,也无需重复造轮子,这是高质量代码和高效率的体现。在移动开发过程中,部门间的解耦,也是值得思考的问题。作为前端和移动端往往和后台服务端的耦合性很高,因为需要后端给我们吐数据,没数据、没法活、都是静态的死的页面,而这些静态页面的搭建相对来说还是很快的。 在后台没有开发完成之前我们能够做哪些:
- 在本地为一些视图添加一套假数据,比如label、button、imageView,撑起一个功能模块
- 完善一些交互逻辑,gesture,消息机制,比如协议、通知、target-action。。。
- 完善UI设计师或交互设计师提出的动画功能
- 甚至还可以建立一些模型类、定义一些接口,类似这种**#define HXD_BOX_LIST @"box/list" // 店长零食盒列表接口**
- 还可以自定义一些方法来通过特定的接口获取一些数据。当然现在什么数据也没有,可能还会报网络错误。
4和5能够实施的前提是我们和后台已经约定好需要哪些接口、字段类型、返回的json结构,日后的开发肯定会略微改动的,这不影响,关键是让每次改动和调整实时的告知大家,让负责的开发人员周知。
至此我们能够做的都做了,我们只能等待后台接口,如果后台开发人员不是很给力,那我们的开发进度迟迟不能推进,这样留给我们联调、测试、修复bug的时间很有限,最后只能加班、熬夜、甚至通宵上线、这样的产品是很脆弱的。
总之,我们队后台的服务太过依赖了,部门耦合性太高了。有的人会说,叫后台写一些假数据给你们,但是那多接口每个都造一些造数据,那么项目就会被假数据给污染了、到时候还得一个个的删除,费时费力。再说要是后台不给力,自己手上的功能都没有写完,哪有时间精力给你造假数据啊。那么我们该如何尽可能降低对后台的依赖呢?
有的公司的后台接口管理平台用的就是rap,它是阿里的前端团队开源的Web接口管理工具,可以MOCK规则来自动生成随机数据。
Rap提供了Mock插件
,暂时只支持jQuery 和 Kissy
使用方式:
<script type="text/javascript" src="http://{{domainName}}/rap.plugin.js? projectId={{projectId}}&mode={{mode}}"></script>
{{projectId}}
为用户所编辑的接口在RAP中的项目ID{{mode}}
为RAP路由的工作模式, 默认值为3 这样就可以拦截Ajax的请求,MOCK就可以为你生成一些符合规则的假数据了。{disableLog}}
为true时会禁止向控制台输出log,仅保留必要部分,默认为false
mode不同值的具体含义如下:
- 0 - 不拦截
- 1 - 拦截全部
- 2 - 黑名单中的项不拦截
- 3 - 仅拦截白名单中的项
具体详见Mock插件
移动端开发过程中除了需要使用Rap 和 MOCK工具外,还有一个很强大工具Charles,这里我们用到一个很牛X的Map功能,Map 功能分Map Remote 和 Map Local 两种,顾名思义,Map Remote 是将指定的网络请求重定向到另一个网址请求地址,Map Local 是将指定的网络请求重定向到本地文件,让你可以达到轻松修改服务器返回的内容,不管后台有没有数据返回,我们都能请求到数据,这样就减少了对后台服务的依赖。现在只要保证与该请求对应的本地文件有数据,这次的网络请求就会有数据返回。一般情况返回的都是json格式的数据(XML同理),现在我们在本地编写一个简单的json格式的文件,不妨叫boxList.json,那Charles是如何映射的呢,很简单在菜单Tools
-> Map Local
然后点击Add
,之后的操作按图说话
现在映射建立好了,那如何生成一个符合项目约定的json文件呢,这个时候Rap 和 MOCK就派上用场了,打开Rap可视化界面登录之后创建一个项目,当然要是你们公司使用的就是它,拿这些都可以省略。进入该项目,进入编辑模式编写相关接口和字段,必须和你公司接口文档最好保持一致,比如mag、status、data,然后data里面才是真正想要的数据,这种结构最好一致、这样可以轻松过渡、对接到你公司的后台服务, 同时你们项目中封装的网络工具类也无需做任何调整。 然后自定义一些mock规则,随机生成一些特定的数据。完成后的效果是这样。
可以通过点击上方的Mock数据
按钮来生成json数据。如图
这个json就可以copy过来放到boxList.json文件中了,至此json数据也很快获取到了。之后就可通过模拟器请求该接口,获取数据了。当然也可以通过浏览器请求了。真机上想要访问的话,得手动设置下HTTP代理,这和通过Charles抓取手机数据请求的设置一样。
Advantage
- 可以方便制造各种数据,测试代码根据不同数据做出不同反应,完善业务逻辑。
- 可以完成与后端的分离,实现部门间的解耦
- 避免本地写一些假数据对项目的侵入和污染
- 内外网都可以访问,不用担心公司内网的限制
- 可以轻松对接,不用更改任何东西。当和后台联调时,你只需关闭Charles的 Map Local 功能就OK了
Disadvantage
-
每个开发者都必须在本地保存一份与该接口对应的json文件,否则要访问其他模块,结果没有设置映射地址、本地也没有该模块接口对应的json,所以无法获取到数据,不利于团队共享。
***plan:***搭建一个专门的映射服务器(测服),用来维护每个接口对应的json数据,只需维护一份供团队共享。
Preliminary
用Python搭建一个简单的
本地的web服务器
利用Python自带的包可以建立简单的web服务器。在命令行工具里cd到准备做服务器根目录的路径下,输入命令:
- python -m
Web服务器模块
[端口号,默认8000] 例如: python -m SimpleHTTPServer 8080
- 就可以通过
http://localhost:8080
,访问了。其他机器也可以通过服务器的IP地址
来访问。
这里的“Web服务器模块”有如下三种:
- BaseHTTPServer: 提供基本的Web服务和处理器类,分别是HTTPServer和BaseHTTPRequestHandler。
- SimpleHTTPServer: 包含执行GET和HEAD请求的SimpleHTTPRequestHandler类。
- CGIHTTPServer: 包含处理POST请求和执行CGIHTTPRequestHandler类。
Medium
使用python的Flask实现一个RESTful API服务器端
Advanced
Designing a RESTful API with Python and Flask 翻译版本
Implementing a RESTful Web API with Python & Flask
Build an API under 30 lines of code with Python and Flask
Flask的安装和虚拟环境的搭建
-
Mac 自带的Python版本是 2.7,不支持pip来下载安装包,当然也可以去官网下载安装。我采用easy_install的来安装
-
在终端中输入命令:
sudo easy_install virtualenv
,输入密码,开始安装 -
virtualenv安装好之后,输入:
virtualenv flask
。安装一个Flask的虚拟环境 -
最后:
flask/bin/pip install flask
。注意这个pip 命令是在flask/bin
目录下的
一切准备就绪了,之后就可以酣畅淋漓的coding了。如何运行你编写的demo呢?两种方法
- 修改文件的权限 比如app.py 文件。
chmod a+x app.py
然后./app.py
运行 - 或者是通过
flask/bin/python app.py
直接运行
两种方法运行成功的标志是,控制台输出,以下信息。
*Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
*Restarting with stat
*Debugger is active!
*Debugger pin code: 142-409-214
之后就可以在浏览器中输入http://localhost:5000
查看结果了,默认端口号是5000
Attention
在用Charles的时候不要打开一些翻墙代理,比如 Lantern 或者 shadowsocks, 否则 Charles 无法正常工作。
Welcome
如果你们有什么更好的制造假数据的方法可以通过Issues,与大家一起讨论。
如果该方法对你有帮助,可以在一定程度上提高开发效率,希望能顺便点一下右上角的⭐️Star ^_^,朋友的鼓励和支持是我继续分享的动力
LearnMore
更多接口编辑的mock规则如图 更多详细的用法可以参数Rap和Rap用户手册
Charles的更多用法: Charles 从入门到精通