iH5可能引发的互联网革命：一个团队协作Web APP的故事.docxVIP

iH5可能引发的互联网革命：一个团队协作Web APP的故事 iH5.cn出了一个新的模板，叫“任务管理系统”，在花花绿绿的游戏和邀请函中很不起眼。看起来简陋，其实很有“内涵”。 创举：每个人都可以拥有的Web APP 这是我第一次看到HTML5网页模板，居然带有注册和登录功能。它很接近Web APP的思维，通过网页来构建系统和应用，用浏览器就能访问，没有机型要求和下载安装的负担。 为什么说它能引领互联网革命？ 因为它不单单是一个标价1元人民币的模板，更是一键保存就能独立使用的Web APP。业界一直在流传Web APP和原生APP的区别，很多并无实据，但这个任务管理系统模板却做了一个很好的示范。 它相当于APP Store中售卖的APP，但有一个明显区别：用户购买后不是下载这个APP到手机里，而是生成一个网页，保存在个人帐号中。这样一来，无论在电脑上或是手机上，只要联网就能打开这个自己专属的APP——数据分别保存在不同网页对应的数据库里。 当然，iH5平台上这种类型的模板/APP并不多，还谈不上是应用市场，顶多是率先探索出了Web APP的应用模式。而且作为我心目中的APP，它还有点小瑕疵。 风险：搞破坏的路人甲 原APP的使用流程是：注册—登录—发布任务—认领任务—完成任务。 首先，登录这一步有被人肉的“风险”，这归功于iH5主页的案例检索。 举个例子，当你在iH5主页检索“婚礼”时，可能以为不小心进了别人的朋友圈（已做模糊处理），因为看到的画面如下： 这些H5大部分是用户制作的公开婚礼邀请函，很明显没一封是发给我的，但我们都看得到——我甚至曾通过这种方式搜出了我们老板的手机号。 为避免无关人士搜索“任务管理”时点进页面，随意注册后发布或认领任务，我在登录上做了一点小改动。 方法：只让“我们”知道暗号  见上图，就是多了一个验证的步骤。这个验证可以设置为公司官网之类的文字，只提供给内部人员。 这里用的是“我好牛逼”——每次登录都夸自己一下还是挺振奋忍心的；也纠正了错别字——能登“陆”的是飞机和船。当然，正式要验证的话，肯定不会像我这样公开“暗号”内容。 加入验证体系，对于面向特定人群的H5有很多好处。比如一些私密相册、公司内部会议展示等内容，既想发给别人看又不愿意被随意传播。而且就算“密码”外泄，反正APP是自己的，花十几秒登录PC端主页修改验证内容就行。 拆解：一张图弄清登录逻辑 添加验证之前，必须弄清原APP的登录逻辑。 用iH5设计Web APP和编程有点相似，只是不需要敲代码，所以我直接做了张逻辑结构图（数字模拟从注册到登录成功的顺序）：  看完这张图，应该没有人好奇iH5和易企秀等其他H5工具有什么区别了——单单原理就不一样，iH5的交互是基于“对象树”的。橙色虚线上方是在舞台下建立注册和登录两个页面，必须创建的对象；下方是直接在舞台下创建的对象。 从图中可以看出，注册其实很简单，用输入框收集不同类型的文本，提交到数据库就行。 登录看起来复杂，但原理只有三步： （1）查询数据库，是否有输入的手机号码； （2）搜得到结果，就把对应的密码和用户输入的进行比较； （3）比较结果相同，就跳转到任务页面。 所以我需要做的，就是在密码匹配成功时，不设置跳转到任务页面，改为进入自定义验证阶段。 改造：请输入“我好牛逼”进行验证 从上图可以看到，我把原来“密码判断计数器”跳转到任务页面的事件，改为对“我好牛逼”这个字符串的验证。 为了保存比较的结果，需要输出变量到舞台下新建的“登录附加验证”变量，相同为0、不同为1。 这么一来，只要把做验证判断的计数器和这个变量绑定，就能设置计数器等于0时跳转到iH5的任务页面了。 实践：一群迫于KPI淫威的人 添加验证之后，这个APP基本能开放使用了。每个人都可以发布任务，认领自己或别人发布的任务，而且只有认领任务的人有权标记任务为已完成。  近日我们公司各部门开始实行KPI制度，我所在的组首当其冲，上面这张图就模拟了任务分配。比如我用“自媒体小组”的帐号登录，可以发布也能认领任务，而我认领过的任务右边就会有个小圆圈。 被认领的任务完成后，点击圆圈标识，任务就会被自动归到已完成一类，任务由谁发布、被谁完成，一目了然——  实际上，别看这个界面看起来简单，因为涉及认领人、已完成任务和翻页等多种逻辑判断，做起来并不容易。我本来打算把这部分结构图做出来，简化完思路，预计面积得是登录结构图的三倍——于是作罢。 探奇：后台数据究竟咋样？ 这个系统使用了两个数据库，分别用于登录和任务管理。这些数据只有模板所有者才能看到，不能被修改，但能被所有者删除。 其中登录数据库是这样的—— list列表数据库的数据是这样的——  第二张图中的完成状态和已完成，是对任务进行归类和排序的重要标识。不同的值有不同