为了提升 Taro 的产品形象,让 Taro 能够为更多层次的人群接受,我们需要将 Taro 包装成一个完整的、专业的平台产品,来降低人们的认知、接入成本,同时,Taro 一直以来都是作为一个免费、开源的框架,但除了框架之外我们还有很多不适合开源的能力沉淀,我们需要一个商业化的版本,来将我们沉淀的服务能力开放出去,在带来收益的同时,为公司打造一个企业级的多端建站工具。
- 将 Taro 包装成平台化产品,降低认知与接入成本
- 探索 Taro 商业化模式
Taro IDE 兼顾研发体验提升以及企业级多端建站的目标,将由以下功能模块组成。
接下来将详细介绍每一个模块的功能设计。
由于 Taro IDE 在后续存在商业化的计划,所以在初期我们也需要建立一套完整的账号体系,当然,为了初期吸引用户,Taro IDE 会分为两种账号模式,登录用户,以及 访客模式。
登录功能将接入统一的登录服务,账号与玲珑体系打通,这样便于后续 Taro IDE 与玲珑商业化版本进行合作,探索更优的解决方案。
同时也支持用户不注册登录进行使用,提供访客模式,进入该模式后,会给用户分配一个唯一的 UUID,用以标记用户身份,这样可以达到如下目的:
- 记录用户操作,进行用户分析;
- 当用户成为登录用户之后,之前的操作可以与用户登录账号进行关联。
相比于使用命令行工具时代,用户可以在 Taro IDE 中进行更加便捷的项目管理,具体将包括以下功能。
Taro IDE 支持导入旧项目进行开发,分为两种导入方式
- 导入 Taro 项目,支持导入 Taro 项目,导入过程中将对 Taro 项目进行扫描分析
- 导入微信小程序项目,在导入过程中选择自动转成 Taro 项目
支持通过选择模板创建项目,分为两种模式
- 开发模式,可以选择空白模板进行创建
- 行业模板模式,通过从模板市场选择现成的行业模板进行创建,关于模板的介绍,将在后面章节进行介绍
而对于项目中的组件、页面也是同样的道理,可以选择空白模板来创建组件、页面,同时也能选择从组件、模板市场中选择下载需要的东西来进行添加
无论是导入的项目,还是直接创建的项目,都会生成当前项目的概况统计。
项目 Dashbord分为研发、可视化两种模式,通过顶部项目名旁边的按钮进行切换。
包括如下内容
- 项目预览按钮区域
- 项目页面列表,列出当前项目所有页面,可以选择进入页面代码,同时也能在项目编译完成后直接选择页面进行预览
- 项目页面组件引用关系图,厘清页面、组件之间的引用关系,对项目有一个完整的认识
- 项目所包含的依赖,列出当前项目的所有依赖,可以选择单独更新某一依赖,同时也能自由地安装删除依赖
- 项目预览时编译信息日志
- 腾讯云 OSS 服务,为用户提供 OSS 服务管理
嵌入 Atom 可视化编辑器
两种模式都会包含配置管理、发布管理、运营管理的入口。
为了满足不同的开发需求,在 Taro 中包含了很多配置,修改配置,需要通过阅读文档才能很好完成,以往的配置修改方式还是非常繁琐的,为了简化配置操作,在 Taro IDE 中增加了配置管理的功能,通过可视化的方式对配置进行管理。
在 Taro 中包括两种配置:
- 项目配置,各端的对应配置,包括小程序平台自身的配置文件
- 编译配置,Taro 自身的编译处理配置
见统一发布部分
见监控统计部分
提供插件市场丰富 Taro IDE 功能,例如针对编译阶段提供文件处理插件,可以将静态资源等文件自动上传到 CDN 等功能。
Taro IDE 提供对项目进行转换编译的功能,包括 Taro 编译到各端
Taro IDE 提供丰富模板、组件以供用户选择。
模板是指项目级模板,用户在创建项目时可以选择,项目级别模板以行业属性进行分类,例如电商、酒店、旅游、工具类等等,在创建项目时选择对应模板可获得行业全套解决方案。
同时用户可以通过 IDE 模板这一 Tab,浏览到模板市场里所有的模板,通过选择模板,重新创建项目。
Taro IDE 将提供各式各样的组件以供选择,组件将和模板一样,以行业属性进行分类,方便用户检索,而组件的概念不仅仅局限于页面中的局部挂件,组件也可以指一个完整的页面,用户可以选择下载某一组件,随后就能在编辑页面的时候插入组件。
Taro IDE 中将内置 Atom 页面可视化编辑器来对项目进行可视化搭建,可视化编辑以页面为维度进行编辑,具体依赖 Atom 页面可视化编辑器设计。
同时,在开发初期计划提供一个简版的可视化功能,所见即所得,可以通过预览的页面直接进入页面以及页面上组件对应的代码,降低研发成本。
如果是通过行业模板创建的项目,将会获得完整的项目监控统计数据,一般包含如下数据:
- PV 、UV 统计
- 页面关键位置点击量,可以自行定义
- 用户画像,用户地域、性别
- 订单量数据,等等
用户可以根据这些数据来获得项目运行情况的了解。
用户可以通过 Taro IDE 管理项目发布情况,可以直接在 Taro IDE 中将一个项目通过编译生成对应平台可运行应用,并且发布到对应的平台中,例如微信小程序应用可以直接发布到微信小程序平台上,不再需要再通过小程序管理平台进行发布。
同时,用户也能在 IDE 中管理每个端应用发布的版本,查看各版本日志,而且也能直接将应用回滚到某一版本。
可以对 IDE 进行个性化设置,例如设置使用哪个代码编辑器来打开代码,项目默认进入开发模式还是可视化模式。
采用提醒用户更新的方式。
Taro IDE 开发分为两个阶段。
建立 Taro IDE 架构,完成开发体验提升,将 Taro 通过 Taro IDE 的方式包装成一个接受度非常高的产品
- 用户模块
- 项目管理
- 导入和创建项目
- 项目 Dashbord
- 配置管理
- 发布管理
- 可视化,所见即所得
- 更新机制
- IDE 设置
接入完整可视化搭建,模板及组件市场,进行商业化探索尝试
- 可视化搭建
- 模板、组件市场
- 运营管理,监控统计
- 数据服务
- 插件市场
Electron + React