Aplicaciones de escritorio

Clase 31 de 31 • Curso de Fundamentos de Node.js

Resumen

En el mundo del desarrollo de software, las innovaciones no dejan de sorprendernos. Una de las más fascinantes es la capacidad de transformar aplicaciones web en aplicaciones de escritorio robustas y funcionales. Esto no solo amplía las posibilidades de los desarrollos web, sino que también permite una experiencia de usuario más integrada al sistema operativo. En este artículo, exploraremos cómo la biblioteca de Node.js, en particular Electron, nos facilita esta conversión, brindando un paso a paso para crear tu primera aplicación de escritorio con tecnologías web.

¿Qué es Electron y cómo ayuda a crear aplicaciones de escritorio?

Electron es un framework que permite desarrollar aplicaciones de escritorio usando tecnologías web como JavaScript, HTML y CSS. Esto significa que puedes convertir prácticamente cualquier aplicación web en una aplicación de escritorio nativa, que funciona sobre Windows, Linux o Mac. Un ejemplo prominente de una aplicación creada con Electron es Visual Studio Code.

¿Por qué es importante aprender a utilizar Electron?

Aprender a usar Electron puede ser muy valioso por varias razones:

Multiplataforma: Escribe tu código una vez y ejecútalo en cualquier sistema operativo.
Reutilización de código: Si ya tienes una aplicación web, puedes llevarla a escritorio sin grandes cambios.
Acceso a APIs nativas: Electron te permite interactuar con elementos del sistema operativo, como menús, notificaciones y mucho más.
Comunidad activa: Electron es ampliamente usado y tiene el respaldo de una gran comunidad que constantemente aporta mejoras y soporte.

¿Cómo se inicia un proyecto con Electron?

Empezar un proyecto con Electron es más sencillo de lo que podría parecer. Lo primero que necesitarás hacer es instalar el paquete de Electron a través de npm, el manejador de paquetes de Node.js. Para evitar conflictos, es importante que el nombre de tu carpeta de proyecto no sea el mismo que el del paquete, en este caso, "electron".

¿Cuáles son los pasos básicos para crear una aplicación con Electron?

Aquí te mostramos cómo dar los primeros pasos para crear tu aplicación de escritorio con Electron:

Inicia un nuevo proyecto de Node.js con npm init.
Instala Electron con npm install electron.
Crea una carpeta para tu aplicación y los archivos básicos de una web (por ejemplo, index.html).
Escribe el código de inicio en main.js, donde configurarás la ventana de tu aplicación y cargarás tu archivo HTML.

¿Cómo se manejan las ventanas y eventos en Electron?

Manejar las ventanas y eventos en Electron es esencial para que tu aplicación funcione correctamente.

Manejo de ventanas: Utilizas la clase BrowserWindow para crear y controlar ventanas.
Gestión de eventos: Electron integra un mecanismo de eventos que te permite ejecutar código cuando ciertas acciones ocurren, como cuando la aplicación está lista para abrir ventanas.

¿Cómo puedes personalizar tu ventana de aplicación?

Electron te ofrece numerosas opciones para personalizar tu ventana:

Define el tamaño inicial con propiedades como width y height.
Ajusta preferencias, como desactivar la barra de herramientas o definir la ruta de precarga.

¿Cuál es el siguiente paso una vez creada la ventana de tu aplicación en Electron?

Después de configurar la ventana principal y cargar tu archivo HTML, debes asegurarte de ejecutar el script de inicio correctamente. Para ello, puedes modificar el script start en tu package.json para que ejecute Electron y cargue tu archivo main.js.

Ejecuta tu aplicación con npm start para ver tu aplicación de escritorio en acción.

¿Cuáles son los consejos para seguir aprendiendo sobre Electron?

Electron es una herramienta poderosa, pero como toda tecnología, requiere práctica y estudio continuo. Aquí tienes algunas recomendaciones para profundizar tus conocimientos:

Experimenta con diferentes configuraciones y ve el impacto en tu aplicación.
Lee la documentación oficial para comprender todas las capacidades de Electron.
Forma parte de la comunidad, pregunta e interactúa en foros y canales de discusión.
Realiza más proyectos para consolidar lo aprendido, y no dudes en compartir tus dudas o experiencias.

Electron abre la puerta a un mundo donde las aplicaciones web y de escritorio convergen, aprovechando lo mejor de ambos mundos. Con la información y los pasos proporcionados aquí, estás en el camino correcto para desarrollar tus propias aplicaciones de escritorio. Recuerda que la práctica te llevará a dominar esta herramienta y siempre hay nuevas cosas por aprender. ¡Continúa explorando y desarrollando tus habilidades en este fascinante campo!

Daniel Hurtado

student•

A este curso vine buscando cobre y encontré oro. Tremendo

Daniel Gurisatti Carrillo

student•

Cierto!!!!!

Daniel Saldarriaga

student•

Me pasó igual. Vine buscando entender qué era Node y terminé sabiendo qué es programar.

Jessie Buckland Pérez

student•

Muy buen curso, sencillo, limpio organizado y muy instructivo, una vez más reaprendiendo las herramientas que llevo usando mas de 3 años sin saber exactamente como funcionaban internamente!! Gracias Carlos!!

Diego Camino Reinoso

student•

BROOOOOOOOOOOOO Te juro que comparto ese mismo sentimiento! yo llevaba alrededor de 3 años y medio trabajando con diferentes tecnologías web y entre ellas JS e increíblemente pensaba que las conocía, me parece asombroso todo lo que he vuelto a reaprender con Platzi <3

Jairo Lachira Peralta

student•

Para los que estén usando WSL:

WSL no admite interfaces gráficas. La solución mas simple que encontré es configurar este script que lo que hace es instalar electron pero con los archivos binarios para Windows en lugar de los de UNIX, de esta manera al ejecutar la aplicación usará la interfaz grafica de Windows

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
	//here
    "install-wsl": "npm install && npm uninstall electron && export npm_config_platform=win32 && npm install electron && unset npm_config_platform"
  }

Luego ejecutan:

npm run install-wsl

Y les debería arrancar

Fuente:

José Armando Gutiérrez Araujo

student•

Me ha funcionado :D gracias por el aporte

John Esteban Suarez Contreras

student•

Gracias Bro, me salvaste. lml

Ginnio Sarabia

student•

Electron en 10 minutos. Que crack!

Efrain Pineda Jaimes

student•

En DEFINITIVA, de los mejores cursos que he hecho en platzi, y de verdad que he hecho varios buenos. Felicidades a platzi por seleccionar profesores tan excelente.

Ginnio Sarabia

student•

Pablo Cesar Acosta Paredes

student•

totalmente !!

Juan Sebastian Galvis Huertas

student•

Dios!!, es como si loulogio impartiera clases de node, genial!!!

Usuario anónimo

user•

Termine viendo que los troncos de los arboles no son marrones xD

Beto Toro

student•

si me encuentro este profesor en la calle, y ya estoy vacunado. Le voy a dar un abrazo. Que forma de entrarle al back tan espectacular.

Infinitas gracias profe 🙏🏼

Juan Camilo Lentino Villalba

student•

te apoyo, mucha calidad el profe, que forma de entrarle al back tan épica

Francisco Garcia [C6]

student•

woww, que paquente tan bueno.

&lt;html&gt;
    &lt;head&gt;
        &lt;style&gt;
            body {
                background: #333333;
                color: #ffffff;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Soy una apliccion de escritorio&lt;/h1&gt;
        &lt;button&gt;Super bonton&lt;/button&gt;
    &lt;/body&gt;
    
&lt;/html&gt;

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

let ventanaPrincipal;

app.on('ready', crearVentana);

function crearVentana() {
    ventanaPrincipal = new BrowserWindow({
        width: 800,
        height: 600,
    });

    ventanaPrincipal.loadFile('index.html');
}

Francisco Javier Antúnez Durán

student•

// npm init -y
// npm i electron

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

let mainWindow;

app.on('ready', createMainWindow);

function createMainWindow(){
    mainWindow = new BrowserWindow ({
        width: 800,
        height: 600,
    })

    mainWindow.loadFile('index.html')
}

Sebastian Rodriguez Marin

student•

Excelente curso. Gracias Carlos! Eres el mejor. Me hubiera gustado un vistazo rápido a sockets pero no hay lió, estuvo excelente.

David Camacho

student•

Hola, acá te dejo una clase con el mismo profesor sobre: WebSockets

Usuario anónimo

user•

ajajaj que genial!

Uriel Mojica Mejía

student•

Esto es genial 1! Entonces cualquier app que desarrolle en ReactJS lo puedo convertir en una aplicación de escritorio?

Mario Aldair Sanchez Ramirez

student•

Así es!

Carlos Enrique Ramírez Flores

student•

Siempre crei que usar electron sería mas complicado, pero es mas facil de lo que imagine!!

Juan Sebastian Flórez Gómez

student•

Definitivamente este es el mejor curso para empezar a aprender node, ademas el profesor explica MUUUUUUUY BIEN, ¡gracias Carlos y Platzi por este magnifico curso!

Usuario anónimo

user•

Magnífico curso. Y las colaboraciones de los estudiantes y la comunidad, de maravilla, como ya es costumbre 💚

Tomas Goldenberg

student•

GENTE QUE UDS QUE CREEN? es preferible seguir con el curso de carlos de nodejs o con el de la escuela de js de backend con nodejs??

Gabriel De Andrade

student•

Por qué no los dos? Creo que este curso es mejor tomarlo antes del de Backend con Node.js. De todas maneras si quieres aprender Backend con Node hay una carrera que te dice qué cursos tomar en orden: Desarrollo Backend con JavaScript :D

Tomas Goldenberg

student•

Sii esa termino siendo mi decision voy a hacer ambos!! empezare por el que esta en la carrera de backend con JS

Luis Fernando Ochoa Jimenez

student•

Hola, si hago una aplicacion de escritorio, y la quiero descargar en otra compuntadora, esa computadora necesita nener node js instalado?

Yefri Enmanuel Encarnación Jiménez

student•

Entiendo que sí, puesto que node interpreta js no lo compila a lenguage maquina, pero la solución es simple es simplemente traerte la versión de node con la que se hizo tu app al descargar la aplicación.

Aldair Torres Aguilar

student•

Si creas tu aplicación con Electron o NW.js, entonces no es necesario descargar Node en la otra computadora, a la hora de empaquetar tu aplicación, los Frameworks se encargan de todo

Keiler Delgado

student•

Venía postergando electron porque pensaba que iba a ser muy complejo, y me voy super contento sabiendo que no lo es, un gran curso, no faltó nada!

Miguel Angel Muñoz Pozos

student•

Excelente curso es super genial todo lo mostrado en este curso. Veo que Node js es super potente

Rubén Dario Chanamé Sánchez

student•

El curso estuvo genial!!!

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
	//here
    "install-wsl": "npm install && npm uninstall electron && export npm_config_platform=win32 && npm install electron && unset npm_config_platform"
  }

&lt;html&gt;
    &lt;head&gt;
        &lt;style&gt;
            body {
                background: #333333;
                color: #ffffff;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Soy una apliccion de escritorio&lt;/h1&gt;
        &lt;button&gt;Super bonton&lt;/button&gt;
    &lt;/body&gt;
    
&lt;/html&gt;

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

let ventanaPrincipal;

app.on('ready', crearVentana);

function crearVentana() {
    ventanaPrincipal = new BrowserWindow({
        width: 800,
        height: 600,
    });

    ventanaPrincipal.loadFile('index.html');
}

// npm init -y
// npm i electron

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

let mainWindow;

app.on('ready', createMainWindow);

function createMainWindow(){
    mainWindow = new BrowserWindow ({
        width: 800,
        height: 600,
    })

    mainWindow.loadFile('index.html')
}

Aplicaciones de escritorio

Conocer los conceptos básicos de NodeJS

Instalación de Node.js

Node: orígenes y filosofía

EventLoop: asíncrona por diseño

Monohilo: implicaciones en diseño y seguridad

Configurar las variables de entorno en Node.js

Herramientas para ser más felices: Nodemon y PM2

Cómo manejar la asincronía

Callbacks

Callback Hell: refactorizar o sufrir

Promesas

Async/await

Entender los módulos del core

Globals

File system

Console

Errores (try / catch)

Procesos hijo

Módulos nativos en C++

HTTP

OS

Process

Utilizar los módulos y paquetes externos

Gestión de paquetes: NPM y package.json

Construyendo módulos: Require e Import

Módulos útiles

Datos almacenados vs en memoria

Buffers

Streams

Conocer trucos que no quieren que sepas

Benchmarking (console time y timeEnd)

Debugger

Error First Callbacks

Manejar herramientas con Node

Scraping

Automatización de procesos

Aplicaciones de escritorio