SAPUI5 mock server en 5 minutos – Business Application Studio

Los nuevos templates de aplicaciones SAPUI5 ya incorporan una versión simplificada para tener un mockup server, pero no siempre está disponibles. En esta entrada veremos como añadir a nuestro proyecto un mockserver y más de un servicio con datos falsos.

Como he dicho en la introducción, cuando por ejemplo, creamos una aplicación mediante el template del BAS que sea tipo freestyle y no le añadimos ningún origen de datos, no nos generará nuestro mockup server.

Otra cosa que tampoco podremos hacer es utilizar las herramientas de edición visual de BAS, pero está parte la aparcaremos para otra entrada.

Así que vamos a poner solución añadiendo el mockserver a nuestro proyecto. La entrada estará partida en tres apartados, el primero donde añadiremos el servidor, un segundo para añadir la definicion del servicio y el último donde veremos lo fácil que es añadir datos locales.

Preparativos para el mockserver y definición del servicio

Para este ejemplo utilizaremos una aplicación creada con el template a la que le añadiremos una lista de proveedores que extraemos del servicio de ejemplo de OData del sistema Northwind:

En este caso, la aplicación no es importante, solo que de alguna manera se lean los datos de algún backend. Así que ya nos sirve.

Crearemos una carpeta que llamaremos localService donde añadiremos un fichero XML con la definición del servicio. Es decir, el manifest.xml. Esté deberá coincidir con el que usamos en la aplicación, en el caso de este ejemplo:

https://services.odata.org/v2/northwind/northwind.svc/$metadata

Y este será el resultado:

El siguiente paso es informar en el manifest de la aplicación el path donde el IDE puede tomar de referencia la definición del servicio:

Ahora que ya tenemos la definición lista en local, vamos a preparar el proyecto para que sea ejecutado en local.

Crearemos en la raíz del proyecto un fichero llamado «ui5-mock.yaml», este será el contenido:

# yaml-language-server: $schema=https://sap.github.io/ui5-tooling/schema/ui5.yaml.json

specVersion: "2.5"
metadata:
  name: ecastella.mockup.mockup
type: application
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
          version: 1.84.14 # The UI5 version, for instance, 1.78.1. Empty string means latest version
        backend:
          - path: /v2
            destination: Northwind
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35729
        path: webapp
        delay: 300
    - name: sap-fe-mockserver
      beforeMiddleware: fiori-tools-proxy
      configuration:
        service:
          urlBasePath: /v2/northwind/northwind.svc/
          name: ''
          metadataXmlPath: ./webapp/localService/metadata.xml
          #mockdataRootPath: ./webapp/localService/data
          generateMockData: true

Los puntos interesantes son:

• ID de la aplicación, coincidirá con el id de la aplicación:

• Configuración de los ficheros fuente del backend:

De momento dejaremos comentada la parte que especifica un origen de datos «mockdataRootPath».

Ahora que tenemos la configuración, añadiremos una nueva librería en el fichero package.json:

"@sap/ux-ui5-fe-mockserver-middleware": "1",

Acordaros de añadir también las dependencias en la configuración UI5.

Este sera el resultado del fichero package.json:

{
    "name": "mockup",
    "version": "0.0.1",
    "private": true,
    "description": "Mockup Server",
    "keywords": [
        "ui5",
        "openui5",
        "sapui5"
    ],
    "main": "webapp/index.html",
    "dependencies": {},
    "devDependencies": {
        "@ui5/cli": "^2.14.1",
        "@sap/ux-ui5-tooling": "1",
        "@sap/ux-ui5-fe-mockserver-middleware": "1",
        "@sap/ui5-builder-webide-extension": "^1.1.7",
        "ui5-task-zipper": "^0.3.1",
        "mbt": "^1.0.15"
    },
    "scripts": {
        "start": "fiori run --open \"test/flpSandbox.html?sap-ui-xx-viewCache=false#ecastellamockupmockup-display\"",
        "start-local": "fiori run --config ./ui5-local.yaml --open \"test/flpSandbox.html?sap-ui-xx-viewCache=false#ecastellamockupmockup-display\"",
        "start-mock": "fiori run --config ./ui5-mock.yaml --open \"test/flpSandbox.html?sap-ui-xx-viewCache=false#ecastellamockupmockup-display\"",
        "build": "ui5 build --config=ui5.yaml --clean-dest --dest dist",
        "deploy": "fiori cfDeploy",
        "deploy-config": "fiori add deploy-config",
        "start-noflp": "fiori run --open \"index.html?sap-ui-xx-viewCache=false\"",
        "start-variants-management": "fiori run --open \"preview.html?sap-ui-xx-viewCache=false&fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true#preview-app\"",
        "unit-tests": "fiori run --open test/unit/unitTests.qunit.html",
        "int-tests": "fiori run --open test/integration/opaTests.qunit.html",
        "build:cf": "ui5 build preload --clean-dest --config ui5-deploy.yaml --include-task=generateManifestBundle generateCachebusterInfo",
        "build:mta": "rimraf resources mta_archives && mbt build",
        "undeploy": "cf undeploy ecastella-mockup-mockup --delete-services --delete-service-keys"
    },
    "ui5": {
        "dependencies": [
            "@sap/ux-ui5-tooling",
            "@sap/ux-ui5-fe-mockserver-middleware",
            "@sap/ui5-builder-webide-extension",
            "ui5-task-zipper",
            "mbt"
        ]
    },
    "sapuxLayer": "CUSTOMER_BASE"
}

Instalamos las nuevas librerías mediante el comando «npm install»

Ya tenemos todo listo para ejecutar nuestro nuevo servicio mockup, con el comando npm run start-mock:

Como veis, al no proporcionar datos de ejemplo, el framework genera sus propios datos. Esto nos puede ser útil siempre que la aplicación a testear no valide los datos o tenga formaters.

Vamos ahora a añadir datos reales.

Añadiendo una fuente de datos

Ahora que tenemos montado el servidor con su definición, vamos a descomentar la línea de código que teníamos comentada en nuestro fichero ui5-mock.yaml:

Como vemos por la propuesta de rutas, en nuestro proyecto, dentro de la carpeta localService añadiremos la carpeta «data» donde añadiremos un fichero json para cada entidad.

Descargaremos el fichero de la URL, para simplificarlo bajaremos algunos de los campos, no todos:

https://services.odata.org/v2/northwind/northwind.svc/Employees?$top=5&$format=json&$select=EmployeeID,%20LastName,%20FirstName,%20Title,%20TitleOfCourtesy,%20BirthDate,%20HireDate,%20Address,%20City,%20Region,%20PostalCode,%20Country,%20HomePhone,%20Extension

Este sera el resultado:

Vamos a modificar el fichero Employess.json ya que el formato que hemos descargado no es compatible:

Eliminamos el primer nivel de datos (las zonas marcadas en rojo)

Este sera el aspecto del fichero

Si modificamos los datos del fichero para ver si funciona, por ejemplo modificando el campo contry de USA a LOCAL veremos el resultado:

---

Como veis, crear un mockserver para nuestras aplicaciones SAPUI5 es más fácil que nunca. Podemos crear tantos mappings de URL como necesitamos.

Este mismo mockserver puede ser usado para lanzar test des de herramientas CI/CD por ejemplo.