[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.16″ global_colors_info=”{}”][et_pb_row admin_label=”Imagen principal” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_image src=”https:\/\/orekait.com\/wp-content\/uploads\/2021\/12\/sapui5.png” alt=”cloud-public” title_text=”sapui5″ admin_label=”Imagen principal” module_class=”post-img” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Cuerpo” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Texto” _builder_version=”4.25.2″ header_2_font_size=”24px” header_3_font_size=”20px” background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ global_colors_info=”{}” content__hover_enabled=”off|hover” sticky_enabled=”0″]<\/p>\n
En este art\u00edculo veremos\u00a0c\u00f3mo crear aplicaciones multiplataforma de escritorio usando Electron + SAPUI5<\/strong>\u00a0y c\u00f3mo construir\u00a0un solo ejecutable<\/strong>\u00a0para nuestra aplicaci\u00f3n.<\/p>\n <\/p>\n Electron es un\u00a0framework de c\u00f3digo abierto desarrollado y mantenido por GitHub<\/strong>. Combina el motor\u00a0Chromium<\/strong>\u00a0y\u00a0Node.js\u00a0<\/strong>lo que permite escribir aplicaciones en tecnolog\u00edas web y encapsularlas en un contenedor para que\u00a0parezcan apps nativas de escritorio<\/strong>. Aplicaciones como\u00a0Microsoft Teams<\/strong>,\u00a0Discord<\/strong>, o\u00a0Spotify<\/strong>\u00a0est\u00e1n desarrolladas con Electron.<\/p>\n Usar Electron trae una serie de\u00a0beneficios<\/strong>\u00a0como el\u00a0acceso a la API del hardware<\/strong>, la opci\u00f3n de poder\u00a0seguir usando<\/strong>\u00a0la app\u00a0si<\/strong>\u00a0el servidor que aloja la aplicaci\u00f3n\u00a0Fiori se cae<\/strong>, que todo el mundo usa la misma aplicaci\u00f3n y de esta manera\u00a0evitas los problemas de compatibilidad\u00a0<\/strong>con los diferentes navegadores y que a la hora de implementarlo, es m\u00e1s f\u00e1cil decirle a un usuario que abra una aplicaci\u00f3n en lugar de tener que ir al navegador y guardar la direcci\u00f3n.<\/p>\n Para poder empezar a construir la aplicaci\u00f3n necesitaremos\u00a0instalar Node.js<\/strong>\u00a0y una aplicaci\u00f3n\u00a0SAPUI5<\/strong>. Yo usar\u00e9 una aplicaci\u00f3n de demo de la siguiente p\u00e1gina\u00a0https:\/\/sapui5.hana.ondemand.com\/#\/demoapps<\/a>.<\/strong><\/p>\n Una vez tengamos todo,\u00a0crearemos la carpeta de nuestra aplicaci\u00f3n y moveremos la carpeta webapp\u00a0<\/strong>de nuestra aplicaci\u00f3n\u00a0UI5<\/strong>\u00a0dentro de esta. Despu\u00e9s\u00a0abrimos un terminal\u00a0<\/strong>y\u00a0navegamos a la ra\u00edz<\/strong>\u00a0de nuestra aplicaci\u00f3n. Ejecutamos el siguiente\u00a0comando<\/strong>:<\/p>\n npm init<\/strong><\/p>\n Ahora crearemos un\u00a0fichero main.js\u00a0<\/strong>en la ra\u00edz y pegaremos el siguiente\u00a0c\u00f3digo<\/strong>:<\/p>\n const { app, BrowserWindow } = require(\u2018electron\u2019)<\/strong>;<\/p>\n let mainWindow;<\/strong><\/p>\nElectron:<\/strong><\/h3>\n
![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2021\/12\/electron-1.png\")
<\/figure>\n<\/div>\n
![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2021\/12\/electron-2.png\")
<\/figure>\n<\/div>\n