Electron & MySQL CRUD | Aplicación de escritorio con HTML, CSS y Javascript

En este ejemplo práctico de Electronjs, aprenderemos a crear una aplicación de escritorio conectada a MYSQL como base de datos SQL. Crearemos un CRUD (CREATE, READ, UPDATE. DELETE) usando conceptos de Nodejs, y process de Electron, ademas integraremos bibiliotecas de CSS como Bootstrap y animate para poder desarrollar nuestra interfaz.
CÓDIGO DEL EJEMPLO
github.com/Faz...
CONVIERTETE EN MIEMBRO DEL CANAL
/ @faztcode
INTRODUCCIÓN PRÁCTICA A ELECTRONJS
• Electron.js Aplicacion...
CÓDIGO DEL EJEMPLO
github.com/Faz...
JAVASCRIPT ASYNC AWAIT
• Javascript Async Await...
INSTALACIÓN DE POSTGRES EN WINDOWS
• PostgreSQL Instalación...
INSTALACIÓN DE POSTGRES EN LINUX
• PostgreSQL, Instalació...
INSTALACIÓN DE POSTGRES EN MAC
programadorweb...
CURSO DE EXPRESS
• Expressjs | Nodejs Fra...
CURSO DE NODEJS
• Nodejs Curso Desde Cer...
CURSO DE GIT
• Git y Github | Curso P...
VISUAL STUDIO CODE
• Visual Studio Code - M...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
FAZT - KZbin:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
DISCORD
/ discord
SLACK
join.slack.com...
#electron #mysql #sql

[@pablomartinbarrera1932]

Sino me equivoco ya no se puede hacer const { remote } = require('electron'), al parecer ya esta deprecado, pueden utilizar lo de esta pagina para suplantar la funcionalidad www.electronjs.org/docs/api/ipc-main

[@kesanc]

Ufff justo me pasaba y encuentro tu comentario de hace 14 seg :3 gracias uwu

[@josearmando459]

Ni idea de como se utiliza me quede en esa parte :S

[@t3ko_56]

@@josearmando459 Yo tambien :(

[@josearmando459]

@@t3ko_56 Puedes hacerlo con IpcMain e IpcRenderer, al principio parece complicado pero es bastante sencillo y poderoso. Me gusto despues de probarlo, me tomo varios videos en ingles buscando info de como funciona haha.

[@t3ko_56]

@@josearmando459 Me salvaste la vida jajaja muchísimas gracias!!

[@rauljunioralvarezespinoza3051]

Para aquellos que tienen el error : "Uncaught ReferenceError: require is not defined" la solucion es cambiar la version de electron, si ustedes ejecutan "npm i electron" por default les instalara la version mas reciente, lo que tienen q hacer es usar otra version recomiendo la 8.2.1, la instalan asi : "npm i electron@8.2.1" , y listo con eso deberia funcionar.

[@spcbr96]

o si prefieren mantener la versión pueden especifiar el webPreferences del BrowserWindow de esta manera: webPreferences:{ nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, }

[@cristhianrogletek2249]

Gracias men

[@anto23cabe]

@@spcbr96 Muchas gracias, despues de estar buscando soluciones para continuar con el tuto sin errores durante un dia. Veo tu comentario. Tonoto de mi por no mirar antes, pero buscando soluciones tambien se aprenden cosas.

[@flopic_uni4819]

Hola estaba haciendo al pie del diveo pero me dio un error app.js:3 Uncaught TypeError: Cannot read properties of undefined (reading 'require') at app.js:3:21 , si alguien me puede ayudar par favor

[@Vin_DJ]

Hola Fazt. Estoy revisando el código. Un apunte a comentar. No quiero que se me malinterprete, ojalá yo me confundiese tantas veces como tú. Cuando utilizas el botón DELETE, ! no se refresca la página ¡ NO SE PUEDE ingresar nuevos productos. Tienes que volver a resetear el programa para tal fin. ¿Existe código para solucionar este pequeño problema? SOY NUEVO EN PROGRAMACION mil disculpas.

[@manuelSC17]

Yo tengo el mismo problema, ayuda @FaztCode

[@uitechnology4034]

Hola José, simplemente tienes que agregar editingStatus=false; en el evento Listener del productForm

[@uitechnology4034]

@@manuelSC17 simplemente tienes que agregar editingStatus=false; en el evento Listener del productForm

[@Vin_DJ]

Muchas gracias

[@miguelherrera8679]

La función "remote" de electrón esta en desuso, en su lugar usar ipcMain desde el main-proccess y ipcRenderer desde el renderer-proccess, mas información en la documentación, ejemplo: // Main proccess const { ipcMain } = require('electron'); ipcMain.on('createProduct', async (event, product) => { try { const conn = await getConnection(); product.price = parseFloat(product.price); const result = await conn.query('INSERT INTO product SET ?', product); new Notification({ title: 'Success', body: 'New product saved successfully' }).show(); product.id = result.insertId; event.returnValue = product; } catch (error) { new Notification({ title: 'Error', body: error }).show(); } }) // Renderer proccess const { ipcRenderer } = require('electron'); const result = ipcRenderer.sendSync('createProduct', newProduct); console.log(result); Nota: No hace falta exportar nada.

[@ROLANDOBONA10]

y donde coloco eso?

[@miguelherrera8679]

​@@ROLANDOBONA10 Si entendiste el tema de los Main-Proccess y Renderer-Proccess?, esta bastante claro como lo deje. Importas una sola vez el ipcMain en el main.js. const { ipcMain } = require('electron'); Creas cada función o método con ipcMain, que quieres que haga una tarea y será llamado desde le frontend, en este caso el de crear un nuevo producto. ipcMain.on('el_nombre_que_quieras', async (event, product) => { try { const conn = await getConnection(); product.price = parseFloat(product.price); const result = await conn.query('INSERT INTO product SET ?', product); new Notification({ title: 'Success', body: 'New product saved successfully' }).show(); product.id = result.insertId; Aquí retornamos información si lo deseas, si no lo puedes omitir o definirlo como null. event.returnValue = product; } catch (error) { new Notification({ title: 'Error', body: error }).show(); } }); Importas una sola vez el ipcRenderer en el app.js [O cualquier archivo que este en el frontend]. const { ipcRenderer } = require('electron'); Llamas la función o el método que declaraste en el main.js con el nombre que le pusiste. const result = ipcRenderer.sendSync('el_nombre_que_le_pusiste_en_el_main', product); Eso te va a retornar una información, si lo necesitas, lo capturas y haces lo que quieras con el. console.log(result);

[@wilbertsilva1477]

@@miguelherrera8679 const {ipcMain} = require('electron'); ipcMain.on('hello', async (event,args) =>{ console.log('Hello World') }) const {ipcRenderer } = require('electron'); const main = ipcRenderer.sendSync(hello,args); console.log(main); Me manda un error: Uncaught ReferenceError: require is not defined

[@wilbertsilva1477]

Recuerden utilizar estas propiedades al momento de crear su ventana, para poder comunicar estos procesos: function crearVentana () { window = new BrowserWindow ({ width : 800, height: 800, // Propiedad para importar modulos de node a la ventana // Con el fin de comunicar la ventana con los modulos de node webPreferences : { nodeIntegration : true, contextIsolation: false, nodeIntegrationInWorker: true, enableRemoteModule: true } });

[@Triantonio9977]

@@wilbertsilva1477 Lograste terminar el código y que te corriera tal y cómo se desea? Es que estoy teniendo algunos problemas con el ipcMain

[@davosanchez5950]

Estaría genial que nos enseñes tambien como crear el instalador una vez terminada la aplicación, saludos.

[@ariesroyal3751]

Instablaster...

[@dayronstovar8360]

Hola fazt saludos desde venezuela, si pudieras hacer un ejemplo moderno de electron estaria muy agradecido ya que muchas funcionalidades estan obsoletas

[@vicenteramirez6517]

Wow Genial este tutorial, Muchas Gracias por compartir tus conocimientos Fazt!! Tube un poco de difictultad con el modulo remote de electron. La version de electron en tu codigo es version 8 y aun el modulo de remote esta abilitado. Para la mas reciente version de electron que use 11.2 tube que agregar el codigo webPreferences: { enableRemoteModule: true }, fue la manera que descubri que el modulo remote funcionara con el tutorial.

[@leslym7578]

ty

[@Shideki01]

thanks!

[@randallaxel4111]

Gracias por el comentario, llevaba 1 hora investigando

[@ariellirianofranco4971]

Eso donde hay que agregarlo?

[@ariellirianofranco4971]

@@randallaxel4111 te funciono? y si asi fue... podrias decirme donde poner ese fragmento de código?

[@miguelfoliaco6317]

Hola fazt, primero que todo tus vídeos son una maravilla, pero tengo un problema con esta herramienta y al parecer la han actualizado y tengo un problema con el @electron/remote y me preguntó si puedes explicar cómo funciona esta versión o que alguien de aquí me diga cómo puedo instalar versiones pasadas a esta se les agradece de ante mano :) PD: eres un crack fazt

[@mickyrendon7382]

Tengo el mismo problema

[@charlyvargasquispe4688]

Hola, el error del min 31 : "require dentro de app" se soluciona instalando la version de electron con 8.2.1 . Ejem (antes) npm install electron . (Ahora) npm install electron@8.2.1 . Y listo con eso ya no tendran problemas, vuelvan a crear el proyecto con ese paso inicial; ya que eso de webpreferences y otras alternaticas de solucion no funcionan siempre. con este paso de usar la version correcta de electron si todo queda bien. TIP: despues de usar npm init luego que cargue usen el comando npm update. suerte

[@fredybarboza8146]

Tu solución me funciono perfectamente. Tengo entendido que "remote" está deprecada y por eso solo funciona en versiones anteriores.

[@joseeliezerriveratejada6115]

muchas gracias amigo ,no sabia porque no funcionaba.

[@kukifaire]

para solucionar el Error de remote en la hoja de app.js sustituir estas lineas const { remote } = require("electron"); const main = require("./main"); por esta const remote = require('@electron/remote'); const main = remote.require("./main"); y en la hoja de main.js en la función createWindow() agregar esta linea require('@electron/remote/main').enable(windown.webContents); quedara algo como esto function createWindow() { window = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true }, }); require('@electron/remote/main').enable(windown.webContents); window.loadFile("src/ui/index.html"); }

[@miguelherrera8679]

Me salió este error al realizar la conexión con MySQL, Class constructor connection cannot be invoked without 'new', Se soluciona agregando la palabra new en mysql.Connection así: const connection = new mysql.Connection({ host: 'localhost', user: 'root', password: '', database: 'electrondb' });

[@alvaroj.tobarmayorquin7125]

Hola! ¿alguno sabe cómo solucionar lo de 'required is not defined'? Ya intenté mucahs cosas como lo de enableRemoteModule. Según he investigado, el remote ya quedó obsoleto y lo recomendable es hacer un preload, ¿alguno podría ayudarme o compartirme material nuevo? Muchísimas gracias

[@elguzmi6980]

hola incorpora esto en las propiedades de la ventana webPreferences:{ contextIsolation: false, nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true},

[@injeranamitmita]

this was so good, I understood it even though I speak very little Spanish. :)

[@vivizapata3070]

Buen video, pero tengo ese error con const { remote } = require('electron') ayuda...

[@DAVIDIL81]

tu video de 1:24 horas para mis son de 8 a 9 horas

[@lumoura9988]

Excelente clase! Aprendí mucho e incluso practiqué mi español que estaba oxidado. Mejor clase, me ayudó a entender mucho mejor el porqué de los códigos. Gracias.

[@jairopr]

En la parte de addEventListener('submit',(e). Me aparece el siguiente error "No se pueden leer las propiedades en nulo". A que se debe.

[@joaquinrivadeneira6884]

lo pudiste solucionar?

[@jairopr]

@@joaquinrivadeneira6884 No, al final hice una aplicación web con php

[@santiagoellena4036]

Una lastima que con la versión 15.0 de electron este tutorial quede parcialmente obsoleto. El resto está muy bien! Muchas gracias!

[@FaztCode]

Gracias por el aviso Santiago. Voy a actualizar para republicarlo con los cambios. Saludos :)

[@andresfelipegarciapedreros5264]

@@FaztCode No te tardea porfa DDD:, justo estoy aprendiendo electron

[@Rodhzuniga]

alguien sabe si ya está actualizado?, lo descargue hoy y no almacena info

[@santiagoellena4036]

@@Rodhzuniga no es recomendable a nivel de seguridad y bugs, utilizar la versión de electron js que se muestra en el video. Recomiendo buscar cursos gratis actualizados!! Suerte

[@wilbertsilva1477]

@@FaztCode :3

[@shuke900]

[Solucionado]Hola! Esperando me ayudes, me sale el siguiente error: Uncaught ReferenceError: require is not defined at app.js:3 La Linea es esta: const { remote } = require('electron') ¿Sabes a que se deba?

[@shuke900]

Si tienen este error, la solución está en activar el modulo remote: webPreferences: { enableRemoteModule: true }

[@salcedo816]

@@shuke900 gracias

[@Mt2xlTokio]

muy bueno, nuevo sub.....PD: me toco ver el video en 0.5 de velocidad jajaja muy rapido

[@jgonzalez7154]

no me funciona esta parte: const { remote } = require('electron'); la consola de la ventana me dice: Uncaught ReferenceError: require is not defined

[@lumoura9988]

Buenas tardes. Mi código arroja el siguiente error: db.query is not a function. El código es el siguiente (main.js): function getProducts() { const sql = 'SELECT * FROM "product";'; db.query(sql, (error, results, fields) => { if (error){ console.log(error); } win.webContents.send('products', results) }); }

[@guidomaxier]

Pregunta se puede hacer usando Astro build, Daisy UI, tailwing

[@DAVIDIL81]

Tienes una forma de enseñar increíblemente buena... no solo lo explicas todo bien, sino que tienes una forma que nos ayuda a ver la lógica de lo que haces... ENHORABUENA! soy tu fan nº1... (tienes cursos en UDEMY?)...

[@FaztCode]

Hola David. aun no, pero recomiendas algun tema? :)

[@wellington18m]

Es señor habla demasiado rápido

[@arthurjimenez2642]

Gracn video, haz un ejemplo de React con Electron fazt.

[@SriCricketer]

Can you add English subtitles?

[@SrEdgar]

Hola min 31:52 la funcion hola no se me llama me da el siguiente error Uncaught TypeError: Cannot read property 'require' of undefined

[@bryanherreradev8055]

pense que era el unico

[@SrEdgar]

@@bryanherreradev8055 Si quieres puedes intentar usar el ipcmain y ipcrenderer como alternativa al remote

[@salcedo816]

como lo solucionaste me pasa lo mismo

[@SrEdgar]

@@salcedo816 Utilizando Ipcmain e Ipcrenderer para comunicar entre el proceso principal y el del renderizado www.electronjs.org/docs/api/ipc-renderer

[@eloyrolandocanchanyabalbin4692]

con el mismo problema, pero con webPreferences: { nodeIntegration:true, // permite el require enableRemoteModule:true, // permite usar remote }, y según esto github.com/electron/electron/issues/21408 , remote se va volver obsoleto(eso entendí :D)

[@marcoantoniovalencia8694]

34:05 a alguien le da error en la línea 4 del archivo app.js?

[@randallaxel4111]

A mi, pudiste solucionarlo? te dice tambien que app.js:4 Uncaught ReferenceError: require is not defined pudiste solucionarlo bro?

[@randallaxel4111]

La solucion es poner enableRemoteModule:true, en el main.js dentro webpreferences

[@julianhoward27]

me sale un error terrible al hacer el const {remote} = require('electron'). Me dice que ese require es undefined. ya voy 3 días sin poder solucionarlo

[@williammora1334]

Excelente Tutorial Fazt... Gracias por compartir tus conocimientos! Solo una consulta con una duda que tengo. A la hora de distribuir esta aplicación necesitare distribuir node con ella para poder usar la conexión a mysql?

[@Smileeee_23]

como haria si quiero desplegarlo pero en modo produccion,es decir que solo tenga que abrir un .exe y que tenga su base de datos????

[@eutimido3215]

En el archivo app.js me sale error al usar "require" Uncaught ReferenceError: require is not defined

[@miguelvelez3216]

para el error del minuto 32 dónde les sale que hay un error del require , solo agregan ésto y ya les funciona new BrowserWindow({ width: 800, height: 600, webPreferences: { contextIsolation: false, nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true },

[@MarioTorreblanca1]

Excelente video, vendría bien saber como generar un instalador con la aplicación

[@guillermosg7950]

Voy por el minuto 32:12, hasta ahora todo bien, aunq mi proyecto tiene cambios estoy usando este video para guiarme. La duda es, hice todo lo de remote y si lo hago tal cual el codigo del video, me sale un error, tengo que poner esto const main = require('../main') en vez de: const main = remote.require('./main'). La primera duda es pq yo tengo que volver atras en los directorios si los tengo al mismo nivel que fazt y pq mi remote.require(....) no me sirve

[@sergiocanomartinez5320]

si lo pudiste resolver?

[@abelmejia4705]

Fazt , como hago funcionar esta aplicación en red (en varias computadoras apuntando a la base de datos )

[@endlessdevs]

Haciendo uso de un base de datos externa

[@hardcoreblanco]

En mi package.json solo me sale esto: { "dependencies": { "electron": "^19.0.1", "electron-reload": "^2.0.0-alpha.1", "promise-mysql": "^5.2.0" } } A qué se debe?

[@RodrigoFernandez-hw5ok]

no se si le ha pasado pero no me estaria funcionando el const { remote } = require ('electron') me indica que esta definido :(

[@matiasmondaca1223]

Lo pudiste solucionar ¿? Me pasa lo mismo

[@RodrigoFernandez-hw5ok]

@@matiasmondaca1223 hola si, instale electron 8.2.1 me parece al principio del vídeo muestra el package y ahí sale

[@RodrigoFernandez-hw5ok]

Actualmente está la versión 13.x.x. me parece

[@RodrigoFernandez-hw5ok]

Está de 8.2.1 funciona el remote y eso

[@matiasmondaca1223]

@@RodrigoFernandez-hw5ok Sabes cual era el comando, gracias

[@alfredo6253]

¿Alguien sabe por qué aparece el mensaje de seguridad en la consola al usar electron?

[@marceloperezcolman9409]

No funciona la conexion a la base de datos, larga errores por todos lados.....

[@jelectronic415]

Fazt exelente video, puedes hacer algo con renderizado y impresión de PDF , electron no tiene esa función como la tiene Nwjs

[@fdorantesm]

Puedes usar url y bindearle el archivo local.

[@GerardoRojasPacheco]

Excelente!! muchas gracias por su constante aporte a la comunidad

[@neomorbius]

B.dias a ver si a alguien le ha pasado lo mismo. A mi me da error en la aplicación y la he descargado tal cual de github, pero me da error Uncaught ReferenceError: require is not defined at app.js:1 al hacer const {remote, MessageChannelMain} = require('electron'); A alguien mas le ha pasado? GRACIAS

[@gerardogallegos1947]

Error: conn.query is not a function :/ alguna sugerencia?

[@GerardoRojasPacheco]

Para que funcione el "restart" de la aplicación coloqué en el index.js lo siguiente: require('electron-reload')(process.cwd(), { electron: path.join(process.cwd(), 'node_modules', '.bin', 'electron'), hardResetMethod: 'exit' }); y así al guardar cualquier cambio se "recarga" la aplicación automáticamente y no da más el error: "Electron could not be found. No hard resets for you!" al ejecutar la aplicación.

[@davidizarra427]

En el minuto 31:20 Main.js y app.js estan en diferentes carpetas, en el require no deberia ser require("../main")? Como es que le funciona?

[@ChichaPapi]

Pudiste resolver esto?

[@kirenai_6518]

@@ChichaPapi agrega esto webPreferences: { nodeIntegration: true, enableRemoteModule: true, // esto },

[@Ineedyou_m83]

Buena Fazt, siempre apoyando a la comunidad! por eso siempre recomiendo tu canal.

[@desarrollox1183]

Todo bien, pero no puedo eliminar el problema de require, no te das a entender.

[@YohGar2854]

me da este error al importa , const { remote } = require('electron').remote

[@neonix2319]

Ya encontraste la solución al problema? :(

[@miguelherrera8679]

Deje la solución en los comentarios, ya no se use el remote.

[@ROLANDOBONA10]

alguien que sepa porque se me queda en reify:lodash: timing reifyNode:node_modules/@types/node Completed in 685ms y no avanza nada

[@andress9780]

Muchas gracias Fazt por estos videos!! Estaría bueno que hicieras un tipo “Road map” es decir que un ejemplo que se necesita para Front End o Backend y explicar cada tecnología usada actualmente ( es solo una sugerencia)... saludos

[@dart221]

Muy buen video la verdad de los pocos que pude entender y conseguir.

[@erickmarleyarita8026]

para generar el ejecutable debo modificar la db? como lo hago ?

[@federico3338]

Muy bueno Fatz !!! .... podrias decirnos como sacar esa barra de herramientas por defecto que tiene la aplicacion de electron ?? ademas como es el despliegue para que nos genere un archivo ejecutable. MUCHAS GRACIAS !

[@leandrosistemavs1043]

yo tambine quiero saber como sacar la barra de herramientas

[@uitechnology4034]

@@leandrosistemavs1043 Puedes usar un frame =true; en la configuracion del windowsBrowser o llamar al metodo odesde el archivo "index.js" app.applicationMenu=null;

[@leandrosistemavs1043]

@@uitechnology4034 estoy probando Nativefier y tiene esa opcion como comando para desactivarlo al hacer el .exe . Lo malo de Nativefier es no es seguro ya que la configuracion de la aplicacion se puede modificar editando un simple archivo .json . Necesito algun metodo para encriptar la informacion o hacer un portable .

[@wandersongomes8405]

Muitissimo obrigado irmao. Valeu por compartilhar seu conhecimento. Foi de muita ajuda.

[@luisenriquezamoraglez3124]

Saludos... Felicidades está muy bueno el video. Te sugiero que cuando tengas tiempo actualices el vídeo, es decir crear un sistema CRUD, con un buscador y que los elementos se vayan agregando en forma de filas

[@juancinn4234]

Hola, quisiera saber si alguno me puede ayudar a generar un instalador, para distribuir el programa, utilizando la base de datos de MySQL.

[@FaztCode]

Te recomiendo postearlo en el Discord, quizas alli encuentres a alguien: discord.gg/sjxTPvUvt5

[@codergirl5092]

I am using sqlite3 database with electron js app but when I am using sqlite3 and I refresh the page then suddenly blank page appears and it's shows like devtools was disconnected from the page when the Page is reloaded If anyone have the solution then kindly give me solution Thanks

[@malkiasher5232]

Como se llama el tema de windows que utilizas?

[@DominikCell]

Necesito ayuda para instalar un buscador control+F ya tengo el acceso pero la función me da error y no encuentro eso en la documentación

[@DominikCell]

Inpagesearch

[@Fran-oq2bc]

Muy buen tutorial pero tengo una duda no sería mejor usar el módulo IPC en lugar de remote??

[@sethbz9678]

tendras algun tutorial en donde uses sql server ?

[@kevinguzman1929]

Muchas gracias por el contenido compartido amigo Fazt! Muchas bendiciones para tu vida siempre!

[@FaztCode]

Gracias Kevin. Igualmente

[@lumoura9988]

Hola, estoy rehaciendo el ejemplo, pero recibo el siguiente error cuando lo ejecuto: aUncaught ReferenceError: require is not defined. estoy usando el nodo 18.12.1

[@williamalexanderpineda6098]

Hola, el error se genera porque la versión de electron que usas es más reciente que la usada en el vídeo. Con las nuevas actualizaciones han cambiado ciertas cosas en los Inter Process Comunications (IPC). Tu código debe quedar de la siguiente manera en las nuevas versiones de electron: //Main.js const { ipcMain } = require('electron'); ipcMain.on('hello', async (e, product) => { try { const conn = await getconection(); // product.price = parseFloat(product.price); const result = await conn.query('INSERT INTO productos SET ?', product); console.log(result); } catch(err) { console.log(err); } }); const createWindow = () => { const ventana = new BrowserWindow({ width: 700, height: 400, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, }, }); ventana.loadFile('src/ui/index.html'); }; //MAIN.JS //COMUNICAMOS EL RENDERER PROCESS CON EL PROCESO PRINCIPAL const {ipcRenderer} = require('electron'); $productForm.addEventListener('submit', e => { const product = { name: $name.value, price: $price.value, description: $descripcion.value, }; const result = ipcRenderer.send('hello', product); e.preventDefault(); });

[@lumoura9988]

@@williamalexanderpineda6098 ¡Oye! Gracias por la atención. Soy brasileña y busco literatura en portugués, inglés o español para aprender correctamente el uso del electrón. Mientras tanto hice una pequeña aplicación, usando localstorage, todo salió bien. Esta aplicación guarda y borra registros, muy simple. Como me sentía más seguro, decidí aprender a conectar una aplicación a una base de datos. Este es mi objetivo ahora mismo. Comprenda cómo funciona y escriba nuevas aplicaciones, no solo con MySQL, sino también con otras bases de datos. Me gustaría intercambiar ideas con otras personas que también están aprendiendo y, por supuesto, con los más avanzados.

[@raulbellosom]

Hola Fazt, he estado tratando de seguir este video junto a la documentación oficial y hay algunas cosas que no he podido resolver. He buscado ayuda en foros y demas pero no puedo, ojala pronto pudieras subir una nueva version de electron, un CRUD sensillo. Gracias por compartirnos tu conocimiento.

[@alexisbustamante7950]

no me funciona :C const { remote } = require("electron"); const main = remote.require("./main"); y en el archivo main.js WebPreferences:{ enableRemoteModule:true, nodeIntegration:true } Alguien?

[@davidchavez3920]

también me sale ese error alguien? : (

[@alexisbustamante7950]

@@davidchavez3920 según algunos comentarios, en la sección donde se crea la ventana , hay que agregar nodeIntegrationTrue Webpreference:{ nodeIntegrationTrue } la verdad es que esto nunca me funcionó, en electron versiones nuevas, tienes que usar IPCRENDERER desde el render y IPCMAIN desde el proceso principal para ejecutar , esto es para la comunicación entre el renderer y el proceso principal que es el MAIN, esto para cuando quieres ejecutar una funcion del proceso principal desd ele render, espero te sea de ayuda.

[@PierPaoloZini]

@Fazt Code, acabo ahora el video y fue verdaderamente ¡muy bueno! Tengo solo un problema en mi ordenador que, en Win 10, no me consente de visualizar el mensaje de "Notification" (en linux no me pasa...) y que intentaré de averiguar... Me gustaría (y lo intentaré...) ver esta application desarrollada en más páginas: búsqueda, cambio de orden de listado por botones (A-B-C, Id, etc), página dedicada a la "visualización del producto ", etc... A ver si lo lograré :-)

[@alexpineda1720]

Fazt mil gracias de veras que eres de lo mejor, saludos desde Colombia y gracias por compartir tus conocimientos.

[@rogeliotrejoestrada2829]

Tengo una duda, si alguien me la puede responder se lo agradeciere. Si en dado caso tengo una API (En cualquier estructura sea SOUP, REST o GrapQL), en donde es mas recomendable hacerla, desde el proceso principal de Electron o desde el mismo archivo js enlazado al HTML ????

[@kyungho968]

Umm un curso completooo 🙁

[@333PerezJuan]

Excelente Fatz. Una consulta como haría si selecciono editar un registro y cancelo el update? Debería crear una función cancelar update detrás de un botón cancela y llamar a la función insertar verdad? Gracias por compartir.

[@lestherjosue1729]

Me gustaria un video con el paquete de electron updater, pero con react y vite 🦾🦾.

[@melvincolmenares8665]

33:30

[@pubcode469]

Muy buenos tus vídeos. Una duda: ¿Cómo se puede hacer una app con electron, angular y mysql? He buscado distintos vídeos y artículos pero ninguno me ha funcionado.

[@ricardodanielanaya7028]

Super, excelente video! Una consulta, estoy pensando hacer una migración de Java swing (que usa controles drag & drop) a Electron + algún framework. Pero qué tanto me lo recomiendas? (Sobre todo por el tiempo de desarrollo que conllevan las vistas con sus controles)

[@anthonygelvez3930]

Una pregunta que lenguaje de programación puedo usar o aprender para crear un programa que realice cambios en un PC ejemplo desactivar drivers de windows ?

[@guianphierdonovannlizabarr3655]

Lo maximo

[@cesaraugustoramirezramirez6838]

Hola , primero que todo excelente el vídeo es muy útil para mi, sin embargo tengo varios problemas y me gustaría saber que debo hacer? Voy en el minuto 41:08 y tengo estos problemas: 1-) Desde que ejecuto el programa en la consola me sale esto: 'allowRendererProcessReuse' is deprecated and will be removed. 2-)En la vista donde esta el formulario, cuando le doy clic a: View - Toggle Developer Tools me muestra este error que no se porque me aparece si he seguido al pie de la letra el video: Uncaught TypeError: Cannot read property 'require' of undefined at app.js:4 acá const productForm = document.getElementById('productForm'); const { remote } =require('electron') const main = remote.require('./main') const productName = document.getElementById('name'); const productPrice = document.getElementById('price'); const productDescription = document.getElementById('description'); productForm.addEventListener('submit', (e) => { e.preventDefault(); const newProduct = { name: productName.value, price: productPrice.value, description:productDescription.value } main.createProduct(newProduct) }) 3-)No me esta guardando la información que digito en el formulario en la base de datos. Gracias por su ayuda. Saludos,

[@ulisescardonatavarez510]

Hola amigo, tengo los mismos problemas, como lo solucionaste?

[@cesaraugustoramirezramirez6838]

@@ulisescardonatavarez510 Aun no los he solucionado, he tratado varias cosas pero nada aún, no se si nos pueda dar la mano @Fazt Code

[@ulisescardonatavarez510]

Amigo encontré la solución para la de remote, en tu Main.js, en la función para la ventana, dentro de webpreference agrega enableRemoteModule:true, si no te funciona me puedes escribir por correo para poder ayudarte

[@cesaraugustoramirezramirez6838]

@@ulisescardonatavarez510 Hola Gracias lo haré y te contaré

[@joseluishuidobro2289]

@@cesaraugustoramirezramirez6838 funciono?

[@TheJulianJara]

Puedes hacer un video de como usar electron remote? Ya que esta fué actualizada y lo que haces en el video ya no sirve. Gracias

[@FaztCode]

Voy a actualizar este video proto. gracias por el recordatorio

[@albertoubamea8225]

@@FaztCode :C

[@FranciscoPalaciosLopez]

Hola muy buen video, mi pregunta es como crear el instalador para Windows y que incluya la base de datos?

[@anyscarlet9666]

salvou!

[@victorlefebres6247]

alguien mas tiene este error? alguna forma de resolverlo? (node:11500) electron: The default of contextIsolation is deprecated and will be changing from false to true in a future release of Electron. See github.com/electron/electron/issues/23506 for more information

[@anairdasavir]

Hola, lo solucione agregando la siguiente linea --> contextIsolation: false, en webPreferences. espero te sirva saludos

[@chronosg6696]

en el minuto 31.12 donde en app.js escribes const { remote } = require('electron') const main = remote.require('./main') main.hello() me sigue dando este error Uncaught ReferenceError: require is not defined

[@alejandroesquivel2386]

x2 XD

[@fabiangarcia2782]

remote ya esta obsoleto al parecer, busca sobre ipc.main e ipc.renderer

[@alejandroesquivel2386]

@@fabiangarcia2782 Jaja gracias bro, al final viendo otros comentarios recomendaban lo mismo entonces pude sacar el proyecto adelante, pero de todas maneras te lo agradezco mucho

[@miguelherrera8679]

Deje la solución en los comentarios, ya no se use el remote.

[@MundoDeHector]

Hola Fazt, gracias por este video fue genial el aprender, me dio curiosidad lo que tengo es local, pero si deseo realiar una consulta a un servidor LAMP desde mi aplicacion local ... que requires tengo que tener o ya es obsoleto, estuve buscando pero me sale un error..., pero bueno gracias, adelante con ciertas curiosidades...

[@wrightyrx7]

Wish there was an English version. Tried with subtitles but difficult to read what your saying and read the code at the same time haha

[@elsotoxd69]

hola, como se soluciona: Cannot read properties of undefined (reading 'require'), al momento de digitar: const main = remote.require('./main'); no eh podido pasar de esta parte

[@FaztCode]

Hola este ejemplo es de hace dos años, varias cosas han cambiado en electron, por ejemplo aqui utilizo ese modulo llamado remote, que actualmente ya esta deprectaded, se puede solucionar el error con este otro modulo: www.npmjs.com/package/@electron/remote Pero actualmente hay mejores formas de conectar los procesos de electron. voy a renovar el código y publicar un nuevo video de este mismo proyecto esta semana. Saludos :)

[@miguelherrera8679]

Deje la solución en los comentarios, ya no se use el remote.

[@elsotoxd69]

@@miguelherrera8679 kzbin.info/www/bejne/bIDGcqKOp5ljpac

[@ROLANDOBONA10]

@@miguelherrera8679 me puedes explicar donde coloco eso que puistes tu?

[@eagle-software]

hola excelente video, podrías realizar el mismo ejercicio pero que no se listen los datos de forma automatica sino mediante un campo de buscar? gracias

[@francodeleon9179]

Justo estaba necesitando esto, mil gracias Fazt!

[@tejassethi9319]

I am getting Cannot read property 'require' of undefined at app.js:2

[@alejandrovaquera4663]

Hi!, in your main.js add this line! function createWindow(){ window = new BrowserWindow({ width:800, heigth:800, webPreferences:{ contextIsolation: false, nodeIntegration:true, enableRemoteModule: true

[@tejassethi9319]

@@alejandrovaquera4663 Thanks

[@devstack9228]

Como puedo hacer una app en electron js que se pueda subir imagenes

[@adolperez4022]

Excelente video. ¿Alguien sabe si existe el video que se mencionaba al final?, el de electron con React y algún ORM, ando buscando algun video así pero aun no encuentro algo que me ayude a entender bien. algo con mas de un modulo estaría increible

[@dprogamer7236]

saben, en que hosting puedo subir un proyecto echo en electron?

[@secundariab.2741]

Tengo una duda, se puede crear componentes? para estar evitando escribiendo o creando archivos para cada cosa?

[@jonatanhn00]

Pfff bro ésto es una reliquia

[@yamidandrespatinoarrieta4785]

Excelente aporte amigo, podrías compartir que extensiones utilizas?

[@cdrman]

No es muy inseguro hacer la conexión directa a la bd desde la aplicación de escritorio? No sería mejor hacer llamadas a una api que sí que implementa los métodos crud? Si alguien desensambla el paquete podrían acceder a los datos de conexión, por ejemplo.

[@JosephM1M5A4]

Claro que si, pero no es el objetivo del video

[@pato-iu7xc]

Fazt podrías hacer un video de electrón y lowdb o como hacer un buscador con lowdb

[@excelsior7419]

Buenos dias. Me gustaria usar este mismo ejemplo, pero en vez de usarlo con MySQL, querria usarlo con Sqlite3 (que son las bases de datos que uso yo habitualmente). Me sale un error raro diciendo que no existe un modulo dentro del modulo de sqlite3, y no se como resolverlo. Si alguien pudiera ayudarme le estaria agradecido.

[@FaztCode]

Hola te recomiendo entrar al discord y pegar el error estas obteniendo: discord.gg/sjxTPvUvt5

[@excelsior7419]

@@FaztCode Así haré, soy ExpErgio#1253