SAP C/4HANA與人工智能和增強現實(AR)技術結合的又一個創新案例

今天這篇遲到的文章，來自我的同僚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

當然，選擇SAP系統外的第三方PDF生成方案也是可以的，生成PDF後，将檔案的url推送到微信上，使用者點選url即可在微信裡打開PDF檢視内容。

這部分背景開發主要是我的同僚**Liao, Janet(廖婧)**完成的，這裡表示感謝。

這個C/4HANA同人工智能與增強現實技術結合的創新案例就介紹到這，感謝閱讀。

相關閱讀

一些SAP Partners能夠通過二次開發實作打通C/4HANA和S/4HANA

打通C/4HANA和S/4HANA的一個原型開發：智能服務創新案例

使用Recast.AI建立具有人工智能的聊天機器人

機器學習在SAP Cloud for Customer中的應用

在SAP UI中使用純JavaScript顯示産品主資料的3D模型視圖