SAP Fiori App using CAP service BAS Cloud Environment
Generar 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 (y estar firmados a Cloud Foundry).
- 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.
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 dev_spaces](https://aracelychavez.com/wp-content/uploads/2021/04/dev_spaces.png)
2.- Generar aplicación Freestyle.
Seleccionar la opción Crear con Template.
![template_cap template_cap](https://aracelychavez.com/wp-content/uploads/2021/03/template_cap.png)
Seleccionar la opción SAP Fiori application.
![fiori_app fiori_app](https://aracelychavez.com/wp-content/uploads/2021/04/fiori_app.png)
Seleccionar la opción SAPUI5 freestyle con el diseño SAP Fiori Worklist Application. Presionar Next.
![floor_fs floor_fs](https://aracelychavez.com/wp-content/uploads/2021/04/floor_fs.png)
Seleccionar en Data Source Connect to an OData service y en URL del destination creado en el post anterior y agregando el endpoint. Presionar Next.
![data_source data_source](https://aracelychavez.com/wp-content/uploads/2021/04/data_source.png)
Seleccionar la entidad y los datos a mostrar en la primera pantalla de la aplicación. Presionar Next.
![entity_sel entity_sel](https://aracelychavez.com/wp-content/uploads/2021/04/entity_sel.png)
Capturar los atributos del proyecto. Presionar Finish.
![proj_attributes proj_attributes](https://aracelychavez.com/wp-content/uploads/2021/04/proj_attributes.png)
Ahora se instalarán las dependencias del proyecto (esperar a que aparezca el último mensaje).
![dependencies dependencies](https://aracelychavez.com/wp-content/uploads/2021/04/dependencies.png)
![generated generated](https://aracelychavez.com/wp-content/uploads/2021/04/generated.png)
![later_use later_use](https://aracelychavez.com/wp-content/uploads/2021/04/later_use.png)
3.- Crear Aplicación Fiori Elements.
Crear otra aplicación FIORI con el generador, seleccionando otro tipo y floorplan.
También se puede acceder desde View –> Find Command…
![command command](https://aracelychavez.com/wp-content/uploads/2021/03/command.png)
Y luego View –> Fiori: Open Application Generator.
![open_fiori open_fiori](https://aracelychavez.com/wp-content/uploads/2021/03/open_fiori.png)
Seleccionar el tipo de aplicación SAP Fiori elements con el floorplan List Report Object.
![floor_fe floor_fe](https://aracelychavez.com/wp-content/uploads/2021/04/floor_fe.png)
Seleccionar en Data Source Connect to an OData service y en URL del destination creado en el post anterior y agregando el endpoint. Presionar Next.
![data_source data_source](https://aracelychavez.com/wp-content/uploads/2021/04/data_source.png)
Seleccionar la entidad del servicio.
![data_source_ord data_source_ord](https://aracelychavez.com/wp-content/uploads/2021/04/data_source_ord.png)
Capturar los atributos del proyecto. Presionar Finish.
![proj_attr_ord proj_attr_ord](https://aracelychavez.com/wp-content/uploads/2021/04/proj_attr_ord.png)
¿Por qué No escojo Add deployment configuration? y me ahorro el paso 6? Porque cuando hago esto no me incluye correctamente el destination en el archivo xs-app.json del módulo al menos a la fecha en que escribo este post. Tal vez en actualizaciones posteriores el template este corregido.
Ahora se instalarán las dependencias del proyecto (esperar a que aparezca el último mensaje).
![dependencies dependencies](https://aracelychavez.com/wp-content/uploads/2021/04/dependencies.png)
![generated generated](https://aracelychavez.com/wp-content/uploads/2021/04/generated.png)
![later_use later_use](https://aracelychavez.com/wp-content/uploads/2021/04/later_use.png)
4.- Ajustes al manifest.json de los proyectos.
Abrir cada uno de los proyectos y ajustar el archivo webapp/manifest.json
Primero agregar crossNavigation en la sección extra de “sap.app”: { y antes de “sap.ui”: {
"crossNavigation": {
"inbounds": {
"intent1": {
"signature": {
"parameters": {},
"additionalParameters": "allowed"
},
"semanticObject": "Object",
"action": "display",
"title": "{{appTitle}}",
"info": "{{appTitle}}",
"subTitle": "{{appSubTitle}}",
"icon": "sap-icon://account"
}
}
}
![crossnav crossnav](https://aracelychavez.com/wp-content/uploads/2021/04/crossnav.png)
Revisar que exista dentro del webapp/manifest.json las siguientes líneas, si no aparecen, agregarlas. En service debe ir el correspondiente nombre del proyecto.
"sap.cloud": {
"public": true,
"service": "productsorders"
}
5.- Probar las aplicaciones antes del deployment.
Seleccionar la carpeta webapp y presionar la opción Preview Application.
![preview_app preview_app](https://aracelychavez.com/wp-content/uploads/2021/04/preview_app.png)
Aparecerá un recuadro, seleccionar start.
![select_start select_start](https://aracelychavez.com/wp-content/uploads/2021/04/select_start.png)
Se abrirá automáticamente el puerto http://localhost:8080 con la aplicación a probar.
Prueba de Books (Fiori Freestyle)
Nota: Le agregué un pequeño código de filtro para probar el freestyle.
![test_fiori_freestyle test_fiori_freestyle](https://aracelychavez.com/wp-content/uploads/2021/04/test_fiori_freestyle.png)
Prueba de Orders (Fiori Elements)
Este por ya tener desde el servicio las anotaciones correspondientes, ya aparecen las columnas, las acciones CRUD y el detalle en segunda página.
![test_fiori_element test_fiori_element](https://aracelychavez.com/wp-content/uploads/2021/04/test_fiori_element.png)
6.- Agregar configuración de deployment.
Abrir una nueva terminal dentro de cada proyecto 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 – (en este caso)
Add application to managed application router: Yes
Managed app significa que la gestión de la aplicación es controlada por SAP, lo cual ya incluirá deployment, seguridad y direccionamiento. Además se puede utilizar el servicio Launchpad.
![config_deploy config_deploy](https://aracelychavez.com/wp-content/uploads/2021/04/config_deploy.png)
Revisar que exista dentro del xs-app.json de cada proyecto la referencia al destination. De lo contrario al ejecutar la aplicación marcará File Not Found.
{
"welcomeFile": "/index.html",
"authenticationMethod": "route",
"routes": [
{
"source": "^/catalog/(.*)$",
"target": "/catalog/$1",
"destination": "CAPBookshop",
"authenticationType": "xsuaa",
"csrfProtection": false
},
{
"source": "^/resources/(.*)$",
"target": "/resources/$1",
"authenticationType": "none",
"destination": "ui5"
},
{
"source": "^/test-resources/(.*)$",
"target": "/test-resources/$1",
"authenticationType": "none",
"destination": "ui5"
},
{
"source": "^(.*)$",
"target": "$1",
"service": "html5-apps-repo-rt",
"authenticationType": "xsuaa"
}
]
}
7.- Build & deployment
Seleccionar el archivo creado por el wizard mta.yaml y ejecutar la opción Build MTA Project.
![fiori_build fiori_build](https://aracelychavez.com/wp-content/uploads/2021/04/fiori_build.png)
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.
![fiori_deploy fiori_deploy](https://aracelychavez.com/wp-content/uploads/2021/04/fiori_deploy.png)
8.- Revisar las aplicaciones HTML5 desde el cockpit BTP.
Dentro de la subcuenta del trial seleccionar la opción HTML5 Applications.
Aparecerá el listado de las aplicaciones HTML5 creadas en cloud foundry.
![html5 html5](https://aracelychavez.com/wp-content/uploads/2021/04/html5.png)
Desde ahí mismo se pueden ejecutar para probar que todo este correcto con las aplicaciones, otra forma es utilizar el servicio Launchpad tambien en trial de SAP BTP en cloud.