L11: Practica 4_1
- Tiempo: 2h
-
Objetivos de la sesión:
- Enunciado práctica 4
- Practicar con Electron
- Introducción
- Práctica 4 (ESPECIFICACIONES)
- Actividades NO guiadas
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
- Test
Para practicar con Electron vamos a convertir el servidor de chat de la práctica 3 en una aplicación nativa. El objetivo será que personas sin muchos conocimientos puedan descargarse esta app para sus plataformas, ejecutarla y ya tendrán el chat disponible para conectarse desde los dispositivos de su red privada: móviles, portátiles, tablets... y chatear entre ellos en su casa
El servidor tiene una interfaz gráfica donde nos muestra información: los últimos mensajes que se han enviado, el número de usuarios conectados, etc... Este es el aspecto de un prototipo de ejemplo:
Convertir el servidor de Chat de la práctica 3 en una aplición Electron nativa. Debe tener una interfaz gráfica que muestre la siguiente información:
- Versión de node
- Versión de Electron
- Versión de Chrome
- URL a la que se deben conectar los clientes para chatear
- Mostrar los mensajes que llegan al servidor, del resto de usuarios
- Botón de pruebas para enviar un mensaje a todos los clientes conectados
La URL a la que se conectan los clientes deberá obtener la dirección IP de la máquina en la que se está ejecutando (no valdría dejar la url "cableada" en una cadena)
En la versión básica de la aplicación no hace falta que esté empaquetada. Basta con que arranque al ejecutar npm start
Puedes incluir las mejoras que consideres (¡Imaginación al poder!). No olvides indicarlas en la documentación. Algunas propuestas de mejoras:
- Empaquetado de la app, para el sistema operativo que uses
- Mostrar la URL de conexión mediante un código QR en la interfaz gráfica. De esta manera la gente lo puede abrir fácilmente desde sus móviles sin escribir nada
- Mostrar más información del sistema: arquitectura, máquina, directorios...
Este es un pantallazo de otro servidor de chat en el que se incluye la URL en un código QR:
La aplicación está dividida en dos partes. Por un lado está el motor del servidor, que se ejecutará como el proceso principal de Electron (main.js). Y es prácticamente igual que el que has hecho en la práctica 3, con la salvedad de que deberá lanzar una ventana con la GUI.
La otra parte es la interfaz gráfica, formada por una ventana con sus elementos html, css y javascript
El proceso principal llevará la cuenta de los clientes que están conectados, y esta información se la enviará al proceso de renderizado para que la muestre en la interfaz gráfica. Lo mismo con los mensajes recibidos de los usuarios: El proceso main.js los envía al proceso de rendizado para sacarlos por la interfaz gráfica
Cuando se apriete el botón de Enviar mensaje de prueba el proceso de renderizado se lo comunicará al proceso principal, que enviará los mensajes a los usuarios
Para desarrollar esta práctica se proponen los siguientes ejercicios:
Prueba todas las versiones de la aplicación de prueba (versión 1 - versión 10) mostradas en la sesión 10 de teoría. El objeto es que pruebes y aprendas cómo funciona Electron
Parte del servidor de la práctica 3. Añade el package.json y haz que arranque como una aplicación de electron (con npm start). Haz que se abra una ventana en blanco. Debería funcionar exactamente igual, pero con la diferencia de que aparece una ventana gráfica sin nada. La creación de la ventana estará dentro de la función de callback electron.app.on(), pero el resto del servidor NO
electron.app.on('ready', () => {
//-- Aquí se crea la ventana y se hace lo relacionado con la gui
//-- Pero el servidor no va aquí dentro, si no fuera, como en la práctica 3
}Crea la interfaz mínima, y haz que se muestre la información del sistema en la ventana gráfica: vesión de node, de Chrome, la ip....
Las vesiones las encontrarás en el atributo process.versions. Busca en la documentación de node cómo obtener las versiones pedidas
La dirección IP de tu máquina la obtienes con el paquete "ip", llamando al método ip.address(). Deberás instalar el paquete correspondiente e importarlo en tu aplicación
Impleméntalo primero en el proceso pricipal, y muestra la información en la consola, para comprobar que funcione. Una vez que lo tengas controlado, piensa en cómo incluirlo en tu interfaz gráfica. Hay dos enfoques: uno es hacerlo directamente desde el proceso de renderizado. La otra es obtener la info en el proceso principal y comunicárselo al de renderizado mendiante mensajes
Implementa los mecanismos de comunicación entre proceso principal y proceso de renderizado, para que en la interfaz gráfica aparezcan el número de usuarios conectados y los mensajes de los clientes del chat
Implementa los mecanismos de comunicación para que el proceso de renderizado le comunique al proceso principal que se ha pulsado el botón de enviar un mensaje de test
Ya lo tienes todo listo. Haz los retoques finales e implementa las mejoras optativas si quieres subir nota
- Haz todos los ejemplos mostrados en la sesión 10 de teoría
- Haz los ejercicios 2 - 6 de esta sesión de prácticas
Con esta práctica ya tienes una visión del funcionamiento de Electron. Es una herramienta muy potente y muy útil
¡Esta es la última práctica de LTAW! Espero que te haya resultado interesante el laboratorio y que hayas disfrutado aprendiendo los conoceptos y las herramientas mostradas 😀️
Recuerda que toda la documentación que has usado permanecerá en abierto y accesible, para que en cualquier momento de tu carrera profesional la puedas consular. Y por supuesto para que te puedas renovar con los nuevos contenidos que iremos creando en los siguientes años. Yo me comprometo a dejarlo todo en abierto, siempre
- Juan González-Gómez (Obijuan)
- Jose María Cañas
