Para crear una aplicación SAPUI5, puede usar uno de varios entornos de desarrollo integrados (IDES).

Como SAP Business Application Studio es el IDE recomendado de SAP, comenzaremos con esto primero. Sin embargo, también le mostraremos cómo crear un proyecto en Visual Studio Code (VS Code).

SAP Business Application Studio

Cuando comience a SAP Business Application Studio por primera vez, será recibido con un texto de bienvenida. Primero se debe crear un espacio de desarrollo para poder avanzar en los desarrollos. A espacio de desarrollo es una instancia para el entorno de desarrollo. Además del nombre, debe seleccionar los desarrollos a los que se adaptará el IDE para esta instancia. Hemos seleccionado Savia fiori y luego hice clic en Crear espacio de desarrollo.

Crear solo no es suficiente. Tienes que esperar hasta que el IDE esté en funcionamiento. Tan pronto como el nombre del espacio de desarrollo aparezca como un enlace, puede hacer clic en él y navegar al entorno de desarrollo.

Una vez que se inicia el entorno de desarrollo en el navegador, también puede guardar el enlace a su espacio de desarrollo como favorito para evitar tener que pasar por el lobby del espacio de desarrollo cada vez. Primero, necesitamos crear un nuevo proyecto eligiendo Archivo> Nuevo proyecto de plantilla Desde la barra de menú.

Puede elegir entre varios tipos de proyectos: el Generador de SAP Fiori es de interés para nuestros propósitos (ver figura a continuación). Aplicaciones básicas multitarget son aplicaciones que podrían contener componentes frontend y backend y generalmente se implementan en Plataforma de tecnología empresarial de SAP (SAP BTP). Con Sapui5 Proyectos de adaptaciónSAP ha presentado el concepto de mejora de las aplicaciones SAP Fiori (estándar).

Las aplicaciones de estilo libre sapui5 se crean utilizando el Básico Plantilla de aplicación (consulte la siguiente figura). Todas las demás plantillas se relacionan con desarrollos de bajo código/sin código con el Marco de Elementos SAP Fiori o el recién introducido modelo de programación flexible.

En el siguiente paso, se nos pregunta si ya queremos integrar un Odata servicio. Inicialmente seleccionamos Ninguno Aquí, ya que primero conoceremos la integración de fuentes de datos remotas (próxima figura). No está bloqueando la posibilidad de integrar las fuentes de datos en el proyecto en un momento posterior.

Debido a que estamos creando un proyecto SAPUI5, el asistente asume que también necesitaremos una vista para mostrar los componentes de la interfaz de usuario. Por esta razón, podemos asignar un nombre a esta vista inicial. Hemos ingresado «principal» como el Ver el nombrecomo se muestra.

En el siguiente paso (ver la siguiente figura), debemos ingresar los detalles específicos del proyecto:

• Nombre del módulo: Nombre del proyecto (solo se puede cambiar más adelante con un esfuerzo considerable).
• Título de la aplicación: Título de la aplicación, que se puede cambiar fácilmente más adelante.
• Espacio de nombres de la aplicación: El espacio de nombres de la aplicación, mediante el cual el nombre de dominio inverso de la empresa a menudo se elige aquí (solo se puede cambiar nuevamente más tarde con un esfuerzo considerable).

ID técnica de la aplicación: Debe saber que la identificación técnica de la aplicación está compuesta por el espacio de nombres de la aplicación y el nombre del módulo. Estos están concatenados y separados por un punto. Es importante que esta identificación sea única en el sapui5 Abapón repositorio. Esta singularidad no se puede verificar cuando se crea la aplicación, pero solo cuando se implementa por primera vez en el sistema SAP.

• Descripción: Descripción de la aplicación, que solo es importante para los metadatos.
• Ruta de la carpeta del proyecto: Directorio en SAP Business Application Studio en el que se crea el proyecto. El directorio de proyectos predeterminado (/Inicio/Usuario/Proyectos) se usa generalmente, pero puede configurar la estructura del directorio como desee.
• Versión mínima de SAPUI5: Versión del marco SAPUI5 utilizado para el desarrollo. Esta versión no se usará más adelante, ya que la versión instalada del componente SAPUI5 del sistema SAP juega un papel.

Seleccione la versión apropiada de SAPUI5: El marco SAPUI5 está versión, lo que significa que ambos cambios pueden haberse realizado en los componentes ya entregados con versiones más altas y se pueden haber introducido nuevos componentes. Si se desarrolla con una versión SAPUI5 diferente a la que realmente estará disponible en el sistema implementado más adelante, solo puede darse cuenta en el momento de la implementación que está utilizando componentes que aún no existen en el sistema SAP.

En la siguiente figura, puede ver que hemos activado Habilitar mecanografiado a través del Sí botón de radio. No estamos interesados ​​en ninguna de las otras opciones por ahora.

El proyecto ha sido creado pero aún no abierto. En cualquier caso, puede abrir un directorio nuevamente a través de Archivo> Carpeta abierta. Navegue a través del directorio del proyecto hasta que pueda encontrar y seleccionar el proyecto, y continúe con DE ACUERDO o (ingresar), como se muestra en esta figura.

Cuando abres un proyecto, te reciben con el Letrero. Aquí se muestra alguna información específica del proyecto, junto con acciones rápidascomo agregar un servicio ODATA o similar.

Código fuente y gestión de versiones: La aplicación SAPUI5 que acaba de crear solo existe en su entorno de desarrollo. Nadie más tiene acceso a él, ni se distribuye el código fuente, incluso si se implementa más tarde en el sistema SAP. Con esta nueva tecnología, debe presentar un código fuente y un sistema de administración de versiones usted mismo. La recomendación es usar Git y almacene el código fuente en un repositorio. Aunque el desembolso inicial habla en contra de este nuevo paso, abre nuevas posibilidades en términos de colaboración y desarrollo de software y características.

Código de Visual Studio

En esta sección, le mostraremos cómo crear una aplicación Freestyle SAPUI5 en VS Code. El asistente detrás del generador de aplicaciones ya debería ser familiar. El diseño es similar a SAP Business Application Studio, pero los encabezados de las áreas individuales pueden tener diferentes nombres. Por ejemplo, la selección de la plantilla para aplicaciones de estilo libre sapui5 simplemente se llama Aplicación SAPUI5. También es importante que seleccione Sapui5 freestyle como el valor para Tipo de aplicación En el cuadro Seleccionar.

Todos los demás pasos de este paso en el asistente son los mismos que en SAP Business Application Studio.

Nota del editor: esta publicación ha sido adaptada de una sección del SAPUI5: la guía integral por Rene Glavanovits, Martin koch, Daniel Kranczy Maximiliano Olzinger. Rene es un consultor y desarrollador de SAP que se especializa en las últimas tecnologías de SAP, específicamente en el desarrollo de aplicaciones de pila completa con SAP Fiori, SAPUI5, ODATA, CDS y Modelo de programación de aplicaciones de SAP Cloud. Martin realiza capacitación para SAP y ha desarrollado cuatro cursos de capacitación sobre los temas de SAPUI5, SAP Fiori, la integración de la nube y la seguridad en la nube. Daniel es un desarrollador y consultor de software que se enfoca en el desarrollo de la pila completa con SAPUI5, SAP Fiori, ODATA, SAP Cloud Application Model, así como el desarrollo móvil. Maximilian es un desarrollador y consultor de software. Es un asociado de desarrollo certificado por SAP y ha manejado proyectos para empresas en todas las industrias con gran éxito. Realiza capacitaciones en las áreas de SAP Fiori, ABAP y el desarrollo web.

Esta publicación fue publicada originalmente 4/2025.