Aracely Chávez
My blog
  • Home
  • FAQ
  • Blog
  • Contacto
July 17 2021

Vue and React Apps using SAP ES5 Gateway on BAS

Aracely Chavez SAP BAS, Cloud Foundry, ES5 Gateway, SAP Cloud

Generar dos aplicaciones Vue y React desde el Business Application Studio Cloud environment utilizando un servicio del SAP Gateway ES5.

Prerequisitos: 

  • Una cuenta trial SAP Cloud BTP.
  • Subscripción al Business Application Studio.
  • Crear un destination hacia el SAP Gateway Demo System

Objetivo: Conocer la posibilidad de desarrollo de aplicaciones con lenguajes de  desarrollo VUE y React como front-end y SAP Gateway como back-end.

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

Crear un espacio del tipo FIORI en el Business Application Studio y si está activado pararlo y seleccionar el botón de edición de extensiones.   

vue_1

Asegurarse de que esté activado la extensión adicional HTML5 Application Template.

vue_2

Luego volvemos a activar el espacio y entramos al BAS dando click al nombre del espacio, en este caso FIORI. 

dev_spaces

2.- Generar la aplicación Vue.

Seleccionar la opción Crear con Template.

template_fiori

Seleccionar la opción HTML5 Project y presionar Start.

vue_3

Seleccionar la opción Vue.js Application y presionar Next.

vue_4

Capturar nombre del proyecto y presionar Next.

vue_5

Seleccionar Managed Approuter y capturar un nombre único (arbitrario) de aplicación.

vue_6

Capturar un nombre para el módulo de la aplicación VUE.

vue_7

Ahora seleccionamos la fuente de datos y el servicio a utilizar.

En este caso estamos utilizando un sistema SAP como back-end entonces seleccionamos My SAP Systems, la fuente que sería el destino configurado ES5 y finalmente el servicio, en este caso ZGWSAMPLE_BASIC. 

vue_8

Ahora seleccionamos la entidad y las propiedades a utilizar. Presionar Finish.

vue_9

Esperamos a que las dependencias se instalen completamente.

dependencies
generated
later_use

3.- Generar aplicación React.

Seleccionar la opción Start from Template.

template_fiori

Seleccionar la opción HTML5 Project y presionar Start.

vue_3

Seleccionar el template React Application.

React_1

Capturar el nombre del proyecto. Presionar Next.

React_2

Seleccionar Managed Approuter y capturar un nombre único (arbitrario) de aplicación.

React_3

Capturar un nombre para el módulo de la aplicación REACT.

Nota: Inicialmente le había puesto el mismo nombre a los módulos de las dos aplicaciones, pero al hacer el despliegue marca error, entonces volví a crear la aplicación con el nombre businessparter (sin la última s). 

React_0

Ahora seleccionamos la fuente de datos y el servicio a utilizar.

En este caso estamos utilizando un sistema SAP como back-end entonces seleccionamos My SAP Systems, la fuente que sería el destino configurado ES5 y finalmente el servicio, en este caso ZGWSAMPLE_BASIC. 

vue_8

Ahora seleccionamos la entidad y las propiedades a utilizar. Presionar Finish.

vue_9

Esperamos a que las dependencias se instalen completamente.

dependencies
generated
later_use

4.- Hacer ajustes a la aplicación.

Aplicación VUE:

Abrir y ajustar el archivo businesspartners/src/pages/MasterPage.vue para modificar los encabezados de las columnas. 

vue_19

Aplicación REACT:

Abrir y ajustar el archivo businesspartner/src/pages/MasterPage.js para modificar los encabezados de las columnas. 

React_4

5.- Construir la aplicación.

Abrir una terminal, posicionarse en el directorio del módulo creado y ejecutar: npm run watch.

Aplicación VUE:

vue_10

Aplicación REACT:

React_5

5.- Probar localmente la aplicación.

En cada aplicación abrir la vista de Configuración. Presionar Create Configuration. 

vue_11

También se podría seleccionar + y contestar a la pregunta What would you like to run?.

Seleccionar la opción que se propone.

vue_12

Seleccionar Enter para confirmar el name propuesto. 

vue_14

Expandir las opciones de configuración y nos posicionamos sobre el botón de data source y presionamos la opción bind (la que se muestra en la siguiente figura). 

vue_15

Seleccionamos el sistema ES5. 

vue_16

Finalmente corremos la aplicación.

vue_17

Abrimos la aplicación presionando el botón Open in New Tab. 

vue_18

Visualizamos la aplicación creada. 

Aplicación VUE:

vue_20

Aplicación REACT:

React_6

6.- Agregar configuración de Launchpad.

Abrir y ajustar el archivo manifest.json para agregar la sección crossNavigation.

  "crossNavigation": {
      "inbounds": {
          "intent1": {
              "signature": {
                  "parameters": {},
                  "additionalParameters": "allowed"
              },
              "semanticObject": "vuedemo",
              "action": "display",
              "title": "Suppliers"
          }
      }
  }

Aplicación VUE:

vue_21

Aplicación REACT:

React_7

7.- Build & deployment

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

React_8

Aplicación VUE:

vue_mta

Aplicación REACT:

React_9

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.

React_10

Aplicación VUE:

vue_deploy

Aplicación REACT:

React_11

Desde la terminal podemos consultar la liga de la aplicación con el comando:

cf html5-list -di <app>-destination-service -u

Aplicación VUE:

vue_html5

Aplicación REACT:

React_12

Con estos links se puede añadir la aplicación al SAP Launchpad Service en el trial de SAP BTP cloud.

lp_vue

También podemos visualizar las aplicaciones HTML5 creadas desde el SAP BTP Cockpit:

vue_react_apps

FIN.

SAP Fiori Standalone App using Northwind OData Service

Related Posts

clear_code

SAP

SAP Fiori Standalone App using Northwind OData Service

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 freelance consultant. Escribo acerca de tecnologías SAP en español. Networking: contáctame.

Newsletter

Categories

  • SAP
  • Web Design

Recent Posts

  • 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
  • Sybase License SAP NetWeaver AS ABAP
    May 8, 2021
Tweets by aracelychavez

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