国庆上线

中生代第二十五期技术分享

讲师:郝振明

玛雅六月

国际化新锐

编辑:友强                             

玩赚消费娱乐新电商

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图1)

2017年10月1日上午10点,天狮集团旗下国际化新锐电商平台——玛雅六月强势上线。天狮集团李金元董事长表示,这是天狮在国家“一带一路”倡议下,落实“一体多翼”战略,整合全球商业网络资源和数以千万计家庭的稳定消费群体,布局移动互联网,打造的七大创新模式终端之一,将以“安全、健康和优质”为定位,满足广大消费者日益增长的对安全健康和品质升级的需求。

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图2)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图3)

李金元董事长表示,当下经济全球化深化发展,消费升级趋势进一步明显,移动互联网浪潮汹涌,天狮实施数字化战略、体验化战略、年轻化战略,布局移动互联网的举措顺应天时,合乎大势。玛雅六月是天狮未来着力打造的七大创新模式终端之一,是天狮从“互联网+”浪潮中挖掘的新的创新增长点和重要拓展领域,聚焦于各个国家主流社会的刚性需求,定位于新中产阶层中高端人群,以“为广大消费者和事业伙伴提供一流的质量、合算的价格、高品质服务”为发展目标,创建国际化电商平台。未来,天狮还将积极响应国家“一带一路”倡议,进一步整合全球资源,拓展玛雅六月国际市场,布局东南亚和欧亚等区域,开拓印尼、印度、俄罗斯等海外市场。

摘要:随着电商领域在传统企业的热度不断上升,在“互联网+”的背景下,许多传统企业涉猎到移动电商领域,然而现实落地情况并不像企业想象的一帆风顺。
本文将为大家分享移动电商的实战经验,以技术支撑业务的视角,为大家讲述传统企业移动电商平台的定位和转型,业务调整对IT架构的挑战和应对以及技术驱动业务。传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图4)
郝振明,EALL专家委员。普元信息移动,集成产品部负责人。多年以来,一直从事企业移动信息化、移动互联网化的资询、产品工作,在此领域有丰富的经验和独到的认识。最喜欢的事:读书、跑步、铁三,被大家誉为“夜跑达人“。

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图5)

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图6)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图7)

汇集世界各地土特名优的“明星”产品,主打“消费商”全新概念——玛雅六月的上线,引发业界及广大微商、网民们的极大关注。玛雅六月公司负责人介绍,玛雅六月基于B2C和B2B的模式,将重构商家和消费者的利益分配结构,引导消费者向消费商的成长转变,引领新一轮电商模式的创新。

相较于传统电商平台,玛雅六月的重要特色就是互动、分享机制。用户在玛雅六月购物,消费即可获得共享平台利润的机会,通过抢红包的方式达到返现的目的。更会通过分享、传播玛雅六月平台,得到更多的红包抽奖机会,通过社交化的分享,朋友圈的传播达到利益变现的目标。平台还会以红包返现为基础,开展各式各样的主题活动,让消费者在平台够买优质商品的同时,还能得到平台提供的旅游赞助、线下活动、购物返利等奖励模式。本次平台上线,玛雅六月就推出了注册玛雅会员就送“2000元大礼包”、消费100元抢红包等活动,让消费者享尽享实惠。

大家好,我是普元信息移动产品线的负责人郝振明。怀着忐忑的心情,我今天为大家分享一下《传统企业的移动电商平台建设实践》。之所以忐忑的原因是,最近几年传统企业的IT建设未及时跟上互联网发展的脚步,一时间在很多人眼里成为技术落后者的代名词,而今天分享的主题却恰恰确是《传统企业的移动电商平台建设实践》。所以,希望各位专家能够多多拍砖拍砖,当然也衷心希望本次分享能够对大家所有帮助。

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图8)

这或许不一定是您的第一感觉,但确实是几年前我自己的感觉,直到最近几年接触了不少传统企业进行电子商务的建设,我才有了一些浅显的认识。

稍微举个最最传统的例子,在没有互联网的时代,一家鞋厂(这里举例子说明)通常可以通过一下方式进行销售。

进入超市,面向大众销售,超市要收走入场费,而且对于销售的每一双都收走一笔佣点。

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图9)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图10)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图11)

同时网络营销,玛雅六月平台还引入了角色升级等富含娱乐元素的营销策略,通过尊享各个级别角色的消费特权,增强用户粘性,立志将玛雅六月打造成“安全、健康和优质的综合性家庭服务平台”、“巨额利润返还消费者的购物营销平台”、“消费与娱乐无缝跨界的新型电商平台”,人们眼中古老、神秘、遥远的玛雅,也将因玛雅六月电商品牌而变得新潮、时尚、鲜活。

建立专柜,注重品牌,商场要收走入场费、管理费等。

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图12)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图13)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图14)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图15)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图16)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图17)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图18)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图19)传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图20)

为了满足移动互联时代的消费商的运营习惯,玛雅六月本次上线平台覆盖了Android、IOS、微信、小程序等多个平台,未来还将覆盖PC端和H5渠道,打造多维度的消费娱乐圈层。

建立专卖店,需要店铺成本,人工成本,水电成本……

请扫右边二维码

而实际上,互联网电子商务,只是销售渠道的拓展和经营。针对上面鞋厂的场景,电子商务常见可能是在天猫开个旗舰店、入住一下京东。

公众号ID

当然这些都不是我们主要讨论的问题,我们今天的讨论的主题是针对传统企业自建的电子商务平台的实践,而聚焦点,在于移动电商平台的实践上,聚焦在这方面有两个原因:

wstxtiens

第一、电子商务,在交易上,移动已经全面超越PC端,以刚过去的618为例,京东的移动端订单占比超60%。

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图21)

想了解?

而第二个原因也是最重要的原因是:电商平台太大,在中生代里有大量高手针对不同的模块进行分享,而且分享的都非常的好,想来想去,还是从移动端做一次分享吧,毕竟是我最熟悉的部分。

今天我会从以下四部分作个分享,拋抛砖,欢迎大家批评指教。

 

传统企业移动电商平台的定位

在传统企业移动电商平台的建设中,绝大多数企业并不是建设一个平台用于与天猫或者京东进行竞争,实际上都会有各自的特点,我大概的总结为一下三种类型:

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图22)

点击“阅读原文”看看

我简单粗暴的把传统企业移动电商平台分为以上三类(随着时间变化,相信我会有新的理解J)。

第一类:销售自产商品。这个比较容易理解,比如之前的鞋厂就是类似的例子,当然这是最传统的例子。

从我的经验里,还有一些有意思的变形,无库存商品。无库存商品比较典型的包括最近很火的红领(C2M),如果有兴趣的话,可以参考一下这篇分享:

企业数字化转型实战:红领酷特智能C2M商业生态

另外一种比较典型的场景是自产产品为无实物载体,比如保险行业的保单、银行业的理财,都属于无库存商品。

无库存商品区别与有库存商品,商品并无件数限制,SPU和SKU的处理就不尽相同,这属于电商平台的后端设计的问题,这个就不展开讨论了。

第二类:积分商场。针对自己的客户/用户的积分商场。

一般在银行、电信、航空等大型针对最终用户服务的企业中比较常见。区别与传统的移动电商平台,其最大的特点是购买方式的不同,通常支持积分兑换、积分+现金兑换。

当然,从技术纬度,也可以采用无积分全现金购买的方式,不过这种方式,对于最终消费者的吸引力就大大降低了。

第三类:销售非自产商品。

这个是最容易跟京东、天猫等专门的电商平台冲突的,如何在不断尝试过程中,寻找自身平台的定位,是这一类移动电商平台的业务挑战。今天在稍后的例子里,会提及一些这方面的实践,在此之前,先简单下,我们在移动电商平台选型时候的一些思考。

 

移动电商平台的技术选型

今天的分享将专注在移动电商平台,针对移动二字,首先从移动前端(通常说的App端)和移动架构上做的一些思考分享给大家。

从2014年下半年以来,移动前端技术发生了一些重大的变化,之前大讲特讲的Hybrid(原生代码+HTML),突然演进到了驱动原生的方式。

对于驱动原生,这个中文,是我在14年翻译的,原因是我觉着这是一种技术流派。这种方案的大致思路是,在运行态的时候,通过调用操作提供的接口,对UI进行渲染,而不是把渲染交给浏览器内核。这种技术流派(我这里说的流派,因各家虽然出了各自的不同名字的框架,但思路是一致的),2015年一来,从天猫开始互联网企业也采用了,后来阿里出了Weex,携程使用了React Mix框架。无论从用户体验、跨平台、性能、以及热更(hotfix)方案,都得到了广泛的认可。

需要说明一点的是,你会发现,移动App端的技术最近两年发展之快,到了“还没来得急分享,就称要开源了”的程度,记得15年6月份,阿里的鬼道做了一次关于React Native 在天猫的实践的分享之后,没到一年的时间,阿里就计划开源自己的Weex框架 。更有甚者有的互联网公司去年还在讲基于Hybrid的优化,并且不建议过快跟进新技术,结果今年就在大会分享着React Native的实战,甚至还出了一本书关于React Native的书。

所以,我个人觉着,分享一定要看最新的,昨天看了某个技术大会居然翻出去年大会的分享的材料发到自己公众号上,虽然还有一定的借鉴性,但我认为绝对误人子弟(吐槽一把)。

对于一个传统的移动电商平台选型,因其是面向最终消费者(ToC):

首先,应该要做一些用户体验,使用起来效果最好能做到“纵享丝滑”。

其次,相对于传统企业,很多IT自身能力一般,或者受制于于HeadCount的原因,无法自行组建团队,不得不把系统开发完全交给乙方,所以,需要充分考虑的是实施难度和维护甚至交接的成本。

再次,传统企业的移动电商平台,因其一般很难做成最终消费者的必备应用,推广成本较高,所以需要充分考虑推广难度。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图23)

对于前端技术方案,我们通常从内容、CPU、响应时间几个纬度来进行比较。
这里借用阿里鬼道在天猫做的数据。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图24)

在鬼道的这篇文章中,可以得出:React Native内存远低于混合模式下采用webkit渲染的内存(差不多是只需要一半的内存就够了)

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图25)

CPU方面React Native 基本上也跟Native 相同,比Web方式节省40%。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图26)

对于相同功能,Web 方式大概需要2s的时间,React Native 及Native,基本都在1s之内。

通过上述的比较,可以看出React Native 无论从内存、CPU、响应时间都全面超越Webkit作为渲染器的HTML;

然而,选择一种技术,还需要看他是不是一种趋势,当然,你可以通过搜索引擎获取到,类似驱动原生的技术,天猫、淘宝、携程甚至腾讯都在不同场景下使用。

实际上,基于Webkit和驱动原生因其实现原理的区别,会让我们有一些小技巧让我们了解各大场,对这个技术流派的态度。

传统的Hybrid:其大致的思路是采用HTML(或者很多人说的H5)作为UI,通过嵌入或者系统的浏览器作为渲染(通常采用Webkit),当需要本地能力的时候,采用原生语言的方式编写,并提供接口给UI端调用。因其UI的渲染采用浏览器的方式,难免会影响到用户的体验。

驱动原生:在运行态的时候,通过调用操作提供的接口,对UI进行渲染,而不是把渲染交给浏览器内核。

这样,对于操作系统来讲,前者不无法获取到具体的控件;而后者,因操作系统负责渲染,它势必会形成一个控件树。

针对这个特点,我们可以据此判断到底浏览器渲染还是操作系统渲染。而驱动原生就是采用操作系统进行渲染的,我称其为原生渲染。

下面我来介绍一个小技巧:如何判断一个App是通过操作系统进行渲染的,还是通过webkit进行渲染?

当然,您需要现有一部Android的手机。

传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图27)

有了这部手机,你就可以在手机中安装你想研究的App,很不幸的是,iOS手机没有此功能。然后,打开“开发者选项”的“显示布局边界”。如上图,你的手机就会变成屏幕右侧的情况。然后切换到各个应用即可。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图28)

如上图,如果一个界面上,被Android划出框框来,就是原生渲染(当然这有两种方式实现,一种是原因语言开发的,一种是驱动原生的方式)。如果明明是个Button,却没有被识别出来(如上图的右侧),那就是Webkit做渲染。其原理大致是,操作系统渲染的UI,都会以一个UI树的方式进行维护,而非其渲染的UI,它不负责维护,也就无法识别到了。

通过研究你会发现:天猫、淘宝、京东、携程等App的主要操作的界面已经采用原生渲染了(要相信自己的眼睛哦),而不是使用webkit做渲染了。

另外,这个功能还有一个比较重要的功能,学(chao)习(xi)比较好的App的UI设计哦,因为他连我们平时没有关注到的留白、占位都能很好的识别到。

为了准备这次交流,我昨天又取了一次各个App的版本,有几个有意思的点,给大家做一点分享。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图29)

无论是手淘、手猫,主页和主要的主题(类似聚划算)、商品、评价体系等等,在App里,基本放弃了采用Webkit的方式渲染。(需要说明一点的是,Webkit还是有用处,但不是原来的主做UI渲染了)这一点,还是要超前京东一步的,在此版本之前,无论是手淘、手猫还是京东,都是主页、主题、商品、评价等采用原生渲染,在图文详情页面保留了Webkit做渲染。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图30)

携程:相对双十二的时候,除了酒店、机票外,旅游也采用原生渲染,也确实符合携程在InfoQ大会上的分享(React Mix)。当然,对于景点等小功能模块,还是采用HTML在Webkit中渲染的方式。大家有兴趣可以采用这种方式自行尝试。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图31)

通过上面的分析,我们可以看出驱动原生从单一的技术纬度,还是比Hybrid的技术有很大的优势,并且大量的主流App还是采用了类似技术进行升级改造。

然而类似的驱动原生的方案,最为出名的方式是React Native,Ta本身并不支持跨平台,简单说也需要单独为iOS、Android各自写一套代码。

同时它采用react.js的语法,传统企业中这一类人才是缺失的。实际上企业已经进行了十几年的IT建设,主要采用的都是B/S的,还是有大量的Web程序员。

结合上述两点,我们选择开发期让工程师编写HTML/CSS/javascript的代码,在编译期编译成驱动原生的代码;

在打包期,将编译后的代码带入安装包(ipa、apk)中,如下图:

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图32)

左侧采用最为常见的基于Eclipse 的开发工具作为开发环境;右侧是从代码如何到最终的移动设备中的一个示意图。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图33)

为了解决开发期效率的问题,我们采用了多屏调试的方式,支持多个iOS、Android设备,同时进行调试。并且App端做了自动适配的功能,解决屏幕大小带来的工作量。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图34)

在我们的实践过程中,我们会发现,传统企业的移动电商App很难成为最终消费者不可或缺的App,这会导致,最终用户安装后,不会经常更新这个App。直接的后果是,新业务无法及时让最终用户感知到。

传统的方式,为了让用户感知到新功能,基本上要做两件事情:

AppStore 通过审核

用户主动去下载新App安装。

为了解决这个问题,我们采用了动态更新技术。确保用户在使用App时,可以及时容易获取到功能。

对于一个新业务,我们的方案可以通过两种方式让用户获取到最新的功能:

下载了最新的安装包。

动态更新。

通过第二种方式,可以不用等待App Store审核,甚至可以做到在用户无感知的情况下,新的业务已经在使用了。这种方式也充分考虑了业务调整,对于IT的冲击,下面我们举一些例子来看一下真实场景下如何应对的。

业务调整对IT架构的挑战及应对

在这个章节中,我尽量采用一些真实的场景和代码,以其能够更形象的还原出当时的情况。

 传统企业的移动电商平台实践【文末有福利】天狮布局移动互联网 电商平台玛雅六月强势上线(图35)

我们曾经遇到过一个客户,做特产的O2O平台,典型的一个B2C的方式,实际上,传统企业并没有太多的移动电商PM类人才。最好的方式是,借鉴一个类似的App风格,综合考虑,借鉴了京东和淘宝的风格。当然我们也充分考虑到,变化是移动电商永恒的主题。

在前端代码上我们,做了基于业务的二次封装,便于后期的需求变化。比较典型的例子就是下侧的四个菜单:首页、品类、购物车、我的,进行了封装,类似的代码如下:

 

打赏
  • 打赏支付宝扫一扫
  • 打赏微信扫一扫