Creando una App de escritorio con Angular, Electron y Firebase Parte 1

Angular es el Framework construido por Google para construir las Apps del futuro, Electron es una herramienta creada por GitHub que nos ayuda a crear aplicaciones de Escritorio para distintos sistemas operativos y Firebase es una plataforma Serverless de Google que nos ayuda a crear nuestras apps sin necesidad de preocuparnos por servidores o instancias. En esta ocasión intentaremos integrar todas estas grandes tecnologías para construir una app completa con nada mas que el conocimiento de tecnologías web como JavaScript, TypeScript, Css y Html.

Objetivos:

1. Integrar Angular, electron y Firebase (AngularFirebase en nuestro caso).
2. Crear un CRUD
3. Generar instaladores de nuestra app para Windows, Linux y Mac

Requisitos:

• Node
• NPM
• Editor de codigo
• Para Windows en caso de que vayamos a copilar módulos nativos de node,
  instalar el siguiente paquete (Puede tardar varios minutos).
• Conocimientos mínimos

Manos a la obra

Empezamos generando nuestra app de angular (no olvide usar git).

ng new (nombre de la app)

Vamos a modificar el index en src/index.html e insertamos un . justo detrás del / en la etiqueta base href, ya que esto nos crea problemas mas adelante.

<base href="./">

Ahora vamos a instalar electron en modo desarrollo.

npm install electron --save-dev

# Configurando Electron

Las posibilidades de configuración son casi infinitas, así que solo vamos a estructurar lo necesario.

Creamos un archivo JavaScript en la carpeta raíz de la app el cual será el back-end de Electron y es donde vamos a configurar todos los eventos relacionados con Electron.

main.js

Copiamos el siguiente código

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 600, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/assets/logo.png`
  })


  win.loadURL(`file://${__dirname}/dist/index.html`)

  // Event when the window is closed.
  win.on('closed', function () {
    win = null
  })
}

// Create window on electron intialization
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
})

#Editamos nuestro package.json

Agregamos las siguientes lineas

{
  "name": "angular-electron",
  "version": "0.0.0",
  "license": "MIT",
  "main": "main.js", // <-- update here
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .", // <-- run electron 
    "electron-build": "ng build --prod && electron ." // <-- build app, then run electron 
  },
  // ...omitted
}

Con la función win.loadURL(`file://${__dirname}/dist/index.html`) estamos cargando nuestra URL, por ahora la carpeta DIST no existe, ya que para eso debemos compilar Angular, con el siguiente comando.

ng build --prod

#Nuestra primer App

Ya es hora de ver los resultados de todo lo que hemos hecho hasta ahora, así que solo nos queda correr el siguiente comando y “voilà”.

npm run electron-build

Este comando ejecutará ng build — prod y electron.

Nuestra primer App

#Herramientas de desarrollo

Como podemos observar solo vemos una ventana, en caso de errores esto no nos dice mucho, por lo que sería fantástico contar con las DevTools de Chrome, ya que si recordamos Electron no es mas que un Chromium.

• Electron Debug
  https://www.npmjs.com/package/electron-debug
  Nos mostrará las DevTools solo cuando estemos en la etapa de Desarrollo

npm i electron-debug -S

Luego agregamos la siguiente linea de código en nuestro main.js

const { app, BrowserWindow } = require('electron')
require('electron-debug')({showDevTools: true});
let win;

Nota: otra opción es quitar el comentario en la siguiente línea de nuestro main.js

//// uncomment below to open the //DevTools.//win.webContents.openDevTools()

• DevTron

Devtron | Electron

Esta es una herramienta es muy útil para hacer debug y monitorear nuestro Electron ya que integra un Lint, Event Listener entre otros.

$ npm install --save-dev devtron

Y ya deberíamos tener habilitado DevTron en nuestra DevTools con el cual tendremos más información acerca del comportamiento de nuestra App.

DevTron habilitado en nuestras DevTools

# Posibles problemas y dificultades

Uno de los problemas que tenemos es no poder ver los cambios en vivo de nuestra app, cada vez que queramos ver los cambios desde electron, debemos compilar Angular e iniciar electron nuevamente, para poder seguir nuestro proyecto es necesario correr el servidor de angular y construir nuestra app o configurar como ruta localhost:4200 en Electron, yo construiré como si fuera una app de Angular normal y al final voy a compilar con ng build.

Nota: En el caso que quieras escribir codigo JavaScript ES6/ES7 (via Babel), TypeScript, CoffeeScript o GraphQL, puedes instalar Electron-Compile en lugar de Electron. Si usas un Framework que no necesita ser compilado puedes habilitar la opción de enableLiveReload() el cual actualiza el código en caliente después de cada cambio.

IMPORTANTE: Algunos métodos y características de electron no funcionan para todos los sistemas operativos, por lo que es muy importante verificar la documentación de cada uno de ellos para evitar estos problemas.

Referencias y enlaces de ayuda

Para una mejor calidad, mucho del código usado hasta ahora fue copiado del siguiente tutorial.

Build Angular Desktop Apps With Electron

Documentation | Electron

OS | Node.js v9.7.1 Documentation

No soy un experto en ninguna de estas tecnologías, por lo que cualquier error o recomendación será bienvenida, el motivo del post es compartir conocimientos y tratar de recibir Feedback de la comunidad para seguir mejorando.

Parte 2:

Creando una App de escritorio con Angular, Electron y Firebase Parte 2: CRUD firestore

Parte 3:

Creando una App de escritorio con Angular, Electron y Firebase Parte 3: Angular Material