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

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

En este curso vamos a tocar los fundamentos para crear aplicaciones de escritorio empleando tecnologías web, de tal manera que vamos a crear aplicaciones web para luego darle funcionamiento de aplicaciones de escritorio nativas como serían

• El uso de menús
• Exportar e instalar en Sistemas Operativos Windows, Linux y Mac
• Atajos de teclado
• Creación de ventanas
  • Cambiar el título de la ventanas
• Creación de diálogos
• Drag and Drop de archivos
• Que es Electrón.js

Electrón es un framework para Node que nos permite crear aplicaciones de escritorio empleando tecnologías web mediante un proyecto en Node; consta de dos módulos que serían el lado del servidor con Node y el lado del cliente que es simplemente un navegador web basado en el proyecto de software libre de chromium.

El núcleo del curso de Electrón.js

Comenzamos desde la instalación de los componentes básicos que serían nuestro Node y un editor que en nuestro caso será Visual Studio Code.

Luego vamos a crear varias aplicaciones web para conocer y aprender las características de Electrón.js, aplicaciones con JavaScript nativo y también vamos a aprender a incluir aplicaciones creadas en Vue mediante la Vue Cli en nuestro electrón.

Vamos a aprender a incluir paquetes o módulos que son de Electrón.js, como lo es Electrón DB y también de terceros, es decir, que no son propias de Electrón como lo son Bootstrap en su versión 4, Vue Material, fontawesome y mucho mas contenido.

También explotamos componentes del propio framework como sería el pase de mensajes entre los módulos, modo debug y demostraciones entre funciones en base a promesas con las bloqueantes, por ejemplo, para mostrar un diálogo.

Lo interesante de Electrón no es propiamente el framework, si no el hecho que tenemos creadas nuestras apps web y que la podemos exportar fácilmente a una app de escritorio y darle funcionalidades de una app de escritorio y con esto expandir nuestras aplicaciones a este tipo de plataforma.

No es necesario conocimiento previo en Node

Como te mencionaba en un inicio, no es necesario que tengas conocimientos en Node, solamente conocimientos básicos de programación, programación orientada a objetos y por supuesto, tener un computador, tenemos una sección de repaso o introducción a Node y te damos todo lo necesario para iniciar con esta tecnología para luego poder crear nuestras apps de escritorio; a continuación, la presentación del curso:

En este curso vas a aprender a crear aplicaciones de escritorio multiplataforma empleando Electron.js, que está disponible para Windows, Linux o Mac; crear menús y por supuesto, la propia aplicación que vas a exportar para estos sistemas operativos.

Vamos a crear múltiples aplicaciones para ir probando diversas características de Electron.js; instalar paquetes para potenciar el desarrollo, manejar un sencillo esquema de base de datos, editor de texto y por supuesto, vamos a integrar Vue con Electron.js en un solo proyecto.

Lo grandioso que tiene estas herramientas como lo son Electron.js, es que puedes emplear todos tus conocimientos que ya tengas para desarrollar tus aplicaciones web, para crear aplicaciones de escritorio; tecnologías con Vue, Bootstrap, Material Vue, JavaScript nativo (que lo vemos en el curso) y todo lo que conozcas, lo puedes emplear con Electron.js.

Vamos a crear proyectos mediante Vue Cli e incorporar nuestro Electron.js para que todo funcione de manera conjunta; vamos a extender las aplicaciones con plugins, ya sean para Electron.js o para la app web que estamos embebiendo a nuestro Electron.js

IMPORTANTE

En este curso vamos a trabajar con Electron.js; que lo puedes ver como si fuera el esqueleto de un ser vivo, es decir, el que mantiene nuestra app, pero recuerda que la parte más importante, y la que mayor tiempo consume (y que por lo tanto consume en el curso) es la creación de la app como tal, la app web, la cual crearemos desde cero e integraremos con Electron.js para darle características de una aplicación de escritorio.

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