SAP新一代全棧開發工具:SAP Business Application Studio

這是Jerry 2020年的第29篇文章,也是汪子熙公眾號總共第

212篇原創文章。


作為SAP從業者,我們能夠清楚地感受到這些年SAP技術進化的趨勢。


SAP前端開發技術的進化方向,從SAP GUI,到能在瀏覽器裡運行的ABAP Webdynpro / WebClient UI,再到現在仍然沒有停止進化的Fiori UX. 而Fiori也從誕生之初只支持SAP UI5,進化到現在能夠同時支持Angular, React和Vue等多種前端框架。


SAP新一代全棧開發工具:SAP Business Application Studio


關於SAP前端技術的演進,可以參考Jerry這些文章:


  • SAP UI和Salesforce UI開發漫談
  • SAP Fiori + Vue = ?
  • Fiori Fundamentals和SAP UI5 Web Components
  • 用React開發SAP Fiori應用


而SAP後端開發技術,自從SAP雲平臺問世以後,SAP開發人員發現,自己手頭可選的技術,除了ABAP以外,一下子增加了很多:比如開源社區非常活躍的Java和nodejs,終於也能夠應用到SAP後臺開發中來了。而SAP雲平臺本身,也從誕生之初純粹由SAP自己架設數據中心的單一雲架構,演進到如今能支持GCP, Azure, AWS和阿里雲等作為基礎設施層的Multiple Clou架構。


SAP新一代全棧開發工具:SAP Business Application Studio


本文咱們不聊具體的技術,而是談談開發工具。


Jerry之前的文章 那些年我用過的SAP IDE,介紹過我曾經用過的SAP開發工具。如今,這個列表裡又多了一個新的成員。


2019年TechEd上,SAP向外界宣佈了一款在原有SAP WebIDE基礎上進化而成的新一代全棧開發工具:SAP Business Application Studio.


SAP開發人員能夠用這個新工具做什麼?


SAP Business Application Studio針對不同的SAP解決方案提供了良好的支持,能夠進行S/4HANA擴展開發,以及基於SAP CAP模型(Cloud Application Programming)的全棧式開發(技術棧是Java和nodejs), 以及各種類型的Fiori應用開發。


SAP新一代全棧開發工具:SAP Business Application Studio


SAP Business Application Studio同SAP WebIDE有何不同?


SAP官方將Business Application Studio稱之為WebIDE進化後的產物,該工具吸取了當今業界領先IDE的設計理念,專門為SAP雲平臺上的全棧應用開發進行過優化;工具提供的強大命令行工具,使得開發人員不會被GUI界面所束縛。


最後,Business Application Studio基於Eclipse Theia這款開源的IDE,這使得它從架構上來說,可以從容應對任何在雲端開發領域湧現出的新需求。


https://theia-ide.org/


SAP新一代全棧開發工具:SAP Business Application Studio


舉個例子,我們在Business Application Studio(下文簡稱為BAS)的插件列表裡,能看到許多插件,有的是開源社區貢獻的插件,比如vscode-eslint, 有的則來自SAP自研,比如vscode-mta-tools, 能夠讓開發人員利用BAS的命令行,無需登錄SAP雲平臺控制檯,就可進行SAP MTA應用的開發和部署。


SAP新一代全棧開發工具:SAP Business Application Studio


在使用BAS之前,我們先來了解一個概念:Dev Space(開發空間).


SAP新一代全棧開發工具:SAP Business Application Studio


一個開發空間是一個預先配置好的環境,背後實際對應了SAP雲平臺上的虛擬機。創建開發空間時,可以選擇不同的類型,每個類型對應一種特定的開發場景。


SAP新一代全棧開發工具:SAP Business Application Studio


每個特定類型的開發空間,都事先激活了完成該類開發任務所必須的Studio擴展(SAP Predefined Extensions),在創建開發空間時可以看到這些擴展列表。


SAP新一代全棧開發工具:SAP Business Application Studio


我選擇的是SAP Fiori類型的空間,創建成功後,點擊超鏈接進入:


SAP新一代全棧開發工具:SAP Business Application Studio


如果是在WebIDE裡,開發界面打開後,我們就可以用Create from Template菜單,通過嚮導來完成Fiori應用的創建。


在BAS裡,我們可以換一種方式,通過命令行來創建Fiori應用的骨架。


命令行裡鍵入yo,啟動SAP Fiori Project Generator, 選擇Fiori Project:


SAP新一代全棧開發工具:SAP Business Application Studio


接下來是選擇該Fiori應用的運行環境,有CloudFoundry和ABAP兩種選擇,我們選擇前者:


SAP新一代全棧開發工具:SAP Business Application Studio


然後是一些常規信息的維護。


SAP新一代全棧開發工具:SAP Business Application Studio


命令行嚮導執行完畢後,就生成了Fiori應用必須的資源文件。做過nodejs開發的朋友,會發現這個步驟和用npm init生成manifest.json文件很像。


SAP新一代全棧開發工具:SAP Business Application Studio


我們要指定這個Fiori應用應該消費哪個OData服務。


在Studio上方的命令工具欄裡,敲consume,選擇Consume SAP Services:


SAP新一代全棧開發工具:SAP Business Application Studio


會顯示很多Destination列表,每個Destination都是我在CloudFoundry環境的Connectivity菜單裡維護的,指向某一個ABAP系統。


SAP新一代全棧開發工具:SAP Business Application Studio


我選擇ES5系統裡暴露出來的GWSAMPLE_BASIC這個OData服務。


SAP新一代全棧開發工具:SAP Business Application Studio


改OData同Fiori項目綁定之後,收到成功的提示:


SAP新一代全棧開發工具:SAP Business Application Studio


後續的操作,就和我們之前在SAP WebIDE裡的開發沒有太大差別了。


用Layout Editor打開XML視圖,從控件庫裡找到List控件,拖拽到視圖區域上:


SAP新一代全棧開發工具:SAP Business Application Studio


點擊List控件Entity Set字段旁的綁定圖標,給它綁上一個OData模型中的Data Collection:


SAP新一代全棧開發工具:SAP Business Application Studio


讓這個List顯示Business Partners數據:


SAP新一代全棧開發工具:SAP Business Application Studio


同理,把List Item的title字段綁定到BusinessPartnerSet節點上的CompanyName字段,Description綁定到BusinessPartnerID字段。


SAP新一代全棧開發工具:SAP Business Application Studio


這個Fiori應用功能非常簡單,以列表的形式顯示Business Partners所在的公司名和ID.


點擊Run Configuration, 可以在不部署到SAP雲平臺CloudFoundry環境的情況下,進行本地測試:


SAP新一代全棧開發工具:SAP Business Application Studio


SAP雲平臺上的Fiori應用,實際上是SAP MTA應用包含的一個HTML5 module,該MTA應用的mta.yaml裡定義了Destination服務和Authorization & Trust Management服務的依賴。因此本地運行時,我們也要給該Fiori應用提供這兩個服務實例才行。


關於什麼是SAP MTA應用,可以參考Jerry之前的文章:SAP雲平臺裡的三叉戟應用


SAP新一代全棧開發工具:SAP Business Application Studio


到CloudFoundry環境新建一個Authorization & Trust Management服務實例,取名app_uaa:


SAP新一代全棧開發工具:SAP Business Application Studio


回到BAS,選中項目裡的uaa本地資源,會看到右邊有個小的綠色插頭圖標。點擊之後,BAS會自動把剛才創建的app_uaa實例取出來。選擇後,就可以和項目本地uaa_JerryFioriDemo這個資源進行綁定。


SAP新一代全棧開發工具:SAP Business Application Studio


稍後我們將該應用正式部署到SAP雲平臺CloudFoundry環境時,不需要做這一步,因為部署工具會解析mta.yaml, 自動創建裡面定義的依賴服務實例。


成功綁定後,在BAS裡收到提示:


SAP新一代全棧開發工具:SAP Business Application Studio


同時左邊出現一個新的綠色插頭圖標,代表成功綁定的狀態。


SAP新一代全棧開發工具:SAP Business Application Studio


同理將項目的Destination服務依賴也綁定到CloudFoundry環境創建的服務實例後,點擊Run Module, 就能看到這個Fiori應用的界面了:


SAP新一代全棧開發工具:SAP Business Application Studio

SAP新一代全棧開發工具:SAP Business Application Studio


正式部署到CloudFoundry的步驟也很簡單,執行命令行:


mbt build -p=cf


SAP新一代全棧開發工具:SAP Business Application Studio


mbt工具會將該項目打包成.mtar文件:


SAP新一代全棧開發工具:SAP Business Application Studio


使用cf deploy命令把這個.mtar文件部署到CloudFoundry去:


SAP新一代全棧開發工具:SAP Business Application Studio


從命令行輸出中可以發現,cf deploy在部署過程中會自動創建mta.yaml裡require區域聲明的服務實例。


SAP新一代全棧開發工具:SAP Business Application Studio


部署成功後,這些自動創建的服務實例都能在Service Binding區域看到:


SAP新一代全棧開發工具:SAP Business Application Studio


點擊部署後生成的AppRouter實例,就能獲得這個運行在CloudFoundry環境上的Fiori應用的訪問鏈接了。


SAP新一代全棧開發工具:SAP Business Application Studio


整個流程跑下來,個人感覺體驗和Google的Cloud Shell一樣優秀。關於Google的這個雲端開發工具介紹,請參考Jerry的文章:介紹一個免費的雲開發工具:Cloud Shell.


希望本文能夠讓大家對SAP Business Application Studio的概貌有個最基本的瞭解,感謝閱讀。


SAP新一代全棧開發工具:SAP Business Application Studio


更多閱讀


  • SAP UI和Salesforce UI開發漫談
  • SAP Fiori + Vue = ?
  • Fiori Fundamentals和SAP UI5 Web Components
  • 用React開發SAP Fiori應用
  • 那些年我用過的SAP IDE
  • SAP雲平臺裡的三叉戟應用
  • 介紹一個免費的雲開發工具:Cloud Shell


分享到:


相關文章: