Aracely Chávez
Professional blog
  • Home
  • FAQ
  • Blog
  • Contacto
bouquet
April 21 2021

MTA Standalone Fiori App using CAP service BAS Cloud Environment

Aracely Chavez SAP BAS, CAP, FIORI, Node Js

Generar MTA FIORI app usando un servicio creado con el modelo de programación CAP (Cloud Application Programming) en el ambiente de desarrollo BAS (Business Application Studio) en la nube. 

Prerequisitos: 

  • Una cuenta trial SAP Cloud BTP.
  • Subscripción al Business Application Studio.
  • DB de espacio de desarrollo este en estatus RUNNING.
  • Crear una aplicación Node.js usando Cloud Application Programming Model.
  • Asignar autorización a una aplicación Node.js usando Cloud Application Programming Model.
  • Crear un destination para un servicio Node.js usando Cloud Applicaction Programming Model. 

Justificación:

Crear una aplicación FIORI Freestyle para el servicio de Books y una aplicación FIORI elements para creación de Órdenes en el mismo proyecto del tipo Multitarget Application Standalone Approuter. 

1.- Abrir una sesión del tipo FIORI en el Business Application Studio.

Crear un espacio ahora del tipo FIORI y acceder desde ahí al Business Application Studio.

dev_spaces

2.- Crear MTA application y Standalone Approuter.

Seleccionar la opción Crear con Template.

template_cap

Seleccionar la opción Basic Multitarget Application. Presionar Start.

mta_app

Capturar el nombre del proyecto. Presionar Finish. 

approuter_new

Seleccionar el archivo MTA creado y ejecutar Create MTA Module from Template.

create_mta

Seleccionar Approuter Configuration. Presionar Start. 

app_config

Seleccionar Standalone Approuter, y Yes en autentication. Presionar Next.

approuter_config

Aunque mi idea es agregar UI pongo No porque me aparecía un error al momento del build. Esto era porque por algún motivo en el mta.yaml se creaba sin la línea build-result: resources del repo-host.

Ahora actualizar el archivo MTA del proyecto, agregar las siguientes líneas para el destination. 

approuter_mta

En el archivo xs-app.json ubicado en el directorio approuter, agregar el destination.

{
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "(.*)",
      "target": "$1",
      "destination": "CAPBookshop"
    }
  ]
}

Si en este punto hacemos el build and deploy, al ejecutar la aplicación aparecerá el servicio (esto lo hice para probar el destination):

app

3.- Crear Aplicaciones FIORI (Módulos).

Crear las aplicaciones con el template SAP FIORI application.

fiori_app

También se puede acceder desde View –> Find Command… 

command

Y luego View –> Fiori: Open Application Generator.

open_fiori

Seleccionar el tipo de aplicación y el floorplan requerido o deseado.

floor_fs

Seleccionar en Data Source, utilizar Connect to an OData service y en URL del destination creado en un post destinations CAP y agregando el endpoint. Presionar Next. 

data_source

Seleccionar la entidad del servicio. 

entity_sel

Capturar los atributos del proyecto, poner el módulo dentro de la carpeta del proyecto y así todos los módulos dentro del MTA project. Seleccionar No en deployment. Presionar Finish.

approuter_attrib

Seleccionar No a la demás opciones. 

Crear el siguiente módulo, en este caso generé el de orders también pero con el tipo Fiori Elements.

4.- Agregar configuración de deployment.

Abrir una nueva terminal dentro de cada módulo y ejecutar el siguiente comando.

npx fiori add deploy-config

Contestar las preguntas del wizard (utilizar las flechas del teclado para seleccionar las opciones) de la siguiente manera:

Target: Cloud Foundry

Destination name: CAPBookshop 

Para hacer esto en cada módulo nos posicionándonos en el directorio correspondiente. 

Para booksapp: 

approuter_config_deploy

Y para ordersapp:

approuter_config_deploy2

En este punto el archivo MTA es actualizado acorde a los módulos que se van integrando en la configuración de implementación.

approuter_mta_yaml

5.- Build & deployment

Seleccionar el archivo creado por el wizard mta.yaml y ejecutar la opción Build MTA Project.

approuter_build

Este es el resultado del Build MTA Project:

approuter_build_res

En este punto es importante verificar estar firmados a cloud foundry.

Seleccionar el archivo creado en el directorio mta_archives y ejecutar Deploy MTA Archive. 

approuter_deploy

Este es el resultado del Deploy MTA Archive:

approuter_deploy_result

6.- Probar la aplicación creada y sus módulos.

Pruebo las aplicaciones en modo incógnito.

https://<cuenta_trial>-dev-capbookshopapp-approuter.cfapps.us10.hana.ondemand.com

Aparece la pantalla de autentificación, dado a que el servicio estaba protegido, el approuter se encargo de configurar la aplicación.

incognito

En el archivo xs-app.json quedó la ruta a books, por lo que se redirige en automático  a /booksapp/index.html

approuter_books

Para ejecutar orders cambiar a /ordersapp/index.html

approuter_orders

Si se elimina cualquier ruta en xs-app.json “welcomeFile” seguirá apareciendo la pantalla del servicio. 

7.- Revisar las aplicaciones desde el cockpit BTP.

También podemos revisar las aplicación creada desde el cockpit BTP dentro de la subcuenta del trial seleccionar la opción Applications. 

approuter_app

Se pueden agregar al servicio Launchpad tambien en trial de SAP BTP en cloud, como una URL. 

lpd_conf_bookapp
lpd_conf_ordersapp
approuter_launchpad

FIN.

Photo by Ivan Di on Unsplash

Accessing HTML5 App from Launchpad Cloud Environment SAP Fiori App using SAP Gateway Demo System

Related Posts

bouquet

SAP

Add BO-enhancements (Side Effects) using RAP Cloud Environment

dean-pugh-lap-win

SAP

Add BO-enhancements (Features) using RAP Cloud Environment

SAP

Add BO-enhancements (Functions) using RAP Cloud Environment

About me

Hola, me llamo Ara,  soy Ingeniera en Sistemas y Sr. Consultant. Me interesa el desarrollo de aplicaciones SAP y escribo acerca de esta tecnología en un enfoque práctico.

Los conceptos se pueden buscar en help.sap.com

Newsletter

Categories

  • Programming
  • SAP
  • Web Design

Recent Posts

  • bouquetAdd BO-enhancements (Side Effects) using RAP Cloud Environment
    November 13, 2023
  • dean-pugh-lap-winAdd BO-enhancements (Features) using RAP Cloud Environment
    November 5, 2023
  • Add BO-enhancements (Functions) using RAP Cloud Environment
    November 4, 2023

Tags

ABAP ABAP Cloud Actions ADT BAS Bitnami CAP CDS Cloud Foundry Connectivity Database Explorer Destinations Determinations DEVELOPER Dominio ES5 Gateway Features FIORI Functions GIT repository Google.Domains HANA Hosting Launchpad MINISAP NetWeaver Node Js Northwind OData Plugins PSeInt RAP Recursos Gratis SAP Cloud SAPUI5 Security Side Effects Subscriptions Temas Trial Account Validations Virtual Elements VSC Wordpress wp-admin
  • Home
  • FAQ
  • Blog
  • Contacto
  • Términos
  • Privacidad
  • Contacto