• Tiempo: 2h
• Fecha: Lunes, 08-Abril-2019
• Objetivos de la sesión:
  • Enunciado de la práctica 5
  • Aprender a hacer nuestra primera aplicación con electron

• Enunciado práctica 5
• Actividades guiadas
  • Instalando electron
  • Arrancando electron
  • Programa javascript de prueba, en el navegador
  • El evento Ready
  • Creando la ventana principal
  • Definiendo la interfaz en html
  • Dando estilo
  • Javascript de control de la interfaz gráfica
  • Distribuyendo la aplicación
• Actividades NO guiadas
• Autores
• Licencia
• Enlaces

Converir el cliente del chat de la práctica 4 en una aplicación nativa ejecutable, con electron. Por un lado se deberá lanzar el servidor, al que se podrán conectar clientes web como en la práctica 4. En esta práctica añadimos un cliente nuevo: el nativo, que tendrá la misma apariencia que en la práctica 4, pero que NO se lanzará desde el navegador

Actividades guiadas por el profesor. Comenzaremos por hacer un ejemplo "hola mundo" en el navegador, en javascript, que luego convertiremos a una aplicación ejecutable usando electron

Empezamos nuestro proyecto. Lo primero será instalar electron. Es muy fácil: es un paquete que se instala con npm. Creamos un directorio nuevo donde hacer el proyecto de prueba, entramos en él y ejecutamos este comando en el terminal:

npm install electron

Esto es lo que aparece en el terminal. No nos preocupamos por los warnings que aparecen:

En el directorio de nuestro proyecto nos aparecerán dos elementos: el directorio node_modules y el fichero package-lock.json

Nuestro primer hola mundo simplemente sacará un mensaje por la consola. Lo usaremos para comprobar que electron se ha instalado bien y que todo está funcionando

Creamos el fichero package.json con el siguiente contenido:

{
  "name": "mi-electron-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Ahora que ya sabemos más, nos damos cuenta de que el package.json está en formato JSON, que ya conocemos. Se está declarando un objeto con cuatro propiedades: name, version, main y scripts. Esta última propiedad es a su vez otro objeto, con la propiedad start

Nuestro programa se almacenará en el fichero main.js, que de momento sólo tendrá lo siguiente:

const electron = require('electron')

console.log("Arrancando electron...")

Se importa el módulo electron y se imprime una traza en la consola. Para probarlo hay que ejecutar el siguiente comando:

npm start

En el terminal veremos esto:

El programa no termina, sino que el control lo toma electron y se queda esperando a que ocurran eventos. Para terminarlo hay que pulsar ctrl-c

La aplicación principal de electron la controlamos con el objeto electron.app. Lo primero que hacemos es capturar el evento "ready". Nos indica que está todo inicializado y listo para ejecutar nuestro código. Como siempre, de momento colocamos sólo una traza para ver lo que está pasando. El código de main.js es ahora:

const electron = require('electron')

console.log("Arrancando electron...")

//-- Punto de entrada. En cuanto electron está listo,
//-- ejecuta esta función
electron.app.on('ready', ()=>{
  console.log("Evento Ready!")
})

Lo ejecutamos:

Efectivamente vemos la traza de Ready. ¡Nuestro código ya tiene el control!

La ventana principal de nuestra aplicación se crea llamando al método electron.BrowserWindow(), al que se le pasa como parámetro un objeto donde se definen las propiedades de la ventana. Nosotros le pasaremos los atributos width y height para establecer el tamaño a 600x200

const electron = require('electron')

console.log("Arrancando electron...")

//-- Punto de entrada. En cuanto electron está listo,
//-- ejecuta esta función
electron.app.on('ready', ()=>{
  console.log("Evento Ready!")

  // Crear la ventana principal de nuestra Interfaz Gráfica
  win = new electron.BrowserWindow({
    width: 600,
    height: 400
  })
})

La ventana que se nos crea está en blanco, porque todavía no hemos añadido nada. Nos aparecerá en su parte superior el menú por defecto, que tiene las opciones de File, Edit, View, Window y Help

Nuestra aplicación todavía no hace nada pero... ¡Hemos creado nuestra primera aplicación gráfica multiplataforma!

En esta animación se muestra en funcionamiento:

Este menú por defecto lo podemos eliminar invocando a setMenuBarVisibility(false). El código sería el siguiente:

const electron = require('electron')

console.log("Arrancando electron...")

//-- Punto de entrada. En cuanto electron está listo,
//-- ejecuta esta función
electron.app.on('ready', ()=>{
  console.log("Evento Ready!")

  // Crear la ventana principal de nuestra Interfaz Gráfica
  win = new electron.BrowserWindow({
    width: 600,
    height: 400
  })

  //-- En la parte superior se nos ha creado el menu
  //-- por defecto
  //-- Si lo queremos quitar, hay que añadir esta línea
  win.setMenuBarVisibility(false)
})

No obstante, como ahora estamos aprendiendo, es mejor dejarlo. En el menú Help encontraremos los enlaces a la documentación de electron y también necesitaremos el acceso a las herramientas del desarrollador (developers tools), en el menú View

Ahora ya podemos definir la interfaz de nuestra app en HTML, igual que se hace en las páginas web. En el fichero index.html creamos este página:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>TEST!</title>
  </head>
  <body>
    <h3>MI PRIMERA APP EN ELECTRON!!!</h3>
    <button type="button" id="button">Click</button>
    <p id="display"></p>
  </body>
</html>  

Utilizamos el método loadFile() para cargar el index.html y que se renderice en nuestra ventana

const electron = require('electron')

console.log("Arrancando electron...")

//-- Punto de entrada. En cuanto electron está listo,
//-- ejecuta esta función
electron.app.on('ready', ()=>{
  console.log("Evento Ready!")

  // Crear la ventana principal de nuestra Interfaz Gráfica
  win = new electron.BrowserWindow({
    width: 600,
    height: 400
  })

  //-- En la parte superior se nos ha creado el menu
  //-- por defecto
  //-- Si lo queremos quitar, hay que añadir esta línea
  //win.setMenuBarVisibility(false)

  //-- Cargar la interfaz gráfica, que se encuentra en el
  //-- fichero index.html
  win.loadFile('index.html')
})

Al ejecutarlo, la ventana que aparece tiene esta pinta:

Si apretamos el botón no sucede nada todavía, porque no lo hemos programado

El estilo se lo damos igual que en cualquier página html: usando una hoja de estilo en css. Creamos el fichero mycss.css:

h3 {
  margin: auto;
  width: 93%;
  padding: 20px;
  background-color: lightgreen;
  border-radius: 10px;
}

#display {
    border: 2px solid lightblue;
    padding: 10px;
}

Modificamos el index.html para leer esta hoja de estilo:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>TEST!</title>
    <link rel="stylesheet" href="mycss.css">
  </head>
  <body">
    <h3>MI PRIMERA APP EN ELECTRON!!!</h3>
    <br>
    <button type="button" id="button">Click</button>
    <p id="display"> </p>
  </body>
</html>

Y la aplicación ahora se ve así:

Escribiremos código javascript para implementar la funcionalidad del botón, que simplemente imprimirá una cadena en el párrafo inferior cada vez que se apriete. Lo guardamos en el fichero app.js:

function main()
{
  console.log("Estoy en app.js...")

  //-- Obtener los elementos del interfaz, del DOM
  let button = document.getElementById('button')
  let display = document.getElementById('display')

  //-- Cuando se aprieta el botón...
  button.onclick = () => {

    //-- Sacar un mensaje en la consola
    console.log("click!")

    //-- Añadir la cadena al párrafo
    display.innerHTML += "holi "
  }
}

Modificamos el fichero index.html para que se cargue el fichero app.js y se invoque a la función main cuando se termine de visualizar la página en la ventana principal

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>TEST!</title>
    <link rel="stylesheet" href="mycss.css">
    <script src="app.js"></script>
  </head>
  <body onload="main();">
    <h3>MI PRIMERA APP EN ELECTRON!!!</h3>
    <br>
    <button type="button" id="button">Click</button>
    <p id="display"> </p>
  </body>
</html>

Una vez arrancada la aplicación, cada vez que se apriete el botón veremos aparecer una nueva cadena en el párrafo interior, así como una traza en la consola. Todas las llamadas a console.log() desde app.js se visualizarán en la consola de la ventana principal (que es en realidad un navegador)

También veremos en la consola unos warning de seguridad. De momento no nos preocupamos por ellos

En esta animación se muestra en funcionamiento. También se abre la consola para ver las trazas que aparecen al apretar el botón

¡Ya tenemos nuestra primera app en electron funcionando!

Para distribuir nuestra aplicación, y que se pueda ejecutar en otros ordenadores directamente, hay que bajarse primero los ejecutables de electron

Para el caso de Linux, nos bajamos este fichero: electron-v4.1.3-linux-x64.zip y lo descomprimimos y entramos en la carpeta

Dentro de resources creamos la carpeta app y ahí colocamos todos nuestros ficheros fuente

En la carpeta principal renombramos el ejecutable electron al nombre que queramos, por ejemplo mi_app, y lo lanzamos

• Empezar con la práctica 5
• Ahora el cliente nativo es otra aplicación en node. Para comunicarte con los websockets con el servidor tendrás que instalar el paquete socket.io-client

npm install socket.io-client

• Para que el cliente establezca la conexión con el servidor necesitarás estas dos líneas:

const io = require('socket.io-client');
const socket = io('http://localhost:3000');

• Jose María Cañas
• Juan González-Gómez (Obijuan)

• Universidad Rey Juan Carlos de Madrid
• Escuela Técnica Superior de Ingeniería de Telecomunicaciones (URJC)