SAP Business Application Studio(BAS)中开发Fiori App的基础知识

2024-03-19 08:28

本文主要是介绍SAP Business Application Studio(BAS)中开发Fiori App的基础知识,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. SAP Fiori Tools

SAP Fiori Tools是一套用于支持SAP Fiori应用开发的工具,包括应用模板、可视化编辑器、代码生成、应用预览和集成测试工具等。这些工具可以帮助开发者更快速、更简单地创建和维护SAP Fiori应用。SAP Fiori Tools 可与SAP的开发环境(例如SAP BAS)和部署环境(例如SAP BTP)无缝集成。

SAP Fiori Tools支持了Fiori App的整个开发周期,包括项目生成,本地测试(运行应用、从后台抓取数据、app-to-app的导航测试)以及最终的部署。Fiori Tools也支持VS Code和命令行访问。

对于开发者而言,开发一个连接SAP数据源的Fiori应用程序有两种方式:一种是基于SAP Fiori Element,另一种是SAP Fiori Freestyle。

1.1 SAP Fiori Element

SAP Fiori元素为开发人员提供了一系列的预定义模板,我们可以直接使用标准模板开发应用程序,这样不仅可以提高开发效率,还可以统一用户体验。

使用SAP Fiori元素时,用户前台界面UI的实现是基于OData服务和注释的,不需要JavaScript UI编码。SAP Fiori元素运行时,会解释底层OData服务的元数据和注释,并在启动时为SAP Fiori应用程序自动生成相应的视图。

1.2 SAP Fiori freestyle

SAP Fiori freestyle是开发SAP Fiori应用程序的另一种选择。通过使用SAP Fiori自由式模板,开发人员可以灵活地基于OData服务和JavaScript UI编码创建自定义应用程序。

2. UI5 CLI (命令行界面)

SAPUI5 CLI 是UI5工具套件的一部分, UI5 CLI 提供了一系列的命令工具,这些命令可以帮助开发者更有效地创建和管理SAP UI5项目。在实际开发中,可以使用SAP Fiori Tools来创建和设计应用,然后使用UI5 CLI来构建和部署应用。

SAP UI5 CLI的配置是在ui5.yaml中完成的,额外的配置会存储在例如ui5-local.yaml或ui5-cli.yaml中。

配置文件中的 fiori-tools-proxy : 是指代理到后台系统;fiori-tools-appreload 是指当发生代码改动后自动重新加载。

3. 应用信息

创建或克隆了一个Fiori Element项目时,BAS会自动打开应用信息界面Application Info。在这个界面上可以看到项目的详细信息(项目类型、SAPUI5版本等),状态信息(项目的依赖信息),以及一些建议的action。

可以通过命令面板的 Fiori: Open Application Info 命令打开这个页面。

4. 运行一个Fiori App

运行Fiori App可以通过以下几种方式:

  • 运行配置Run Configuration 
  • 通过UI运行NPM脚本
  • 通过terminal运行NPM脚本
  • 通过terminal直接调用

可以使用Application Info > Preview Application 选项来列出所有的运行选项,然后通过 start* 筛出来运行app的NPM脚本。

5. 运行时配置Run Configurations 

Run Configurations 功能允许你定义和管理应用程序的配置, 这些配置可以包括启动脚本、环境变量、命令行参数等, 它本质上是运行了以下命令:

npx fiori run --open filename.html

创建一个新的配置可以有以下设置:

  1. 配置的名称
  2. 文件名:选择用于启动应用程序的html文件
  3. 模拟数据Mock Data: 使用一个mock server来模式Odata请求服务
  4. 支持助手:检查这个应用程序的构建是否符合构建SAPUI5应用程序的最佳实践
  5. URL 组件:为SAP Fiori Launchapd上基于网络的app间导航(app-to-app)定义额外的URL参数
  6. 高级设置:定义使用的SAPUI5版本或应用使用的目标系统destination

你可以通过点击 "Run" 或 "Debug" 按钮来运行或调试你的应用程序。SAP BAS将使用你定义的运行配置来启动你的应用程序。

相关运行设置是存储在<workspace>/.vscode/launch.json 文件中的,开发人员可以定义多个可运行的配置文件。

6. NPM脚本

NPM (node package manager)是node.js的包管理工具, 用于管理node.js项目以及其依赖关系。Fiori Tools的内核是基于node.js的运行环境的,因而,每一个Fiori项目其实也会被管理成一个npm项目。

每一个Fiori项目其实也会被管理成一个npm项目。

NPM脚本(NPM scripts)是在package.json文件中定义的一组命令,这些命令可以帮助你自动化开发流程中的一些常见任务,如构建、测试、部署等(见下图的scripts)。我们也可以从管理器Explorer中的NPM Scripts View或通过terminal来启动NPM脚本。

以下是使用NPM脚本的一般步骤:

1. 在package.json文件中定义脚本:

在package.json文件的scripts字段中,你可以定义你需要的脚本。例如,你可以定义一个start脚本来启动你的应用,或者定义一个test脚本来运行你的测试。
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node app.js",
    "test": "mocha tests/"
  }
}

2. 运行脚本:

定义好脚本后,你可以通过npm run命令来运行这些脚本。例如,你可以运行npm run start来启动你的应用,或者运行npm run test来运行你的测试。注意,对于start和test这两个特殊的脚本,你也可以直接运行npm start和npm test,而不需要加run。

7. 端口预览(port preview)

在SAP BAS中端口(port)是一个重要的概念, 它是用于网络通信的一个接口,可以被应用程序用来接收或发送数据

在SAP BAS中,每个Dev Space都有一组专用的端口,这些端口可以被Workspace中的应用程序使用。例如,你可以在开发工作空间中启动一个Web服务器,然后通过一个特定的端口来访问这个服务器。

SAP BAS的端口功能有以下几个主要特点:

  • 自动端口转发:当你在工作空间中启动一个服务时,SAP BAS会自动为这个服务分配一个端口,并将这个端口转发到你的本地机器。这意味着你可以在本地浏览器中通过这个端口来访问你的服务。
  • 端口管理:SAP BAS提供了一个端口管理面板,你可以在这个面板中查看和管理你的端口。例如,你可以查看哪些端口正在被使用,或者手动添加新的端口转发。
  • 安全性:为了保证安全,SAP BAS只允许工作空间内的服务访问这些端口

在命令面板中输入Ports: Preview命令,列出所有正在运行的应用程序及其端口。

8. 示例:通过terminal运行Fiori App

Step1: 安装所有的依赖 npm install

Step2: 启动npm脚本,npm run start

Step3: 在不同的SAPUI5版本下运行应用程序

通过不同Run Configurations中的配置,可以选择SAPUI5的版本。

9. 参考资料:

  •  SAP Fiori tools | SAP Help Portal
  •  UI5 CLI - UI5 Tooling (sap.github.io)
  •  SAP Help Portal for BAS

  •  SAP Community for BAS

这篇关于SAP Business Application Studio(BAS)中开发Fiori App的基础知识的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/825379

相关文章

VSCode开发中有哪些好用的插件和快捷键

《VSCode开发中有哪些好用的插件和快捷键》作为全球最受欢迎的编程工具,VSCode的快捷键体系是提升开发效率的核心密码,:本文主要介绍VSCode开发中有哪些好用的插件和快捷键的相关资料,文中... 目录前言1、vscode插件1.1 Live-server1.2 Auto Rename Tag1.3

Agent开发核心技术解析以及现代Agent架构设计

《Agent开发核心技术解析以及现代Agent架构设计》在人工智能领域,Agent并非一个全新的概念,但在大模型时代,它被赋予了全新的生命力,简单来说,Agent是一个能够自主感知环境、理解任务、制定... 目录一、回归本源:到底什么是Agent?二、核心链路拆解:Agent的"大脑"与"四肢"1. 规划模

Python+wxPython开发一个文件属性比对工具

《Python+wxPython开发一个文件属性比对工具》在日常的文件管理工作中,我们经常会遇到同一个文件存在多个版本,或者需要验证备份文件与源文件是否一致,下面我们就来看看如何使用wxPython模... 目录引言项目背景与需求应用场景核心需求运行结果技术选型程序设计界面布局核心功能模块关键代码解析文件大

C++多线程开发环境配置方法

《C++多线程开发环境配置方法》文章详细介绍了如何在Windows上安装MinGW-w64和VSCode,并配置环境变量和编译任务,使用VSCode创建一个C++多线程测试项目,并通过配置tasks.... 目录下载安装 MinGW-w64下载安装VS code创建测试项目配置编译任务创建 tasks.js

2025最新版Android Studio安装及组件配置教程(SDK、JDK、Gradle)

《2025最新版AndroidStudio安装及组件配置教程(SDK、JDK、Gradle)》:本文主要介绍2025最新版AndroidStudio安装及组件配置(SDK、JDK、Gradle... 目录原生 android 简介Android Studio必备组件一、Android Studio安装二、A

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2

一文详解Python如何开发游戏

《一文详解Python如何开发游戏》Python是一种非常流行的编程语言,也可以用来开发游戏模组,:本文主要介绍Python如何开发游戏的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、python简介二、Python 开发 2D 游戏的优劣势优势缺点三、Python 开发 3D

基于Python开发Windows自动更新控制工具

《基于Python开发Windows自动更新控制工具》在当今数字化时代,操作系统更新已成为计算机维护的重要组成部分,本文介绍一款基于Python和PyQt5的Windows自动更新控制工具,有需要的可... 目录设计原理与技术实现系统架构概述数学建模工具界面完整代码实现技术深度分析多层级控制理论服务层控制注

Python的pandas库基础知识超详细教程

《Python的pandas库基础知识超详细教程》Pandas是Python数据处理核心库,提供Series和DataFrame结构,支持CSV/Excel/SQL等数据源导入及清洗、合并、统计等功能... 目录一、配置环境二、序列和数据表2.1 初始化2.2  获取数值2.3 获取索引2.4 索引取内容2

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni