从硅谷到上海,这个技术大神做了个小程序,带你发现城中好去处 | 晓组织 #18

小程序

2017-09-03 18:10

知晓程序注:

「晓组织」是知晓程序推出的全新栏目。

每周,我们都会邀请优秀的小程序开发者,从产品/开发/运营等角度,分享他的小程序实战经验。如果你想成为「晓组织」的一员,请发送邮件至 bigbang@ifanr.com 给我们投稿,献上你的投名状。


这里是「晓组织」的第 18 期。

我是徐寅,在「好处 MeetBest」担任 CTO。

我毕业于美国威斯康星州立大学计算机系,曾任硅谷著名旅游社交公司 Trip.com 高级架构师,带领团队开发的 Trip.com App 多次被 Apple, Google 评选为最优秀软件,并获得 Google 最佳开发者奖和编辑推荐奖。

当然,我也是个独立开发者,没事喜欢自己倒腾开发些好玩的 App。譬如 Heart Heath Mobile,在 2012 年美国政府 HHS 部门举办的健康移动软件比赛获得了全美第一名。之前开发过好几个 App,在全球 50 多个国家热销。

不懂产品的码农不是好的 CTO — 在硅谷的时候,我创立了目前硅谷最大的华人移动软件交流组织,也多次被邀请创业及做技术演讲。

关注「知晓程序」微信公众号,在后台回复「0109」,一张图教你玩转小程序。

从硅谷到上海,成为一名「城市黑客」

回国之后,我便加入了「好处 MeetBest」团队。

好处是一个「城市黑客」组织,而我的伙伴们则是一群精通空间魔法的建筑师。

他们在城市繁华地带,寻找出一个个潜在的好去处,并将这些寻常、老旧的场所,精心改造成各种意想不到的,独具特色的空间。

从外滩的老上海洋房,到法租界的精致小楼,我们在上海的中心地带,已经开辟出了十几个充满惊喜的空间。无论是私人派对、主题聚会、还是拍摄直播、团建培训、婚礼节庆,人们都能在好处的空间里,找到属于他们的一份自在。

虽然已经有数百家企业客户,以及逾万名个人用户预定过好处的空间,但在我加入团队之前,好处的线下沟通和预定流程非常繁琐复杂,并且找不到现成的平台解决方案。

用小程序,解决「多人线上决策」的问题

我一直信奉用互联网手段提高工作效率这件事,所以,我们一直在策划开发好处的客户端,帮人们发现城市中的优质场地和美好聚处,方便地去预定这些空间来做聚会、团建、会议、拍摄等各种各样好玩的事情。

落地到功能层面,这个客户端还需要让人们很方便地进行场地的内容查看及分享、细节咨询、分时段预定等各种操作。

「好处 MeetBest」是我开发的第一个微信小程序,从启动开发到基本功能完成,仅用了不到一个月的时间。

为什么是微信小程序呢?作为一个从 2010 年起就一直在开发 iOS 和 Android App 的工程师,在构架好处客户端时,第一个想到的,毫无疑问是开发 Native App。但仔细思考了很久,加上和运营团队包括客户沟通了几次以后,发现原生 App 可能不是一个最好的选择。

根据我们前期运营的经验,策划一个聚会或者活动,是一个「多人线上共同决策」的过程。

比如,我们大部分客户在策划一个线下聚会或者活动时,一定会在自己的微信小群组里咨询一下大家的意见,如果找到合适的聚会空间,他们通常会把照片、地址、空间信息复制黏贴或者截图在微信群里分享,然后在群组里征求一下小伙伴的意见。如果不合适,他们需要再重复一次相同的工作,直到找到大家都满意的空间后,再下单预定。

综合大部分客户的决策过程,我们获得了非常大的启发。因为这个过程是微信小程序完美适用的场景。

在「好处 MeetBest」的小程序中,活动策划人打开后,可以在空间列表立即看到所有空间的简介和图片,空间的细节信息和图片都展示在详情页面。

空间的可预约日期时间,也都很直观地标识在时间轴上。所有额外的注意事项,也都很明确地告知到了用户。价格信息也很透明,每一项价格,我们都在最后的确认页面上,清楚地标识了出来。

这样,整个决策流程变得极其顺畅且便捷,预定流程也变得简单明了。没有繁琐的注册登录,活动策划人不再需要繁琐地截图分享,就可以把空间信息分享给参与的朋友;参与者们不再需要下载任何多余的 App 就可以立刻参与到决策当中。

当策划人找到觉得满意的空间,可以将详情页面直接转发到自己的微信群,参与者们首先可以从分享的小程序卡片上看到:主图、空间名称、小时价格、地址区域等最重要的信息。

点击卡片,可以直接打开这个空间的详情页面,看到空间信息和图片。如果他们觉得这个不是最适合的空间,他们可以自行回到小程序的空间列表页面,看看有没有其他更好、更适合的聚会空间。

3 周时间,从零做出一款小程序

最早我们决定开发小程序后第一个问题就是:作为一个 iOS 和 Android 的工程师,需要多久时间才能熟悉小程序开发,并且从 0 到 1 的完成整个产品?

再加上「好处 MeetBest」是一个以建筑空间设计感和创意驱动的公司。我们也希望小程序能有一定设计感和良好的体验。所以开发和设计上的双重挑战在一开始也给了我不少压力。

作为一个没有什么设计能力,连 Photoshop 和 Sketch 都不太熟练的的码农来说,我翻遍了几乎 Dribbble 和 Pinterest 上所有酒店、机票、活动,以及有任何展示预定的产品设计图和样品,再结合我们自己的一些要求和想法,在纸上画出了我们第一个版本的大概方案。在此趁机感谢各位有贡献精神的设计师们。

之后,我开始着手小程序的研究开发。

首先必须感谢微信,因为小程序的文档给我非常好的印象,组织合理、内容明确,提供了很多案例。

坦白说国内很多的框架,或 SDK 提供方的文档都是一直以来非常让人头疼的问题,原本简单的开发,因为混乱的文档和不明确的使用方法变得异常恼人。而微信在这方面初期就打消了我很大的顾虑。(没有任何拍微信马屁的意思,如果亲自看过小程序的文档应该就能理解)

加上小程序是一个类似 Vue.Js 和 React.Js 的 MVVM 框架,微信把它叫做 MINA 框架,这使得原本接触过 Vue 或 React 框架的工程师在学习过程中几乎没有什么门槛。而且大部分的 Javascript 的库都可以直接被拿来使用,比如 promise, moment 等。

虽然目前小程序开放的 API 还不算太多,但至少大部分的基础功能都可以实现,所以在基本上没有给我们的开发造成太大的困扰。我们一共花了 3 周的时间,完成好处小程序第一版的所有功能。

那些年,我们在小程序上踩过的坑

目前,我们对小程序仍有一些怨言和苦恼。

1. 核心组件的层级限制

第一是他们部分核心组件在层级上的限制,比如地图和多行输入框。

这两个都是我们非常需要的组件。一个用于显示我们空间的位置,另一个用于预约时用户填写额外的需求。

但这两个都被要求在最高层级,这导致它们在滚动时,会浮在我们 fix 在底部的确认按键上。

我们尝试了很多不同的方法,但都无法摆脱这个问题。这一度导致我打算修改设计,使用图片的形式来展示地图,但实在不愿意放弃一个可以放大缩小自由操作的真实地图,所以暂时只能接受这个有点 buggy 的形式。

希望微信能够在后面修改这个限制。

2. 客服会话功能

还有一个很关键的功能是客服会话功能。

虽然微信在小程序中提供了咨询客服这个功能,但是他们提供的官方客服工具却只有网页版本。如果我们的运营人员不在电脑旁,就无法立刻收到和回复消息。

再加上,微信提供的这个网页客服工具,上面的「公众号的客服」和「微信小程序的客服」入口是分开的,一旦登陆了一边,另一边则会被强制登出。我们的运营人员必须开两个不共享 cookie 的浏览器,来实现同时登陆。

但无论如何,他们仍然没办法在手机上迅速地回复用户。这也让我撞了好几天桌子。

我们运营人员的需求是,不需要登陆网页就能收到客服消息,也能在手机上随时回复。

我们在寻找了很久。也没发现特别可靠且有效的第三方工具来快速解决这个问题。而我们自己也实在没有时间去开发一个完整的客服系统。

但好在微信提供了一个客服消息的后台接口。每条客服消息会被转发到我们的后台服务器上。然后我们利用了这个功能,做了两个曲线救国的功能:

  • 第一,每次我们的后台收到新的客服消息,就会发送一封邮件到我们运营同事的邮箱,他们手机可以收到提醒。
  • 第二,我们做了一个简易的微信机器人,每次我们收到一条新的客服消息,就用机器人利用聊天的方式,给我们的运营同事发送一条消息。然后,他们可以利用我们设置好的方法和我们的机器人对话,机器人在后台通过相关的信息将内容转发给用户。

所以是这样一个流程:用户-> 微信小程序-> 联系客服-> 发送消息到我们的服务器-> 机器人-> 好处运营人员。这样,我们就简单地实现了一个简易的手机客服系统。

当然还有不少功能,我们希望微信未来能陆续开发,比如更多推送相关的功能,甚至本地提醒,以及更多、能更自由地使用的接口和控件。同时,也希望微信能提供更多配套工具和更多完整的功能。

就目前来说,我们对小程序还有很大的信心,我们相信腾讯和微信看到小程序的潜力,一定会放更多的资源和心思在小程序上。

现在,平均每 1 – 2 个星期都会有一些新的功能推出。这些都能让开发者发挥更多想象力,以及提供更大助力。

关注「知晓程序」公众号,微信后台回复「新能力」,获取小程序新能力全解读。

当然,我们也希望微信能够给小程序提供除了搜索以外的更多曝光机会,让更多的用户能更容易地找到优质的小程序。

小程序目前是「好处 MeetBest」除了网站以外的唯一客户端,可能在后面很长一段时间都不会有什么改变。我们也会将越来越多的功能加入小程序,比如按照时间、活动类型和地点筛选,更多空间相关的智能硬件的操控入口,更好的的聚会邀请等功能。

我们正在招兵买马!

我们项目虽然不属于高精尖的科技项目,但它对工程师们的要求却一点都不低,无论用户体验、业务逻辑,还是内部管理、软硬件结合,都是对工程师的综合素质和学习能力的全面挑战。

若你有一颗代码艺术家的心,也对我们做的事感兴趣,想要与一群城市黑客们一起并肩作战,好处的大门永远向你敞开!(顺便一说我们真的在找 Nodejs —— 认真脸)

欢迎向我们扔邮件:hi@meetbest.com 👈

「好处 MeetBest」小程序使用链接
https://minapp.com/miniapp/3917/

关注「知晓程序」公众号 👇

  • 在微信后台回复「晓组织」,看厉害的人怎么做小程序
  • 在微信后台回复「666」,加入知晓开发联盟。

zxcx_0208

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中

小程序商店 minapp.com,一扫即用的小程序大全。微信公众号「知晓程序」,做中国最好的小程序报道。

本篇来自栏目

解锁订阅模式,获得更多专属优质内容