【Fiori】使用Visual Studio Code开发SAP UI5

目录前言一、案例介绍二、环境搭建01 安装 Node.js(LTS版本建议22以上)02 安装 Visual Studio CodeSAP Fiori插件1、安装 SAP Fiori 工具扩展包三、编写简单的APP01 在本地创建新项目使用 SAP Fiori 应用程序生成器02 连接后端系统Odata四、部署到服务器01 步骤一项目准备与构建02 步骤二部署到 ABAP 系统方案一在VSCode推送到SAP GUI端方案二通过GUI端直接上传打包文件03 步骤三配置 UI5 到 Fiori 中前言尽管 Fiori 目前在企业内部尚未实现大规模普及但对于开发人员而言持续学习并掌握前沿技术始终是提升核心竞争力的关键。SAP 推出 Fiori 并非短期技术迭代而是面向企业数字化转型、移动化应用与用户体验升级的长期战略布局。紧跟 SAP 官方技术路线深入学习并实践 Fiori、UI5、OData 等核心技术不仅能够有效拓展技术栈、提升综合开发能力更能为企业未来大规模应用推广、系统架构转型以及移动端体验优化等场景提前做好技术储备使自身在行业发展中保持持续竞争力。一、案例介绍本案例将基于 Visual Studio Code 完成 Fiori 项目的搭建、本地启动并最终将应用部署至 SAP 系统实现从开发到上线的完整流程实践。二、环境搭建01 安装 Node.js(LTS版本建议22以上)进入Node.js官网下载稳定版本https://nodejs.org/zh-cn下载到电脑之后双击安装一直“下一步”即可。我电脑里因为不同的项目需要使用不同版本的 node所以使用了 nvm 管理工具用于切换到对应的 node 版本上。nvm 安装 node 的步骤如下已经装了 nvm千万不要运行下载 Node 安装包否则会破坏 nvm 管理导致版本混乱、冲突a. 查看已安装的所有版本nvm list #或简写 nvm lsb. 安装指定版本 nodenvm install 22如果安装时提示这个说明 nvm 用了旧的淘宝镜像地址已经失效了所以下载不了 NodeCould not retrieve https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt. Get https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt: tls: failed to verify certificate: x509: certificate is valid for *.tbcdn.cn, *.1688.com, *.3c.tmall.com, *.alibaba.com, *.alicdn.com, *.aliexpress.com, *.alikunlun.com, *.aliqin.tmall.com, *.alitrip.com, *.aliyun.com, *.cainiao.com, *.cainiao.com.cn, *.chi.taobao.com, *.chi.tmall.com, *.china.taobao.com, *.cloudvideocdn.taobao.com, *.cmos.greencompute.org, *.dingtalk.com, *.django.t.taobao.com, *.etao.com, *.feizhu.cn, *.feizhu.com, *.fliggy.com, *.fliggy.hk, *.food.tmall.com, *.jia.taobao.com, *.jia.tmall.com, *.ju.taobao.com, *.juhuasuan.com, *.lw.aliimg.com, *.m.1688.com, *.m.alibaba.com, *.m.alitrip.com, *.m.cainiao.com, *.m.etao.com, *.m.taobao.com, *.m.taopiaopiao.com, *.m.tmall.com, *.m.tmall.hk, *.mei.com, *.mobgslb.tbcache.com, *.taobao.com, *.taopiaopiao.com, *.tbcache.com, *.tmall.com, *.tmall.hk, *.trip.taobao.com, *.xiami.com, 1688.com, alibaba.com, alicdn.com, aliexpress.com, alikunlun.com, alitrip.com, aliyun.com, cainiao.com, cainiao.com.cn, cloudvideocdn.taobao.com, cmos.greencompute.org, dingtalk.com, etao.com, feizhu.cn, feizhu.com, fliggy.com, fliggy.hk, juhuasuan.com, m.intl.taobao.com, mei.com, taobao.com, taopiaopiao.com, tmall.com, tmall.hk, xiami.com, tbcdn.cn, not npm.taobao.org切换成新的镜像打开 CMD 或 PowerShell依次运行下面 2 行命令nvm node_mirror https://npmmirror.com/mirrors/node/ nvm npm_mirror https://npmmirror.com/mirrors/npm/c. 安装完切换nvm use 22d. 检查版本node -v02 安装 Visual Studio CodeSAP Fiori插件到官网下载最新的 VS Code 软件https://code.visualstudio.com/VS Code下载完成后一直点下一步安装即可重点来说说必要插件的安装1、安装 SAP Fiori 工具扩展包SAP 为 VS Code 提供了官方的SAP Fiori Tools - Extension Pack这是开发 SAPUI5 和 SAP Fiori 元素应用的核心工具集。a. 启用 VS Code点击左侧活动栏的“扩展”图标。在扩展市场的搜索框中输入SAP Fiori Tools - Extension Pack。点击 “安装” 按钮。这个扩展包会自动安装所有核心扩展2、自动安装 sap/generator-fiori 一直卡住、没进度、也不报错如果无报错可跳过这一步在vscode打开命令控制板输入Fiori:Open Application Generator按回车后显示sap/generator-fiori 这个插件一直在 “Installing” 中原因是网络 / 镜像 / Node 版本 / 权限 / 缓存 导致 npm 下载卡住。解决方式a. 确保 node 在 22.X 版本及以上b. 配置 npm 国内镜像npm config set registry https://registry.npmmirror.com npm config set strict-ssl false npm config set fetch-retries 5 npm config set timeout 600000c. 清理缓存npm cache clean --forced. 手动全局安装 Fiori 生成器npm install -g sap/generator-fiori yo会看到进度条、下载、安装成功卡住超过 5 分钟CtrlC 中断 → 重新运行上面命令e. 验证安装成功yo --generators看到 sap/fiori 就成功重启 VS Code就正常了。三、编写简单的APP01 在本地创建新项目使用 SAP Fiori 应用程序生成器a. 在 VS Code 中打开查看-命令选项板(CtrlShiftP)输入并选择命令Fiori: Open Application Generatorb. Template Selection 各页签功能详解页签/模板名称核心用途适用场景关键特性基于参考资料Basic创建一个最基础、空白的 SAP Fiori 元素应用框架当您需要从一个非常干净的起点开始或者现有模板都不完全符合您的特定需求时使用。它提供了最小的预设结构需要您后续通过引导式开发手动添加更多功能。提供基本的应用外壳但缺少如列表、卡片等具体的业务数据展示结构Custom Page创建一个自定义页面允许更自由地定义页面布局和内容用于构建不符合标准列表、对象或概览模式的独特页面。它提供了比Basic模板更多的灵活性但仍基于Fiori元素框架。适用于需要混合多种元素或特定导航流的场景。List Report Page列表报表页面创建以表格列表形式显示和处理大量业务对象的应用程序用于显示主数据、交易数据清单如销售订单列表、物料清单并作为导航到详细对象页面的入口。功能允许用户查看和处理以列表格式组织的项目。特性提供强大的筛选、排序、分页功能通常带有过滤器栏和表格工具栏。Overview Page概览页面创建数据驱动的仪表盘在单页面上通过多种可视化卡片展示关键信息和任务用于为特定角色或领域提供一站式概览例如采购概览、经理仪表盘等聚焦最重要的任务和KPI。功能在单个页面中提供用户所需的所有信息使用卡片可视化。特性卡片可包含文本、图表、列表支持拖拽排序、全局过滤是事务型、分析型和搜索数据的混合体。Analytical List Page分析清单页面创建结合数据分析可视化与明细事务数据的交互式分析应用用于深入分析数据、识别趋势、下钻调查根本原因并对分析结果执行操作如创建后续事务。功能使用数据可视化和商务智能识别数据集内的相关区域。特性布局分为“页眉”可视化过滤器区域和“内容区域”支持“仅图表”、“仅表”、“混合”视图模式图表与表联动筛选。Object Page对象页面创建用于显示、编辑和创建单个业务对象详细信息的页面用于展示主数据如客户、物料或业务单据如销售订单、采购订单的完整详情。通常从列表报表导航进入。功能提供查看、编辑和创建业务对象的功能。特性具有灵活的表头、锚点/标签导航、自适应布局支持草稿和编辑状态。Worklist Page工作清单页面创建显示需要用户处理的任务或项目集合的应用程序用于审批工作流、待办任务清单、问题处理队列等场景用户需逐一处理或委派项目。功能显示用户必须处理的项目集合。特性专注于任务完成状态和处理操作通常包含优先级、截止日期等字段。纯 Style 前台选择 Basic Fiori Element 选择 List Report Page这里如果连接的是 SAP 的 ODATA则需要选择连接否则选择 None 即可设置主画面选择 Basic-选择None-一路Next定义 Module NameEnable TypeScript 都选择 No。打开终端运行 npm install 安装依赖02 应用结构a. webapp前端UI代码i. view视图文件夹ii.controller控制器文件夹iii.model数据模型iv.Component.js入口组件v.index.html入口页面b. manifest.json应用描述文件c. package.json依赖项安装完成后运行 npm run start02 连接后端系统Odata待更新。。。四、部署到服务器01 步骤一项目准备与构建确保项目的完整性应包含标准的 SAPUI5 结构webapp/ 目录、manifest.json、ui5.yaml、package.json 等。另外 manifest.json 中的 sap.app.id 定义了应用的唯一标识。构建项目在项目的根目录执行npm run build系统会执行优化和打包生成用于生产环境的文件输出到 dist/ 目录。02 步骤二部署到 ABAP 系统建议使用方案二的方式从 ABAP 程序中直接上传打包文件方案一虽然后期推送方便但是容易受到配置、防火墙等众多因素的影响层层报错。。。方案一在VSCode推送到SAP GUI端目标是将 dist/ 目录中的内容部署为 ABAP 系统中的一个 业务服务器页面 (BSP) 应用。在项目跟目录下执行npx fiori add deploy-config。按照命令行提示配置 S/4HANA 系统的连接信息选择部署到ABAP系统输入目标地址网关可以在 SAP GUI 中通过事务代码SMICM最上方的菜单栏中依次点击 “转到 - 服务” 可以查看到当前的网关地址通常是https://[主机]:[端口]的格式按照提示输入连接的客户端号、包等这里做测试包在了本地请求部署配置已经完成推送到 S/4 HANA私有云输入 npm run deploy 这条命令。但在此笔者遇到了自签名证书错误的报错SAP系统用的是自签名 HTTPS 证书本地不信任执行 npm run deploy -- --ignore-cert-errors忽略证书错误直接部署。按照提示输入用户名以及密码继续下一步又再次碰壁大概意思是我的账号可能没有权限部署或有可能 UI5 的仓库服务没有激活/路径不对/网关配置问题权限问题应该不可能我的是ALL权限那继续我们用浏览器直接访问一下这个地址https://【URL】:44300/sap/opu/odata/UI5/ABAP_REPOSITORY_SRV看到以下提示破案了/UI5/ABAP_REPOSITORY_SRV 服务未激活。进入SAP GUI输入事务/N/IWFND/MAINT_SERVICE点击添加服务进入页面系统别名输入LOCAL技术服务名称输入/UI5/ABAP_REPOSITORY_SRV点击“添加所选服务”填写包分配$TMP显示成功加载再次回到 VSCode 执行之前的命令执行成功。方案二通过GUI端直接上传打包文件通过 UI5 本地打包dist - SE38 程序上传的方式输入 SE38 进入程序输入程序名 /UI5/UI5_REPOSITORY_LOAD点击执行点击执行后选择打包成 dist 的所在目录再次点击确定单击上载上载完成进入 SE80 验证程序是否上载成功另外也可以进入 SICF - default_host - sap - bc - ui5_ui5 - sap找到节点zfiori_test001右击测试服务访问成功03 步骤三配置 UI5 到 Fiori 中操作步骤可以看作者的另一篇博文【Fiori】将 ABAP 程序配置到Fiori中手把手配置步骤基本一致与 ABAP 程序部署到 Fiori 的区别如下创建完目录进行目标映射配置时无需选择语义对象应用程序类型选择 SAP UI5 Fiori 应用即可配置磁贴点击保存后回到上一页创建组向组中添加磁贴配置完权限后访问成功点击进入本文持续优化更新。。。