使用 SAP Business Application Studio 开发 Vue 应用-阿里云开发者社区

开发者社区> -技术小能手-> 正文

使用 SAP Business Application Studio 开发 Vue 应用

简介: 使用 SAP Business Application Studio 开发 Vue 应用
+关注继续查看

这是 Jerry 2021 年的第 49 篇文章,也是汪子熙公众号总共第 326 篇原创文章。


Jerry 2020年曾经在 SAP 全球技术大会上,给大家分享过,SAP Commerce Cloud 新一代基于 SAP Spartacus 项目的 Storefront.这个开源项目使用到的前端框架是 Angular.

image.png

更多详情,请参考 Jerry 的文章:Jerry在2020 SAP全球技术大会的分享:SAP Spartacus技术介绍的文字版

其实 SAP Spartacus 在问世之初,设计愿景之一,就是让其具有独立于任何前端框架,即所谓 Framework Agnostic 的特性。

image.pngimage.png

最近我们组内的同事,也聊到了另一款开源的电商 Storefront 开发框架,算是 SAP Spartacus 的竞争对手吧,叫做 Vue Storefront:

https://github.com/vuestorefront

image.png

image.pngimage.png

Vue Storefront 的例子表明,时至今日,前端开发生态圈,始终是 React,Angular 和 Vue,三国争霸,三足鼎立的局面。


回到本文的主题,Jerry 之前的文章提到,同之前 SAP 云平台 Neo 环境上传统的 Full Stack WebIDE 相比,SAP Business Application Studio 是 SAP Business Technology Platform 上的云应用开发工具,在开发全栈应用时,支持的前端技术并不局限于 SAP UI5 ,而是包括 Vue.js, React 在内的众多 HTML5 前端开发技术。


SAP Business Application Studio 具有一个开放的架构,支持安装各种 Extensions,因而能够从容适配云时代不断涌现的各种新技术。


我们一起来看看 SAP Business Application Studio 对 Vue 开发的支持程度。


打开 Business Application Studio,创建一个新的 Dev Space,类型为 Basic,选择下列三个 SAP Extensions:


HTML5 Runner

HTML5 Application Template

MTA Tools

image.png

Jerry 之前介绍 SAP Fiori Elements 开发的文章里,曾经多次使用公网上的 NorthWind OData 服务,这是一个专门用于学习的 OData 服务。本文我们的 Vue 应用里,依然使用该服务。


本文会在 SAP Business Application Studio 里开发一个 Vue 应用,消费 NorthWind OData 服务,最后会把该 Vue 服务部署到 SAP Business Technology Platform 平台上,所以需要在 SAP BTP 控制台新建一个 Destination,在该 Destination 内维护指向 NorthWind OData 服务 的 URL.


这样,在运行时,部署在 SAP BTP 上的 Vue 应用,能够通过该 Destination 访问 NorthWind OData 服务。

image.png

image.png

使用 SAP Business Application Studio 项目创建向导,新建一个 HTML5 项目:

image.png

选择 Vue.js Application 模板。Vue 模板的右边就是 React 模板,这些模板都由之前创建 Dev Space 时,选择的 HTML5 Application Template extension 所提供。

image.png

在 Data Source 选择步骤里,从下拉菜单选择之前在 SAP BTP 控制台里创建好的 Destination:

image.png

该向导会生成一个 Vue 应用模板,包含一个表格控件,默认显示三列。这里指定表格显示的 OData 模型为 Categories,从下拉列表里选择三列分别显示 Categories 模型里的三个字段的名称。

image.png

这样我们一行代码都没有编写,就通过向导,生成了一个可以直接运行的 Vue 应用:

image.png

在 Run Configurations 视图里,点击下图高亮的插头图标,将该应用的 Data Source 同之前在 SAP BTP 控制台里创建的 Destination 绑定。这样,运行时 Vue 应用发起对 Data Source 的请求,就会通过绑定的 Destination,路由到 Internet 的 NorthWind OData 服务去。

image.png

成功绑定后,Data Source 节点前会出现一个绿色的插头图标。

image.png

本地预览这个 Vue 应用,界面如下图所示:

image.png下一步,对该 Vue 进行 build,然后部署到 SAP BTP 平台上。依次在右键菜单里选择 Build MTA Project 和 Deploy MTA Archive 进行构建和部署:

image.pngimage.png

成功部署之后,能够在 SAP BTP 控制台的 HTML5 Applications 面板里看到这个 Vue 应用。

image.png

点击上图的超链接,打开该应用:image.png

把这个 URL 保存下来。

最后,我们将该 Vue 应用添加到 Fiori Launchpad 里。

进入 SAP BTP Site Manager,创建一个新的 Site 和新的应用,将 Vue 应用的 URL 维护到该应用 URL 字段内。

image.png

在 Site Manager 内将该应用命名为 Jerry Vue App:

image.png

把这个新的应用,分配到名为 Everyone 的 Role 之中:

image.png

创建一个名为 HTML5 的 Group,这个组相当于 Fiori Language 里的 tile catalog:

image.png

最终,打开我们创建好的 Site,能看到一个 Fiori Launchpad,包含了一个 tile,指向我们之前在 SAP Business Application Studio 里创建的 Vue 应用:image.png

该 Vue 应用在 Fiori Launchpad 里打开的效果如下:

image.png

希望本文能够帮助大家了解使用 SAP Business Application Studio 开发基于非 SAP UI5 框架的其他 HTML5 应用的基本流程。


您也许会对这些开发也感兴趣:


用 React 开发 SAP Fiori 应用


SAP Fiori + Vue = ?


如何在 SAP UI5 应用中集成第三方库 :一个在移动设备上查看 Web 应用打印调试信息的小技巧


介绍一个能开发简单 SAP UI5 应用的在线 IDE:StackBlitz



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Hybrid App 开发初探:使用 WebView 装载页面
  Hybrid App 是混合模式应用的简称,兼具 Native App 和 Web App 两种模式应用的优势,开发成本低,拥有 Web 技术跨平台特性。目前大家所知道的基于中间件的移动开发框架都是采用的 Hybrid 开发模式,例如国外的 PhoneGap、Titanium、Sencha,还有国内的 AppCan、Rexsee 等等。
1472 0
ASP.NET Core轻松入门之Configure中IHostingEnvironment和IApplicationLifetime的使用
在StratUp.cs的Configure方法中,除了 常用的参数除了IApplicationBuilder和在我上一篇文章中提到的Iconfiguration点击打开链接 外  还有 IHostingEnvironment和IApplicationLifetime 那么这两个参数有什么用以及怎么用呢? 首先我们想建一个ASP.
1156 0
使用SAP WebIDE开发SAP Fiori Worklist应用消费OData服务
使用SAP WebIDE开发SAP Fiori Worklist应用消费OData服务
21 0
如何使用Visual Studio Code调试PHP CLI应用和Web应用
在按照Jerry的公众号文章 什么?在SAP中国研究院里还需要会PHP开发? 进行XDebug在本地的配置之后,如果想使用Visual Studio Code而不是Eclipse来调试PHP应用,步骤也比较简单。
1071 0
如何在SAP Fiori应用里使用React component
如何在SAP Fiori应用里使用React component
6 0
带你读《区块链开发实战: 基于JavaScript的公链与DApp开发》之三:Asch——区块链应用开发平台
本书用三个部分讲解了区块链技术以及Asch的相关实践,第一部分讲解了区块链技术的基本概念,并用300行代码实现了一个最小的、可运行的区块链;第二部分分析Asch的源码,讲解Asch的实现原理;第三部分介绍了基于Asch的侧链技术的DApp开发实战。
1560 0
1727
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载