Curso y Libro Electron.js: Crea tus aplicaciones de escritorio para Windows, Linux o Mac con JS, HTML y CSS

Curso para dar los primeros pasos con Electron.js y crear apps webs para exportar como apps de escritorio.

09-03-2020 - Andrés Cruz

• Categoría
• /
• Electron.js
• /
• Curso y Libro Electron.js: Crea tus aplicaciones de escritorio para Windows, Linux o Mac con JS, HTML y CSS

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Introducción

• 1 Presentación

  Presentación del curso

• 2 Realizar preguntas

Opcional: Introducción a Node.js

• 1 Preparar el entorno necesario

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

• 2 Instalar el ambiente necesario Node y Visual Studio Code

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

• 3 Instalando un paquete y empleando el mismo

  Vamos a instalar un paquete mediante NPM en Node.

• 4 Creando nuestro primer ejemplo

  Creando nuestro primer ejemplo

Introduccion y primeros pasos con Electorn JS

• 1 Instalar el ambiente necesario Node y Visual Studio Code

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

• 2 Crear nuestro proyecto inicial con Node e instalar Electron.js

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

• 3 Nuestra primera aplicación: Hola mundo en Electron.js

  Vamos a crear la primera app empleando Electron.js.

• 4 El frontend y el backend de 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.

Aplicación tipo Chat: Estructura base

• 1 Introducción

• 2 Crear el proyecto

  Vamos a crear el proyecto en Node e instalar Electron.

• 3 App esqueleto

  Vamos a crear un Hola Mundo en Electron.

• 4 Experimentos con HTML y CSS

  Daremos algunos experimentos con CSS y HTML.

• 5 Experimentos con HTML y CSS, parte 2

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

• 6 Importar Bootstrap

  Vamos a instalar Bootstrap en la aplicación.

• 7 Crear estructura base

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

• 8 Debug de la aplicación en Chrome

  Vamos a abrir la ventana de desarrolladores de Google Chrome.

• 9 Diseño de los contactos

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

• 10 Diseño de los chat

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

• 11 Diseño de la caja de mensajes

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

• 12 Crear contactos en base a un array de objetos

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

• 13 Crear chats en base a un array de objetos

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

• 14 Introducción a los eventos

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

• 15 Activar la integración con Node

  Vamos a integrar node en el proceso de renderizado.

• 16 Comunicar proceso principal con el proceso de renderizado

  Vamos a enviar mensajes entre procesos.

• 17 Comunicar proceso de renderizado con el proceso principal

  Vamos a enviar mensajes entre procesos.

• 18 Inicializar listados

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

• 19 Demo: Inicializar datos

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

• 20 Seleccionar contacto y cambiar chat

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

• 21 Publicar en git

• 22 Generar build (Aplicación en producción)

Aplicación de notas

• 1 Introducción

• 2 Creando una aplicación de notas

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

• 3 La consola de desarrolladores de Google Chrome

  Vamos a hacer responsivo o adaptativo el editor.

• 4 Creando nuestro menú personalizado de ayuda

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

• 5 Separadores, menú de Debugging, rol quit, reload

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

• 6 Activar el modo debug y ocultar/mostrar opciones

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

• 7 Menús multiplataforma: reconociendo el SO

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

• 8 Atajos de teclado

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

• 9 Generar aplicación en desarrollo y producción

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

• 10 Nota Importante en versiones recientes de Electron

  Intrgracion con Node

• 11 Mandar mensajes al proceso principal desde el proceso de renderizado -página web

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

• 12 Mandar mensajes al proceso de renderizado desde el 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.

• 13 Mandar mensajes al proceso de renderizado desde el 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.

• 14 Darle formato al texto desde el menú

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

• 15 Eventos de la aplicación

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

• 16 Capturar atajos de teclado y pase de mensajes

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

• 17 Mostrar un diálogo para guardar un archivo

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

• 18 Demo: Promesa (sync) vs async

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

• 19 Guardar el archivo en la ruta seleccionada

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

• 20 Guardar la data de nuestro usuario en el archivo

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

• 21 Abrir archivos de la PC/Mac y cargarlos en el editor

  Vamos a abrir o cargar el archivo desde el editor.

• 22 Personalizar el editor (index.html)

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

• 23 Reestructurar aplicación

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

• 24 Definir opciones de guardado y apertura en el menú

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

• 25 Cambiar el título de la aplicación

  Vamos a cambiar el título de la app.

• 26 Solución a la tarea anterior

  Vamos a solucionar la tarea anterior

• 27 Abrir un archivo desde la página web

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

• 28 Configurando el nombre de nuestra aplicación

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

• 29 Drag and Drop de archivos

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

• 30 Código fuente

  Código fuente

• 31 Detalles finales y correcciones

• 32 Generar build

• 33 Publicar en git

Aplicacion de tareas

• 1 Introducción

• 2 Crear nuevo proyecto y estructura básica

  Vamos a crear la estructura base de nuestro proyecto.

• 3 Crear el formulario para crear una tarea

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

• 4 Listado de tareas: estructura básica

  Vamos a crear una lista para las tareas.

• 5 Agregar una tarea al enviar el formulario

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

• 6 Recargar las tareas

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

• 7 Instalar Bootstrap 4

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

• 8 Realizar cambios en nuestro diseño con el CSS de Bootstrap

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

• 9 Limpiar campo Item y evitar agregar tareas vacías

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

• 10 Detectar la tecla Enter

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

• 11 Instalar Iconografía

  Vamos a instalar una iconografía para la app.

• 12 Definir íconos para eliminar

  Vamos a definir nuestro icono para eliminar una tarea.

• 13 Eliminar tareas: eliminar elementos del listado

  Vamos a eliminar elementos desde el listado.

• 14 Instalar electrón BD

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

• 15 Crear tabla en ubicación por defecto

  Vamos a crear una tabla para guardar los items.

• 16 Crear método para insertar

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

• 17 Crear tabla en el proyecto

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

• 18 Mandar mensaje para insertar un registro desde el PR al PP

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

• 19 Demo: mandar un objeto desde el PW al PP

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

• 20 Demo: mandar múltiples argumentos desde la PW al PP

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

• 21 Método para obtener todos los items

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

• 22 Método para actualizar un ítem

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

• 23 Método para eliminar un ítem

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

• 24 Método para obtener un item

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

• 25 Recibir datos de las tareas en la base de datos en la PW

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

• 26 Recargar el listado al crear el item

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

• 27 Borrar el item DB bajo demanda: index.html

  Vamos a aprender a borrar un item en la vista.

• 28 Borrar el item DB bajo demanda: database.js

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

• 29 Detalles finales y correcciones

• 30 Generar build

• 31 Publicar en git

Primera app con Vue 3: Integrar Vue 3 con Electron.js

• 1 Introducción

• 2 Instalar Vue Cli y crear proyecto

  Vamos instalar Vue Cli para poder crear un proyecto en Vue.

• 3 Explicación del proyecto de Vue Cli y más recursos

  Vamos a explicar como funciona un proyecto creado por Vue Cli y donde puedes obtener más recursos.

• 4 Instalar el plugin de router mediante Vue

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

• 5 Integrar Electron.js en el proyecto Vue

  Vamos a integrar electron a nuestro proyecto de Vue.

• 6 Generar app Vue en modo de producción

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

• 7 Publicar en git

Aplicación de tareas con Vue 3

• 1 Introducción

• 2 List.vue: Listado

  Vamos a crear una simple lista de elementos empleando Vue.

• 3 List.vue: Crear tarea

  Vamos a crear una simple lista de elementos empleando Vue.

• 4 List.vue: Eliminar tarea

  Vamos a crear el proceso para eliminar tareas desde el listado.

• 5 List.vue: Editar tarea

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

• 6 Emplear módulos de Electron.js desde Vue

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

• 7 List.vue: Listado con datos desde el proceso principal

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

• 8 List.vue: Crear

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

• 9 List.vue: Editar

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

• 10 List.vue: Eliminar

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

• 11 Electron DB

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

• 12 Electron DB: Configuraciones iniciales

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

• 13 Electron DB: Obtenerlos todos

  Vamos a realizar las operaciones para obtener todos los items.

• 14 Electron DB: Crear

  Electron DB: Crear

• 15 Electron DB: Actualizar

  Electron DB: Actualizar

• 16 Electron DB: Eliminar

  Electron DB: Eliminar

• 17 Electron DB: Crear

  Vamos a crear un ítem desde Electron DB.

• 18 Electron DB: Actualizar

  Vamos a realizar la operación de actualizar.

• 19 Electron DB: Eliminar

  Vamos a realizar la operación de eliminar.

• 20 Publicar en git

Aplicación de tareas con Vue 3, Rest Api

• 1 Instalar express y axios

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

• 2 Rest Api: Obtener todos los registros

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

• 3 List.vue, Rest Api y axios: Listado

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

• 4 Configurar los cors

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

• 5 List.vue, Rest Api y axios: Crear

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

• 6 List.vue, Rest Api y axios: Editar

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

• 7 List.vue, Rest Api y axios: Eliminar

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

• 8 List.vue, Rest Api y axios: Recargar listado

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

• 9 Publicar en git

• 10 Introducción

Aplicación de tareas con Vue 3, Rest Api y MySQL

• 1 Introducción

• 2 Configurar MySQL

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

• 3 Rest Api y MySQL: Listado

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

• 4 Rest Api y MySQL: Crear

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

• 5 Rest Api y MySQL: Editar

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

• 6 Rest Api y MySQL: Eliminar

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

• 7 Configurar CORS para consumir desde un solo dominio

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

• 8 Configurar CORS para consumir desde un solo dominio

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

• 9 Publicar en git

Trabajando con ventanas

• 1 Introducción

• 2 Abrir una nueva ventana bajo demanda

  Vamos a abrir una ventana en una ventana nueva.

• 3 Obtener el identificador e instancia de una ventana

  Vamos a obtener el ID de una ventana para poder obtener referencia a la misma.

• 4 Operaciones con ventanas: Abrir un modal

  Vamos a abrir una ventana en formato modal.

• 5 Operaciones con ventanas: Abrir ventana no reescalable

  Vamos a crear una ventana no reescalable.

Aplicación de tareas con Vue 3: Módulo básico usuario

• 1 Introducción

• 2 Configurar tabla de usuario en MySQL

  Vamos a crear una tabla para manejar los usuarios.

• 3 Ventana para registrar: Crear ventana adicional

  Vamos a crear una ventana adicional desde Electron que abramos desde la aplicación en Vue.

• 4 Rest Api y MySQL: Registrar usuario

  Vamos a crear el recurso para crear un usuario.

• 5 Rest Api y MySQL: Login

  Vamos a crear el recurso para iniciar sesión.

• 6 Ventana para registrar: Crear formulario

  Vamos a crear la estructura base para crear un usuario.

• 7 Ventana para login: Base

  Vamos a crear la estructura base para iniciar sesión.

• 8 Ventana para login: Almacenar datos de usuario global a la app

  Vamos a crear una propiedad para almacenar los datos de usuario de manera global.

• 9 Ventana para login y registrarse: mensajes y redirecciones

  Vamos a configurar mensajes de confirmación y redirecciones al momento de hacer o acceder a los componentes actuales del usuario.

• 10 Ventana para login y registrarse: Cerrar ventanas

  Vamos a cerrar las ventanas al momento del login y registro.

• 11 Configurar tabla de token en MySQL

  Vamos a crear el SQL para la tabla de tokens del usuario.

• 12 Token de Usuario: Generar token en la base de datos

  Vamos a generar el token en la base de datos.

• 13 Token de Usuario: Crear archivo para guardar el token

  Vamos a crear un módulo para generar y consultar el archivo en donde vamos a guardar el token de auth.

• 14 Token de Usuario: Consultar token desde el archivo

  Vamos a crear un método que se encargue de consultar si el token existe el mismo.

• 15 Token de Usuario: Escribir en el archivo

  Vamos a escribir el token en un archivo desde la aplicación en Vue.

• 16 Token de Usuario: Consumir token desde el cliente

  Vamos a consumir el token guardado en el archivo desde la aplicación de Vue.

• 17 Obtener datos de usuario por el token

  Vamos a devolver mediante un evento de Electron los datos del usuario junto con el token.

• 18 Obtener datos de usuario por el token: token no existe

  Vamos a realizar validaciones adicionales al momento de buscar el usuario por el token.

• 19 Detectar cuando realizamos el login

  Vamos a detectar cuando realizamos el login de manera correcta, recargar el token de la instancia principal de Vue.

• 20 Mostrar dialog cuando login y/o contraseña son incorrectos

  Vamos a mostrar un dialog cuando las credenciales son incorrectas.

• 21 Establecer datos del usuario autenticado desde la ventana principal

  Vamos a registrar los datos de acceso en la ventana en Vue.

• 22 Cerrar sesión

  Vamos a hacer el proceso para cerrar la sesión que sería destruir el token y borrar el registro en la base de datos.

• 23 Publicar en git

Aplicación de tareas con Vue 3: Bootstrap 5

• 1 Introducción

• 2 Instalar Bootstrap 5

  Vamos a instalar y configurar Bootstrap 5 por NPM en el proyecto en Vue.

• 3 Container

  Incluiremos el componente de container.

• 4 Configurar listado

  Vamos a configurar el listado de tareas.

• 5 Navbar

  Vamos a crear el header de su aplicación.

• 6 Formulario

  Vamos a crear el diseño para el formulario de crear una tarea.

• 7 Ventana de Login y Registro

  Vamos a crear el diseño para el formulario de login y registro.

• 8 Mostrar enlaces usuario solo en listado

  Vamos a realizar un pequeño cambio para ocultar los enlaces de usuario en registro o login.

• 9 Publicar en git

• 10 Generar build

Variables de entorno y recarga/reload en el proceso principal

• 1 Introducción

• 2 Electron reloader: Con Vue

  Vamos a aprender a recargar la ventana del BrowserWindow al aplicar cambios en el proceso principal.

• 3 Electron reloader: Aplicación tradicional

  Vamos a conocer otro ejemplo del paquete anterior aplicado a otra aplicación.

• 4 Nodemon: Con Vue

  Vamos a conocer otro tipo de herramienta con el cual, podremos recargar la aplicación de Electron al detectar cambios.

• 5 Nodemon: Aplicación tradicional

  Vamos a conocer otro tipo de herramienta con el cual, podremos recargar la aplicación de Electron al detectar cambios.

• 6 Electron reload

  Vamos a conocer otro paquete para aprender a recargar la ventana del BrowserWindow al aplicar cambios en el proceso principal.

• 7 Variables de entorno y archivo .env

  Vamos a conocer como trabajar con los archivos .env y variables de entorno en general en Electron.js.

Opcional: Adaptar app Vue para la web

• 1 Introducción

• 2 Manejo del token

  Configuraremos el token para que funcione con la rest api.

• 3 Manejo del token: Manejo desde Electron y vue

  Vamos a colocar la lógica condicional para usar el token de acceso en Electron y el navegador.

• 4 Manejo del token: Cookies

  Vamos a instalar un plugin de cookie y configurarlo a nivel de la aplicación con los datos de usuario y el token.

• 5 Modo Debug en las rutas

  Vamos a personalizar el tipo de ruta dependiendo en donde se ejecute la aplicación de Vue.

• 6 Debug: Variables de entorno

  Daremos una demostración sobre las variables de entorno en Vue.

• 7 Enlaces de registro y login

  Vamos a adaptar los enlaces de usuario si se usan desde un navegador de Vue.

• 8 Login y Cookies

  Vamos a habilitar el login vía Cookie.

• 9 Cerrar sesión

  Vamos a implementar la función de cerrar sesión para que funcione desde un navegador.

• 10 Redirecciones

• 11 Generar build (Aplicación en producción)

• 12 Publicar en git

Legacy: Primera app con Vue 2: Integrar Vue con Electron.js

• 1 Introducción

• 2 Instalar Vue Cli

  Vamos instalar Vue Cli para poder crear un proyecto en Vue.

• 3 Crear un proyecto con Vue Cli

  Vamos a crear un proyecto empleando Vue Cli

• 4 Explicación del proyecto de Vue Cli y más recursos

  Vamos a explicar como funciona un proyecto creado por Vue Cli y donde puedes obtener más recursos.

• 5 Integrar Electron.js en el proyecto Vue Cli

  Vamos a integrar electron a nuestro proyecto de Vue.

• 6 Generar app Vue en modo de producción

  Vamos a generar un build de la app de Vue, la app de producción de Vue.

• 7 Corregir el path de salida de la app Vue en producción

  Vamos a corregir el path de salida con el cual referencia a los distintos recursos la app de producción.

• 8 Activar los dos servidores: Vue y Electron.js para el modo de desarrollo

  Vamos a activar los dos servidores, el de Vue y la app de Electron para tener un modo de desarrollo en ambos ecosistemas.

• 9 Instalar el plugin de router mediante Vue CLI

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

• 10 Crear un componente y configurar el Router

  Vamos a empezar a trabajar con Vue Router para la navegación entre páginas

Legacy: Aplicación de tareas con Vue 2

• 1 Introducción

• 2 Crear un componente para las tareas

  Vamos a crear un componente para manejar las tareas de nuestra app.

• 3 Crear una lista de elementos con Vue

  Vamos a crear una simple lista de elementos empleando Vue.

• 4 Instalar Vue Material

  Vamos a instalar Vue Material, para mejorar la presencia de nuestra app.

• 5 Habilitar la consola de JavaScript programáticamente

  Vamos a habilitar la consola de JavaScript programáticamente mediante electron.

• 6 Crear un listado con Vue Material

  Vamos a configurar el Vue Material en nuestro proyecto.

• 7 Colocar íconos para los ítems del listado

  Vamos a reemplazar o modificar el listado anterior con el de un componente de Vue Material.

• 8 Colores por defecto

  Vamos a definir algún ícono para nuestro listado.

• 9 Crear un botón

  Vamos a conocer cuales son los colores por defecto que dispone Vue Material.

• 10 Evento Click en Vue

  Vamos a conocer el uso del evento click en Vue.

• 11 Mostrar un dialog en Vue Material

  Vamos a mostrar un dialog o modal de Vue Material.

• 12 Trigger o evento de confirmación del dialog

  Vamos a conocer el evento que tenemos sobre los dialogs de Vue Material que se ejecutan cuando son confirmados los mismos.

• 13 Guardar datos en el array

  Vamos a guardar los datos del Array mediante el modal.

• 14 Borrar un elemento

  Vamos a definir un botón para borrar un item en particular.

• 15 Actualizar un elemento

  Vamos a actualizar un elemento, para eso vamos a colocar un botón sobre los items para realizar esta acción y a posterior mostrar el modal.

• 16 Elevation: Dar sombreado a componentes

  Vamos a darle un poco de enfoque 3D a la app, colocando un sombreado al componente de listado.

• 17 Definir un tooltip

  Vamos a definir un tooltip o mensaje de ayuda a nuestros botones.

• 18 Ciclo de vida de Vue

  Vamos a conocer un poco el ciclo de vida de una aplicación en Vue.

• 19 Configurar nuestro Electron (db) con Vue

  Vamos a configurar electron DB para ver un enfoque de como podemos emplear módulos de electron desde Vue.

• 20 Cargar el listado de elementos desde Electron-db

  Vamos a obtener el listado de elementos desde nuestro electron-db.

• 21 Guardar el item en Electron-db

  Vamos a aplicar los cambios cuando guardemos un elemento en electron-db.

• 22 Actualizar el item en Electron-db

  Vamos a aplicar los cambios cuando actualicemos un elemento en electron-db.

• 23 Eliminar el item en Electron-db

  Vamos a aplicar los cambios cuando borremos un elemento en electron-db.

• 24 Código fuente de la sección

  Código fuente de la sección

Legacy: Conectar la app de tarea con una Rest Api con MySQL

• 1 Instalar express y mysql

  Vamos a instalar los módulos necesarios para crear nuestra Rest Api con MySQL.

• 2 Crear estructura y configuración inicial para la Rest Api

  Vamos a crear las configuraciones necesarias para que funcione la Rest Api.

• 3 Crear la base de datos en MySQL

  Vamos a crear la base de datos en MySQL y la tabla de tareas.

• 4 Crear la conexión a MySQL

  Vamos a crear la conexión a la base de datos MySQL.

• 5 Obtener todos los registros

  Vamos a hacer una petición para obtener todos los registros.

• 6 Obtener un registro

  Vamos a obtener un registro desde la base de datos.

• 7 Insertar un registro

  Vamos a insertar un registro en la base de datos.

• 8 Actualizar un registro

  Vamos a actualizar un registro desde la base de datos.

• 9 Borrar un registro

  Vamos a borrar un registro desde la base de datos.

• 10 Obtener todos las tareas desde la app en Vue realizando peticiones fetch

  Vamos a realizar una petición asíncrona mediante JavaScript para obtener todos los registros empleando los fetch de JavaScript.

• 11 Instalar y habilitar los CORS para nuestra Rest Api con express

  Vamos a habilitar los CORS en nuestro express para permitir compartir recursos con la app de Vue.

• 12 Habilitar compartir recursos con el dominio de nuestra aplicación

  Vamos a proteger la Rest Api para que solamente nuestra app en Vue pueda consumir los datos de la Rest.

• 13 Crear una tarea en la Rest Api desde la app en Vue

  Vamos a crear una tarea en la Rest Api mediante una petición fetch.

• 14 Refrescar el listado al momento de crear una tarea

  Vamos a recargar el listado una vez creada la tarea en la Rest Api mediante una petición fetch.

• 15 Actualizar una tarea en la Rest Api desde la app en Vue

  Vamos a actualizar una tarea en la Rest Api mediante una petición fetch.

• 16 Borrar una tarea en la Rest Api desde la app en Vue

  Vamos a borrar una tarea en la Rest Api mediante una petición fetch.

• 17 Diálogo de confirmación para eliminar tarea

  Vamos a crear un diálogo para confirmar la tarea a eliminar.

• 18 Instalar axios

  Vamos a instalar axios para realizar peticiones en vez de fetch.

• 19 Migrar las peticiones vía fetch a axios

  Vamos a adaptar nuestro proyecto para que trabaje con axios.

• 20 Código fuente de la sección

  Código fuente de la sección

Legacy: Agregar módulo de login y registro

• 1 Introducción

• 2 Crear archivo para guardar el token

  Vamos a crear un módulo para generar y consultar el archivo en donde vamos a guardar el token de auth.

• 3 Consultar token guardado: Asíncrono

  Vamos a crear un método que se encargue de consultar si el token existe de manera asíncrona.

• 4 Consultar token guardado: Síncrono

  Vamos a modificar la función anterior para que funcione de manera síncrona.

• 5 Crear la estructura en la base de datos

  Vamos a crear la estructura de la base de datos para manejar la autenticación.

• 6 Aplicar restricciones a las tablas y crear datos iniciales

  Vamos a aplicar algunas reglas y definir algunos datos iniciales en la base de datos.

• 7 Crear consulta y recurso rest para obtener el token

  Vamos a crear el query y el recurso rest para trabajar con el token de sesión.

• 8 Crear consulta y recurso rest para hacer el login

  Vamos a crear el query y el recurso rest para trabajar con el login.

• 9 Generar token aleatorio al hacer el login

  Vamos a desarrollar otras operaciones en la función de login.

• 10 Crear consulta y recurso rest para obtener información del usuario

  Vamos a generar un recurso y su método get para obtener el detalle del usuario dado el token.

• 11 Crear vista para el login

  Vamos a crear la ventana mediante un componente de Vue para realizar el login.

• 12 Crear vista para el login: loading

  Vamos a generar un loading bastante sencillo al momento de realizar el login.

• 13 Configurar y abrir ventana para el login mediante el botón de login

  Vamos a crear una función para abrir una ventana modal para el login mediante un botón.

• 14 Quitar enlaces de navegación en Login

  Vamos a quitar unos enlaces de navegación SOLO en la ventana de login.

• 15 Cerrar Ventana al realizar el login

  Vamos a cerrar la ventana de login al dar click sobre un botón.

• 16 Refactorizar módulo de Login: Mover a un módulo aparte

  Vamos a mover todo el código que tenga que ver con el login al módulo correspondiente.

• 17 Hacer petición Post por axios para realizar el login

  Vamos a crear la petición axios para hacer el login.

• 18 Guardar token de acceso en archivo

  Vamos a registrar el token de acceso en el archivo.

• 19 Mostrar carga del Login

  Recuerda que para activar el loading que creamos para la ventana de login: this.loading = true; axios .post("http://localhost:3000/login", data) .then((res) => { console.log(res.data.id); this.loading = false});

• 20 Pasar el token de autenticación desde el PP al PR

  Vamos a pasar el token/mensaje desde el Proceso Principal hasta el Proceso de Renderizado.

• 21 Crear función para saber si estás autenticado

  Vamos a crear una función para saber si estamos autenticados o no.

• 22 Acceder a una propiedad desde el root de Vue desde cualquier componente hijo

  Vamos a aprender a trabajar con propiedades globales desde el root.

• 23 Cerrar ventana de login

  Vamos a crear la lógica para cerrar la ventana de login cuando fue exitoso el login desde Login.vue

• 24 Mostrar dialog cuando login y/o contraseña son incorrectos

  Vamos a mostrar un dialog de MaterialVue cuando las credenciales son incorrectas.

• 25 Detectar cuando realizamos el login

  Vamos a detectar cuando realizamos el login de manera correcta, recargar el token de la instancia principal de Vue.

• 26 Variar algo en la interfaz al estar autenticado

  Vamos a cambiar algún aspecto de la interfaz, por ejemplo, ocultar el botón de login cuando el usuario está autenticado.

• 27 Cerrar sesión

  Vamos a hacer el proceso para cerrar la sesión que sería destruir el token y borrar el registro en la base de datos.

• 28 Código fuente

  Código fuente

App de chat en grupo con Vue 3 y Firebase

• 1 Preparar el proyecto: Vue 3 y Electron

  Vamos a crear la aplicación básica en Vue 3 y agregarle Electron.js

• 2 Creando el proyecto en Firebase

  Vamos a crear un proyecto web en Firebase.

• 3 Crear el esqueleto de la app

  Vamos a crear el esqueleto de la app en Vue con el componente de navegación.

• 4 Crear el formulario de login

  Vamos a crear una sencilla página para realizar el login.

• 5 Habilitar la autenticación vía Firebase

  Vamos a configurar el proyecto en Firebase para lograr la autenticación.

• 6 Configurar el proyecto con Firebase

  Vamos a configurar nuestro proyecto en Node con Firebase, de tal manera, que cuando demos un click al botón de login mandemos la petición a Firebase.

• 7 Login: capturar respuesta y pasar credenciales

  Vamos a capturar los datos devueltos desde la plataforma de Firebase en la app localmente en Vue.

• 8 Base de datos en Firebase: Crear estructura para los grupos

  Vamos a crear la estructura de la base de datos para los grupos.

• 9 Mostrar listado de grupos: Consumir grupos desde Firebase, evento escuchador

  Vamos a crear el evento escuchador para detectar los cambios en la data y obtener el primer listado.

• 10 Mostrar listado de grupos: Mostrar en una página

  Vamos a crear el listado de grupos en una página de Vue.

• 11 Mensajes (chat): Crear lógica de la página inicial

  Vamos a crear la página para los mensajes con pase de parámetros por la url.

• 12 Mensajes (chat): Crear mensajes de prueba

  Vamos a crear la base de datos o tabla con algunos mensajes de prueba para el chat.

• 13 Mensajes (chat): Obtener y consumir mensajes

  Vamos a crear la función que se encargará de obtener los mensajes de la tabla creada anteriormente.

• 14 Mensajes (chat): Obtener y consumir mensajes en tiempo real

  Vamos a mostrar los mensajes por habitación en tiempo real en el nuevo componente para mostrar los mensajes.

• 15 Mensajes (chat): Enviar un mensaje y guardarlo en Firebase

  Vamos a enviar un mensaje desde la app en Vue y guardarlo en Firebase.

• 16 Usuario Login: Asignar usuario autenticado en una propiedad

  Vamos a guardar información del usuario autenticado en una propiedad global o en la raíz.

• 17 Mensajes (chat): Registrar el usuario al momento de enviar un mensaje

  Vamos a registrar información del usuario al momento de enviar un mensaje.

• 18 Mensajes (chat): Registrar la fecha actual

  Vamos a registrar la fecha al momento de guardar el mensaje.

• 19 Usuario Login: Proteger pagina de chat con usuario autenticado

  Vamos a proteger la página de chat para que tengamos que estar autenticados para acceder a la misma.

• 20 Sobre el resto de la sección

  Los siguientes vídeos los puedes tomar como opcional ya que son temas netamente estéticos que ya hemos tratado anteriormente.

• 21 Subir a nuestro repositorio en Github

  Vamos a subir la app en un repositorio tal cual está para poder editarla en cualquier momento e implementar el layout de la misma como nosotros queramos.

• 22 Instalar Bootstrap 5

  Vamos a instalar y emplear Bootstrap 5 para nuestra app.

• 23 Código Fuente

  Código Fuente