• Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram

S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram
json  ·  rest api  ·  Technical Articles  ·  Vue  ·  vue.js

Alternativa a Fiori y oData, Vue y Rest Api

By s4pcademy 


Hola comunidad,

Ya que podemos hacer el desarrollo de UI5 ​​con VS Code e implementar nuestra aplicación web en la pila BSP en SAP Netweaver. Podemos hacer exactamente lo mismo con cualquier otro marco de JavaScript.

Personalmente, no me divierto con oData, por lo tanto, intento formas alternativas de crear aplicaciones web alojadas en SAP.

en mi primer blog/video tutorial que he mostrado, cómo crear una aplicación Vue.js con VS Code y cómo publicarla en la pila BSP. El tutorial está abajo.

Y luego, en otro blog/video tutorial, mostré cómo crear una API de descanso con SAP Abap y cómo probarla en el navegador y Postman.

Y este blog final de la serie Vue & Rest Api, le mostraré cómo consumir esa API de descanso.

Si ha realizado los pasos en esos dos tutoriales, ahora debería tener una aplicación vue en SAP y también un servicio de descanso.

Vue%20App%20on%20BSP%20Pila

Aplicación Vue en la pila BSP

Resto%20Api%20Servicio

Servicio de API de descanso

Si tienes los dos funcionando. Ahora solo tenemos que hacer una llamada a esa API de descanso desde la aplicación Vue y publicarla nuevamente.

Simplemente abra VS Code y cambie el contenido de HelloWorld.vue con el código a continuación para realizar una llamada de API de descanso a SAP mediante la biblioteca axios.

<template>
  <div id="restapp">
    <h1>{{ msg }}</h1>
    <div>
      <div v-if="loading">
        loading...
      </div>
      <div v-else>
        <div>
          <p>Date Time : {{ rObj.DATETIME }}</p>
        </div>
    
        <div>
          <p>Response : {{ response }}</p>
        </div>
    
        <div>
          <button @click="getDateTime">Refresh</button>
        </div>
      </div>
    </div>
    
    
    <h1>Test Rest Api</h1>
    <p><a target="_blank"
        href="http://vhcalnplci:8000/sap/bc/rest/zrest/Rest?sap-client=001&req={'ID':1001,'BODY':'Some Json Content'}">Click
        to Test Rest Api</a></p>

  </div>
</template>
  
<script>
const URL = 'http://vhcalnplci:8000/sap/bc/rest/zrest/Rest';

import axios from 'axios';

export default {

  name: 'HelloWorld',
  props: {
    msg: String
  },
  el: '#restapp',
  data() {
    return {
      loading: true,
      posts: [] // add posts here so reactivity is working, also undefined would be OK
    }
  },
  methods: {
    getDateTime() {
      this.loading = true
      axios.get(URL, {
        params: {
          req: '{"ID":1001,"BODY":"Some Json Content"}'
        }
      }).then((response) => {
        console.log(response.data, this)
        this.response = response.data
        this.rObj = JSON.parse(response.data.BODY);

        this.loading = false
      })
    },
  },

  created() {
    this.getDateTime()
  }
}

</script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
  

ejecuta tu servidor con “npm ejecutar servir” si aún no se está ejecutando.

Llamadas codificadas creado método cuando se crea el objeto vue en la carga de la página y hace una llamada de rest api a SAP Rest api url con parámetros de obtención. Los parámetros de obtención se manejan en el servicio zrest api, como se explica en detalle en el tutorial de rest api, y el resultado se devuelve como un objeto json como se ve a continuación.

Para probar la aplicación en servidor local debe cancelar CORS en Google Chrome, si también está usando Chrome.

Cors%20Error%21

Cors Error!

Puede cambiar el destino del acceso directo de Google Chrome -> “C:\Program Files\Google\Chrome\Application\chrome.exe” –disable-web-security –user-data-dir=”E:\Cabs\tmp” en vez de E:\Cabs\tmp puede dar cualquier directorio.

Deshabilitar%20Cors%20on%20Chrome

Deshabilitar Cors en Chrome

Y si intenta abrir Chrome con ese nuevo enlace e ingresa nuestra URL, obtendrá los datos de SAP.

Ingrese%20credenciales%20a%20logon%20a%20sistema SAP%20

Ingrese las credenciales para iniciar sesión en el sistema SAP

¡Y el resultado!

Si lo publica en SAP y pruébalo desde la url de sapno tendrás problemas con Cors.

Para publicar, primero crea tu aplicación con «compilación de ejecución de npm” y publicarlo en SAP con “carga npx nwabap“.

Ahora podemos abrir Chrome normal y podemos ingresar la URL de nuestra aplicación -> http://vhcalnplci:8000/sap/bc/ui5_ui5/sap/zvueabapapp/index.html?sap-client=001

Exactamente el mismo resultado 🙂

Eso es. El resto del desarrollo es puro Vue en el frontend y puro abap en el backend. De manera muy simple, así puede usar cualquier marco de JavaScript en la pila BSP con el backend Rest api.

Ahora, en lugar de Fiori y oData, puede usar Vue y Rest Api.

Espero que eso te ayude.

Gracias por leer.



Source link


AlternativaAPIFioriODataRESTVue

Artículos relacionados


#Annotations  ·  cds annotations  ·  Product Information
Edición de anotaciones complejas de OData mediante CDS Graphical Modeler
Product Information
Creación de una API de entrada personalizada en SAP S/4HANA Cloud, Public Edition
goods receipt  ·  gr  ·  IS-Retail  ·  Product Information  ·  Receive products  ·  trusted goods receipt  ·  trusted GR
Recepción de mercancías con Retail Fiori Apps Recibir productos / Recibir productos de confianza

Deja tu comentario Cancelar la respuesta

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

*

*

Migre sus servicios de SAP HANA para BTP (en Cloud Foundry) a SAP HANA Cloud mediante la herramienta de migración de autoservicio
Previo
Consulta de creación y eliminación de documentos del servicio de gestión de documentos BTP en SAPUI5
Siguiente

Madrid

Calle Eloy Gonzalo, 27
Madrid, Madrid.
Código Postal 28010

México

Paseo de la Reforma 26
Colonia Juárez,  Cuauhtémoc
Ciudad de México 06600

Costa Rica

Real Cariari
Autopista General Cañas, 
San José, SJ 40104

Perú

Av. Jorge Basadre 349
San Isidro
Lima, LIM 15073

Twitter Linkedin Instagram
Copyright 2022 | All Right Reserved.
Cookies Para que este sitio funcione adecuadamente, a veces instalamos en los dispositivos de los usuarios pequeños ficheros de datos, conocidos como cookies. La mayoría de los grandes sitios web también lo hacen.
Aceptar
Cambiar ajustes
Configuración de Cookie Box
Configuración de Cookie Box

Ajustes de privacidad

Decida qué cookies quiere permitir. Puede cambiar estos ajustes en cualquier momento. Sin embargo, esto puede hacer que algunas funciones dejen de estar disponibles. Para obtener información sobre eliminar las cookies, por favor consulte la función de ayuda de su navegador. Aprenda más sobre las cookies que usamos.

Con el deslizador, puede habilitar o deshabilitar los diferentes tipos de cookies:

  • Bloquear todas
  • Essentials
  • Funcionalidad
  • Análisis
  • Publicidad

Este sitio web hará:

Este sitio web no:

  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
  • Recuerde sus detalles de inicio de sesión
  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
Guardar y cerrar