Aracely Chávez
My blog
  • Home
  • FAQ
  • Blog
  • Contacto
clear_code
May 15 2021

SAP Fiori Standalone App using Northwind OData Service

Aracely Chavez SAP BAS, FIORI, Northwind

Generar MTA FIORI app usando un servicio OData de Northwind 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.
  • Crear un destination hacia el servicio Northwind y ui5.

Justificación:

Crear una aplicación FIORI Freestyle para el servicio de Products en un 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 Start from Template.

template_fiori

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

mta_app

Capturar el nombre del proyecto. Presionar Finish. 

north_1

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 authentication. Presionar Next.

approuter_config

Aunque mi idea es agregar UI pongo No porque aparece un error al momento del build. Esto es porque por algún motivo en el mta.yaml se crea 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. 

north_3

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

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

Tener cuidado al escribir el nombre del destination ya que es case-sensitive. 

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 el servicio Northwind. Presionar Next. 

north_4

Seleccionar la entidad del servicio. 

north_5

Capturar los atributos del proyecto, poner el módulo dentro de la carpeta del MTA project. 

north_6

Seleccionar No en deployment configuration. Presionar Finish.

4.- Agregar configuración de deployment.

Abrir una nueva terminal, posicionarse en el módulo y ejecutar el siguiente comando.

cd nwproducts
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: Northwind 

north_7

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

5.- Build & deployment

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

Este es el resultado del Build MTA Project:

north_8

En este punto es importante verificar estar firmados a cloud foundry (CF Login).

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

Este es el resultado del Deploy MTA Archive:

north_deploy

6.- Probar la aplicación creada.

Pruebo las aplicaciones en modo incógnito.

https://<cuentatrial>-dev-mtanorthwind-approuter.cfapps.us10.hana.ondemand.com/nwproducts/index.html

Aparece la pantalla de autentificación.

incognito

Prueba de la aplicación:

north_app

7.- Revisar las aplicaciones desde el cockpit BTP.

Podemos revisar la aplicación creada desde el cockpit BTP dentro de la subcuenta del trial seleccionar la opción Applications. 

north_app2

Y se pueden agregar al servicio Launchpad también en trial de SAP BTP en cloud, con su URL. 

FIN.

 

Sybase License SAP NetWeaver AS ABAP Vue and React Apps using SAP ES5 Gateway on BAS

Related Posts

SAP

Vue and React Apps using SAP ES5 Gateway on BAS

SAP

Sybase License SAP NetWeaver AS ABAP

bas

SAP

SAP Easy-UI5 App using Northwind OData Service

About me

Hola, me llamo Ara,  soy Ingeniera en Sistemas y SAP Sr. Consultant. Escribo acerca de tecnologías SAP en español. Networking: contáctame.

Newsletter

Categories

  • Programming
  • SAP
  • Web Design

Recent Posts

  • dean-pugh-lap-winEjercicio en PSEINT
    October 22, 2022
  • Vue and React Apps using SAP ES5 Gateway on BAS
    July 17, 2021
  • clear_codeSAP Fiori Standalone App using Northwind OData Service
    May 15, 2021

Tags

ABAP BAS Bitnami CAP Cloud Foundry Connectivity Database Explorer Destinations DEVELOPER Dominio ES5 Gateway FIORI GIT repository Google.Domains HANA Hosting HTML5 Launchpad MINISAP NetWeaver Node Js Northwind Open Guided Development Plugins PSeInt Recursos Gratis SAP SAP Cloud SAPUI5 Security Subscriptions Temas Trial Account UI URL VSC Wordpress wp-admin
  • Home
  • FAQ
  • Blog
  • Contacto
  • Términos
  • Privacidad
  • Contacto