Skip to content

zh..Intro

meta-d edited this page Mar 8, 2024 · 4 revisions

English | 中文

为什么要 NGen

传统 Fiori 框架的挑战

传统的 SAP Fiori 框架虽然为用户提供了一种直观、现代的用户界面,但也面临一些挑战:

  • 开发复杂性:传统 Fiori 框架的开发流程相对较为复杂,需要编写大量的代码来实现特定的功能,导致开发周期较长。

  • 功能受限:传统 Fiori 框架的 UI 组件受限于其提供的现有组件库,对于需要定制化的应用开发而言,存在一定的局限性。

  • 性能表现不佳:在处理大型和复杂的应用时,传统 Fiori 框架的性能可能受到影响,加载时间较长,响应速度较慢。

NGen 框架的优势

近年来,随着前端技术的发展,诸如 Angular 和 Vue 等现代前端框架逐渐成为主流。它们相对于传统的 Fiori 框架具有以下优势:

  • 组件化开发:Angular/Vue 框架采用组件化的开发模式,开发者可以将应用拆分成多个独立的组件,使得代码结构更清晰、可维护性更高。

  • 强大的生态系统:Angular/Vue 拥有庞大而活跃的开发社区,提供了丰富的插件、工具和解决方案,开发者可以更快地解决问题并且能够分享和学习他人的经验。

  • 灵活的 UI 定制:Angular/Vue 框架提供了丰富的 UI 组件库和定制化选项,开发者可以根据项目需求轻松地定制 UI 风格和布局。

  • 性能优化:现代前端框架采用了诸如异步渲染、按需加载等技术,可以显著提高应用的性能表现,减少加载时间和页面渲染时间。

  • 丰富的组件模板:新框架提供了大量预定义的功能组件模板,涵盖了各种类型的应用程序需求,包括工作流、分析、事务和 AI 应用,极大地提高了开发效率。

  • 无缝集成原有 Fiori 应用:新框架可以无缝集成原有的 Fiori 应用,无需修改现有代码,实现了平滑的升级和扩展。

  • 嵌入式分析框架:新框架提供了嵌入式分析框架,可以快速构建嵌入式分析应用程序,并且支持AI辅助分析,为用户提供更智能的数据分析功能。

  • AI Copilot功能:新框架集成了 AI Copilot 功能,可以辅助嵌入式分析功能,提供智能的数据分析和操作。

NGen 给客户带来的价值

采用基于现代前端框架如 Angular/Vue 开发的 SAP Fiori NGen 新框架,可以为客户带来以下价值:

  • 提高开发效率:NGen 简化了开发流程,提供了丰富的组件模板,使开发者能够更快速地构建出功能完善的 SAP Fiori 应用程序。

  • 提升用户体验:NGen 采用现代前端技术,可以实现更灵活、更美观的用户界面,提升用户体验和满意度。

  • 智能化分析功能:NGen 提供了嵌入式分析框架和 AI Copilot 功能,为用户提供智能化的数据分析和操作功能,帮助用户更好地理解和利用数据。

  • 降低维护成本:NGen 可以无缝集成原有的 Fiori 应用,实现平滑的升级和扩展,降低了系统维护和管理的成本。

综上所述,采用基于现代前端框架的 SAP Fiori NGen 新框架,可以为客户带来更高效、更智能、更具竞争力的 SAP 应用解决方案。

NGen 是什么

NGen 是一个基于现代前端框架如 Angular/Vue 开发的 SAP Fiori 框架,旨在为用户提供更高效、更智能、更具竞争力的 SAP 应用解决方案。

功能

基础框架

NGen 项目是一个完整的基础框架,可用于快速构建 SAP Fiori 应用程序并一键部署到 SAP 系统中。项目中已有模版包括 Vue、Angular、React 框架的代码,完整功能的模版目前以 Angular 框架为主。

Angular application architecture

功能组件模版

NGen 项目提供了大量预定义的功能组件模版,可用于创建各种类型的应用程序,包括工作流、分析、事务和 AI 应用。还有各种功能演示如:仪表板、工作台、消息提示、弹出窗口、图形、富文本、表格等。

Adv Page

无缝集成旧 Fiori 应用

NGen 项目可以集成遗留的 Fiori 应用,无需修改 Fiori 应用代码,做到无缝集成升级。框架自动获取系统中已有 Fiori 应用加载为应用菜单,并且以多页签形式在同一页面中打开多个应用。

Legacy Fiori App

嵌入式分析框架

NGen 项目提供了嵌入式分析框架,可用于快速构建嵌入式分析应用程序。嵌入式分析框架可以读取并分析系统中所有的Cube(BW或CDS)模型,拖拽成需要的分析图形后还可以编辑成最终的分析仪表板页面,在此过程中还可以使用 AI 副驾驶辅助分析。

Embedded BI Schema

AI Copilot

NGen 项目提供了 AI Copilot 功能,可用于快速构建 AI 应用程序。 使用 AI Copilot 来辅助嵌入式分析功能,制作数据分析图形。还可以通过自定义 Copilot 命令来让 AI 操作指定的动作函数,以实现 AI 能力在 ERP 系统中的特定扩展。

AI Copilot

OData 客户端框架

NGen 项目提供了 OData 客户端框架,可用于快速构建消费 OData 服务的客户端应用程序。 此OData客户端框架以函数式编程的方式实现快速地消费 OData 服务,使用 TypeScript 语言具有强大的类型检查能力。

OData Client

设计

NGen 项目整体设计遵守了现代前端框架的设计原则 Ant Design,采用了组件化开发模式,使得代码结构更清晰、可维护性更高。

Ant Design

借助 Ant Design 设计原则,SAP Fiori NGen 框架不仅提供了美观、现代的用户界面,还提供了丰富的组件库和灵活的布局方案,为用户带来了更加愉悦和高效的使用体验。

Ant Design

  • Ant Design 设计原则:Ant Design 是一套企业级 UI 设计语言和前端组件库,以其优雅、简洁的设计原则著称。SAP Fiori NGen 框架充分借鉴了 Ant Design 的设计理念,包括统一的设计风格、丰富的组件库以及灵活的布局方案,从而为用户提供了更加美观、现代的用户界面和愉悦的使用体验。

  • 统一的设计风格:Ant Design 的设计风格简洁清晰、易于理解,SAP Fiori NGen 框架遵循了这一设计风格,保证了整个应用的一致性和统一性,用户可以更加流畅地使用各种功能和组件。

  • 丰富的组件库:Ant Design 提供了丰富的 UI 组件,涵盖了各种常见的业务场景和需求,SAP Fiori NGen 框架通过集成 Ant Design 组件库,使得开发者能够更加便捷地构建出功能丰富、样式统一的应用程序。

  • 灵活的布局方案:Ant Design 提供了灵活的布局方案,包括栅格系统、响应式设计等,SAP Fiori NGen 框架充分利用了这些布局方案,确保了应用程序能够适应不同屏幕尺寸和设备,提高了用户的可访问性和可用性。

系统定制

在统一的设计原则基础上 NGen 框架提供了大量的定制化选项,开发者可以根据项目需求轻松地定制 UI 风格和布局。

  • Light / Dark 主题切换
  • 菜单栏主题
  • 主颜色定制
  • Fiori 应用主题
  • 导航菜单栏模式
  • 固定侧边栏
  • 固定头部栏
  • 显示标签页面栏
  • 固定标签页面栏
  • WebGUI 页面的打开模式

UI Custom

NGen 如何使用

NGen 项目可以部署到以下两个平台。

S4H 平台

参考在 S4H 平台上如何 快速开始

SAP BTP 平台

此项目还可以一键部署到 SAP BTP 平台,作为 SAP S4H 公有云系统的定制微服务平台是个不错的选择。

TODO

效果截图

个人页面

Personal Page

仪表板

Dashboard

暗色主题

Dark Theme

Clone this wiki locally