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

09-03-2020 - Andrés Cruz

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

Precio mínimo:

$8.0

Condiciones:

  • Todo el curso de por vida y descarga individual
  • Un único pago para todo el curso
  • Actualizaciones más frecuentes que en Udemy para agregar más y más clases al curso.
  • Contacto por mensajes

Precio mínimo:

$9.9

Hasta el --/--

Condiciones:

  • Todo el curso de por vida
  • Un único pago para todo el curso
  • Actualizaciones frecuentes para agregar más y más clases al curso.
  • Contacto por mensajes

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:

Intro

  • 1 Presentación

    Presentación del curso

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


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!