Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Ene 18

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

  • enero 18, 2018
  • José Carlos Fatjó
  • 2 Comments
  • Consejos tecnológicos, Desarrollo de aplicaciones, Tecnologías

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.

Index

  • 1 Paso 1: Crear un proyecto Ionic
  • 2 Paso 2: Instalar las dependencias de Electron
    • 2.1 package.json
    • 2.2 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.
  • 3 Paso 3: Lanzar la aplicación

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.

JC_blog

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.

JC_blog2

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!.

Artículos Relacionados:

  • ipatia-webPresentamos IPatia, aplicación web de gestión de patentes
  • Realidad Aumentada usando Unity y Vuforia: ejemplo práctico - Tribalyte TechnologiesRealidad Aumentada usando Unity y Vuforia para crear Apps | Ejemplo práctico
  • blog_tribalyte_consejo5 Consejos para ahorrar tiempo desarrollando en remoto
  • Principios S.O.L.I.D. - Open-ClosedPrincipios S.O.L.I.D. - "Open-Closed"
  • Captura de pantalla de 2019-12-08 17-53-25Desplegando en OpenShift Online una app Ionic 4 - Angular
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Soy Ingeniero Informático de la UPM, experto en el desarrollo de software a medida y de aplicaciones web, móviles y nativas. Tengo conocimientos full-stack, pero lo que más me apasiona es la parte front-end.

Related Posts

2 Comments

  1. Omniel Borges
    junio 16, 2021 at 4:15 pm · Responder

    Lo probare con la versión de Ionic mas reciente

  2. Omniel Borges
    junio 16, 2021 at 4:11 pm · Responder

    Una pregunta puedes sacar un post, sobre como empaquetarla?

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 910 177 514 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información