En esta publicación de blog, explicaremos los pasos para crear proyectos, agregar código fuente a un proyecto, probar una aplicación y, finalmente, cómo implementar una aplicación con SAP Business Application Studio.

Creación de un proyecto

El primer paso para crear un SAP Fiori aplicación usando Estudio de aplicaciones empresariales de SAP es crear un proyecto. (Un proyecto es una especie de carpeta para organizar su código fuente). De forma predeterminada, los proyectos se almacenan en el /inicio/usuario/proyectos carpeta.

Puede crear un proyecto de dos maneras:

• Usando un asistente
• desde la terminal

Crear un proyecto usando un asistente es simple y puede iniciarse usando la ruta del menú Archivo > Nuevo proyecto a partir de plantilla y luego seleccionando la apropiada de la lista de plantillas. Sin embargo, para este capítulo, planeamos crear un proyecto usando la terminal. La vista de terminal se puede abrir usando el menú Terminal > Nueva terminaly debería ver una nueva vista abierta que se ve así.

Escriba «yo» en la línea de comando, luego seleccione @sap/fioricomo se muestra a continuación, y presione (Ingresar).

Seleccionar SAPUI5 estilo libre y Aplicación SAPUI5 como los próximos pasos. También seleccione Ninguno como fuente de datos. Aquí se muestra todo el conjunto de opciones a seleccionar.

Una vez selecciones todas las opciones y presiones (Ingresar), el sistema comenzará a crear el proyecto. Puede realizar un seguimiento del progreso a través de la vista de terminal, como se destaca en la figura a continuación, y su aplicación se generará correctamente.

7

Ahora puede abrir su proyecto accediendo a la Archivo > Abierto y luego seleccione su proyecto recién creado, como se muestra a continuación, y haga clic en Abierto.

Su proyecto recién creado con las carpetas y archivos creados ahora debería estar disponible en el lado izquierdo de la ventana de SAP Business Application Studio, como se muestra en la figura anterior. Ahora es el momento de agregar algo de código al proyecto.

Agregar código fuente

Como parte del proyecto, se ha creado una estructura básica de carpetas y algunos archivos se crean automáticamente con contenido vacío o de shell. En esta sección, exploraremos varias opciones para agregar códigos fuente. Pero antes de ir allí, exploremos varias vistas importantes disponibles en SAP Business Application Studio y cómo puede usarlas a lo largo de su proceso de desarrollo:

• El explorador de proyectos es la vista disponible en el lado izquierdo del editor, como se muestra anteriormente. Aquí es donde puede organizar su código fuente.
• Se puede acceder al terminal en cualquier momento a través del Terminal > Nueva terminal opción de menú Verá la importancia de la vista de terminal para las actividades de desarrollo de SAP Fiori más adelante.
• La paleta de comandos proporciona varios accesos directos y opciones para realizar las operaciones más comunes, como crear un tipo específico de proyecto, conectarse a un espacio de Cloud Foundry, etc. Se puede acceder a la paleta de comandos usando el Vista > Buscar comando menú o pulsando (Control)+(Cambio)+(PAG).
• La vista de esquema muestra un árbol del editor actualmente activo. Esta vista es útil para comprender la estructura de un archivo o para navegar a un elemento específico en un archivo. Puede hacer clic en un elemento en la vista de esquema para abrir ese elemento en la Editor Para abrir la vista de esquema en SAP Business Application Studio, seleccione Vista > Describir desde la barra de menú. La vista de esquema se abre en el lado derecho del IDE.
• La vista de problemas muestra diferentes errores de codificación y advertencias y es principalmente útil para la resolución de problemas.

Eso cubre las diferentes vistas que utilizará para respaldar sus actividades de desarrollo. Ahora, pongamos algo de código en su proyecto vacío. Una de las características clave de SAP Business Application Studio es que puede agregar código de frontend mediante un editor de diseño. Si ha trabajado anteriormente con el editor de diseño SAP Web IDE, esto debería resultarle familiar, con algunas opciones adicionales. Para esta sección, usaremos el editor de diseño para agregar código fuente para la interfaz. Cuando se creó el proyecto, el sistema creó una vista con el nombre que proporcionó. Seleccionar Editor de diseño desde el menú contextual de esa vista, como se muestra aquí.

El editor de diseño se abrirá en el medio de la pantalla, como se muestra a continuación, y ahora puede agregar los elementos de su pantalla.

Como se muestra, el editor de diseño contiene tres secciones principales: control, diseño y propiedades. La sección de control proporciona varios controles SAPUI5 para el diseño de su pantalla. Puede arrastrar uno o más controles a la sección de diseño y puede editar sus propiedades o eventos en la sección de propiedades. Le mostraremos opciones simples para crear una aplicación frontend básica, por lo que solo agregaremos un par de elementos: una casilla de verificación y un selector de fecha. Tenga en cuenta que el editor guardará automáticamente su trabajo. Además, puede navegar a la Describir pestaña para editar su pantalla, como se muestra a continuación. Por ejemplo, puede agregar un fragmento, copiar y pegar para crear nuevos elementos, etc.

Siempre puede verificar su código fuente en el editor de código, como se muestra en la siguiente figura. El editor se puede abrir haciendo doble clic en el nombre de la vista o desde el menú contextual, como si se abriera el editor de diseño.

Entonces, ahora tiene una comprensión básica de cómo agregar código fuente usando el editor de diseño. Tenga en cuenta que siempre puede agregar código manualmente mediante el editor de código fuente, por ejemplo, para agregar lógica de controlador, elementos complejos que no están disponibles en el editor de diseño, etc. Supongamos que el código está completo y pasemos a probarlo.

Prueba de la aplicación

Una vez que complete su codificación, debe ejecutar y probar su código. Antes de poder probar su aplicación, debe crear la configuración de ejecución. Los siguientes pasos deben ejecutarse en secuencia:

1. En el menú de la izquierda, seleccione Ejecutar configuración (un icono en forma de triángulo).

2. Seleccionar Crear configuración.

3. Seleccione el proyecto deseado, como se muestra aquí.

4. Seleccione la versión deseada de SAPUI5 o seleccione la última.

5. Seleccione el destino si su aplicación necesita estar conectada a un servicio de back-end. Para este ejemplo, no necesita un servicio de back-end, por lo que puede seleccionar SaltarComo se muestra abajo.

6. Su configuración de ejecución ahora aparecerá en el lado izquierdo de la pantalla, como se muestra en la siguiente figura. Haga clic en el Ejecutar módulo en el extremo derecho del nombre de la configuración, como se muestra aquí.

7. Su aplicación ahora debería abrirse en una pestaña separada del navegador, como se muestra a continuación. Ahora está listo para realizar la prueba.

Ahora debería tener una comprensión básica de cómo probar la aplicación. Ahora que la aplicación simple está lista, vamos a implementarla. Puede pensar: «¿Dónde lo despliego?» Esta es una pregunta muy válida, una que responderemos ahora.

Opciones de implementación

SAP ofrece dos opciones de implementación para su aplicación SAP Fiori:

• Despliegue a un ABAP sistema, como SAP S/4 HANA.
• Implementación en el entorno de Cloud Foundry. Así es como ahora implementaremos la aplicación.

Implemente su aplicación en el entorno de Cloud Foundry mediante los siguientes pasos:

1. Navegue a la vista de terminal y asegúrese de estar en la carpeta de su aplicación, como se muestra a continuación.

2. Ejecutar el comando npx fiori agregar configuración de implementación y seleccione fundición de nubes como su destino, como se muestra en esta figura.

3. Seleccione el destino Ninguno por ahora, ya que aún no hay conexión de back-end.

4. Seleccionar Sí para agregar la aplicación al enrutador de aplicaciones administradas.

5. Esto debería crear una configuración de implementación como un archivo mta.yaml disponible en la vista del explorador, como se muestra a continuación.7

6. Ahora inicie sesión en el entorno de Cloud Foundry utilizando el Vista > Buscar comando opción de menú y luego seleccionando CF: Iniciar sesión en Cloud Foundry. Esto debería permitirle ingresar la subcuenta y el espacio de Cloud Foundry deseados utilizando sus credenciales de inicio de sesión.

7. Abra la vista de terminal y navegue hasta la carpeta raíz del proyecto, donde se creó el archivo mta.yaml. Esta es generalmente la carpeta del proyecto—aquí, PRUEBAScomo se muestra anteriormente.

8. Ingrese el comando compilación de ejecución de npm para desencadenar el proceso de compilación, como se muestra en la siguiente figura. Confirme que recibe un mensaje de éxito para el proceso de compilación. Al final del proceso de compilación, el sistema debe crear un archivo MTAR para su implementación en la nueva carpeta mta_archives. Si no encuentra el archivo MTAR creado, puede hacer clic derecho mta.yaml y seleccione Crear proyecto MTA para crear el archivo MTAR.

9. Ahora implemente la aplicación usando el comando npm ejecutar implementar. Esto debería desencadenar el proceso de implementación en el entorno de Cloud Foundry.

10. Una vez que la implementación sea exitosa, puede navegar a su subcuenta de Cloud Foundry para verificar la aplicación implementada.

11. La aplicación implementada solo se puede ver si ha activado uno de los siguientes servicios, así que asegúrese de crear una instancia de al menos uno de estos servicios antes de intentar ver su aplicación implementada:

• • Servicio SAP Launchpad
  • Portal SAP
  • Zona de trabajo de SAP
  • Zona de trabajo de SAP para recursos humanos

12. Su aplicación ahora debería estar disponible en su subcuenta de Cloud Foundry y disponible en Aplicaciones HTML5como se muestra en esta figura.

¡Felicidades! Ahora ha creado con éxito su aplicación SAPUI5 simple utilizando SAP Business Application Studio y la ha implementado en el entorno de Cloud Foundry. Como ha visto, algunas de las funciones de SAP Business Application Studio son similares a las de SAP Web IDE.

Aunque la versión de prueba de SAP BTP ya no proporciona SAP Web IDE, muchas personas todavía usan SAP Web IDE de manera productiva. Eventualmente, sin embargo, todos los usuarios de SAP deben migrar a SAP Business Application Studio ya que SAP ha dejado obsoleto a SAP Web IDE. Aprenda cómo llevar un proyecto en SAP Web IDE a SAP Business Application Studio en esta publicación.

Nota del editor: Esta publicación ha sido adaptada de una sección del libro. SAP Fiori: Implementación y Desarrollo por Souvik Roy, Aleksandar Debelic y Gairik Acharya.