Electron.js: Crea tus apps de escritorio con JS, HTML y CSS
4.7 (24 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
142 students enrolled

Electron.js: Crea tus apps de escritorio con JS, HTML y CSS

Crea tus aplicaciones de escritorio con Node.js con Electron.js y tecnologías web: Bootstrap, Material Vue, Rest Api
4.7 (24 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
142 students enrolled
Last updated 8/2020
Spanish
Spanish [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 9 articles
  • 7 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Instalar Node y paquetes mediante el NPM
  • Dar los primeros pasos con Node
  • Crear aplicaciones de escritorio empleando Electronjs
  • Pase de mensajes entre los módulos de Electronjs
  • Exportar aplicaciones para instalar mediante un instalador
  • Emplear múltiples módulos para desarrollar tus JavaScript
  • Desarrollo de aplicaciones con Vue
  • Crear aplicaciones mediante Vue Cli
  • Incluir y trabajar con Bootstrap 4, FontAwesome y Vue Material en tus proyectos
Course content
Expand all 147 lectures 10:23:18
+ Introducción
1 lecture 01:34

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

Preview 01:34
+ Opcional: Introducción a Node.js
4 lectures 19:28

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

Preview 03:39

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

Creando nuestro primer ejemplo
06:00

Vamos a instalar un paquete mediante NPM en Node.

Instalando un paquete y empleando el mismo
09:47
Código fuente de la sección
00:02
+ Introducción y primeros pasos con Electron.js
6 lectures 23:10

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

Preview 05:23

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

¿Necesitas dar los primeros pasos en las principales tecnologías del desarrollo?
01:25

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

Preview 04:51

Vamos a crear la primera app empleando Electron.js.

Nuestra primera aplicación: Hola mundo en Electron.js
09:12

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.

El frontend y el backend de Electron.js
02:17
Código fuente de la sección
00:02
+ Aplicación de notas
28 lectures 02:14:05

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

Creando una aplicación de notas
05:37

Vamos a hacer responsivo o adaptativo el editor.

La consola de desarrolladores de Google Chrome
08:12

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

Creando nuestro menú personalizado de ayuda
10:18

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

Separadores, menú de Debugging, rol quit, reload
03:06

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

Activar el modo debug y ocultar/mostrar opciones
02:11

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

Menús multiplataforma: reconociendo el SO
03:00

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

Atajos de teclado
01:44

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

Generar aplicación en desarrollo y producción
05:33

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

Mandar mensajes al proceso principal desde el proceso de renderizado -página web
09:34

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

Mandar mensajes al proceso de renderizado desde el proceso principal
06:15

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

Darle formato al texto desde el menú
05:14

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

Eventos de la aplicación
02:02

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

Capturar atajos de teclado y pase de mensajes
08:52

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

Mostrar un diálogo para guardar un archivo
08:50

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

Preview 02:18

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

Guardar el archivo en la ruta seleccionada
03:24

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

Guardar la data de nuestro usuario en el archivo
03:21

Vamos a abrir o cargar el archivo desde el editor.

Abrir archivos de la PC/Mac y cargarlos en el editor
09:41

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

Personalizar el editor (index.html)
06:20

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

Reestructurar aplicación
08:21

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

Definir opciones de guardado y apertura en el menú
03:29

Vamos a cambiar el título de la app.

Cambiar el título de la aplicación
02:46
Solución a la tarea anterior
00:08

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

Abrir un archivo desde la página web
02:10

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

Configurando el nombre de nuestra aplicación
01:22

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

Drag and Drop de archivos
08:32
Código fuente de la sección
00:02
+ Aplicación de tareas
30 lectures 02:16:35

Vamos a crear la estructura base de nuestro proyecto.

Crear nuevo proyecto y estructura básica
04:19

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

Crear el formulario para crear una tarea
02:08

Vamos a crear una lista para las tareas.

Listado de tareas: estructura básica
05:31

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

Agregar una tarea al enviar el formulario
07:06

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

Recargar las tareas
03:15

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

Instalar Bootstrap 4
10:51

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

Realizar cambios en nuestro diseño con el CSS de Bootstrap
06:51

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

Limpiar campo Item y evitar agregar tareas vacías
05:11

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

Detectar la tecla Enter
03:17

Vamos a instalar una iconografía para la app.

Instalar Iconografía
04:09

Vamos a definir nuestro icono para eliminar una tarea.

Definir íconos para eliminar
07:44

Vamos a eliminar elementos desde el listado.

Eliminar tareas: eliminar elementos del listado
08:19

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

Eliminar tareas: eliminar elemento del array
06:54

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

Instalar electrón BD
03:29

Vamos a crear una tabla para guardar los items.

Crear tabla en ubicación por defecto
04:15

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

Crear método para insertar
04:59

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

Crear tabla en el proyecto
01:55

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

Mandar mensaje para insertar un registro desde el PR al PP
05:57

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

Demo: mandar un objeto desde el PW al PP
03:07

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

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

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

Método para obtener todos los items
02:14

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

Método para actualizar un ítem
01:29

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

Método para eliminar un ítem
01:11

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

Método para obtener un item
01:57

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

Recibir datos de las tareas en la base de datos en la PW
08:10

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

Recargar el listado al crear el item
06:11

Vamos a aprender a borrar un item en la vista.

Borrar el item DB bajo demanda: index.html
08:32

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

Borrar el item DB bajo demanda: database.js
03:03
Código fuente de la sección
00:02
+ Primera app con Vue: Integrar Vue con Electron.js
11 lectures 36:35

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

Instalar Vue Cli
01:25

Vamos a crear un proyecto empleando Vue Cli

Crear un proyecto con Vue Cli
03:56

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

Explicación del proyecto de Vue Cli y más recursos
05:38

Vamos a integrar electron a nuestro proyecto de Vue.

Integrar Electron.js en el proyecto Vue Cli
03:34

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

Generar app Vue en modo de producción
04:17

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

Corregir el path de salida de la app Vue en producción
01:48

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

Activar los dos servidores: Vue y Electron.js para el modo de desarrollo
04:19

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

Instalar el plugin de router mediante Vue CLI
06:09

Vamos a crear un componente sencillo y configurarlo mediante el router.

Crear un componente y configurarla al router
04:06
Código fuente de la sección
00:02
+ Aplicación de tareas con Vue
24 lectures 01:27:14

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

Crear un componente para las tareas
02:35

Vamos a crear una simple lista de elementos empleando Vue.

Crear una lista de elementos con Vue
07:30

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

Instalar Vue Material
07:42

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

Habilitar la consola de JavaScript programáticamente
01:28

Vamos a configurar el Vue Material en nuestro proyecto.

Crear un listado con Vue Material
03:40

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

Colocar íconos para los ítems del listado
04:07

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

Colores por defecto
01:12

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

Crear un botón
04:28

Vamos a conocer el uso del evento click en Vue.

Evento Click en Vue
03:12

Vamos a mostrar un dialog o modal de Vue Material.

Mostrar un dialog en Vue Material
06:59

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

Trigger o evento de confirmación del dialog
02:31

Vamos a guardar los datos del Array mediante el modal.

Guardar datos en el array
03:39

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

Borrar un elemento
04:54

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.

Actualizar un elemento
07:38

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

Elevation: Dar sombreado a componentes
01:45

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

Definir un tooltip
02:01

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

Ciclo de vida de Vue
02:52

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

Configurar nuestro Electron (db) con Vue
05:29

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

Cargar el listado de elementos desde Electron-db
03:13

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

Guardar el item en Electron-db
02:48

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

Actualizar el item en Electron-db
04:23

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

Eliminar el item en Electron-db
01:51
Código fuente de la sección
00:02
+ Nuevo: Conectar la app de tarea con una Rest Api con MySQL
20 lectures 01:29:09

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

Instalar express y mysql
01:46

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

Crear estructura y configuración inicial para la Rest Api
01:50

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

Crear la base de datos en MySQL
02:39

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

Crear la conexión a MySQL
02:21

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

Obtener todos los registros
04:30

Vamos a obtener un registro desde la base de datos.

Obtener un registro
06:02

Vamos a insertar un registro en la base de datos.

Insertar un registro
07:50

Vamos a actualizar un registro desde la base de datos.

Actualizar un registro
07:29

Vamos a borrar un registro desde la base de datos.

Borrar un registro
02:51

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

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

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

Instalar y habilitar los CORS para nuestra Rest Api con express
04:20

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

Habilitar compartir recursos con el dominio de nuestra aplicación
03:52

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

Crear una tarea en la Rest Api desde la app en Vue
04:43

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

Refrescar el listado al momento de crear una tarea
04:08

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

Actualizar una tarea en la Rest Api desde la app en Vue
04:18

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

Borrar una tarea en la Rest Api desde la app en Vue
02:33

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

Diálogo de confirmación para eliminar tarea
06:10

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

Instalar axios
03:09

Vamos a adaptar nuestro proyecto para que trabaje con axios.

Migrar las peticiones vía fetch a axios
07:25
Código fuente de la sección
00:03
+ Trabajando con ventanas
5 lectures 18:20
Introducción
01:40

Vamos a abrir una ventana en una ventana nueva.

Abrir una nueva ventana bajo demanda
07:44

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

Obtener el identificador e instancia de una ventana
04:25

Vamos a abrir una ventana en formato modal.

Operaciones con ventanas: Abrir un modal
02:08

Vamos a crear una ventana no reescalable.

Operaciones con ventanas: Abrir ventana no reescalable
02:23
+ Agregar módulo de login y registro
18 lectures 01:17:07

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

Crear archivo para guardar el token
06:52

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

Consultar token guardado: Asíncrono
07:41

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

Consultar token guardado: Síncrono
02:22

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

Crear la estructura en la base de datos
03:34

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

Aplicar restricciones a las tablas y crear datos iniciales
03:44

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

Crear consulta y recurso rest para obtener el token
03:43

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

Crear consulta y recurso rest para hacer el login
04:29

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

Generar token aleatorio al hacer el login
06:21

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

Crear consulta y recurso rest para obtener información del usuario
04:16

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

Crear vista para el login
07:54

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

Crear vista para el login: loading
03:09

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

Configurar y abrir ventana para el login mediante el botón de login
02:37

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

Quitar enlaces de navegación en Login
02:25

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

Cerrar Ventana al realizar el login
04:03

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

Refactorizar módulo de Login: Mover a un módulo aparte
04:17

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

Hacer petición Post por axios para realizar el login
05:35

Vamos a registrar el token de acceso en el archivo.

Guardar token de acceso en archivo
04:05
En desarrollo...
00:00
Requirements
  • Nociones básicas en JavaScript
  • Un PC, Mac o Linux
  • Nociones básicas de programación orientada a objetos
  • Nociones básicas de programación
  • Nociones básicas del desarrollo web como CSS, HTML y JavaScript
Description

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.


Who this course is for:
  • Desarrolladores de aplicaciones con Electronjs
  • Desarrolladores de aplicaciones web
  • Programadores que quieran adquirir nuevos conocimientos y habilidades
  • Desarrolladores que quieran mejorar sus posibilidades laborales
  • Apasionados por las tecnologías y la programación