复盘自研产品【抽奖靠手】,总结技术实践

本文涉及的产品
云服务器 ECS,u1 2核4GB 3个月
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
简介: 一个小小的产品,它的发展会见证很多变革,有行业的,有技术的,但是当你回顾过去,更多印象的反而是一群奋斗的人。每个人的工作有高峰底估,每个产品也是一样,但是只要你具有信念,坚持不懈,持续迭代,就算不是ChatGPT这种划时代产品,一个小而美的小产品也是很赞的,重要的是持续帮助服务一撮人。


产品背景

image.png

回到2013年,那时候淘宝开发平台开发商商家软件产品

偶然机会,我做了一个大转盘抽奖的产品放到淘宝服务市场给商家用,不到2天,就有很多用户来咨询,我感受到了一丝兴奋,于是快马加鞭的迭代开发,也有很多朋友的帮助,每天编程到午夜2点。随之而来的大量用户,我确定了方向,电商平台需要有个性化的营销工具,抽奖就是最简单最清晰的首选工具。

一周后我的新产品抽奖靠手上线了,主要提供帮助商家设置抽奖营销,商家可以服务他们的用户。在2013年双11,通过这个小产品,我挣到了6万元。

产品迭代实践

Logo的变化

大家可以从我们Logo变化看出什么嘛!

早期的LOGO

image.png

现在的LOGO

image.png

产品版本迭代

2012年,早期版本V1.0,不想说什么!现在来看,一个字很菜!

image.png

2013年,只是电脑端,可配置抽奖背景,布局,奖品,规则,只有大转盘游戏。在那个淘宝商家蛮荒的时代,商家对我们工具是爱不释手,玩的不亦乐乎,甚至带火了一些商家。

(我也应该去卖货,呜呜) image.png

2014年,抽奖规则和奖品玩法更丰富,DIY背景更多样,逐步增加手机端抽奖。

image.png image.png

2015年,订购人数到几千人的规模。注重迭代规则种类,奖品种类,游戏多样化。 image.png

2016年,电脑,手机端标准游戏和模板的扩充,如大转盘,九宫格,砸金蛋,老虎机等等。

image.png

2017年,抽奖整体布局可以拖拽化,定制功能更强大,手机端抽奖已成为核心。 image.png

2018年,京东,口碑等平台扩展。

2019年,产品UI体验整体更新,创建抽奖活动从模板角度出发。

image.png

2020年,淘宝手机APP第三方H5页面统一升级为小程序。

image.png image.png

2021年,商家PC千牛端改造,千牛后台类似电脑端小程序。

image.png

2022年,风云变幻,品牌定制多样化。

image.png

2023-2024淘宝服务市场不在辉煌

直播短视频内容营销才是商家重点

拼多玩法更加犀利淘宝京东转型商家操作简单消费者实惠买东西

所以商家服务市场工具慢慢减退我们这种抽奖营销弱需求产品慢慢退出市场还有一些打单生产强需求只有淘宝生存

淘宝平台自研产品变多尤其AIGC相关

未来期望我们产品还能坚持下来,期望还能研发优秀产品

技术选型实践

image.png

开发语言实践

2013年时候我们最早.net平台c# 开发因为之前这方面程序员

2016左右,后来逐步迭代PHP后台前端采用原生JavaScript模式

大概这个时候

2019左右,后来迭代PHP逻辑消费者前端采用淘宝小程序商家后端管理员采用VUE技术

2023左右目前逻辑层后端代码还是采用PHPthinkphp框架前端没有变化

image.png

数据库实践

数据库方面,早期SQL Server 后来MYSQLRedis模式

过程换过MongoDB但是一方面商业营收还有开发资源成本比较放弃其实这种抽奖Node.js + MongoDB的开发组合是最适合。大并发必须后面采用MySqlRedis怎样解决大并发问题

上面技术产品采用阿里云商家聚石塔产品ECSRDSRedisOSS

架构设计实践

架构演变

架构早期2.net asp.net 页面逻辑+数据库模式

后来逐步变成PHP逻辑层API模式,前端VUE小程序,MySql,云函数等多层组合

image.png

现在的架构图

image.png

因为前些年淘宝生态发展繁荣很多电商平台学习解决比如京东发展自己生态商家平台我们当然直接入驻下面我们针对京东商家平台架构设计大家可以参考了解欢迎一起交流学习

其他平台架构图

image.png

产品前端实践

历经迭代,我们产品目前前端技术主要采用手淘小程序的消费者端,千牛小程序的商家电脑活动配置端,VUE开发的Web管理员端。

image.png

手淘小程序

下图为开发手淘小程序的IDE工具,左侧是目录,右侧是预览器,中间是代码区,跟微信等小程序开发的IDE工具都相似,不多赘述。

image.png

重点讲解下我们组件式设计的模式,其实这里的设计跟React,VUE等语言一些思维模式相同,都是强调组件式,通过组件组合成大控件,或者大页面呈现,方便业务需求的使用。

image.png

在components中,包含了base基础组件如image,title等,也有游戏类型的组件,可以看到我们有多种游戏和互动模式,甚至还开发了基于白鹭引擎的高级游戏效果。通过这些互动组件,商家用户可以通过拖拽简单配置,组合成他们需要的店铺营销工具,比如游戏抽奖,关注领券,拉人领奖等等。

用一个砸金蛋的游戏来详细看下代码。下图是砸金蛋的商家配置页面。

image.png

砸金蛋代码axml代码如下。

image.png

js代码如下,因为代码篇幅较长,只做部分代码截图粘贴,代码逻辑也很简单 ,包括了游戏效果和后台抽奖API做信息交互。

image.png

我们再看下页面调用这个砸金蛋游戏组件的详细代码。其中结合了一些公共互动的奖品展示组件,其他游戏和互动模板都是类似的形式。看到这里,有的朋友觉得其实也没有什么太高明的创新和创意吧,我们这里重点是给大家展示在淘宝京东这种电商平台上的SaaS工具怎样运作的方式,包括一些电商业务的小程序的操作形式。

image.png

utils中放置了游戏的js执行效果代码。这些代码其实很常见,感兴趣的可以网上搜下,一堆一堆的实现效果。 image.png

最后再看下开发淘宝小程序怎样调用官方SDK的接口。其中的my.authorize就是用户授权的接口,授权后我们可以拿到手淘用户的唯一ID等信息,就可以继续后面的操作了。

总结一下,我们通过详解一个砸金蛋的游戏,明白了淘宝小程序的实现过程,了解了我们产品的整体前端实现逻辑,核心点就是游戏组件化,模板组件化。同时也学习到了在淘宝小程序中怎样获取用户授权信息,怎样调用发券的权益接口。

千牛小程序

上面介绍了手淘用户参与抽奖的开发过程和代码详细,接下来我们快速看下淘宝商家使用的页面和千牛小程序的代码。

这个是商家使用的正式后台页面。图中展示了商家配置活动的奖品明细。

image.png

下面是开发的IDE工具,和手淘小程序开发是同一个IDE工具,但是在开始选择类别时候一定要选对。

image.png

我们选择PC小程序项目中第一个小程序PC版,然后创建项目即可,这里我选择了我们创建过得项目。主面板如下,左侧代码目录就是千牛小程序代码,我们没有过多使用组件功能,直接用页面形式做开发。

image.png

千牛小程序在IDE中的预览如下,可以自己定义展示分辨率等场景信息,便于快速开发。

image.png

因为代码和项目比较庞大,我们这里简单让大家理解下产品的结构,了解下千牛小程序的开发形式,具体开发语言都是类似小程序的语法,不同平台只是个别地方或者接口有些不同。

VUE管理员端

简单看下管理员页面,代码就不在这里展示了。包括一些活动管理,管理员配置的功能。

image.png

成本优化实践

再展示一些目前云计算的产品场景图,便于大家更好的理解。

云产品技术升级带来的成本优化

这里云计算给我们成本优化帮助很大比如原始ECS后来云函数/Serverless模式RDS后来数据库模式

云产品订购升级带来的成本优化

早期我们ECSRDS后来根据不同产品进行购买后来购买最典型就是11压力时候我们采买多台这个时候只需要购买1即可包括现在后期产品使用量变小我们变成流量购买形式这些都是我们产品成本优化

下面一些图是淘宝聚石塔提供给我们CI/CD工具展示了我们针对不同场景的调整,可以做到快速一键切换。

image.png

下图是淘宝聚石塔提供的Devs工具,便于产品发布程序包,环境管理,监控。

image.png

淘宝开放平台提供的Serverless功能,可以直接云函数部署,不用关心太多服务器的问题。

image.png

云数据库也提供了MongoDB和MYSQL,因为安全问题目前功能性比较简单,适合一些简单的互动小应用。

image.png

总结一下,我们从技术演变可以了解到互联网的技术迭代;从架构设计中我们了解到做一个小产品其实也不是很简单,需要长期对技术和业务的了解;从前端技术中了解到,国内流行平台从普通的JavaScript技术,逐步发展到自己APP下的小程序,小程序具有更好的体验,更安全。最后,从高并发解决上也看到了云计算发展给我们带来的好处,人工需要的越来越少,硬件成本费用也越来越低,可以让创业者,开发者更专注到业务场景中。

问题解决实践

高并发问题的解决

image.png

讲下高并发的问题,因为其实抽奖,裂变这种互动应用,高QPS,高并发是一个常见的问题,也是一个棘手的问题,很多新手容易抓瞎,在2013年那个时候我们就因为突然的大规模流量导致频繁宕机,淘宝的流量不是盖的。但是在早期,这些高并发都需要自己去解决,伴随着互联网云计算的发展,现在的技术朋友轻松很多,用容器负载技术,Serverless技术就能轻松解决并发问题,而且费用还便宜,1个人就能搞定全部。

我们的高并发大概经历的过程是这样的:

               分表分库,优化Web Server。我们从早期SQL Server迁移到开源MySQL中。比如商家ID分成根据业务逻辑拆分不同商家编号不同层次放入不同每个数据量控制15以内

               增加ECS做负载均衡,加入Redis,加入队列等。Redis这里解决我们很大问题比如加载商家抽奖布局消费者基础信息不用直接MySQL先去判断Redis

               使用容器技术,包括轻容器Docker,到资源池,K8容器,SLB等云资源编排。容器方面我们最多扩展10负责均衡处理这里就是利用CI/CD功能灰色发布分层发布模式

               使用Serverless技术,包括云函数,云数据库。其中我们云函数分布一些并发量功能点API处理模式

未来我们将继续迭代,包括开发运维采用GitOps等等。有没有觉得透过这么小的产品迭代,也能清晰看到互联网技术的不断演进。我猜测未来类似我们这种小产品,将会更容易开发和迭代,也许1个人从产品开发到部署运维,可以轻松全部搞定。

消费者抽奖问题的快速解决

image.png

               发送原因

这个问题通常消费者进行抽奖无非抽取或者没有中奖等等问题

但是这里存在很多原因我们怎么更好去排查比如可能我们代码问题可能淘宝API问题可能消费者操作问题可能商家配置规则问题等等

               曾经解决方式

最开始我们采用原始测试环节打断点还有正式环节打日志方式排查但是这种效率有时候影响正式环节运行还有通常需要消费者商家高效配合综合效率很差

               最终解决方式

后来我们采用业务模块日志跟踪系统比如我们不同常见原因单独日志跟踪模块设计然后分布对应业务这样我们管理员可以后台实施跟踪监控

很好解决实时抽奖问题排查


业务开源实践

这里我把我们抽奖规则中经过多次迭代的抽奖规则开源,做抽奖产品的朋友可以借鉴。

奖品设置里的指定规则解释

场景举例描述

奖品设置有:

一等奖(中奖率50%),没有设置指定规则;

二等奖(中奖率20%),设置指定规则(交易额规则20%,签到规则30%);

三等奖(中奖率20%),没有设置指定规则

1、二等奖不勾选独立计算此奖品规则

小红使用指定的规则:交易额规则,去抽奖,小红的中奖率是

50%+20%*20%+20%=74%

一等奖中奖率 +二等奖中奖率+三等奖中奖率=本次抽奖中奖率

image.png

小红使用指定的规则:签到规则,去抽奖,小红的中奖率是

50%+20%*30%+20%=76%

一等奖中奖率 +二等奖中奖率+三等奖中奖率=本次抽奖中奖率

小红使用不指定规则去抽奖:无门槛抽奖,小红的中奖率是

50%+0%+20%=70%

一等奖中奖率+二等奖中奖率+三等奖中奖率=本次抽奖中奖率

image.png

2、二等奖勾选了独立计算此奖品规则,

小红使用指定的规则:交易额规则去抽奖,(按奖品的设置顺序进行判断)

image.png

小红使用指定的规则:签到规则去抽奖,小红的中奖率是

image.png

小红使用未指定的规则:无门槛规则去抽奖,小红的中奖率是

image.png

产品思考

image.jpeg

一个小小的产品,它的发展会见证很多变革,有行业的,有技术的,但是当你回顾过去,更多印象的反而是一群奋斗的人。

每个人的工作有高峰估,每个产品也是一样,但是只要你具有信念,坚持不懈,持续迭代,就算不是ChatGPT这种划时代产品一个小而美产品也是重要持续帮助服务一撮人。


相关实践学习
一小时快速掌握 SQL 语法
本实验带您学习SQL的基础语法,快速入门SQL。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
1月前
|
小程序
开发平台改版上线,我那么大个“能力管理”去哪儿了?【开发面对面第一期】
开发平台改版上线,我那么大个“能力管理”去哪儿了?【开发面对面第一期】
31 0
|
7月前
|
运维 Cloud Native 中间件
活动邀约 | 云原生技术实践营「北京站」
活动地址:北京·阿里中心望京A座 20F-02 九华山庄(北京市朝阳区望京东园四区9号楼) ,2023 年 11 月 18 日13:00开始签到。
2308 2
活动邀约 | 云原生技术实践营「北京站」
|
1月前
|
运维 中间件 Java
淘宝权益玩法平台的Serverless化实践
淘宝权益玩法平台的Serverless化实践
243 0
|
人工智能 UED
产品思维:微信是如何一步步打磨出完美产品的
产品思维:微信是如何一步步打磨出完美产品的
74 0
|
Kubernetes Cloud Native 视频直播
人人可参与开源活动正式上线,诚邀您来体验!
开源是打开未来技术世界的钥匙,为了真正实现「人人都可以参与开源」,龙蜥社区推出开发者激励活动!本次活动无差别面向广大开发者,不管你是第一次接触开源社区的萌新小白,还是驰骋各大开源社区的高手常客,龙蜥社区提供了数千个入门型、进阶型任务,并准备了上千份实物激励,邀你一起玩转龙蜥,成为开源贡献者。
人人可参与开源活动正式上线,诚邀您来体验!
|
运维 前端开发 安全
人人都是 Serverless 架构师 | “盲盒抽奖”创意营销活动实践
当 Serverless 与低代码这两个不同的技术共同相交于同一个业务时会有怎样的价值展现?本文以 “盲盒抽奖” 这个 Serverless Devs 做过的创意营销活动为例,为大家讲述 Serverless 和低代码是如何搭配来满足一个业务诉求的。
|
存储 SQL 弹性计算
双十一云起实验室体验专场,七大场景,体验有礼
云起实验室是阿里云为开发者打造的一站式体验学习平台,在这里你可以了解并亲自动手体验各类云产品和云计算基础,无需关注资源开通和底层产品,无需任何费用。只要有一颗想要了解云、学习云、体验云的心,这里就是你的上云第一站。
双十一云起实验室体验专场,七大场景,体验有礼
|
运维 Cloud Native 架构师
抢先报名丨2021云上架构与运维峰会12月10日线上开启,五大精彩看点不容错过
本次峰会,希望通过分享云上架构与运维的最佳实践,促进业内DevOps与IaC理念的落地,帮助企业“用好云管好云”,释放云的技术红利。
抢先报名丨2021云上架构与运维峰会12月10日线上开启,五大精彩看点不容错过
|
运维 Cloud Native 架构师
抢先报名 | 云上架构与运维峰会五大看点,带着礼品与最佳实践等你来!
12月4日,2021云上架构与运维峰会,将在上海静安洲际酒店3层豪华宴会厅举办。
290 0
抢先报名 | 云上架构与运维峰会五大看点,带着礼品与最佳实践等你来!
|
机器学习/深度学习 人工智能 Kubernetes
【KubeMeet 倒计时 3 天】一起来聊聊云原生应用管理痛点怎么破
4 月 17 日杭州, 由云原生基金会 CNCF 和阿里巴巴联合主办的 「KubeMeet 开发者沙龙 · 云原生应用管理专场」给你答案!
【KubeMeet 倒计时 3 天】一起来聊聊云原生应用管理痛点怎么破