Apps multiplataforma con Electron SAPUI5

En este artículo veremos cómo crear aplicaciones multiplataforma de escritorio usando Electron + SAPUI5 y cómo construir un solo ejecutable para nuestra aplicación.

Electron:

Electron es un framework de código abierto desarrollado y mantenido por GitHub. Combina el motor Chromium y Node.js lo que permite escribir aplicaciones en tecnologías web y encapsularlas en un contenedor para que parezcan apps nativas de escritorio. Aplicaciones como Microsoft Teams, Discord, o Spotify están desarrolladas con Electron.

Usar Electron trae una serie de beneficios como el acceso a la API del hardware, la opción de poder seguir usando la app si el servidor que aloja la aplicación Fiori se cae, que todo el mundo usa la misma aplicación y de esta manera evitas los problemas de compatibilidad con los diferentes navegadores y que a la hora de implementarlo, es más fácil decirle a un usuario que abra una aplicación en lugar de tener que ir al navegador y guardar la dirección.

Para poder empezar a construir la aplicación necesitaremos instalar Node.js y una aplicación SAPUI5. Yo usaré una aplicación de demo de la siguiente página https://sapui5.hana.ondemand.com/#/demoapps.

Una vez tengamos todo, crearemos la carpeta de nuestra aplicación y moveremos la carpeta webapp de nuestra aplicación UI5 dentro de esta. Después abrimos un terminal y navegamos a la raíz de nuestra aplicación. Ejecutamos el siguiente comando:

npm init

Ahora crearemos un fichero main.js en la raíz y pegaremos el siguiente código:

const { app, BrowserWindow } = require(‘electron’);

let mainWindow;

app.on(‘ready’, () => {

 mainWindow = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

 nodeIntegration: false

 }

    });

  mainWindow.loadFile(‘webapp/index.html’);

});

Aquí podremos configurar ventana de Electron y en la función loadFile le diremos que fichero mostrar.

Ahora tenemos que abrir el index.html que se encuentra en webapp/index.html y sustituir el src del script de sap-ui-core.js por el siguiente: https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js

y en el fichero package.json  añadiremos lo siguiente dentro de scripts:

«start»: «electron .»

Para probar la aplicación primero tendremos que añadir Electron, desde el terminal escribiremos el siguiente comando:

npm install electron –save-dev

y después para probarlo:

npm start

En el próximo artículo veremos cómo podemos empaquetar nuestra aplicación para diferentes sistemas operativos y de esta forma obtener un solo ejecutable para no tener que escribir comandos cada vez que queramos usar la aplicación. Recuerda que puedes consultar cualquier duda en los comentarios o contactando con nosotros.

Más información: