¡Hola, Habr! Mi nombre es Alexander Karpov, soy un desarrollador líder en el grupo de desarrollo de interfaces de aplicaciones web en Severstal-infocom. Me gustaría compartir con ustedes la experiencia del desarrollo local de aplicaciones UI para sistemas SAP.
En diferentes momentos, los desarrolladores han utilizado diferentes herramientas para desarrollar aplicaciones SAPUI5. Al principio, estos eran complementos para HANA Studio (Eclipse), luego apareció Web IDE y luego Business Application Studio (BAS). Pero el problema es que los complementos para Eclipse no se han desarrollado desde 2019, y las otras dos herramientas vinculan al desarrollador a un entorno específico. Después de todo, Web IDE y BAS son entornos en la nube que hacen imposible el desarrollo local. Además, se les paga.
La empresa SAP fue a reunirse con los desarrolladores y recientemente comenzó a desarrollar herramientas para el desarrollo local: UI5 Tooling y Fiori Tools , así como complementos para VSCode. Esto permite a los desarrolladores trabajar de forma más inteligente y no depender de entornos de desarrollo basados en la nube.
En este artículo, usaremos el editor VSCode, instalaremos complementos en él, crearemos una aplicación y la ejecutaremos localmente.
Instalación de extensiones de SAP Fiori Tools
Instale Node.js antes de comenzar. No lo usaremos directamente, pero es necesario para que las herramientas funcionen.
Luego, las extensiones deben instalarse en VSCode. Para hacer esto, vaya al panel Extensiones (Ctrl + Shift + X), ingrese en la búsqueda: " Herramientas SAP Fiori - Extension Pack " e instálelo. Esta no es una extensión, sino un paquete completo. Por lo tanto, después de la instalación, también tendrá otras seis extensiones:
Asistente de aplicación . Ayuda a crear aplicaciones basadas en plantillas listas para usar. En esencia, es solo una interfaz gráfica sobre la utilidad Yeoman.
SAP Fiori tools - Application Modeler. .
SAP Fiori tools - Guided Development. .
SAP Fiori tools - Service Modeler. OData.
SAP Fiori tools - XML Annotation Language Server. , Fiori-.
XML Toolkit. XML: , .
( OVP) VSCode. Ctrl+Shift+P, «generator» «Fiori: Open Application Generator».
, . : «SAP Fiori Elements» Fiori- «SAPUI5 freestyle» UI5. «SAP Fiori elements» «Overview Page».
. :
SAP-
OData
SAP API Business Hub
.
SAP-. SAP Business Technology Platform.
: «System name» «Service». , VSCode . OData, .
, (smartFilterBar).
: , , . «Add FLP configuration».
Fiori Launchpad: , (action), . , .
. zoverview , .vscode — .
:
Start <module>. ui5.yaml.
Start <module> with UI5 Version. ui5.yaml .
Start <module> Mock. ui5.yaml .
Start <module> Mock with UI5 Version. ui5.yaml, .
Start <module> Local. ui5-local.yaml. SAPUI5.
Run and Debug (Ctrl+Shift+D). .
«Start zoverview». 8080 . Smart Filter Bar’.
, VSCode Fiori Tools Fiori Elements . , , . , , .
. , .