今天这篇迟到的文章，来自我的同事Aviva。

去年SAP C/4HANA发布之后，SAP的从业者们可能或多或少都读过一些来自SAP官方渠道，比如微信公众号"SAP天天事"发布的一些文章，提到了"企业数字化转型", "智慧企业"等概念。那么这些概念如何落地呢？请看本文介绍的SAP成都研究院数字创新空间做出的一个尝试。

Jerry在去年Aviva的一篇文章 Hyperledger Fabric on SAP Cloud Platform里就曾经介绍过她，不过Jerry也是最近才得知她"英文"名字的由来：“Aviva"这个单词，在希伯来语里的意思是"美好的春天”, 而这篇文章的作者Aviva，中文名字里正好有一个春字。

为什么说是迟到的文章呢？因为这个创新案例早在去年上半年就结束了，然而作为同事们评价的"美腻与智慧的化身"，“云时代女王”，“大家前沿技术的引路人”, Aviva工作上总是有很多事情要忙，因此直到项目做完的半年后，才能空出档期完成这篇文章。

此外，Aviva的正文里所有关于案例的截图都是从SAP成都研究院数字创新空间另一位女同事，**Zhang Jane(张琦)**制作的演示视频中截取的，这里表示感谢。

Jane制作的关于这个创新案例的展示视频：

width="677" height="380.8125" allowfullscreen="true" src="https://v.qq.com/txp/iframe/player.html?origin=https%3A%2F%2Fmp.weixin.qq.com&vid=m0823f5fo83&autoplay=false&full=true&show1080p=false&isDebugIframe=false">

Jane是一位美貌与才华并重的女同事，我在文章 SAP成都研究院数字创新空间沟通S/4HANA和C/4HANA的智能服务演示视频和Coresystems分享预告 里曾经贴过张琦的绘画和书法作品。

这里再贴两张Jane元旦画的画，算是。。。算是给大家拜个早年：

下面是Aviva的正文。

---

大家好，我是SAP成都研究院的开发人员Aviva。今天我想给大家分享一个我去年参与开发的项目，在SAP C/4HANA上结合近些年比较热门的人工智能和增强现实技术打造的一个创新案例。这个案例只是一个原型开发，并不是C/4HANA已经发布的标准功能。

人工智能大家或多或少都有所了解，而增强现实技术(Augmented Reality，简称 AR), 按照维基百科的介绍，是一种实时地计算摄影机影像的位置及角度，并伴之与相应图像、视频和3D模型参与的技术，其目标是在屏幕上把虚拟世界的物体渲染在现实世界并允许使用者进行互动。

听起来有点抽象和高深？我们马上进入案例介绍，通过实际的例子大家就能理解这个技术的用途了。而增强现实技术在移动设备上的实现，我们作为应用开发人员，可以简单的使用网上一些流行的AR开源框架进行应用开发。至于这些开源框架的源码，由于时间和精力限制，我也没有深入研究，我在介绍过程中会给出开源框架的github链接，感兴趣的朋友可以自行去阅读。

本文前半部分我想首先介绍这个创新案例的用户故事，后半部分简单描述技术实现。

用户故事(User Story)

近些年来，诸如人工智能和AR(增强现实)等技术迅猛发展，如何利用好这些先进技术，帮助企业实现数字化转型，是一个值得思考的问题。

某足球制造商想要使用一种高科技的新型材料来制造2018年世界杯使用的足球。这家足球制造商的采购人员找到了一家名叫科创材料的企业，该企业是世界上最先进的足球材料供应商之一。

科创材料使用了SAP Sales Cloud系统(SAP Cloud for Customer的Sales模块），希望以此为基础，结合AR，人工智能等前沿技术，打造出一个新的销售工具。

这个新的销售工具如何使用呢？我们来看一个具体的使用场景。

制造商的采购人员在科创材料的微信公众号上发起会话进行材料咨询。

根据制造商的采购员提出的要求，科创材料的人工智能助手推荐了几款合适的材料。

比如采购人员希望用一款高科技的原材料生产足球：

那么科创材料的数字助手会推送一个公众号图文消息：

采购人员点击之后，会看到科创材料的数字助手从SAP Sales Cloud系统后台的产品主数据中进行搜索，返回匹配采购人员要求的6款高科技原材料：

为了让采购人员更直观地感受每种新型材料的外观，质地和性能等参数，除了常规的文字和图片介绍外，该销售平台还提供了根据这些原材料制作的成品3D模型展示：

以及供客户在移动设备上能实际操作的AR页面，比如体验通过不同材质的皮革制成的足球，在不同场景下的弹力，滚动距离，滚动轨迹的差异等等。

点击上图的Test Material按钮进入AR页面进行体验，会询问用户是否授权访问手机摄像头。允许之后，将手机摄像头对准事先准备好的marker(增强现实的实现技术之一，典型的载体是打印了特定图像的一张纸)，即可在手机摄像头对准的现实区域内看到一个虚拟的足球。

此时采购人员就能在手机上通过手机触动这个虚拟足球的方式，来模拟现实中的踢球动作，以此来体验不同材质制成的足球的各项参数。比如下图显示的是触球后足球的滚动距离和空中运行轨迹。

在微信公众号页面里可以做一些简单的配置，选择其中几种材料，以对比的方式显示它们的参数差异。

假如采购人员通过初步筛选，发现其中几款材料比较合适，然而对于最后购买哪款犹豫不决，于是该采购人员把经过初步筛选的几款材料通过微信分享给其他同事，让这些同事帮忙甄别，通过投票选出最合适的材料。

采购人员点击Create Poll按钮发起投票请求：

选中第一，第三和第四款之后，通过微信分享给其他同事所在的微信群里：

微信群里的其他同事打开这个分享页面后，点击Vote Materials开始投票，同时可以留言讨论并查看投票结果。

等同事们都投完票后，科创材料数字助手自动将投票结果告知采购人员。经过微信群里讨论，大家一致认为应该购买得票数最高的那款原材料。于是采购人员告诉数字助手，决定买2吨 。

数字助手通过Sales Cloud的报价单模型，生成了一张包含报价的PDF推送给采购人员：

这就是足球制造商的采购人员使用这个创新解决方案的完整流程。

我们希望通过这个简单的创新案例，展示出SAP C/4HANA和当今一些新技术相结合，从而帮助企业实现数字化转型，成就智慧企业的可能性。

当然，这里选择足球的原材料和成品只是作为一个例子帮助大家更直接地感受到人工智能和增强现实给企业流程管理带来的便利和改善，大家可以自行把足球脑补成其他的物品，比如机械臂，汽车，家电等等。

这个创建案例的亮点：

(1) 集成SAP Sales Cloud，引导客户完成购买之旅。

(2) 利用微信和Recast.AI与客户交互，实现销售过程自动化。

(3) 利用AR技术呈现SAP系统内不同产品主数据对应的原材料差异，方便专业人士的验证和体验，加速购买决策流程。

以上介绍了这个创新案例的应用场景，下面我们来聊聊技术实现。从开发层面说，该创新案例可分为下图这几个模块：

(1) 微信公众号网页端。使得用户可以在微信应用里查看原材料的详细信息，和基于每种原材料制作的成品的3D模型，并提供分享页面，创建投票页面等功能。

(2) AR 页面，使用AR的方式，展示各种原材料制成的足球。

(3) Proxy Service，又称消息服务器，中间服务器，用于链接微信页面和SAP C4C后台系统，并结合Recast.AI提供智能客服。

(4) C4C Backend service(后台服务)增量开发，根据微信用户输入的产品关键字(比如"高科技材料"，搜索系统的产品主数据并返回匹配内容。

限于文章篇幅，本文不会深入到代码层面介绍这四个模块的实现，只是简要叙述其原理。对细节感兴趣的朋友欢迎留言私聊。

微信公众号网页端

网页端就是指前面提过的原材料显示页面，包括3D模型显示页面，投票页面等。我用的框架是Angular，开发了一个单页面应用，它有一个外壳页面index.html，在app.js中创建了AngularJS的module。在config.js中使用Angular的config配置页面以及和页面关联得控制器，配置路由规则，配置渲染和加载规则。这些没什么可说的，毕竟我司和国内的Angular高手数不胜数。

其中3D模型的显示我用的是threejs这个基于webGL的JavaScript框架。基于webGL的开源框架，需要支持webGL的浏览器，通过这个框架将3D模型，主要是每种足球原材料的obj 文件，mtl文件和各种纹理图片渲染成最后在微信里看到的不断旋转的3D足球。

这些3D模型文件在我的电脑上长这个样:

**obj文件: **一种开放的几何定义文件格式，它仅表现3D几何体，即顶点的位置，以顶点列表的方式定义每个多边形的顶点，法向量和面的UV坐标，以及纹理顶点。顶点以逆时针存储，不必显式声明法向量。其中obj3.0格式支持多边形(Polygon)，直线(Lines)，表面(Surfaces)，和自由形态曲线(Free-form Curves)。直线和多角形通过它们的点来描述，曲线和表面则根据于它们的控制点和依附于曲线类型的额外信息来定义。这些信息支持规则和不规则的曲线，包括那些基于贝塞尔 (Bezier)曲线，B样条(B-spline)，基数(Cardinal/Catmull-Rom样条)，和泰勒方程(Taylor equations)的曲线。

obj文件的一个例子：

**mtl文件(Material Library File): **材质库文件，描述的是物体的材质信息，采用ASCII存储，任何文本编辑器可以将其打开和编辑。一个mtl文件可以包含一个或多个材质定义，对于每个材质都有其颜色，纹理和反射贴图的描述，应用于物体的表面和顶点。

**用作3D物体表面的纹理的各种png图片：**这个很好理解。

比如下图是某种材质制成的成品足球：

那么它对应的纹理文件是这样的：

我的任务就是使用threejs的API把这些模型merge在一起，生成最后带有3D视觉效果的JavaScript对象。为了避免让本文成为threejs编程教程，我不展开描述，感兴趣的朋友请查询threejs官网：

https://threejs.org

AR页面

该页面也是基于另一个增强现实的JavaScript框架AR.js开发的，从github上的Star数目就能看出其受欢迎的程度。

https://github.com/jeromeetienne/AR.js/

这个页面的具体编码工作是SAP成都研究院数字创新空间在德国的兄弟团队完成的，这里不做更多介绍。

微信消息服务器

开发一个服务端应用，部署在SAP云平台上(其他云平台也行），然后把服务的url配置到微信公众号的开发者中心中去即可。

具体开发方式我之前的C4C同事张航和大卫哥已经做过详细介绍，这里不再重复：

• SAP成都研究院大卫哥：SAP C4C中国本地化之微信小程序集成

• SAP成都研究院飞机哥: SAP C4C中国本地化之微信聊天机器人的集成

而基于Recast.AI的智能客服实现，我的同事Jerry在他的文章 使用Recast.AI创建具有人工智能的聊天机器人 里详细介绍过使用方法。

C4C后台服务开发

根据用户微信输入的关键字，去C4C系统查找匹配的产品主数据。

我们前面视频里显示的6款原材料，在C4C系统主数据配置如下：

而关于PDF文件在SAP ABAP Netweaver系统的生成，我的同事Jerry写过很多文章：

(1) Convert word document into PDF via Adobe Livecycle Enterprise service

https://blogs.sap.com/2013/11/14/convert-word-document-into-pdf-via-adobe-livecycle-enterprise-service/

(2) Another way to preview PDF in CRM web client UI with little coding

https://blogs.sap.com/2013/12/17/another-way-to-preview-pdf-in-crm-web-client-ui-with-little-coding/

(3) Create Webservice enabled Adobe PDF attachment in CRM Application

https://blogs.sap.com/2014/05/16/create-webservice-enabled-adobe-pdf-attachment-in-crm-application/

(4) Export WebClient UI table to PDF

https://blogs.sap.com/2017/05/03/export-webclient-ui-table-to-pdf/

(5) How to render PDF which displays picture from the image attachment of your custom BO

https://blogs.sap.com/2017/05/03/export-webclient-ui-table-to-pdf/

当然，选择SAP系统外的第三方PDF生成方案也是可以的，生成PDF后，将文件的url推送到微信上，用户点击url即可在微信里打开PDF查看内容。

这部分后台开发主要是我的同事**Liao, Janet(廖婧)**完成的，这里表示感谢。

这个C/4HANA同人工智能与增强现实技术结合的创新案例就介绍到这，感谢阅读。

相关阅读

• 一些SAP Partners能够通过二次开发实现打通C/4HANA和S/4HANA

• 打通C/4HANA和S/4HANA的一个原型开发：智能服务创新案例

• SAP成都研究院大卫哥：SAP C4C中国本地化之微信小程序集成

• SAP成都研究院飞机哥: SAP C4C中国本地化之微信聊天机器人的集成

• 使用Recast.AI创建具有人工智能的聊天机器人

• 机器学习在SAP Cloud for Customer中的应用

• 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

要获取更多Jerry的原创文章，请关注公众号"汪子熙":