Llame a la API de SAP API Business Hub desde la aplicación SAPUI5

Deja un comentario / Tutoriales de sap

En este tutorial, creará una aplicación UI5 básica que utiliza datos de la API de SAP SuccessFactors, que prueba en SAP Business Hub, para obtener una lista. Cada usuario tendrá un elemento de lista que muestra información relevante sobre esa persona.

Es importante tener en cuenta que se recomienda el uso de UI5 ODataModel le OData service, y estas son las API de SuccessFactors proporcionadas en la API de Business Hub, ya que UI5 ​​optimizará el análisis de datos para usted. Este tutorial utiliza el modelo JSON SAPUI5 generado previamente a partir de los fragmentos de código de la API de Business Hub. Usando ODataModel las mejores prácticas para las aplicaciones UI5, pero no se tratan en este tutorial. Puedes averiguar más al respecto ODataModels sa Kit de pantalla UI5.

Paso 1: crear destinos para SAP API Business Hub

Cree los siguientes dos destinos en el nugget de SAP Cloud Platform. Puede crear estos destinos manualmente o descargarlos e importarlos desde estos archivos:
sandbox_destination.txt y catalog_destination.txt

  2. destino del catálogo

Consulte este tutorial si no está seguro de cómo crear un destino.

Hecho

Inicie sesión para responder la pregunta

Paso 2: abre el espacio de desarrollo de Fiori

Comienzo escriba dev space SAP Fiori y abierto haciendo clic en su nombre.

seleccione DevSpace

Consulte este tutorial si no está seguro de cómo llegar aquí o cómo crear un espacio de desarrollo.

Hecho

Inicie sesión para responder la pregunta

Paso 3: conectarse al punto final de Cloud Foundry

Asegúrese de estar conectado al punto final de Foundry Cloud donde utilizará la aplicación SAPUI5 más adelante.

  1. Haga clic en en la esquina inferior izquierda de la pantalla para iniciar el flujo de conexión.

    no conectado

  2. Ingrese el punto final de Foundry Cloud al que desea conectarse. Si su entorno se ejecuta en la región EU10, este es el https://api.cf.eu10.hana.ondemand.com. Ingrese su correo electrónico y contraseña para continuar.

    seleccione Endpoint

  3. Luego, debe seleccionar la organización Cloud Foundry y el espacio que desea utilizar. Verá que está conectado al punto final cuando se respondan estos mensajes.

    linkEndpoint

Hecho

Inicie sesión para responder la pregunta

Paso 4: crea un nuevo proyecto

  1. Clic en el enlace Nuevo proyecto de la plantilla sobre el Bienvenida pantalla.

    nuevo proyecto

  2. Escoger Proyecto Fiori como la categoría de plantillas que desea utilizar y haga clic en Hacia adelante.

    fioriTemplate

  3. Especifique el entorno de destino ( Fundición en la nube ) y la plantilla ( Aplicación SAPUI5 ) y ve al Hacia adelante pantalla.

    sapui5Template

  4. Nombra el proyecto tutorial y proceda haciendo clic Hacia adelante.

    nombre del proyecto

  5. Escoger Enfoque independiente para el tiempo de ejecución y haga clic en Hacia adelante.

    apputer

  6. Nombre del módulo webapp y el nombre del espacio sap.cp y desactive la autenticación. Ve a la Hacia adelante pantalla.

    Aplicación Web

  7. Mantenga el nombre de vista predeterminado y agregue un servicio de datos en esta pantalla. Hacer clic Hacia adelante para proceder.

    viewname

  8. Selecciona el SAP API Business Hub como sistema de origen y seleccione como API. Ingrese sus credenciales de SAP para acceder a los metadatos del servicio de API seleccionado. Hacer clic Hacia adelante para crear el nuevo proyecto.

    conjunto de datos

  9. Una vez creado el proyecto, Business Application Studio le animará a abrir el proyecto en un nuevo espacio de trabajo. Hacer clic Abrir en un nuevo espacio de trabajo.

    novedades

Acerca de la API «Gestión de usuarios»

Sa API de Hub Business, busca el Factores de éxito desde la página Discover APIs. Encuentra el Fundación SAP SuccessFactors Paquete API y selecciónelo.

ubicación de los paquetes de API en API Business Hububicación de los paquetes de API en API Business Hub

Una vez que haya documentado el paquete de API, busque el Gestión de usuarios Listado de API. Seleccione la API para abrir la documentación.

Sitio de API de información de usuario

Hecho

Inicie sesión para responder la pregunta

Paso 5: Redirigir el tráfico entrante a la aplicación SAPUI5

El código generado viene listo para su implementación. De forma predeterminada, la aplicación web estará disponible en https://<approuter-url>/<app/id> y el enrutador de la aplicación no redirigirá el tráfico que llega a la URL raíz. En este paso, cambiará esto.

  1. Abierto el archivo webapp/webapp/manifest.json y obtener la propiedad sap.app>id. El valor de esta propiedad debe ser sap.cp.webapp pero puede cambiar según los nombres que elija en el paso anterior.

    appid

  2. Abierto el archivo tutorial-approuter/xs-app.json y agregando nueva propiedad para definir el desvío.

    xsapp

Hecho

Inicie sesión para responder la pregunta

Paso 6: agrega una lista

  1. Abierto el archivo webapp/webapp/manifest.json y obtener la propiedad sap.ui5>models. Aquí puede ver que el modelo predeterminado está conectado al mainService Oh sap.app>dataSources. Este es el modelo que debe utilizar para vincular los datos en el siguiente subpaso.

  2. Sustituir esta ahí <Page> elemento en el archivo de vista webapp/webapp/view/View1.view.xml con el siguiente palo:

    <mvc:View controllerName="sap.cp.webapp.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
  <Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="Data from the SAP API Business Hub">
				    <content>
				          <List items="{/User}">
				              <StandardListItem title="{firstName} {lastName}" description="{email}"/>
				          </List>
				    </content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>
  3. Salvar sus cambios.

Hecho

Inicie sesión para responder la pregunta

Paso 7: crear una nueva configuración actual

Cree una configuración actual para poder ejecutar la aplicación web. Esta configuración solo necesita crearse una vez.

  1. Para ejecutar el módulo de IU, cambie al Ejecutar configuración panel en la barra de la izquierda. Clickea en el + icono para agregar una nueva configuración actual. Seleccione rápidamente el módulo de interfaz de usuario webapp como la aplicación que desea ejecutar.

    runconfig

  2. Luego seleccione index.html para agregar una nueva configuración actual a su aplicación.

    runFile

  3. Seleccione la última versión de UI5.

    últimoUI5

  4. Escoger Run tutorial-webapp como el nombre de la configuración para crear la configuración.

    saveConfig

  5. Ahora puede ver la configuración a la izquierda. Expanda para ver el Fuente de datos (destino) dependen y haga clic en él para vincular la configuración actual a la fuente de datos.

    connectSource

  6. Selecciona el apihub_sandbox fuente de datos de la lista.

    seleccionar ABH

  7. No te preguntan ingrese sus credenciales otra vez.

    cartas credenciales

Hecho

Inicie sesión para responder la pregunta

Paso 8: Ejecute la aplicación web

Hay varios beneficios de ejecutar su aplicación en lugar de usarla. Entre otras cosas, es más rápido, no requiere un paso de «compilación» y no minimiza su base de datos de código JavaScript.

  1. Simplemente ejecute la configuración que creó.

    correr

  2. Ahora SAP Business Application Studio lanzará la aplicación. Una vez promovido, será seleccionado Exponer y abrir para hacer que el puerto local sea accesible para pruebas y depuración. Seleccione cualquier descripción para este puerto.

    exposición

    Si aparece un error de «Atributo inexistente», corríjalo pasando el siguiente comando en un Terminal Nueva terminal:

    cd tutorial-approuter/
npm install

  3. Ahora debería ver la aplicación web abierta en una nueva pestaña:

    corriendo

Hecho

Inicie sesión para responder la pregunta

Paso 9: preparar la aplicación de implementación

La configuración actual de la clave de API se extrajo de SAP API Business Hub. Ahora necesita encontrar esta clave e insertarla en el enrutador de la aplicación para usar este proyecto.

  1. Para obtener la variable API_Key, Buscando .env[number] archivo enviado webapp/ y abierto es:

    llave

  2. Requerimos un enrutador de aplicaciones personalizado para adjuntar la clave API a todas las aplicaciones entrantes para garantizar que SAP Business Hub acepte las solicitudes enviadas. Crea un archivo nuevo tutorial-approuter/approuter.js para ampliar el enrutador de aplicaciones predeterminado y en lugar de el ocupante con la llave del subpaso anterior.

    const approuter = require('@sap/approuter');
require('@sap/xsenv').loadEnv();

const ar = approuter();

ar.beforeRequestHandler.use(function (req, _res, next) {
	req.headers.apikey = <INSERT API KEY>;
	next();
});
ar.start();

  3. Agregue la extensión al enrutador de aplicaciones predeterminado en el tutorial-approuter/package.json descriptor de módulo.

    {
	"name": "approuter",
	"description": "Node.js based application router service for html5-apps",
	"engines": {
		"node": "^8.0.0 || ^10.0.0"
	},
	"dependencies": {
		"@sap/approuter": "8.5.1"
	},
	"devDependencies": {
		"@sap/html5-repo-mock": "1.6.0"
	},
	"scripts": {
		"start": "node approuter.js",
		"start-local": "node node_modules/@sap/html5-repo-mock/index.js"
	}
}

Paso 10: compila la aplicación

Lleve (también conocido como paquete) el proyecto a mtar archivo para su implementación en Cloud Foundry.

  1. Haga clic derecho en el mta.yaml archivo y seleccione Toma MTA para estimular este proceso.

    construir

  2. Verifique la salida de la consola para asegurarse de que el proceso haya comenzado.

    Expresar

  3. Cuando se completa la construcción, puede ver un mensaje en el registro. Verás el generado mtar archivo en el árbol del proyecto.

Hecho

Inicie sesión para responder la pregunta

Paso 11: Implementar el archivo en Cloud Foundry

Ahora que ha creado un mtar archive, todos deben usar la aplicación.

  1. Haga clic derecho en el mtar archivo y seleccione Despliegue y Implementar un archivo MTA.

    despliegue

  2. Verifique la salida de la consola para asegurarse de que el proceso haya comenzado.

  3. Verá el mensaje de éxito y la URL de la aplicación en el inicio de sesión cuando se complete la implementación. Abra esta URL en su navegador para iniciar la aplicación.

    rath

Puede ver la URL de la aplicación implementada mientras la ejecuta cf apps en una nueva sesión de terminal.
cfapps

Hecho

Inicie sesión para responder la pregunta

Paso 12: prueba la aplicación

  1. Abierto la aplicación se inició en su navegador. Es posible que deba iniciar sesión con su ID de SAP (las mismas credenciales que usa para SAP Cloud Platform Cockpit).

  2. Ahora debería ver una lista de nombres de usuarios y direcciones de correo electrónico.

    Aplicación final UI5

No dude en agregar filtros a la URL que especificó en el controlador para mostrar solo un subconjunto de los usuarios. También puede cambiar las propiedades enlazadas en vista del hecho de que desea mostrar otros atributos de usuario. Recién está comenzando con la API de SAP Business Hub.

Hecho

Inicie sesión para responder la pregunta

Seguro que también te interesa

Deja un comentario

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