Introducción a aplicaciones de escritorio con Ionic 3.x y Electron

Como hemos mencionado en otras entradas de este blog, Ionic es un framework que permite la creación de aplicaciones híbridas utilizando las últimas tecnologías web como HTML5, CSS y JavaScript.

Por otra parte, Electron consiste en un framework desarrollado por GitHub para crear aplicaciones de escritorio multiplataforma (Windows, Linux, macOS) haciendo uso de las mismas tecnologías web, por tanto, ambos frameworks pueden ser compatibles.

La intención de este post es mostrar los pasos necesarios para desarrollar una aplicación híbrida / multiplataforma utilizando la versión 3 de Ionic y haciéndola correr como una aplicación de escritorio gracias a Electron.

¿Por qué Ionic 3? Con la introducción de componentes como el Split Pane o la Responsive Grid, ahora es más fácil que nunca desarrollar una aplicación de escritorio usando Ionic.

Paso 1: Crear un proyecto Ionic

Vamos a instalar Ionic globalmente usando npm.

sudo npm install -g ionic

A continuación, creamos la estructura del proyecto.

ionic start ion-electron --no-cordova blank

Ionic incluye numerosas plantillas que puedes usar, pero nosotros usamos la plantilla blank, la cual nos proporciona un proyecto con el contenido básico. Añadimos la opción –no-cordova ya que en este caso no utilizaremos Apache Cordova como envoltorio para crear apps móviles. 

Lanzamos la aplicación en un navegador web.

cd ion-electron
ionic serve

Paso 2: Instalar las dependencias de Electron

Instalamos Electron globalmente mediante npm.

sudo npm install -g electron

Una aplicación básica de Electron depende de estos tres archivos:

• main.js
• index.html
• package.json 

main.js

El fichero main.js es el responsable del lanzamiento de la aplicación, creando la ventana principal del navegador.

Se trata, por tanto, del proceso principal de la aplicación. Copiamos el archivo main.js del proyecto Inicio Rápido de Electron.

const electron = require('electron');

// Module to control application life.
const app = electron.app;

// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

// Keep a global reference of the window object, if you don't,
// the window will be closed automatically when the JavaScript
// object is garbage collected.
let mainWindow;

function createWindow() {

    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1280,
        height: 700
    });

    // and load the index.html of the app.
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    // Open the DevTools.
    mainWindow.webContents.openDevTools()

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // Dereference the window object, usually you would windows
        // in an array if your app supports multi windows, this is
        // the time when you should delete the corresponding element.
        mainWindow = null;
    });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
        createWindow();
    }
});

// In this file you can include the rest of your app's
// specific main process code. You can also put them in
// separate files and require them here.

Modificamos su contenido como se indica a continuación.

mainWindow.loadURL(
    process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '/../www/index.html'),
        protocol: 'file:',
        slashes: true
    })
);

// Open the DevTools.
mainWindow.webContents.openDevTools();

Con esto cambiamos la ubicación por defecto del fichero index.html que espera Electron.

Creamos un nuevo directorio llamado electron y dejamos dentro el fichero main.js modificado, quedando la estructura del proyecto de la siguiente forma.

|-- /ion-electron
    |-- /electron
        |-- main.js        - Proceso principal de Electron.
    |-- /node_modules
    |-- /resources
    |-- /src
        |-- index.html
    |-- /www
    |-- package.json

Para Electron, el fichero index.html es el punto de entrada de la aplicación. Al crear el proyecto con Ionic, se generó un fichero index.html, el cual vamos a modificar como sigue.

    ...
   <!-- cordova.js required for cordova apps (remove if not needed) -->
   <!-- script src="cordova.js"></script -->
    ...

package.json

Así como en el caso del archivo index.html, el fichero package.json fue generado con la creación del proyecto. De igual manera debemos modificarlo para incluir la configuración de Electron añadiendo estos elementos.

{
    ...

    "name": "ion-electron-test",
    "author": {
        "name": "José Carlos",
        "email": "jcfatjo@tribalyte.com"
    },
    "description": "Ionic framework based Electron project",
    "main": "electron/main.js",
    "build": {
        "appId": "com.tribalyte.ionic-electron-test",
        "asar":false,
        "files": [
            "www/**/*",
            "electron/*"
        ]
    }


    ...
}

Paso 3: Lanzar la aplicación

Por último, lanzamos la aplicación para comprobar que los cambios llevados a cabo son correctos y cumple con las expectativas.
Ejecutamos la aplicación con Ionic.

ionic serve --no-open

La opción –no-open la utilizamos para que no se abra en nuestro navegador por defecto.
Debes obtener una salida como esta.

En otro terminal lanzamos la aplicación con Electron.

electron .

Como resultado, el navegador que se abre de Electron y el aspecto de la aplicación ejecutándose deben ser algo parecido a la siguiente imagen.

Y hasta aquí esta breve puesta en marcha. Muchas gracias por haber leído esta pequeña aportación a la comunidad de desarrolladores y espero que os haya servido como introducción a las posibilidades de Ionic + Electron!.