Electron Apps

Electron Apps

 

En más de una ocasión hemos celebrado que desarrolladores creen programas multiplataforma y que funcionen perfectamente en todos los sistemas operativos que existen en la actualidad, ya sea macOS, Windows o cualquier distribución de Linux. Pero, lo cierto es que es un trabajo muy tedioso y que pocos desarrolladores realizan, por lo que no son muchos los programas que vemos en todos los sistemas operativos. Sin embargo, hay una pequeña solución, las aplicaciones web.

¿Y quien se aprovecha de esta moda de las aplicaciones web? Pues nada mas y nada menos que Electron. Y es que en el caso de Linux, hay muchos programas y aplicaciones que nunca hubieran llegado a este sistema operativo de no ser por Electron, algunos ejemplos de esto son Slack, Visual Studio CodeNylas Mail, WordPress Desktop…

Electron Apps, ¿qué son y como funcionan?

Electron es un framework de software desarrollado por los chicos de GitHub basado en Chromium y Node.JS. Hace un año que se lanzó la primera versión estable. Las ventajas que ofrece Electron son el soporte multiplataforma, la integración con el escritorio y la creación de aplicaciones a partir de servicios web de forma sencilla. Los contras, recomendamos no abusar de estas aplicaciones, ya no son ligeras en cuanto a tamaño y recursos, pero seguro que en más de una ocasión te serán de gran ayuda.

 Cierto es que muchas de ellas son webapps encapsuladas en un programa para funcionar como aplicaciones de escritorio. Pero está ahí su principal potencial, ya que suelen integrarse mejor en el escritorio, aunque claro está que eso depende también del servicio en el que se esté trabajando. Una forma sencilla de entender como funcionan muchas de las Electron Apps, es como cuando en Google Chrome le damos a añadir al escritorio en modo ventana, nos aparecerá una ventana con la página que le hayamos configurado y parecerá un programa nativo del sistema operativo. Pues las Electron Apps, funcionan con el mismo concepto pero integrando más el programa en el sistema operativo.

Sin embargo, no solo de webapps vive Electron y es ahí donde nos vamos a fijar. Ya que Electron Apps es un directorio que cuanta ya con más de 300 aplicaciones que te sorprenderán. Muchos de estos proyectos son Open Source y están disponibles para todos los sistemas operativos que existen. De momento hemos traído varias aplicaciones de estas como Nylas Mail o Visual Studio Code y seguro que traeremos más, ya que nos benefician a todos.

4 consejos imprescindibles para crear aplicaciones electrónicas multiplataforma

1. Copia y pega en macOS

Imagine, por un momento, que lanza una aplicación. Digamos, una aplicación para tomar notas. Que probó y usó mucho en su máquina Linux. Y luego obtienes este mensaje amigable en ProductHunt:

¡Resulta que, de manera predeterminada, los comandos Copiar y Pegar no están habilitados en Electron en macOS!

La forma de permitir que las personas copien y peguen cosas dentro y fuera de su aplicación es proporcionando un menú de aplicación que contenga esos comandos. En su archivo main.js, simplemente agregue el siguiente código y obtendrá un glorioso formato Full-HD de copiar y pegar:

if (process.platform === 'darwin') { 
var template = [{ 
label: 'FromScratch', 
submenú: [{ 
label: 'Salir', 
acelerador: 'CmdOrCtrl + Q', 
click: función () { 
aplicación. dejar(); 
} 
}] 
}}, { 
label: 'Editar', 
submenú: [{ 
etiqueta: 'Deshacer', 
acelerador: 'CmdOrCtrl + Z', 
selector: 'deshacer' 
), { 
etiqueta: 'Rehacer', 
acelerador: 'Shift + CmdOrCtrl + Z ', 
selector:' rehacer: ' 
}, { 
tipo:' separator ' 
}, { 
label:'
selector: 'cortar:' 
}, { 
etiqueta: 'Copiar', 
acelerador: 'CmdOrCtrl + C', 
selector: 'copiar:' 
}, { 
etiqueta: 'Pegar', 
acelerador: 'CmdOrCtrl + V', 
selector: 'pegar : ' 
}, { 
label:' Seleccionar todo ', 
acelerador:' CmdOrCtrl + A ', 
selector:' selectAll: ' 
}] 
}];
  var osxMenu = menu.buildFromTemplate (plantilla); 
menu.setApplicationMenu (osxMenu); 
}

Si ya tiene un menú, necesita aumentarlo para incluir los comandos de cortar / copiar / pegar de arriba.

1.1 Especifique un icono

… o su aplicación se verá así en Ubuntu:

Muchas,  muchas  aplicaciones se equivocan lamentablemente, porque en Windows y en macOS, el ícono que se muestra en la barra de tareas o en el dock es el  ícono de  la  aplicación  (un .ico o .icns) y en Ubuntu, se muestra el  ícono  de su  ventana  . Addlo es súper simple. en las opciones de `BrowserWindow`, solo especifica un ícono:

mainWindow = new BrowserWindow ({ 
título: 'ElectronApp', 
icono: __dirname + '/app/assets/img/icon.png', 
});

Esto también es un pequeño icono en la parte superior de su aplicación de Windows.

1.2 UI El texto no se puede seleccionar

Cuando use su navegador, su procesador de texto y cualquier otra aplicación de aplicación, notará que no puede seleccionar el texto en sus menús y aplicaciones como Chrome. Una de las formas en que una aplicación de Electron salta rápidamente al valle misterioso es desencadenando accidentalmente una selección de texto o resaltando lo que significa que es la interfaz de usuario.

CSS tiene nuestra espalda aquí, sin embargo; para cualquier botón, menú o

.my-ui-text {-webkit-user-select: none; }

Y el texto simplemente no se seleccionable. Se sentirá más como una aplicación nativa. Un pequeño consejo para verificar esto: simplemente presione ctrl / cmd + A para seleccionar todo el texto seleccionable en su aplicación. A continuación, puede detectar rápidamente los elementos que aún deben rechazar para la selección.

1.3 Necesita tres iconos para tres plataformas

Realmente, esto es simplemente inconveniente. En Windows, necesita un archivo .ico, en macOS necesita un archivo .icns y en Linux necesita un archivo .png.

Afortunadamente, el mismo png normal se puede utilizar para generar los otros dos iconos. Esta es la forma más conveniente:

1. Comience con un PNG de 1024×1024 píxeles. Eso significa que estamos a 1/3 del camino hecho. (Linux, ¡mira!)

2. Para Windows, ejecútelo a través de  icotools  en su terminal para obtener unico:

icontool -c icon.png> icon.ico

3. Para macOS, ejecútelo a través de  png2icns  en su terminal para obtener un

png2icns icon.icns icon.png

4. ¡Ya terminaste!

Hay herramientas de GUI disponibles, como  img2icns  en macOS y  aplicaciones  de  iconos  en Web, Windows y macOS, pero no las he usado.

1.4 ¡Bonificación!

paquete electrónico no necesita la extensión del icono para elegir el correcto para una plataforma determinada:

Empaquetador de electrones. MyApp - icon = img / icon - platform = all - arch = all - version = 0.36.0 - out = .. / dist / - asar

Por supuesto, solo pensé eso después de escribir mi propio guión de compilación que seleccionó la versión correcta del ícono. Oh bien

2. Las pantallas de carga blancas pertenecen a los navegadores

Nada delata la  navegabilidad  inherente de una aplicación Electrón más que una pantalla de carga blanca. Afortunadamente, hay dos cosas que podemos hacer para combatir eso:

2.1 Especifique un color de fondo BrowserWindow

Si su aplicación tiene un color de fondo no blanco, asegúrese de especificar las opciones de BrowserWindow. Esto no evita el color de color mientras se carga su aplicación, pero al menos no cambia de color a la mitad:

mainWindow = new BrowserWindow ({ 
título: 'ElectronApp', 
backgroundColor: '# 002b36', 
});

2.2 Oculte su aplicación hasta que su página se haya cargado:

Como en la realidad Estamos en el navegador, podemos optar por ocultar las ventanas hasta que sepamos que todos nuestros recursos se han cargado. Al iniciar, asegúrese de ocultar la ventana de su navegador:

var mainWindow = new BrowserWindow ({ 
título: 'ElectronApp', 
show: falso, 
});

Luego, cuando todo esté cargado, muestre la ventana y concéntrela para que aparezca para el usuario. Puede hacer esto con el evento “listo para mostrar” en su “BrowserWindow”, que lo recomienda, o el evento “terminar-cargar-cargar” en su web.

mainWindow.on ('ready-to-show', function () { 
mainWindow.show (); 
mainWindow.focus (); 
});

Desea enfocarlo para que el usuario sepa que su aplicación se ha cargado.

3. Conservar las dimensiones y la posición de su ventana

Ahora, esta es una de las muchas aplicaciones “nativas” que también se equivocan, y creo que es una de las más molestas. Me lleva a la pared cuando una aplicación secreta posicionada, en un próximo lanzamiento, simplemente restablece su posición y las dimensiones de nuevo es un desarrollador de la aplicación que era razonable. No hay hagas eso.

En su lugar, guarde la posición y las dimensiones de la ventana y restaurelas en cada lanzamiento. Tus usuarios te lo agradecerán

3.1 Soluciones preconstruidas

Hay dos soluciones preconstruidas que resuelven esto para usted, llamadas  electrón-ventana-estado  y  electron-ventana-estado-administrador  . Ambos trabajan, tienen buena documentación y se ocupan de los casos extremos, como las aplicaciones maximizadas. Si tienes prisa, úsalos.

3.2 Ruede su propio

También puede hacer las suyas propias, y eso es lo que hice, basado en el código que ya había hecho para  Trimage  hace unos años. No es mucho trabajo y te da mucho control. Te mostrare:

3.2.1 Obtener algo para guardar su estado

En primer lugar, debemos ser capaces de almacenar la posición y las dimensiones de nuestra aplicación en algún lugar. Puede usar  Electron-settings  que lo hace bien, pero elegí usar  nodo-localstorage  por su simplicidad.

var JSONStorage = require ('node-localstorage'). JSONStorage;
var storageLocation = app.getPath ('userData'); 
global.nodeStorage = new JSONStorage (storageLocation);

Si guarda sus datos en  `getPath (‘userData’);`  electron lo guarda junto con sus configuraciones de aplicación, es  `~ / .config / YOURAPPNAME`  , o en Windows, en la carpeta appdata debajo de su usuario.

3.2.2 Al abrir su aplicación, intente cargar en su estado

var windowState = {};
tratar { 
windowState = global.nodeStorage.getItem ('estado de la ventana'); 
} catch (err) { 
// el archivo está allí, pero está dañado. Manejar apropiadamente.
}

Por supuesto, esto no funcionará en el primer lanzamiento, así que debes lidiar con eso. Probablemente al proporcionar valores predeterminados razonables. Una vez que tenga su estado anterior en un objeto javascript, simplemente use esa información para establecer las dimensiones de su BrowserWindow:

var mainWindow = new BrowserWindow ({ 
título: 'ElectronApp', 
x: windowState.bounds && windowState.bounds.x || indefinido,
y: windowState.bounds && windowState.bounds.y || indefinido,    
width: windowState.bounds && windowState .bounds.width || 550,
height: windowState.bounds && windowState.bounds.height || 450,});

Como puede ver, agregue el valor predeterminado sensato aquí como valor de respaldo.

Ahora en Electron, no es posible iniciar una ventana en su estado maximizado, por lo que tenemos que hacer eso directamente después de crear nuestro BrowserWindow.

// Restaura el estado maximizado si está configurado. 
// no es posible a través de las opciones, así que lo hacemos aquí
if (windowState.isMaximized) { 
mainWindow.maximize (); 
}

3.2.3 Guarde su estado real en movimiento, cambie el tamaño y cierre:

En un mundo perfecto, solo tendrá que guardar su estado de ventana al cerrar la aplicación, pero perderá todas las veces que la aplicación finalice por otro motivo desconocido (como cuando se corta la energía).

Obtener y guardar el estado en cada movimiento o cambiar el tamaño del evento asegura que siempre restauremos la última posición y dimensiones conocidas.

['cambiar tamaño', 'mover', 'cerrar; ] .forEach (función (e) {
mainWindow.on (e, function () { 
storeWindowState (); 
}); 
});

Y la función storeWindowState:

var storeWindowState = function () { 
windowState.isMaximized = mainWindow.isMaximized ();
  if (! windowState.isMaximized) { 
// solo actualiza los límites si la ventana no está actualmente maximizada     
windowState.bounds = mainWindow.getBounds (); 
} 

global.nodeStorage.setItem ('windowstate', windowState); 
};

La función storeWindowState tiene un pequeño inconveniente: si minimiza una ventana nativa maximizada, volverá a su posición  anterior  . Esto significa que cuando se maximiza el estado de la ventana, queremos guardar el hecho, pero no queremos sobreescribir las dimensiones de la ventana anterior (sin maxima) de modo que maximizas, cierras, vuelves a abrir y no maximizas, terminamos con la posición que tu ventana tenía antes de maximizar.

4. Algunos consejos de fuego rápido

A continuación hay un par de consejos y trucos pequeños y rápidos.

4.1 Accesos directos

En general, los usuarios de Windows y Linux usan Ctrl, mientras que los usuarios de MacOS usan Cmd para los accesos directos. En Lugar de atajo para contactar Cada (Llamado  acelerador  en el electrón) Dos Veces, utilice “CmdOrCtrl” para Apuntar a todas las Plataformas a la vez.

4.2 usar la “fuente del sistema / San Francisco”

Usar la fuente predeterminada del sistema significa que su aplicación puede integrarse con el resto del sistema operativo. En lugar de codificar en forma rígida para cada sistema por separado, puede usar el siguiente CSS para elegir que sea fuente de UI en un sistema:

cssbody {font: caption; }

“Caption” es una palabra clave en CSS que se vincula a una fuente especificada por la plataforma.

4.3 Colores del sistema

Al igual que la fuente del sistema, también puede elegir la plataforma para determinar los colores de su aplicación utilizando los  colores del sistema  . En realidad, están en desuso en favor del tipo de valor de Apariencia aún no implementado en CSS3, pero no van a ir a ningún lado en el futuro previsible.

4.4 Diseño

CSS es una forma inmensamente poderosa de diseñar aplicaciones, especialmente cuando se combinan con  `calc ()`  , pero no se descuenta el trabajo hecho en marcos de GUI más antiguos como GTK, Qt o Apple Autolayout. Puede crear la GUI de su aplicación de forma similar mediante el uso de  hojas de estilos de cuadrícula,  que es un sistema de diseño basado en restricciones.

¡Gracias!

Crear aplicaciones en Electron es muy divertido y muy gratificante: puedes poner en marcha y ejecutar en múltiples plataformas en cuestión de minutos. Si aun no sabes que es Electron, espero que este artículo te intrigue lo suficiente como para echarle un vistazo. Su  sitio web  tiene una excelente documentación, así como una aplicación de demostración muy interesante que permite probar todas las API que se ofrecen.