• Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram

S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram
Programming

Cómo desarrollar una aplicación SAP Fiori en SAP Business Application Studio

By s4pcademy 


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í.

Vista de terminales

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

Inicio de la creación de proyectos mediante comandos de terminal

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.

Varias opciones para crear proyectos a través de la terminal

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.

Aplicación generada con éxito

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.

Jerarquía de carpetas de proyectos

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í.

Editor de diseño de apertura

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.

Editor de diseño

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.

Vista de esquema del editor de diseño

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.

Editor de código

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).
  1. Seleccionar Crear configuración.
  1. Seleccione el proyecto deseado, como se muestra aquí.

Seleccionar proyecto para la configuración de ejecución

  1. Seleccione la versión deseada de SAPUI5 o seleccione la última.
  1. 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.

Omitir conexión back-end

  1. 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í.

Ejecutar configuración y ejecutar módulo

  1. 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.

Aplicación que se ejecuta en SAP Business Application Studio para pruebas

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.

Carpeta actual en la terminal

  1. 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.

Agregar configuración de implementación

  1. Seleccione el destino Ninguno por ahora, ya que aún no hay conexión de back-end.
  1. Seleccionar Sí para agregar la aplicación al enrutador de aplicaciones administradas.
  1. 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

Archivo mta.yaml recién creado

  1. 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.
  1. 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.
  1. 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.

Creación de archivo MTA Archive (MTAR)

  1. 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.
  1. Una vez que la implementación sea exitosa, puede navegar a su subcuenta de Cloud Foundry para verificar la aplicación implementada.
  1. 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
  1. Su aplicación ahora debería estar disponible en su subcuenta de Cloud Foundry y disponible en Aplicaciones HTML5como se muestra en esta figura.

Aplicación Disponible en SAP BTP, Cloud Foundry Environment

¡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.





Source link


aplicaciónApplicationBusinesscomodesarrollarFioriSAPStudiouna

Artículos relacionados


Technical Articles
SAP BTP, Kyma Runtime: use un dominio personalizado en una regla API a través de Istio Gateway
Business Trends
Transformación de las finanzas minoristas en una estrategia de plataforma SAP S/4HANA
Technical Articles
Guía de gestión de interfaces de SAP | Blogs de SAP

Deja tu comentario Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

El poder de SAP Cloud Connector: uniendo la nube y los entornos locales
Previo
Simplificación de la gestión de identidades en su entorno SAP ABAP: descubra el poder de Xiting Central Workflows
Siguiente

Madrid

Calle Eloy Gonzalo, 27
Madrid, Madrid.
Código Postal 28010

México

Paseo de la Reforma 26
Colonia Juárez,  Cuauhtémoc
Ciudad de México 06600

Costa Rica

Real Cariari
Autopista General Cañas, 
San José, SJ 40104

Perú

Av. Jorge Basadre 349
San Isidro
Lima, LIM 15073

Twitter Linkedin Instagram
Copyright 2022 | All Right Reserved.
Cookies Para que este sitio funcione adecuadamente, a veces instalamos en los dispositivos de los usuarios pequeños ficheros de datos, conocidos como cookies. La mayoría de los grandes sitios web también lo hacen.
Aceptar
Cambiar ajustes
Configuración de Cookie Box
Configuración de Cookie Box

Ajustes de privacidad

Decida qué cookies quiere permitir. Puede cambiar estos ajustes en cualquier momento. Sin embargo, esto puede hacer que algunas funciones dejen de estar disponibles. Para obtener información sobre eliminar las cookies, por favor consulte la función de ayuda de su navegador. Aprenda más sobre las cookies que usamos.

Con el deslizador, puede habilitar o deshabilitar los diferentes tipos de cookies:

  • Bloquear todas
  • Essentials
  • Funcionalidad
  • Análisis
  • Publicidad

Este sitio web hará:

Este sitio web no:

  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
  • Recuerde sus detalles de inicio de sesión
  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
Guardar y cerrar