Electron.js desde cero: Apps de Escritorio con JavasScript

Vamos a presentar e instalar todo el ecosistema que necesitamos para crear una sencilla aplicación en Node.

Vamos a crear y ejecutar un pequeño ejemplo empleando Node.

Vamos a instalar un paquete mediante NPM en Node.

Vamos a presentar el ambiente necesario para seguir el curso, que seria instalar Node y de manera opcional un IDE como VSC.

En este vídeo complementario, te explico los conocimientos que debes de tener para seguir adelante con este curso, en caso de que no dispongas de los mismos te recomiendo el curso de Introducción a las principales tecnologías de desarrollo web que puedes tomar en esta plataforma.

Vamos a crear un proyecto con Node para empezar a trabajar.

Vamos a crear la primera app empleando Electron.js.

Vamos a explicar como esta compuesta una app en Electron, que seria un módulo de node para el backend y una version de chromium para el frontend.

Vamos a crear el proyecto en Node e instalar Electron.

Vamos a crear un Hola Mundo en Electron.

Daremos algunos experimentos con CSS y HTML.

Daremos algunos experimentos con CSS y HTML más elaborados.

Vamos a instalar Bootstrap en la aplicación.

Vamos a crear las columnas para la app de tipo chat.

Vamos a abrir la ventana de desarrolladores de Google Chrome.

Vamos a realizar el diseño del listado de chats.

Vamos a realizar el diseño para el detalle de los chats.

Vamos a realizar el diseño del campo para enviar mensajes.

Vamos a crear el listado de contactos en base a un json en JavaScript.

Vamos a crear el listado de chat en base a un json en JavaScript.

Vamos a presentar los eventos en Electron para la app y ventanas.

Vamos a integrar node en el proceso de renderizado.

Vamos a enviar mensajes entre procesos.

Vamos a enviar mensajes entre procesos.

Vamos a inicializar los datos suministrados desde el PP en el PR.

Vamos a realizar una demo de una segunda forma de inicializar datos provistos desde el PP en el PR.

1. Crearemos el evento click en los contactos para cargar los chat según el contacto seleccionado.

Vamos a crear nuestra app de notas con la cual vamos a aprender los componentes básicos de electron.

Vamos a hacer responsivo o adaptativo el editor.

Vamos a crear el menú de opciones de nuestra app.

Vamos a conocer más características de los menús el electron.js.

Vamos a activar el modo debug de la app para mostrar y ocultar opciones según el modo.

Vamos a ver cómo podemos crear opciones para el menú según el SO del cliente.

Vamos a conocer como podemos crear atajos de teclado en electron.

Vamos a generar nuestras apps para ambientes de desarrollo y producción.

Vamos a aprender a comunicar los dos módulos o procesos mediante mensajes; mandando mensajes desde el proceso de renderizado al proceso principal.

Vamos a aprender a comunicar los dos módulos o procesos mediante mensajes; mandando mensajes desde el proceso principal al proceso de renderizado.

Vamos a dar formato al texto desde el proceso principal, mandando mensajes al proceso de renderizado.

Vamos a conocer los eventos en la aplicación; específicamente el evento ready.

Vamos a capturar los atajos de teclado para poder pasar mensajes.

Vamos a aprender a mostrar los diálogos de electron.

Vamos a hacer una sencilla demostración en el uso de los diálogos las promesas con los asíncronos.

Vamos a aprender a guardar un archivo y abrirlo desde el editor.

Vamos a guardar la data que contenga el editor en el archivo.

Vamos a abrir o cargar el archivo desde el editor.

Vamos a personalizar el editor con código HTML y JavaScript.

Vamos a hacer una pequeña reestructuración de la app.

Vamos a definir opciones para guardar y abrir el archivo desde el menú.

Vamos a cambiar el título de la app.

Vamos a abrir un archivo mandando un mensaje desde la página web.

Vamos a configurar el nombre de la app junto con el nombre del archivo al abrir un archivo desde la app.

Vamos a permitir la carga de archivos mediante el drag and drop.

Vamos a crear la estructura base de nuestro proyecto.

Vamos a crear el formulario en HTML para crear una tarea.

Vamos a crear una lista para las tareas.

Vamos a registrar la tareas cada vez que nuestro usuario agregue una desde el formulario.

Vamos a recargar las tareas al momento de tener una nueva tarea.

Vamos a mejorar el diseño de nuestra app instalando el toolkit de Bootstrap con NPM.

Vamos a aplicar los cambios en nuestra app para que luzca como los componentes de Bootstrap.

Vamos a hacer algunos cambios sencillos para mejorar la usabilidad de nuestra app.

Vamos a aprender a detectar la tecla de enter mediante JavaScript.

Vamos a instalar una iconografía para la app.

Vamos a definir nuestro icono para eliminar una tarea.

Vamos a eliminar elementos desde el listado.

Vamos a eliminar elementos ahora desde el array de las tareas.

Vamos instalar un modulo o paquete para tener un esquema sencillo de base de datos.

Vamos a crear una tabla para guardar los items.

Vamos a crear un método para insertar registros en la bd.

Vamos a crear la tabla mediante la función que nos provee electron-db, pero que se encuentre en nuestro proyecto.

Vamos a mandar mensajes desde Proceso de Renderizado hasta el proceso principal para insertar la tarea del usuario.

Vamos a aprender a mandar múltiples argumentos para pasar un mensaje.

Vamos a hacer una demostración para mandar mensajes de tipo objeto al proceso de renderizado.

Vamos a crear una función para obtener todos los items.

Vamos a crear un método para actualizar un item.

Vamos a crear una función para eliminar un item.

Vamos a crear un método para obtener un item dado el ID.

Vamos a crear un método para obtener las tareas mediante el pase de mensajes.

Vamos a crear una función para recargar el listado.

Vamos a aprender a borrar un item en la vista.

Ahora, vamos a borrar el item desde la base de datos.

Vamos a instalar el plugin de router mediante la Vue Cli.

Vamos a integrar electron a nuestro proyecto de Vue.

Generamos el build de la aplicación en producción y realizaremos algunas pruebas.

Vamos a crear una simple lista de elementos empleando Vue.

Vamos a crear una simple lista de elementos empleando Vue.

Vamos a crear el proceso para editar tareas desde el formulario.

Vamos a hablar de la integración de Electron con Vue.

Mandaremos datos desde el proceso principal para que sean consumidos desde la app en Vue.

Vamos a realizar la operación de crear un ítem en el proceso principal.

Vamos a realizar la operación de editar un ítem en el proceso principal.

Vamos a realizar la operación de eliminar un ítem en el proceso principal.

Vamos a conocer el paquete de Electron DB para simular una base de datos mediante un archivo JSON.

Vamos a realizar las configuraciones iniciales para trabajar con Electron DB.

Vamos a realizar las operaciones para obtener todos los items.

Vamos a crear un ítem desde Electron DB.

Vamos a recargar el listado de la aplicación en Vue con los datos de Electron DB.

Vamos a realizar la operación de actualizar.

Vamos a instalar el paquete para crear y consumir la Rest Api.

Vamos a crear el recurso rest para obtener el listado de todos los registros.

Mandaremos datos desde el proceso principal para que sean consumidos desde la app en Vue.

Vamos a configurar los cors para poder consumir la rest api.

Vamos a realizar la operación de crear un ítem en la rest api y consumirla desde la aplicación en Vue.

Vamos a realizar la operación de editar un ítem en la rest api y consumirla desde la aplicación en Vue.

Vamos a realizar la operación de eliminar un ítem en la rest api y consumirla desde la aplicación en Vue.

Vamos a recargar todo el listado de la aplicación cada vez que realicemos una operación de crear, actualizar o eliminar.

Vamos a configurar MySQL en el proyecto con la rest api.

Vamos a realizar la operación de obtener el listado de ítems en la rest api y la base de datos MySQL.

Vamos a realizar la operación de crear un ítem en la rest api y la base de datos MySQL.

Vamos a realizar la operación de editar un ítem en la rest api y la base de datos MySQL.

Vamos a realizar la operación de eliminar un ítem en la rest api y la base de datos MySQL.

Configuraremos los CORS en la aplicación de Electron para protegerlo mediante el origen.