Do you want to switch to Platzi in English?
Tu lugar en PlatziLive
Tu lugar en PlatziLive
estamos en vivo
16

Aplicación de escritorio Pulse

20657Puntos

hace 2 años

Pulse Editor es un proyecto open source que permite a cualquiera usar el mismo editor de texto (con Markdown) fuera de Platzi. Gracias a eso es posible llevarlo prácticamente a cualquier aplicaciones web, podrías incluso en apps híbridas (webviews) usarlo para mobile o en aplicaciones de Electron para crear aplicaciones de escritorio.

En la versión 3 de Next.js se incluye la posibilidad de exportar nuestra aplicación a archivos HTML estáticos. Esto, combinado con un servidor para desarrollo, nos permite hacer aplicaciones de Electron con Next.js de una forma mucho mejor que con la versión 2, en la que necesitábamos mantener un servidor HTTP incluso cuando la aplicación corre en producción.

Así pudimos combinar Electron + Next.js + Pulse Editor para crear Pulse, una aplicación de escritorio para escribir archivos Markdown en nuestro local.

Pulse

Esta aplicación de escritorio es Open Source igual que Pulse Editor y pueden verlo en Github:

https://github.com/PlatziDev/pulse

Ahí pueden ver los issue donde tenemos una lista de nuevos features, bugs que arreglar y pueden colaborar con Pull Request para apoyar en el desarrollo o incluso enviar features nuevos que se les ocurran. Se manejan milestones para determinar cuando van a salir las próximas versiones de la aplicación.

Ya que es la primer versión solo esta disponible para Mac 😦 … por el momento. Pero ya estamos viendo como compilar la aplicación para que funcione en Windows y Linux ya que no usamos características exclusivas del sistema operativo.

Como funciona

Ahora vamos a hablar de lo más interesante, cómo funciona la aplicación. Lo primero es que esta dividida en dos partes, main y renderer. En main colocamos el código del proceso principal (donde no está la UI) de la aplicación, mientras que renderer es una aplicación de Next.js que se encarga de renderizar la UI.

El proceso main

Cuando la aplicación se abre y está lista, crea una primera ventana. Lo primero que hace al crear la ventana de la aplicación es, si estamos en desarrollo, correr un servidor HTTP donde inicamos Next.js. De esta forma tenemos acceso al HMR de Next.js y toda su configuración sin problemas.

Luego de inicar el servidor abrimos la ventana en la URL del servidor o si estamos en desarrollo abrimos un HTML desde el disco buscando internamente en los archivos de la aplicación. Cuando la ventana esté lista y todo haya renderizado mostramos la ventana al usuario para que pueda empezar a escribir.

Además de abrir la ventana definimos el menú de la aplicación y empezamos a escuchar eventos de ipc para poder recibir mensajes desde el proceso de la UI. Estos eventos son para abrir la ventana de diálogo de guardar y abrir archivos y, efectivamente, guardar y leer estos archivos de disco, en el caso de abrir el archivo también enviamos el contenido al proceso de la UI. En ambos casos enviamos la ruta del archivo dentro del sistema de archivos.

El proceso renderer

El proceso renderer es el encargado de la UI de la aplicación. Acá es donde tenemos una aplicación de Next.js, esta tiene una única página en renderer/pages. Para que esta página funcione configuramos Next.js para que sea compatible con Electron y para producción definimos las rutas a exportar como HTML.

Luego en renderer/components tenemos un simple componente para íconos y otros para crear, guardar y abrir archivos. Y en renderer/pages/index.js tenemos nuestra instancia de Pulse Editor, sus estilos y lógica propia del editor.

Con eso ya tenemos todo lo necesario en el proceso renderer. Los botones personalizados son los que se encargan de comunicarse con el proceso main mediante ipc para poder guardar y leer archivos. Luego la UI tiene el estado actual del editor para mostrarlo.

Qué viene

El proyecto no esta terminado. Hay varias ideas que pensamos implementar en próximos lanzamientos, todas están marcadas como issues en el repositorio Github. Ahí pueden ver que se viene y si quieren apoyar con algo son bienvenidos a colaborar, para la versión 1.1.0 estos son las nuevas características:

Otra vez, los invito a que lo usen y si les sirve colaboren, una genial forma de aprender más y mejorar es colaborar en proyectos open source.

Sergio Daniel
Sergio Daniel
@sergiodxa

20657Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2