Electron | Aplicaciones de Escritorio en Javascript, Curso Rápido de 30 min
Vložit
- čas přidán 6. 09. 2024
- En este vídeo vamos a crear nuestro propio editor de Código con Javascript, al igual que los editores de código Atom o Visual Studio Code, gracias a Electron.js, una propuesta de GIthub para hacer aplicaciones de Escritorio con Tecnología web, con HTML, CSS, Javascript y Mucho más.
Electron no Fue la primera propuesta para crear aplicaciones de escritorio, con tecnología web, ya existian otras alternativas, como Adobe Air, node webkit tambien llamado nw.js o app.js, pero Electron tiene mucho más actividad en comunidad y podemos encontrar Aplicaciones como Spotify, Slack, Shopify, la aplicacion de Escritorio de Wordpress y muchas más.
Para conocer más de Electron:
blog.faztweb.co...
Facebook: / fazttech
Twitter: / fazttech
Slack: goo.gl/n14Xx4
Código: github.com/Faz...
Recuerden que para conocer más de electron, nodejs, javascript, y programación en general pueden visitar mi blog. blog.faztweb.com. he escrito un post de Electron: blog.faztweb.com/2017/09/aplicaciones-de-escritorio-en-javascript.html
para usar require en el index.html agregar al index.js:
let mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
Funcionó!
sos un genio, gracias
gracias
security-warnings.ts:179 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ security-warnings.ts:179
Muchas Gracias!
aprendiste por tu cuenta todo esto? eres muy inteligente me inspiras, gracias por compartir tu sabiduria
la gente que se queja de la velocidad me da risa xd es decir el canal se llama fazt osea wtf que estaban esperando xd
Jajajaja, toma tu like
La unica solucion al error de no cargar archivos locales es bajar la version de electron: "devDependencies": {
"electron": "^1.7.5",
"monaco-loader": "^1.0.0"
}
El bendito amo del desarrollo web
Hola Fazt! Soy un fiel seguidor de tus vídeos/tutoriales. Año 2020, y estoy viendo tu curso sobre Electron (el que hiciste hace 4 años); de hecho , ya lo he visto 3 veces y siempre obtengo el mismo error por la consola (window of new editor devTools) : "ReferenceError: require is not defined at main.js:1". Por más que he visto el vídeo, reviso la documentación, instalo y re-instalo los paquetes (monaco-loader, monaco-editor, etc.), reviso el package.json; no hayo manera de solucionarlo. Tengo un screenshot de todos los elementos involucrados, pero no se como enviartela. Te agradezco tu ayuda. Saludos!
Hola amigo, el problema debe venir de las nuevas versiones ahora ya no es recomendado usar el require dentro del front. Dejame actualizar este codigo esta semana y en el nuevo video me comentas si sigues obteniendo el mismo problema, voy a tratar de publicarlo pronto. Un Saludo :)
Hola Fazt, muy buen material para estudiar el tuyo, no sé cómo eres capaz de hacerlo ya que yo también me dedico a hacer tutoriales. Solo quería comentarte que he estado leyendo acerca de el lenguaje de programación JavaScript y sus versiones, y no sé hasta qué punto estás utilizando las últimas versiones de ECMAScript ya que Visual Studio Code me ofrece la posibilidad de convertir tu código a ES6. Específicamente me permite a través de una bombillita convertirlo a un módulo de ES6. Es al pulsar la bombillita cuando automáticamente VSC me corrige el código y me cambia CONST por IMPORT además de REQUIRE cambiarlo por FROM, esto me hizo pensar que quizás no estás usando todas las ventajas que te puede proveer VSC, muchas gracias por tus videos.
hola que tal Fazt siempre veo tus videos y sabes que quiero hacer una interfaz moderna con electron especifico. Poder quitar los botones de minimizar maximizar y cerrar que tienen por defecto las ventanas y colocar los mis propios botones creo que un ejemplo seria la ultima version de visual studio code donde toda la interfaz es cuadrada y no trae el borde de una ventana por defecto del SO. gracias por todo
Pregunta, veo que creas muchos cursos. Ahora bien. Vas a avanzar con cada uno? Sería mejor que comiencen uno y lo terminen antes de comenzar con otro. Es una opinión personal, saludos
me has echo pensar, que el nombre correcto es curso Rápido, y el resto si lo llamare clases, es más entendible. Gracias por comentar. super util. :)
¿No querrás también un androide que programe por ti? Ja ja, yo también, pero por ahora hay que aprovechar lo que hay.
Fazt ¿puedes hacer un video de React Electron y Parcel?
mi error es el siguiente: Cannot read property 'on' of undefined
at Object, cuando intendo compilar el proyecto, ademas tengo otra pregunta, es necesario instalar electron cada vez que quiera empezar un proyecto?????
Podrías por favor enseñar como hacer una aplicación de escritorio, que sirva posada crear notificaciones push y se puedan enviar notificaciones de escritorio a usuarios de una red lan local
a mi me carga el index solo utilizando esta linea :
mainWindow.loadURL(`file://${process.cwd()}/index.html`);
supongo que es por la version, pero aun no pude hacer cargar el main :(
ahora es de esta forma
const mainWindow = new BrowserWindow({
width: 1000,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
mainWindow.loadURL(`file://${__dirname}/index.html`);
Alguien sabe como comunicar dos lenguajes de programacion. Ej python y javascript
Muchas gracias ...Justo lo que buscaba
Genial que te sirviera. :D
Hoy en dia sigue siendo la mejor opcion Electron.js? Me desaniman mucho con este Framework por lo que consume mucho la CPU. O eso es lo que he escuchado, digamos hacer una aplicacion con React+Electron o Next+Electron va hacer que esta desktop app vaya a ser lenta? Te agradezco si me puede sacar de esa duda
Hola, yo apenas me habia interesado por este framework, encontraste algo mejor?
Muy buen video , entendi muchas cosas !! sigue asi :) (y)
Muy buen video!!
Te hago una consulta hay alguna forma de usar MVC en Electron para hacer un proyecto mas prolijo?
Porque todo los framework mvc que conozco usan PHP.
Saludos.
Hola Iván. Sí, claro que puedes aplicar MVC. y si en el caso sea dificil para ti implementarlo, tambien podrias optar por los frameworks de javascript como angular, vuejs o react. ¡Saludos!
Voy a probar con angular
Gracias!
que genial brother saludos
Hola, disculpa tengo una gran duda con respecto al desarrollo de aplicaciones desktop nativas con electron. ¿Es posible interactuar y manejar hardware tales como, lector de código de barras e impresoras térmicas con esta tecnología??? Espero me puedas responder, muchas gracias y muy buen vídeo amigo
En la página web de Elecron:
electronjs.org/
en el buscador digitas "hardware" y te salen algunas APIs para gestionar hardware
ejemplo:
github.com/node-serialport/node-serialport
github.com/scramjs/johnny-five-elements
No vi tema lector de código de barras pero debe haber también
Acá tienes más:
www.codepool.biz/cross-platform-desktop-barcode-electron.html
Uncaught ReferenceError: require is not defined
at index.html:14 , por que me sale este error?
para usar require en el index.html agregar al index.js:
let mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
@@lucasmori8001 ahora es de esta forma
const mainWindow = new BrowserWindow({
width: 1000,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
mainWindow.loadURL(`file://${__dirname}/index.html`);
@@lucasmori8001 ahora es de esta forma
const mainWindow = new BrowserWindow({
width: 1000,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
mainWindow.loadURL(`file://${__dirname}/index.html`);
hola que tal que ha pasado con el curso de hacer aplicaciones de escritorios con electron me dejaste con las ganas de seguir aprendiendo
Hola Martin, este fue un curso rápido, pero pronto estaré publicando algo más a fondo de Electrón, solo que aun lo estoy preparando :D
hola amigo Fazt tengo dias viendo muchos de tus videos los cuales me han sacado de dudas, tengo una aplicacion hecha con angular 4, por requerir imprimir en una impresora sea termica o matriz decidi migrarla a electron y asi poder hacer uso de las impresora que esten instaladas en los equipos cliente, pero no he logrado este requisito desde electron sera que puedes orientarme en el tema seria de mucha ayuda.
Puedo meter Angular 6 como frontend en electron?
Y la pagina que vaya a transformar puede estar operando en php?
esto permite hacer aplicaciones de escritorio como herramientas para celulares, saber numero de serie, imei, etcc?
esto es para aplicaciones d escritorio si buscas aplicaciones móviles ve por react native
Hola Amigos.... En el Index.js: la url no me es posible capturar.... Alguien tiene alguna sugerencia... - Gracias: EXCELENTE FAZT!!!!! y LA VELOCIDAD ?? es la correcta.... VALE!!!!
Hola me dice que node no se reconoce como un comando interno o externo programa o archivo por lotes ejecutable por favor ayudame
Recuerda que electrón es un framework de Nodejs asi que asegúrate de tenerlo instalado. Puedes descargarlo desde nodejs.org
Gracias por el video. Todo muy claro, pero excesivamente rápido. Tenga presente que las personas que acuden a sus videos están en etapa de aprendizaje y no tienen la habilidad para captar el conocimiento a la velocidad que usted lo emite. Si desea enseñar debe pensar en el receptor no en usted (se lo digo porque esa es mi profesión). Espero que mi comentario le sea útil. De nuevo gracias.
Ten en cuenta que este no es un trabajo para mi, nadie me paga nada y yo no soy profesor, solo estoy compartiendo lo que se, tambien podria dejar de hacerlo. en cuanto a la velocidad, puedes disminuirla o aumentarla con los controles de youtube. saludos!
como agregar bootstrap3 y jquery de manera correcta en electron??
Muy buen video Fatz, ya me funciona el editor en electrón pero.. como se puede guardar lo que escribo en el editor?
Como hiciste yo intento arrastrar el archivo js a la ventana de electron y no me abre el archivo y tampoco captura la url
@@edinsongomez9725 es que will-redirect se desactivo su uso y se restringio a dominio debid o problemas de seguridad
Hola, no entendí muy bien la parte en la que se comunica el front-end (el script que está en el HTML) y electro... (El archivo que ejecuta electrón) puedes hacer un vídeo explicándolo detenidamente :)
Uhmm ya veo, si pronto subire un Crud conectado a una Base de datos, tomare en cuenta esto para explicarlo allí.
Gracias!
amigo como puedo hacer para poner publicidada o monetizar programas de escritorio ya sea con popunder o modal me podrias hacer un codigo asi para una aplicacion de escritorio que me regalaron yn programador y quiero ofrecerla en mi canal pero sacarle el jugo ya sabes
Estoy muy confundido, no se si aprender Electro js, Gtk+ C, Gtk+ Python, Java o C#.
Para crear aplicaciones de escritorio o software para escritorio, y conseguir un puesto de trabajo en una empresa. Alguien que me ayude ?
Te recomiendo un lenguaje que tenga más versatilidad (que puedas desarrollar escritorio, web y hasta móvil). Aunque actualmente los desarrollos de escritorio se enfocan hacia procesos locales de servidor y ya no tanto al usuario frente a la pantalla, el mercado laboral actual (también depende del país y la empresa/proyecto) se enfoca en aplicaciones con objetivo a web (lenguajes C#, java, python, php, JS)
Interesante te tema , pero es un nivel al cual no he llegado..
Solo quiero saber por el momento q tecnología debo aprender para tener competencia en desarrollo y diseño web...
Gracias de todas maneras
angel bello pues el orden que la mayoría recomiendo es HTML, CSS y Javascript pero el frontend
17:47
porque el audio de caja de zapatos?
¿Alguna idea del porqué no se pueden arrastrar archivos ?
ipcRenderer.on('open-file', (e, url) => {
//console.log('url');
fs.readFile(url.slice(7), 'utf-8', (err, data) => {
editor.setModel(monaco.editor.createModel(data, 'javascript'));
});
});
Claro que sirve de algo, está muy bien explicado pero por favor disminuye tu velocidad! xD
Solo coloca a .75 la velocidad del video en yt....
node js es c++, al usar v8
una pregunta, como abro la consola desde visual estudio code?? o tambien con atom
En Visual Studio Code es con Control + Ñ
Ctrl+Shift+P y escribes "terminal", te abre la terminal del proyecto
que buen audio d:
Maestro c:
B R U T A L !!!!
Fazt he visto varios de tus vídeos y la verdad son muy buenos e instructivos te felicito por ello, pero BÁSICAMENTE hay un detalle y es que tienes una muletilla que BÁSICAMENTE por lo menos a mí me distrae, no sé al resto, pienso que si BÁSICAMENTE corriges eso mejorará la calidad de tus vídeos, es sólo una crítica constructiva hermano.
xD si lo sé, y ya varios me lo han dicho. muchas gracias estoy tratando de evitarla, creo que lo estoy consiguiendo en los nuevos vídeos ya lo digo menos. No hay problema, todo sirve para ir mejorando ;). Saludos!
Jajaja basicamente el contenido es tan bueno, que basicamente ni lo habia notado :D
Que banda es la que suena al inicio, en los primeros 10 segundos? alguien que la sepa?. No puedo seguir trabajando si no la recuerdo jaja!
necesito un curso de electron en español :( aunque sea de paga