Skip to content

Latest commit

 

History

History
187 lines (128 loc) · 8.39 KB

README_zh.md

File metadata and controls

187 lines (128 loc) · 8.39 KB

SAP BTP & Fiori 应用模版

angular-logo sap-cap-logo

此工作空间包含多个开发模板用于构建移动和桌面 SAP BTP & Fiori 应用程序
使用 Angular、Vue、React 等框架和 Ant Design 设计规范

www.mtda.cloud

English | 中文

💡 新功能

NGen (BTP CAP Fiori) 项目现已发布 0.2.0 版本,更新内容如下:

  • 修复了一些问题,提高了稳定性
  • 更新依赖 AI Copilot 到 2.0 版本,详情请查看 AI Copilot
  • 升级至 Angular 17.3 支持 input,model,viewChild 等 signal 模式
  • 完善 wiki 文档

🌟 这是什么?

NGen 是一个由第三方前端框架(Angular、Vue、React等)构建的 SAP BTP & Fiori 应用程序模板集合。它基于 NxUI5 Tooling

使用开源框架来创建 BTP & Fiori 应用有很多优势:

  • AI Copilot 功能,可以回答您提问的问题,还可以通过自定义命令来实现自动化操作。
  • 强大的生态系统和活跃的开发社区,提供了问题解决方案、示例代码和插件。
  • 丰富的组件库和模板。
  • 跨平台一致性,支持响应式设计,使应用程序能够适应不同的屏幕尺寸和设备。
  • 灵活的 UI 定制,包括布局、组件和样式,以确保应用程序与您的品牌一致。
  • 虚拟DOM(在React中)、异步渲染和按需加载组件能极大地提高性能。
  • 提供了状态管理工具有效地管理应用程序的状态和数据流。这对于处理大型和复杂的 SAP Fiori 应用非常有帮助。
  • 灵活性和可扩展性。
  • 易于学习和使用,新开发人员能够快速上手并提高效率。

📄 如何使用?

您可以在此代码存储库中下载模板,然后进行修改和部署,或者您可以根据我们的创建步骤从头开始构建项目。

我们计划提供多个框架和多种组合的项目模板。已开发的模板都可以使用。

✨ 功能特性

  • 现代前端框架 AngularVue 或 React。
  • 现代状态管理框架 NgRx、Vuex 或 Redux。
  • 本地运行模拟服务器,无需连接到后端系统,适用于开发和测试场景。
  • 使用 ABAP 系统上的实时数据进行开发和测试。
  • 一键部署到 SAP ABAP on-premise 系统或 SAP BTP Cloud Foundry。
  • CI / CD 集成。
  • 使用了 Ant Design 企业级产品设计规范。
  • 支持 SAP Fiori 设计规范的 SAP Web Components
  • 集成了已有的 SAP Fiori Apps,可直接使用。
  • 基于 SAP Fiori Launchpad 的授权角色
  • 三种网站页面布局,支持左侧菜单、顶部菜单和顶部+左侧混合菜单。
  • 支持多种主题,包括 LightDark 主题。
  • 多种网站主色调,包括薄暮、火山、日暮、明青、极光绿、拂晓蓝、极客蓝、酱紫。
  • 国际化多语言切换。
  • 网站水印功能。
  • 全局应用搜索功能。
  • 网页和 Fiori 应用全屏功能。
  • 选项卡 式页面管理。
  • 函数式 OData 客户端库
  • 支持 SAP 系统 通知 消息。
  • 嵌入式分析 使用 OCAP 框架.

🌼 屏幕截图

人工智能副驾驶

Copilot Screenshot

侧边菜单模式

Side Menu Bar Screenshot

显示 / 隐藏 屏幕截图

全局搜索应用

Apps Search Screenshot

顶部菜单模式

Top Menu Bar Screenshot

更多菜单列表

More Fiori Apps Menu Screenshot

暗色主题

Dark Theme Screenshot

国际化语言

Internationalization Screenshot

嵌入式分析

Embedded Analytics Screenshot

🧱 最佳实践

登录方式

在 SAP Fiori Lanuchpad 上通常是先登录 flp 页面然后才有权限访问 Lanuchpad 里的 Apps, 如果你想无需访问 flp 登录页面也可登录 SAP 系统的话可以通过配置 app 的错误页-登录错误的处理方式来实现:

  1. 登录 SAPGUI 打开事务码 SICF
  2. 在服务路径中输入 /sap/bc/ui5_ui5/sap/your_project_name 执行打开应用所在服务节点
  3. 在此服务节点上右键菜单中点击 显示服务 打开服务详情界面
  4. 切到 错误页 页签,再将 登录错误 切换为 系统登录
  5. 使用地址 /sap/bc/ui5_ui5/sap/your_project_name/?sap-client=100 访问和登录

Fiori 部署错误

当遇到 Fiori Deploy 错误时,但并没有显示具体错误信息,可以通过修改 node_modules/@sap/ux-ui5-tooling/dist/cli/index.js 文件中的代码打印出详细信息进行分析。 在 function tryDeploy 函数代码中打印出错误信息。

SAP UserContext

在遇到账号访问问题时,可以查看浏览器 Cookie 中的属性 sap-usercontext 值中的 sap-client 等值是否正确。

Nx

Nx 是一个用于构建和管理现代应用程序的强大工具,特别适用于大型和复杂的项目。

运行任务

要使用 Nx 执行任务,请使用以下语法:

npx nx <target> <project> <...options>

您还可以运行多个目标:

npx nx run-many -t <target1> <target2>

...或添加 -p 以过滤特定项目:

npx nx run-many -t <target1> <target2> -p <proj1> <proj2>

目标可以在 project.json 中定义。了解更多信息请参阅文档

🍺 如何贡献

  • 请在 Github 上给我们 ⭐,这有助于我们得到更好地支持和开发新功能!
  • 欢迎在 sap-fiori-templates 仓库 中提交功能请求。
  • 我们随时欢迎 Pull 请求!请基于 develop 分支提交 Pull 请求。

💌 联系我们

🙋 企业支持

如果您的公司需要技术支持,请联系我们:mailto:[email protected]

或添加微信号:metad-cloud