cover_image

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

group聚会上海晓组织空间城市黑客好处好处 MeetBest室内设计建筑建筑师徐寅硅谷
知晓程序

<p><img class="alignnone size-full wp-image-902900" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/03.jpg" alt="" width="1200" height="750" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/03.jpg 1200w, http://www.ifanr.com/wp-content/uploads/2017/09/03-360x225.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/03-768x480.jpg 768w, http://www.ifanr.com/wp-content/uploads/2017/09/03-1024x640.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></p> <p><span style="color: #605eac;"><strong>知晓程序注:</strong></span></p> <p>「晓组织」是知晓程序推出的全新栏目。</p> <p>每周,我们都会邀请优秀的小程序开发者,从产品/开发/运营等角度,分享他的小程序实战经验。如果你想成为「晓组织」的一员,请发送邮件至 <span style="color: #605eac;"><a style="color: #605eac;" href="http://bigbang@ifanr.com">bigbang@ifanr.com </a></span>给我们投稿,献上你的投名状。</p> <hr /> <p><strong>这里是「晓组织」的第 <span style="color: #605eac;">18</span> 期。</strong></p> <p>我是徐寅,在「<span style="color: #605eac;"><a style="color: #605eac;" href="http://www.ifanr.com/minapp/888964">好处 MeetBest</a></span>」担任 CTO。</p> <p><img class="alignnone size-full wp-image-901635" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/haochu1.jpg" alt="" width="1000" height="500" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/haochu1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu1-360x180.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu1-768x384.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>我毕业于美国威斯康星州立大学计算机系,曾任硅谷著名旅游社交公司 Trip.com 高级架构师,带领团队开发的 Trip.com App 多次被 Apple, Google 评选为最优秀软件,并获得 Google 最佳开发者奖和编辑推荐奖。</p> <p>当然,<strong>我也是个独立开发者,没事喜欢自己倒腾开发些好玩的 App。</strong>譬如 Heart Heath Mobile,在 2012 年美国政府 HHS 部门举办的健康移动软件比赛获得了全美第一名。之前开发过好几个 App,在全球 50 多个国家热销。</p> <p><strong>不懂产品的码农不是好的 CTO</strong> — 在硅谷的时候,我创立了目前硅谷最大的华人移动软件交流组织,也多次被邀请创业及做技术演讲。</p> <p style="font-size: 14px;"><span style="color: #808080;">关注「知晓程序」微信公众号,在后台回复「<span style="color: #605eac;">0109</span>」,一张图教你玩转小程序。</span></p> <h3><span style="color: #605eac;">从硅谷到上海,成为一名「城市黑客」</span></h3> <p>回国之后,我便加入了「好处 MeetBest」团队。</p> <p>好处是一个「城市黑客」组织,而我的伙伴们则是一群精通空间魔法的建筑师。</p> <p><img class="alignnone size-full wp-image-901645" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/haochu2.jpg" alt="" width="1000" height="1000" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/haochu2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu2-360x360.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu2-768x768.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p><strong>他们在城市繁华地带,寻找出一个个潜在的好去处,并将这些寻常、老旧的场所,精心改造成各种意想不到的,独具特色的空间。</strong></p> <p><img class="alignnone size-full wp-image-902758" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/hciu.jpg" alt="" width="1000" height="428" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/hciu.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/hciu-360x154.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/hciu-768x329.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>从外滩的老上海洋房,到法租界的精致小楼,我们在上海的中心地带,已经开辟出了十几个充满惊喜的空间。无论是私人派对、主题聚会、还是拍摄直播、团建培训、婚礼节庆,人们都能在好处的空间里,找到属于他们的一份自在。</p> <p><img class="alignnone size-full wp-image-901642" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/image-10.jpg" alt="" width="1000" height="653" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/image-10.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/image-10-360x235.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/image-10-768x502.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>虽然已经有数百家企业客户,以及逾万名个人用户预定过好处的空间,但在我加入团队之前,好处的线下沟通和预定流程非常繁琐复杂,并且找不到现成的平台解决方案。</p> <h3><span style="color: #605eac;">用小程序,解决「多人线上决策」的问题</span></h3> <p><strong>我一直信奉用互联网手段提高工作效率这件事</strong>,所以,我们一直在策划开发好处的客户端,帮人们发现城市中的优质场地和美好聚处,方便地去预定这些空间来做聚会、团建、会议、拍摄等各种各样好玩的事情。</p> <p>落地到功能层面,这个客户端还需要让人们很方便地进行场地的内容查看及分享、细节咨询、分时段预定等各种操作。</p> <p><strong>「好处 MeetBest」是我开发的第一个微信小程序,从启动开发到基本功能完成,仅用了不到一个月的时间。</strong></p> <p>为什么是微信小程序呢?作为一个从 2010 年起就一直在开发 iOS 和 Android App 的工程师,在构架好处客户端时,第一个想到的,毫无疑问是开发 Native App。但仔细思考了很久,加上和运营团队包括客户沟通了几次以后,发现原生 App 可能不是一个最好的选择。</p> <p>根据我们前期运营的经验,<strong>策划一个聚会或者活动,是一个「多人线上共同决策」的过程。</strong></p> <p>比如,我们大部分客户在策划一个线下聚会或者活动时,一定会在自己的微信小群组里咨询一下大家的意见,如果找到合适的聚会空间,他们通常会把照片、地址、空间信息复制黏贴或者截图在微信群里分享,然后在群组里征求一下小伙伴的意见。如果不合适,他们需要再重复一次相同的工作,直到找到大家都满意的空间后,再下单预定。</p> <p>综合大部分客户的决策过程,我们获得了非常大的启发。因为<strong>这个过程是微信小程序完美适用的场景。</strong></p> <p>在「好处 MeetBest」的小程序中,活动策划人打开后,可以在空间列表立即看到所有空间的简介和图片,空间的细节信息和图片都展示在详情页面。</p> <p><img class="alignnone size-full wp-image-901702" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/haochu5.jpg" alt="" width="1000" height="588" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/haochu5.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu5-360x212.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu5-768x452.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>空间的可预约日期时间,也都很直观地标识在时间轴上。所有额外的注意事项,也都很明确地告知到了用户。价格信息也很透明,每一项价格,我们都在最后的确认页面上,清楚地标识了出来。</p> <p><img class="alignnone size-full wp-image-901724" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/haochu6.jpg" alt="" width="1000" height="588" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/haochu6.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu6-360x212.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu6-768x452.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>这样,整个决策流程变得极其顺畅且便捷,预定流程也变得简单明了。<strong>没有繁琐的注册登录,活动策划人不再需要繁琐地截图分享,就可以把空间信息分享给参与的朋友;参与者们不再需要下载任何多余的 App 就可以立刻参与到决策当中。</strong></p> <p>当策划人找到觉得满意的空间,可以将详情页面直接转发到自己的微信群,参与者们首先可以从分享的小程序卡片上看到:主图、空间名称、小时价格、地址区域等最重要的信息。</p> <p>点击卡片,可以直接打开这个空间的详情页面,看到空间信息和图片。如果他们觉得这个不是最适合的空间,他们可以自行回到小程序的空间列表页面,看看有没有其他更好、更适合的聚会空间。</p> <p><img class="alignnone size-full wp-image-901773" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/haochu8.jpg" alt="" width="1000" height="1388" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/haochu8.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu8-360x500.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu8-768x1066.jpg 768w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu8-738x1024.jpg 738w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">3 周时间,从零做出一款小程序</span></h3> <p>最早我们决定开发小程序后第一个问题就是:<strong>作为一个 iOS 和 Android 的工程师,需要多久时间才能熟悉小程序开发,并且从 0 到 1 的完成整个产品?</strong></p> <p>再加上「好处 MeetBest」是一个以建筑空间设计感和创意驱动的公司。我们也希望小程序能有一定设计感和良好的体验。所以开发和设计上的双重挑战在一开始也给了我不少压力。</p> <p>作为一个没有什么设计能力,连 Photoshop 和 Sketch 都不太熟练的的码农来说,我翻遍了几乎 Dribbble 和 Pinterest 上所有酒店、机票、活动,以及有任何展示预定的产品设计图和样品,再结合我们自己的一些要求和想法,在纸上画出了我们第一个版本的大概方案。在此趁机感谢各位有贡献精神的设计师们。</p> <p>之后,我开始着手小程序的研究开发。</p> <p><strong>首先必须感谢微信,因为小程序的文档给我非常好的印象,组织合理、内容明确,提供了很多案例。</strong></p> <p>坦白说国内很多的框架,或 SDK 提供方的文档都是一直以来非常让人头疼的问题,原本简单的开发,因为混乱的文档和不明确的使用方法变得异常恼人。而微信在这方面初期就打消了我很大的顾虑。(没有任何拍微信马屁的意思,如果亲自看过小程序的文档应该就能理解)</p> <p>加上<strong>小程序是一个类似 Vue.Js 和 React.Js 的 MVVM 框架,微信把它叫做 MINA 框架,这使得原本接触过 Vue 或 React 框架的工程师在学习过程中几乎没有什么门槛。</strong>而且大部分的 Javascript 的库都可以直接被拿来使用,比如 promise, moment 等。</p> <p>虽然目前小程序开放的 API 还不算太多,但至少大部分的基础功能都可以实现,所以在基本上没有给我们的开发造成太大的困扰。我们一共花了 3 周的时间,完成好处小程序第一版的所有功能。</p> <h3><span style="color: #605eac;">那些年,我们在小程序上踩过的坑</span></h3> <p>目前,我们对小程序仍有一些怨言和苦恼。</p> <h4>1. 核心组件的层级限制</h4> <p>第一是他们部分核心组件在层级上的限制,比如地图和多行输入框。</p> <p><strong>这两个都是我们非常需要的组件。一个用于显示我们空间的位置,另一个用于预约时用户填写额外的需求。</strong></p> <p><img class="alignnone size-full wp-image-901779" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-25-at-4.27.28-PM.png" alt="" width="734" height="164" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-25-at-4.27.28-PM.png 734w, http://www.ifanr.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-25-at-4.27.28-PM-360x80.png 360w" sizes="(max-width: 734px) 100vw, 734px" /> <img class="alignnone size-full wp-image-901780" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-25-at-4.30.04-PM.png" alt="" width="920" height="226" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-25-at-4.30.04-PM.png 920w, http://www.ifanr.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-25-at-4.30.04-PM-360x88.png 360w, http://www.ifanr.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-25-at-4.30.04-PM-768x189.png 768w" sizes="(max-width: 920px) 100vw, 920px" /></p> <p>但这两个都被要求在最高层级,这导致它们在滚动时,会浮在我们 fix 在底部的确认按键上。</p> <p>我们尝试了很多不同的方法,但都无法摆脱这个问题。这一度导致我打算修改设计,使用图片的形式来展示地图,但实在不愿意放弃一个可以放大缩小自由操作的真实地图,所以暂时只能接受这个有点 buggy 的形式。</p> <p><strong>希望微信能够在后面修改这个限制。</strong></p> <p><img class="alignnone size-full wp-image-901784" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/map-bug.png" alt="" width="1000" height="974" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/map-bug.png 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/map-bug-360x351.png 360w, http://www.ifanr.com/wp-content/uploads/2017/08/map-bug-768x748.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h4>2. 客服会话功能</h4> <p>还有一个很关键的功能是客服会话功能。</p> <p>虽然微信在小程序中提供了咨询客服这个功能,但是他们提供的官方客服工具却只有网页版本。如果我们的运营人员不在电脑旁,就无法立刻收到和回复消息。</p> <p>再加上,<strong>微信提供的这个网页客服工具,上面的「公众号的客服」和「微信小程序的客服」入口是分开的</strong>,一旦登陆了一边,另一边则会被强制登出。我们的运营人员必须开两个不共享 cookie 的浏览器,来实现同时登陆。</p> <p>但无论如何,他们仍然没办法在手机上迅速地回复用户。这也让我撞了好几天桌子。</p> <p><img class="size-full wp-image-902887 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/20170901163617.gif" alt="" width="415" height="288" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/20170901163617.gif 415w, http://www.ifanr.com/wp-content/uploads/2017/09/20170901163617-360x250.gif 360w" sizes="(max-width: 415px) 100vw, 415px" /></p> <p><strong>我们运营人员的需求是,不需要登陆网页就能收到客服消息,也能在手机上随时回复。</strong></p> <p>我们在寻找了很久。也没发现特别可靠且有效的第三方工具来快速解决这个问题。而我们自己也实在没有时间去开发一个完整的客服系统。</p> <p>但好在微信提供了一个客服消息的后台接口。每条客服消息会被转发到我们的后台服务器上。然后<strong>我们利用了这个功能,做了两个曲线救国的功能:</strong></p> <ul> <li>第一,每次我们的后台收到新的客服消息,就会发送一封邮件到我们运营同事的邮箱,他们手机可以收到提醒。</li> <li>第二,我们做了一个简易的微信机器人,每次我们收到一条新的客服消息,就用机器人利用聊天的方式,给我们的运营同事发送一条消息。然后,他们可以利用我们设置好的方法和我们的机器人对话,机器人在后台通过相关的信息将内容转发给用户。</li> </ul> <p><strong>所以是这样一个流程:用户-&gt;微信小程序-&gt;联系客服-&gt;发送消息到我们的服务器-&gt;机器人-&gt;好处运营人员。</strong>这样,我们就简单地实现了一个简易的手机客服系统。</p> <p><img class="alignnone size-full wp-image-901772" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/haochu7.jpg" alt="" width="1000" height="1000" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/haochu7.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu7-360x360.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/haochu7-768x768.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>当然还有不少功能,我们希望微信未来能陆续开发,比如更多推送相关的功能,甚至本地提醒,以及更多、能更自由地使用的接口和控件。同时,也希望微信能提供更多配套工具和更多完整的功能。</p> <p>就目前来说,<strong>我们对小程序还有很大的信心,我们相信腾讯和微信看到小程序的潜力,一定会放更多的资源和心思在小程序上。</strong></p> <p>现在,平均每 1 &#8211; 2 个星期都会有一些新的功能推出。这些都能让开发者发挥更多想象力,以及提供更大助力。</p> <p style="font-size: 14px;"><span style="color: #808080;">关注「知晓程序」公众号,微信后台回复「<span style="color: #605eac;">新能力</span>」,获取小程序新能力全解读。<br /> </span></p> <p>当然,<strong>我们也希望微信能够给小程序提供除了搜索以外的更多曝光机会,让更多的用户能更容易地找到优质的小程序。</strong></p> <p>小程序目前是「好处 MeetBest」除了网站以外的唯一客户端,可能在后面很长一段时间都不会有什么改变。<strong>我们也会将越来越多的功能加入小程序,比如按照时间、活动类型和地点筛选,更多空间相关的智能硬件的操控入口,更好的的聚会邀请等功能。</strong></p> <h3><span style="color: #605eac;">我们正在招兵买马!</span></h3> <p>我们项目虽然不属于高精尖的科技项目,但它对工程师们的要求却一点都不低,无论用户体验、业务逻辑,还是内部管理、软硬件结合,都是对工程师的综合素质和学习能力的全面挑战。</p> <p><strong>若你有一颗代码艺术家的心,也对我们做的事感兴趣,想要与一群城市黑客们一起并肩作战,好处的大门永远向你敞开!</strong>(顺便一说我们真的在找 Nodejs —— 认真脸)</p> <p>欢迎向我们扔邮件:<span style="color: #605eac;">hi@meetbest.com</span> 👈</p> <p><img class="alignnone size-full wp-image-889112 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/08/qrhc.jpg" alt="" width="800" height="410" srcset="http://www.ifanr.com/wp-content/uploads/2017/08/qrhc.jpg 800w, http://www.ifanr.com/wp-content/uploads/2017/08/qrhc-360x185.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/08/qrhc-768x394.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></p> <p style="text-align: center;"><span style="color: #808080;">「好处 MeetBest」小程序使用链接</span><br /> <a href="https://minapp.com/miniapp/3917/"><span style="color: #808080;">https://minapp.com/miniapp/3917/</span></a></p> <p><strong>关注「<span style="color: #605eac;">知晓程序</span>」公众号 👇</strong></p> <ul> <li>在微信后台回复「<span style="color: #605eac;"><b>晓组织</b></span>」,看厉害的人怎么做小程序<strong>。</strong></li> <li>在微信后台回复「<span style="color: #605eac;"><b>666</b></span>」,加入知晓开发联盟。</li> </ul> <p><img class="alignnone size-full wp-image-784874" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/02/zxcx_0208.png" alt="zxcx_0208" width="1000" height="926" srcset="http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208.png 1000w, http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208-360x333.png 360w, http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208-768x711.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p>