Electron.js Aplicaciones de Escritorio con HTML, Javascript y Node

¡Gracias a Kite por patrocinar esta sección del vídeo! Kite es un asistente de autocompletado gratuito con tecnología de IA que te ayudará a codificar de forma más rápida e inteligente:
Haz clic aquí ➞ bit.ly/3dPzXHe ➞ para saber más.
Aprende a crear aplicaciones de escritorio utilizando tecnología web (JavaScript, HTML, CSS, Nodejs y más), escribiendo el código de JavaScript desde cero o utilizando frameworks como Angular, React, Vue, entre otros. En el ejemplo del día de hoy aprenderemos las bases de electron como BrowserWindow, IPC protocol, como estilizar nuestra aplicación y finalmente como empaquetarla.
💻 Código de este proyecto:
github.com/Faz...
🛍 Descuentos:
NordVPN ➞ 68% de descuento en plan de 2 años ➞ Código: fazt
Hostinger ➞ 7% de descuento en cualquier compra ➞Código: FAZT
👨‍💻 ¿Qué servicios utilizo?
Brave ➞ brave.com/faz053
NordVPN ➞ bit.ly/2Te7p0J
Hostinger ➞ www.hostg.xyz/...
Cloudinary ➞ bit.ly/3ohNlJ7
SiteGround ➞ bit.ly/31u9ZEk
Namecheap ➞ bit.ly/3kne9W8
🖥️ Recursos:
Deno, Un nuevo entorno de Javascript ➞ • ¿Qué es Deno ? Un nuev...
Javascript para principiantes ➞ • Curso Javascript para ...
MERN STACK & Typescript ➞ • MERN STACK & Typescrip...
Curso de NodeJS ➞ • Nodejs Curso Desde Cer...
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
📩 Contacto:
➞ [e-mail]
➞ [e-mail]
#javascript #escritorio #programacion #electron

[@santyart7448]

Para los que le salen el error de require pongan esto: mainWindow = new BrowserWindow({ webPreferences: { contextIsolation: false, nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true, }, }); y el segundo que es de l aventana mas pequeña del producto ponen esto: new BrowserWindow({ webPreferences: { contextIsolation: false, nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true, }, width: 400, height: 300, title: 'Agregar nuevo producto' });

[@camilodiaz2073]

Si alguno después de esto le sale alerta de Seguridad de Electron, en los archivos HTML, escriban arriba de todo del script: process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'.

[@henryDev471]

SANTYART Ya estaba estresado hermano, thanks

[@serg71max]

Excelente deberías complementar este tutorial con los demás aspectos importantes en el desarrollo de aplicaciones de ventanas: hilos, procesos, señales, otros. Gracias!

[@niconico-cg6mp]

Excelente video, podrias explicar mas a fondo los subprocesos , osea cuando se nesecita constantemente un dato que este actualizad. Gracias

[@aiwekend6045]

Wow! Soy nuevo en el mundo de la programación y jamás había visto un canal de KZbin con excelentes explicaciones y mejor aún, que se toman su tiempo para ayudar a los demás sin esperar algo a cambio! Me suscribo y te comparto amigo

[@mrpr1967]

Para aquellos con los que el error de REQUIRE IS NOT DEFINED i no se les soluciona con: nodeIntegration: true, nodeIntegrationInWorker: true Debeis cambiarlo por el siguiente codigo: webPreferences: { contextIsolation: false, nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true }

[@LaEsenciadeRespirar...]

Muchas gracias me ayudaaste mucho!!! En resumen hay que poner: app.on('ready', () => { // The Main Window mainWindow = new BrowserWindow({ width: 720, height: 600, webPreferences: { contextIsolation: false, nodeIntegration: true, (usar tambien en el caso de que no funcione solo lo de arriba) nodeIntegrationInWorker: true, enableRemoteModule: true } }); Y también poner en la función para abrir un nuevo producto: function createNewProductWindow(){ newproductWindow = new BrowserWindow({ width: 500, height: 430, webPreferences: { contextIsolation: false, nodeIntegration: true, (usar tambien en el caso de que no funcione solo lo de arriba) nodeIntegrationInWorker: true, enableRemoteModule: true }, title: 'Add A New Product' }); Y así fue como me funcionó

[@albertocorona3959]

gracias justo yo tengo ese error, ya modifique pero me sigue mandando el error

[@gonzalogutierrez4911]

@@LaEsenciadeRespirar... sos un genio hermanoooo

[@claudiofuentes9625]

18:44 una forma de refrescar los cambios es presionando ctrl+shift+R

[@ImDash]

Al principio me habias salvado la vida, pero despues descubri que no habia instalado electron reload

sin rodeos, directo al proyecto, muy buen tutorial, sin perdida de tiempo

[@musiclifeoficial]

te funciono todo? como te quedo la apli?

[@user-bm4vp5vm4h]

Me fascina tu habilidad para encontrar los errores.

[@jasoncarrjim459]

Grandioso proyecto :) Espero que pronto hagas el mismo proyecto conectando a una base de datos. Gracias por compartir tus conocimientos

[@marcosfuenmayor563]

Nunca me habían explicado tan rápido en mi vida, gracias !

[@interestinginternetstuff4765]

Sería fantástico que hicieras un curso detallado y completo hermano, nos ayudaría bastante, saludos desde República Dominicana

[@querumba5753]

Klk brooooo

[@edwardzepeda]

Buen vídeo, me gustaría ver mas vídeos sobre electron js

[@franyerverjel]

Excelenteeee!!! gracias por los tutoriales que haces!

[@GamersNautas]

Excelente vídeo Fazt te sigo desde a penas 2 semanas y contigo he aprendido más de lo que he aprendido en otros lugares del internet, tienes talento para enseñar y no hacer tus vídeos tediosos y aburridos. No suelo consumir vídeos en youtube que tengan duraciones por encima de 20 min, pero contigo he hecho la excepción porque de verdad tienes don para no hacer de tus vídeos tediosos y aburridos, tengo una consulta para ti y espero y puedas responderla. La cuestión es que quisiera crear aplicaciones de escritorio con Python y electron, leí en un foro en ingles que hay una forma de conectar python y electron pero no entendí muy bien como, pero si esta a tu alcance me gustaría ver dicha información en tu canal, un saludo crack.

[@jhonestebanmezarodriguez5063]

Deberías tener cursos de paga, enserio tus cursos son diferentes a los demás, eres grande.

[@markdrew53]

:v

[@zeupez616]

Nunca conocí alguien que quieren que le cobren que raro es mejor gratis NO

[@PedroMartinTorres]

Concuerdo! Hay valorar y respetar el trabajo de los demás.

[@mariopace2909]

Pienso que lo que John quiere decir es que al ser cursos de pago son serian mucho más completos y detallados que workshops de esta duración que valdrían la pena pagar. Estoy de acuerdo con el. Saludos!

[@ezequielguerra9784]

@@carlitosvaca5476 Luego le cobran y se quejan, quien los entiende?

[@enlinea777]

excelente tutorial, me sirvio muy bien ahora puedo hacer mis aplicaciones para escritorio con toda la potencia de nodejs 👍👍👍👍👍

[@leonelrodriguez3967]

Excelente Fazt, muy bueno el curso, diria que super. No sabia de hacer este tipo de applicaciones tipo escritorio con JavaSacript. Lo unico malo que nunca pude hacer el package.

[@matiasilario2427]

Hola! No se si a alguien mas le ha ocurrido esto pero la app no me funcionaba del todo. Me daba error de Require is not defined en los HTML. Agregaba un producto y no se veía en la pantalla principal. (La pantalla principal siempre en blanco) La solución: (No me pregunten porque) fue cambiar esto: const { ipcRenderer } = require('electron'); por esto: const elec = require('electron'); const { ipcRenderer } = elec; Se ve muy estúpido pero así me funciono. Muchas gracias Fazt por todo! saludos

[@mrjaom4631]

Este caballero sabe de todo!! Que crack gracias 👌

[@cristobalaviles126]

Exelente he aprendido bastante con tus cursos

[@MultiHuyter]

se nota el dominio avanzado que tiene del tema, para alguien nuevo le cuesta seguirle las instrucciones, media hora de su video se conviertieron en 4 intentando ver donde cliceaba tan rapido, saludos

[@NicolasLuengas]

yo soy relativamente nuevo y le entendí

[@kalanzans]

Estupendo!!! Muchas gracias y saludos desde Brasil! :^)

[@gerardogomez6331]

eres un pro, te amo vales mucho, nunca habia visto un canal haci

[@RICAR02]

Gracias, Por compartirnos tus conocimientos.

[@yonatancoti7956]

Para los que usan Sublime text pueden usar la terminal integrada, con windows instalando el plugin Terminus y en linux con TerminalView

[@dannisisgt]

muy claro y bastante practico, gracias por tu esfuerzo

[@sistemasalbura6347]

hola fazt, tengo un problema, al agregar la linea de codigo del reload, al aplicar npm start, me muestra una venta con un error

[@luisrobertopena6948]

Para los que estén recibiendo un error en el requiere('electron') en el script del html, aquí hay un link donde te dice como solucionarlo y porque pasa: stackoverflow.com/a/55908510

[@Soulis98]

Muchas gracias!

[@EAKO1986]

uuufffff, me estaba volviendo loco jajajaj

[@tonofalco12]

gracias, pensaba dejar el video a medias xd

[@santyart7448]

@@tonofalco12 pudiste y como?

[@LaEsenciadeRespirar...]

Muchas gracias me ayudaaste mucho!!! En resumen hay que poner: app.on('ready', () => { // The Main Window mainWindow = new BrowserWindow({ width: 720, height: 600, webPreferences: { contextIsolation: false, nodeIntegration: true, (usar tambien en el caso de que no funcione solo lo de arriba) nodeIntegrationInWorker: true, enableRemoteModule: true } }); Y también poner en la función para abrir un nuevo producto: function createNewProductWindow(){ newproductWindow = new BrowserWindow({ width: 500, height: 430, webPreferences: { contextIsolation: false, nodeIntegration: true, (usar tambien en el caso de que no funcione solo lo de arriba) nodeIntegrationInWorker: true, enableRemoteModule: true }, title: 'Add A New Product' }); Y así fue como me funcionó

[@AlejandroGarcia-jp1px]

Excelente estimado muy bueno el curso y muy buena explicación espero los proximos tutoriales manejandolo con un framework javascript vue.js seria excelente por lo sencillo

[@yo_tu]

Muy buena explicación eres tremendo instructor

[@EduTipanEC]

Excelente gracias por tus cursos son muy comprensivos saludos ..

[@gabrielborges8854]

este canal vale oro

[@anibalperdomo7338]

muy buena la manera que lo explicas y el empaquetado es muy simple

[@juanisidorogarcia1699]

Buenas, ya me llegó el momento también sobre este framework. Para cuando un curso 😢 que de verdad, tus explicaciones merecen mucho la pena!! Por cierto... imagino que Electron + Firebase (+Svelte), podría ser un buenísimo video. Solo te lo digo para que lo sepas jejejeje ^^ Un saludo! ^^ y muchas gracias por todo tu trabajo! PD. Revisa el sidebar de tu site, el de /contenido/, que he visto que he visto que hay 2 urls que fallan con un 502 y ya que te comentaba que menos que te lo dijera. Un saludo! ^^

[@nadiefuego]

Excelente, siempre esperando tus videos. Saludos, gracias.☺👍

[@aldotellez4523]

muy buen vídeo y muy detallado de principio a fin. Genial

[@gabriellugooo]

Antes miraba mucho su contenido pero llegó un punto que me mareaba bastante y dejé de verlo, son buenos sus videos salvo ese detalle. Aclaro que no soy nuevo en l programación y aún así me resulta muy redundante a veces pero es por lejos el mejor canal en Español junto con SoyDalto

[@alienmars1]

genial tutorial justo lo que buscaba felicidades por tu muy valiosa aportación

[@rholave]

Bueno bueno, saludos desce Chile 🇨🇱

[@juanmoreno25]

Excelente video fazt, gracias gran aporte como siempre

[@PabliyoCR]

Amigo aqui se aprende mejor que en la escuela carajo

[@freelancerdev9636]

Primero que nada Gracias FAZT por tu trabajo y conocimiento, para los que tuvieron error al importar electron mediante include app.on('ready', () => { mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true } }); }); la propiedad webPreferences debe colocarse para cada ventana arenderizar. referencia de stackoverflow.com/questions/44391448/electron-require-is-not-defined#_=_ por:imedadel y Sathiraumesh

[@yanniosanchez9084]

Muchas gracias, lo esperaba ayer.

[@maxijones012]

ARGENTINA PRESENTE!

[@kitebeachinnbeachinn2888]

Espero una app Backend: NeDB (Embedded JavaScript Database) es una version light de MongoDB en file/Memoria como SQLite very portable thank you my friend great Tutorial as always!

[@TheGhoster09]

Muchas gracias por el tutorial, ojalá en un futuro expliques como hacer una app con bases de datos y cosas así, aún así muchas gracias por la explicación!

[@danpenia219]

Voy a probar con NeDB, en lugar de ser como Mongo o MySQL con esta podes hacer un archivo ".db"

[@manuelrm5465]

Fazt, muchas gracias por compartir tu conocimiento, si no es mucho pedir por favor cuando puedas subir un curso sobre React Hook, de antemano gracias.

[@daniellondonomarin2009]

No entiendo por qué los require en mi proyecto no funcionan, pero en el del video si, cuando abro la herramienta de desarrollador en el aplicativo de escritorio no me deja ejecutar comandos como en el que se hacen llamados al OS

[@MatiasEsf]

Muchas gracias! resolviste algunas dudas que tenia y la documentacion de electron no me parece del todo bien, es bastante confusa

[@FaztTech]

A ti. Sí, no es sencillo, se debe tener bases en Nodejs para saber utilizarlo, sino será muy complicado

[@hostapx9502]

Excelente, aunque seria bien los dividieras en varios vídeos en vez de uno solo. Pero esta genial.

[@AntonioPerez-ng3qe]

Mil gracias por el curso fazt 👌

[@sergioversace7215]

Gracias por el video esuvo interesante , no se si podrias hacer un pequeño Login con electron utilizando Mysql? te lo agradeceria bastante

[@AngelGonzalezM]

Mil gracias por el vídeo

[@tonofalco12]

todo bien en el curso solo que la hora de empaquetar y abrir la app me aparece el siguiente error y no encuentro como solucionarlo :( a javascript error ocurred in the main process provider electron executable cannot be found or is not exeecutable

[@diegocamilopenaramirez6101]

Gracias por el video, video tutoriales así ya no hay casi, que fastidio la gente que empieza pedir que cobren, por eso hasta los canales de tutoriales terminan echando mierda entre si, y bajan de calidad.

[@sebastianhuamanitassara7629]

aunque se ha actualizado Electron.js , aun asi tu tutorial me funciona para tener conocimientos . Ya he creado mi primera aplicacion para PC gracias a ti ,

[@oscargm1979]

Hola! Sabes de algun sitio web bueno para aprender Electron?(No importa que sea en inglés) Exceptuando al gran Fatz,obviamente :) Gracias!

[@emanuelcanavesio3851]

Gracias Fazt!! Excelente trabajo!

[@zeupez616]

Sigue así amigo subiendo vídeos de programación actualizada o en tu página Web tu trabajo se reconpensara

[@FaztTech]

Así se no se recompense, igual estoy bastante satisfecho con como estan resultando las cosas :)

[@zeupez616]

@@FaztTech si amigo no importa el método explicas muy bien sea en KZbin o en tu página o en donde quieras

[@alejandroalfonsogarciagonzalez]

Excelente muy buenos esperando los proximos tutoriales con electro seria bueno electro y vue.js muchas gracias

[@strelli2]

Duda existencial el mismo código te puede servir para la versión web?

[@DiegoGer73]

Sos un crack hermano!!! Saludos desde Argentina!

[@mariano9590]

muy buena explicacion me ayudaste entender mucho

[@alexisreyessaavedra52]

brutal! Excelente fazt!

[@MarcoFriz]

muchisimas gracias por tu aporte!!

[@miguelalbertoatenciacanole929]

excelente vídeo amigo muchas gracias !

[@waldirtiagodias]

Muito obrigado pela aula/curso, muito bom. Parabéns.

[@diegobejardelaguila8614]

Hola Fazt una consulta, estoy intentando ejecutar modulos node desde la devtools de la ventana de electron pero me sale esto al colocar require('os'), Uncaught ReferenceError: require is not defined at :1:1 Sabras a que se debe? ... Edit ya lo solucione, para los que tengan problemas hechenle una leida a esta respuesta de stackoverflow y el porque no funciona en un primer momento: electron 5.0.0 "Uncaught ReferenceError: require is not defined"

[@geronimosantacruz6823]

Como siempre un gran video y un gran tutorial, saludos.

[@kevin-martinez]

Me encanta este framework es bastante bueno y facil de implementar y a pesar que paso tiempo aun espero que subas un video mas a fondo sobre electron... Una duda, los alerts en desarrollo salen con el nombre de ventana Electron, al compilar ya cambiaria ese nombre al que configuramos previo empaquetado verdad? espero respondas y algun dia subas algo mas profundo sobre este framework.

[@greenpoint112]

Excelente, te felicito, muy buen video

[@SchenierLopez]

Una pregunta: ¿cómo se puede hacer para mostrar/abrir una nueva ventana pero desde un botón/ de la aplicación y no desde el menú de herramientas? Saludos

[@cristianpoveda4884]

Buenos Noche en el Electro también se puede utilizar php.

[@kraken9058]

Fazt gracias el este curso me servira de mucho

[@MarisolFlores-jx6bg]

Gracias por el video, si pudiera realizar un video en donde se vea la aplicacion, terminos y condiciones, tipos de licencia ,de compilacion, instalacion en una ruta especifica del cliente,y empaquetado en electron, saludos y gracias

[@ronaldshumery3409]

Excelente vídeo! Te felicito! Una consulta, qué tema usas de visual studio code?

[@miguelgomez9493]

hola disculpa ya se que este vídeo es muy antiguo pero me gustaría preguntarte si electron.js y tensorflow.js se pueden utilizar en un mismo proyecto, agradecería mucho tu respuesta gracias

[@jorgeuriarteapaza1944]

Eres un crack!

[@javierllanos8741]

Eres lo mejor del mundo

[@miguelalbertoatenciacanole929]

@fazt una consulta... como hago si quiero tener en mi ventana principal un content o con el contenido de una 2da ventada y poder interactuar sincronicamente en ambas ventanas ? es algo como tener en mi ventana principal un espejo de mi segunda ventana y poder mostrar e interactuar con los datos en mi pestaña principal pero que lo refleje igual en la segunda ventada en tiempo real podrías ayudarme ?

[@TheRafagomez62]

Soy programador mainframe y me suscribi a tu canal para agiornarme. Realmente está muy bueno. Pregunta: tengo que hacer una aplicación para una empresa. Esta aplicación es para gestionar clientes, ventas, stock, cuentas corrientes, gastos, etc etc. Pensé en usar PHP, MySQL y algún framework. Te parece bien ? Cualquier consejo será bienvenido. Muchas gracias. Saludos.

[@SantyOrtegaBanegas]

GOLAZO AMIGO MUCHAS GRACIAS :)

[@juanleodev]

Buenos tutos.. pero mi pregunta es.. ¿que tan bueno es el rendimiento de esas aplicaciones desarrolladas con electron? he leido comentarios y foros que no tiene un buen rendimiento

[@Mrleopola]

Espectacular amigo! Genial!! Te una consulta. Se puede crear las sub-ventanas como hijas de la ventana principal? Cómo se haría en C#? Estoy fascinado con la potencialidad que tienen estas tecnologías ! Wow! Un abrazo amigo!

[@rypher5319]

*_¿Cómo soluciono esto?_* *_Uncaught ReferenceError: require is not defined at productonuevo.html:30_* *_Ya intenté agregando esto al index.js, pero sigue igual_* mainWindow = new BrowserWindow({}) ; Reemplazar por: mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true, nodeIntegrationInWorker: true } });

yo tengo una duda. Se como cargar una URL remota, como un fichero HTML en electronJS. La cuestión es que yo deseo cargar una Url remota, por ejemplo la de google. y yo quisiera saber que método tengo que usar para analizar cuando la URL acabe de cargar. Un decir, cuando cambie de la URL de google y detecte la URL de wikipedia, poder ejecutar una función, o un simple alert que te diga "Bienvenido a Wikipedia"

[@carlosorellanasotowgetdc3231]

Ey Fazt!, eres un grande

[@alexistoranzo7246]

Solución a REQUIRE IS NOT DEFINE JUNIO 2021!!!!! tienen que agregar esta línea de código dentro del "mainWindow" y todas las ventanas nuevas que tengas, en este caso también en "newProductWindow". Tienen que cambiar en el index.js lo siguiente: mainWindow = new BrowserWindow({}) ; Reemplazar por: mainWindow = new BrowserWindow({ webPreferences: { contextIsolation: false, nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true, }, });

[@santyart7448]

10/10

[@edy231094]

Gracias Fazt!

[@MarisolFlores-jx6bg]

Buen dia para preguntar porque cuando se realiza el empaquetado y lo veo en el archivo electron titular-app.win 32, no me aparece el icono que yo le doy sino el de electron

[@pabloavendano7133]

Hola, estoy haciendo una app de escritorio en electron y estoy teniendo problemas al querer conectar la bd para hacer algunas consultas, estoy usando mysql y queria saber si tenias algun video que explique un crud en electron... Desde ya muchas gracias! Sigo tu canal y explicas muy bien

[@lord-kitsune]

tengo un problema con ipcRenderer cuando uso el require me marca este error en la consola del devtools "ReferenceError: require is not defined". y no me manda los datos

[@oneklicmx962]

Hola esta genial tu curso! y muy bien explicado! Me gustaria que armaras un curso en el cual ya manejes almacenamiento de datos! Por ejemplo hacer el tipico Punto de venta y alli ver todas las funciones! Si ya lo tienes y cobras por ello! porfavor dejamelo saber para inscribirme! Gracias!

[@GonzaloCarvajalZ]

Excelente Tutorial! una pregunta este proyecto funcionaria teniendo cualquier navegador en el cliente? o requiere alguno especifico?

[@gerardohernandez2257]

Pues no se si ya haya cambiado de la fecha del video al dia de hoy pero ya pude continuar cuando para esto const { ipcRenderer } = require('electron'); me da un error que dice que require no esta definido , si alguien sabe como solucionarlo o que cambio se los agradeceria

[@tatan1994]

18:50 Recuerda que Electron básicamente es un navegador de Chormium, para recargarlos puedes presionar Ctrl + r y se recargara como cualquier navegador

[@__vnsanch]

Hola. No puedes simplemente presionar Ctrl+R para recargar Necesitas tener agregado el accelerator que te permita acceder a la función recargar Si eliminas el role de reload, no se va a recargar si presionas dicho comando

[@visoven]

excelente tutorial

[@franciscojosegraneralinart3352]

Que tan viable es Electron ?

[@JerinYT]

Si tengo una aplicación de escritorio y tengo un HTML en una carpeta para que se ejecute la aplicación y no quiero que lo modifiquen, osea piratear mi HTML de esa aplicación de escritorio, ¿Que debo hacer?

[@jeisoncalvo6969]

Que emocionante esto

[@FranciscoPalaciosLopez]

Hola, excelente video, mi pregunta es, la base de datos también queda dentro del empaquetado? Hay que instalar el servidor en el pc del cliente?