Aprende a crear una aplicación para escritorio disponible para Linux, Windows y Mac usando las tecnologías que conoces y amas (HTML,CSS y JS)

Qué es Electron

Electron es un marco de trabajo que te permite crear aplicaciones de escritorio usando Javascript, proporcionando acceso a APIs nativas. Puedes ver a Electron como una variante de Node.js que está enfocado en el desarrollo de aplicaciones de escritorio en vez de servidores web.

Esto no significa que Electron sea una atadura a librerías de interfaz de usuario (GUI). En vez de eso, Electron usa páginas Web como su interfaz gráfica, así que puedes ver tambien a electron como un mini Google Chrome, controlado y programable con Javascript.

Tienes conocimientos de Javascript ? A que estás esperando ? Aprende a implementar Electron en un proyecto vacío en este artículo.

Ejemplos de aplicaciones basadas en Electron :

Lo que necesitarás

Conocimiento de Javascript
Distribución de NodeJS para Windows (Nodejs command prompt)

1. Instalando una distribución de Node.js

Necesitas Node.js instalado en tu computadora. Node es un entorno de ejecución de Javascript construido en el núcleo de Javascript de Chrome, es muy eficiente y ligero. Este te permitira descargar una publicación de Electron para crear tu proyecto híbrido.

Puedes descargar la última distribución de Node.js en la página oficial aquí.

Despues de descargado, instala la distribución y ejecuta Node.js Command Prompt (que luce similar a la consola de comandos de Windows cmd.exe). Aquí ejecutarás todos los comandos que mencionaremos en este artículo.

2. Crea la estructura básica de tu proyecto

Puedes descargar una publicación oficial de Electron para probar rápidamente y así saltarte el paso #2 ejecutando el siguiente comando :

Nota: necesitarás Git instalado en tu computadora para hacer esto, así que si no lo tienes instalado descargalo aquí. Recuerda que git debe estár disponible como una variable de entorno en Windows.

# Navega con la consola usando "cd C:/Carpeta/" y ubicate en la carpeta donde quieres clonar el proyecto 
$ git clone https://github.com/atom/electron-quick-start 
# Una vez descargado pasa al paso #3!

Si quieres construir el esqueleto del proyecto por ti mismo, entonces sigue leyendo.

Electron te permite crear una aplicación híbrida con recursos web, para comenzar tu proyecto necesitarás:

Crear una carpeta con el nombre de tu proyecto en algun lado de tu sistema y nombralo como quieras, en este ejemplo nuestra carpeta será ocwDemo y tendrá 3 archivos:

index.html (Estructura de HTML)
main.js (Configurar cosas básicas de Electron con javascript aquí)
package.json (Necesitas un archivp package.json que contendrá información sobre el proyecto y dependencias)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Our Code World Rocks</title>
  </head>
  <body>
    <h1>Our Code World Electron Demostración</h1>
    Estamos usando Node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    y Electron <script>document.write(process.versions.electron)</script>.
    <br>
    <img src="http://ourcodeworld.com/resources/img/ocw-empty.png"/>
  </body>
</html>

main.js

Si decides cambiar el nombre del archivo de Javascript, no olvides cambiar su nombre tambien en el archivo package.json luego:

const electron = require('electron')
// Module para controlar el ciclo de vida de la aplicación
const app = electron.app
// Módulo para crear la ventana principal de la aplicación
const BrowserWindow = electron.BrowserWindow

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

// Manten una referencie de la ventana principal, de otra manera, la ventana
// será cerrada automáticamnete por el recolector de basura de JavaScript
let mainWindow

function createWindow() {
    // Crear la ventana de la aplicación
    // Create the browser window.
    mainWindow = new BrowserWindow({ width: 800, height: 600 })

    // Cargar el archivo index.html de tu app
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))

    // Puedes abrir las herramientas de desarrollador de chromium
    // Inmediatamente si deseas.
    // mainWindow.webContents.openDevTools()

    // Evento ejecutado cuando la ventana se cierra
    mainWindow.on('closed', function () {
        // De-referenciar el objeto window, pues usualmente podrías guardar
        // esta ventana en un array para soportar multi ventanas.
        // Aquí puedes eliminar los elementos correspondientes.
        mainWindow = null
    })
}

// Este método se ejecuta cuando la inicializacion de Electron finaliza
// y está lista para crear ventans.
// Algunas APIs solo ocurren cuando este evento ocurre.
app.on('ready', createWindow)

// Salir cuando todas las ventanas están cerradas.
app.on('window-all-closed', function () {
    // OS X es común en las aplicaciónes y su barra de tareas, estár activas
    // hasta que el usuario se sale usando Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', function () {
    // En OS X es común re-crear la ventana en la aplicación cuando se agrega
    // al icono de la barra de tareas cuando este se oprimire y no hay mas ventanas abiertas.
    if (mainWindow === null) {
        createWindow()
    }
})

// En este archivo puedes incluir el resto del código relacionado al proceso principal
// Puedes tambien colocar el código en archivos separados e incluirlos (require) aqui.

package.json

El archivo package.json es una rápida descripción acerca de tu proyecto que contiene además las dependencias que quieres agregar (usando el node package manager) y por supuesto, el preconstruido de Electron que contendrá la versión deseada de Electron, puedes obtener más información sobre las versiones aquí.

{
    "name": "nombre-de-tu-app",
    "version": "1.0.0",
    "description": "Una descripcion corta de tu app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    },
    "author": "Our Code World",
    "license": "CC0-1.0",
    "devDependencies": {
        "electron": "~1.6.2"
    }
}

3. Instala las dependencias

Despues de crear nuestra estructura (o el repositorio clonado) necesitamos simplemente navegar a la carpeta en la que el proyecto se encuentra con la consola:

# Ir al repositorio (carpeta ourcodeworldelectron) usando el comando cd

$ cd ourcodeworldelectron

# Y luego instala las dependencias usando 

npm install

Las dependencias se descargarán y el proyecto estára casi listo para probar.

4. Ejecuta y prueba

Eso es todo, ya has construido una estructura básica para iniciar un proyecto de Electron. Ahora solamente necesitas probarla, para ello ejecuta el siguiente comando en la consola:

npm start

Y luego de cierto tiempo compilando, obtendrás algo similar a :

Gracias a Electron, podrás crear una aplicación de escritorio híbrida en Minutos con Node.js.

Es importante además leer todo lo que puedas sobre el framework aquí. Despues de que hayas creado tu aplicación puedes crear una distribución para publicar de tu aplicación leyendo el tutorial de distribución aquí. Que te diviertas !