P4 - ejimeneza2020/LTAW-Practicas GitHub Wiki

Electron Chat App

Aplicación de chat en tiempo real desarrollada con tecnologías web y de escritorio.

Tecnologías utilizadas

  • Node.js: Entorno de ejecución para el servidor.
  • Express: Framework web para crear el servidor y servir archivos estáticos.
  • Socket.IO: Biblioteca para comunicaciones en tiempo real.
  • Electron: Permite crear aplicaciones de escritorio con interfaces gráficas usando tecnologías web.
  • HTML, CSS y JavaScript: Para la interfaz del cliente.
  • Estilo personalizado: Diseño.

Estructura del proyecto

/P3/
├── main.js                # Proceso principal de Electron
├── preload.js             # Comunicación segura entre render y main
├── package.json
├── package-lock.json  
├── server.js              # Lógica del servidor y WebSockets
├── renderer/
│   ├── index.html         # Interfaz gráfica de administración
│   ├── index.css          # Estilo
├── public/
│   ├── chat.html          # Página principal del chat
│   ├── client.js          # Lógica de cliente con Socket.IO
│   ├── sound.mp3          # Sonido de notificación de mensaje nuevo
│   └── chat.css           # Estilos

¡Importante!

Es fundamental tener correctamente configurado el archivo package.json:

Este archivo actúa como el núcleo del proyecto. Define su nombre, versión y punto de entrada de la aplicación, y gestiona las dependencias necesarias para su funcionamiento.

Mejoras implementadas

  • Añadido index.css para el panel de administración.
  • El botón de envío del administrador tiene una animación: al pasar el cursor por encima, se eleva ligeramente.

Manual de usuario

Puesta en marcha

  1. Descargar la carpeta P4 desde el repositorio.

  2. Asegurarse de tener instalado:

    • Visual Studio Code
    • Node.js

  3. Abrir el proyecto en Visual Studio Code.

  4. Abrir una terminal y ejecutar el siguiente comando para instalar las dependencias:

    npm install

  5. Una vez completada la instalación, ejecutar:

    npm start

  6. Se abrirá el panel de administración de la aplicación.
    Copia la URL que aparece y pégala en tu navegador. En el recuadro verde debe ir tu IP propia.

¡Listo! Ya puedes disfrutar de tu aplicación de chat en tiempo real mediante Electron.

Licencia

Este repositorio y su documentación están distribuidos bajo la licencia:

Creative Commons Attribution-ShareAlike 4.0 (CC BY-SA 4.0)
Puedes usar, modificar y distribuir esta documentación siempre que cites la autoría y compartas con la misma licencia.

CC BY-SA