Aprenda Electron JS e Vue JS nessa App IRADA! Projeto DESKTOP com JAVASCRIPT!
ฝัง
- เผยแพร่เมื่อ 9 ก.พ. 2025
- ◆ formacao.dev ◆
◆ www.cod3r.com.br/ ◆
_
Se inscreva já e garanta a sua vaga. 👾
_
Com mais de 400 mil alunos, a Cod3r é uma das principais escolas de tecnologia do País. Um dos seus produtos mais importantes é a Formação DEV.
Uma formação completa que tem o objetivo de preparar os profissionais para o mercado, desde iniciantes no mundo da programação ou profissionais que estão migrando de carreira, a arquitetos de software. A Formação DEV conta com um conteúdo completo para te ajudar a construir soluções inovadoras e enfrentar os desafios da era digital.
_
◆ Vem fazer parte da nossa comunidade:
Discord: / discord
_
◆Siga a Cod3r nas redes sociais:
TH-cam: bit.ly/2LJdjpX
Instagram: bit.ly/3bAStnX
Facebook: bit.ly/2MWAn5p
LinkedIn: bit.ly/3i3pfPC
Pessoal, que estiver com o problema nessa parte 41:55 na hora de importar o ipcRenderer com a versão 9 do electron
add dentro do arquivo "vue.config.js" esse comando:
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
Valeuuu salvou meus estudos!
Salvou minha pele man
Valeu!
E aí Léo! Cara que top, a tempos venho procurando material de electron, vcs da cod3r poderiam criar um curso completo de electron :)
Electron é mto legal. O que eu não gostei nele foi a parte de atualização do software no cliente. Acaba sendo muito burocrática.
Não existe nenhum cenário que você não me ajuda cara, tu é incrível! Já comprei cursos seus e vou continuar comprando sempre, porque você me ajuda demais!
Sensacional, muito bom ver esse canal na ativa com esses conteúdos fantásticos!
Que didática! Poxa Léo você tem explicações simples, pontuais e que fazem a gente consolidar os conceitos de forma clara e definitiva! Parabéns! Aproveito para parabenizar pelo seu curso de JS da Udemy qual já estou na metade e acredite: desta vez aprendo javascript.
Muito legal sua iniciativa. Eu já desenvolvi uma aplicação com Electron e Vue.js usando o Vue Meterial. Se fosse desenvolver hj usaria o Vuetify para essa parte do visual. Mas acabei desistindo do Electron por enquanto. Claro que cada projeto tem seu problema especifico. Eu precisava desenvolver um software para Web, Desktop e Mobile. A solução que achei mais viável foi criar um PWA com Nuxt. Posso usar como um site normal e também pode ser instalado como app no desktop e no mobile. Como eu disse, cada um tem um objetivo diferente, mas se vc que está lendo o comentário estiver com o mesmo problema, fica a dica.
Olá, no 41:57min essa importação esta dando erro para mim não fazendo a aplicação rodar, vendo no console ele apresenta: __dirname undefined, a versão do vue é o 9.
Olá, também tive esse erro daí eu olhei os aqui nos comentários, e Daniel Sabino falo pra add dentro do arquivo "vue.config.js" esse comando:
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
Que isso Prof. Leonardo, Curso Top, grátis, já era fã Cod3r, agora então sem argumentos para quem não é. \o/ ***
Muito bom. Sou louco pra criar aplicativos pra smartv, principalmente que exibam as capas e sinopses dos vídeos que baixo em mkv.
Opa! Fiz esse curso lá na Udemy! Muito bom!
Já chego dando like
Pra quem está com erro quando adiciona o IpcRenderer e a tela fica branca, faz o seguinte, muda o nodeintegration no background.js pra true e no component Home, importa o ipc assim : const {ipcRenderer} = window.require('electron')
Fonte: github.com/electron/electron/issues/24005
muito obrigado mano
@Leo o que você sabe sobre jogos com JavaScript?
Olá Léo! Muito obrigado por produzir esse material de excelente qualidade. Que Deus te abençoe sempre meu caro!!
Tô no começo do vídeo ainda mas pela descrição do app.. Já sei que vai ser massa \ooooo/.
Assistir todinho :D #bora #cod3r
Muito Top, consegui seguir certinho aprendi muitas coisas hoje obg mesmo
Após concluir um app, como faz para gerar a versão final para instalar e usar no desktop do cliente?
Excelente conteúdo! Parabéns! 👏🏼👏🏼👏🏼
Preciso iniciar um projeto desktop e, por causa desse vídeo, devo considerar o electron como uma forte candidata à opção escolhida.
Agora sim vou aprender electronJs, boraaaaaa...
Que top mano! parabéns pela iniciativa!
utiliza o vue3 ou o vue2 ?
Vou lá fazer com certificado.
eu gero o build do meu projeto com vue e ele não carrega as telas porém quando só executo em desenvolvimento ele carrega porque sera?
Eitaaa a adorei isso aí. Tou inclusive desde a semana passada assistindo seu curso e exatamente o Electronic que estou precisando.
*Electron hehe
Leo parabéns, terminei seu curso de jv. Na UDEMY
Ola, qual a possibilidade de uma aula em como assinar aplicativo electron para usar no Windows, codesing em token criptográfico.
Caracas Léo muito bom, sempre aprendo muito com você, seus videos são tops, didática excelente.
Gosto muito do material/aulas, do Leonardo/cod3r, material sempre muita qualidade. Mas em relação ao electron, o que leva uma pessoa desenvolver uma aplicação desktop nos dias de hj 🤔?
sim mano muito bom, mas e o uso de coisas do node msm, tipo o mysql e tudo mais... como deve ser a idéia correta de uso ? (uma api usando express ou n tem problema colocar direto no codigo ? o sequelize por exemplo [sem uso de api no caso]
])
Vai ter video gerando o pacote de instalção para linux ?
Parabéns pela didática e pelo empenho em repassar seu conhecimento, muito valioso e importante!
Brooklyn 99. Muito bom o video! Electron poderia fazer parte do web moderno, ou criar um curso separado...
Exatamente... 😁
@@cod3r professor, todo mundo parou por causa do [Vue warn]: Error in v-on handler: "Error: An object could not be cloned." sei que não é obrigação, mas ajuda ai :)
Pessoal quem tiver dificuldade no 48:44 (quando passamos um array pelo o backend/index.js) se sua aplicação não mostrar, e dar erro. Executa o VS (quem esteja usando) como administrador. Esse erro aconteceu comigo usando o Windows. Perdi vários minutos, achando que era erro de programação.
Aqui está dando erro nessa parte =(
Mas não funcionou
Uncaught ReferenceError: __dirname is not defined
Léo ficou muito show. Parabéns!!!
Top! melhor instituição de ensino digital!
Ola, tudo bem?
Estou desenvolvendo este projeto. Estava indo tudo bem, ate o momento de testar o "Ping" / "Pong". O Sistema compila sem erros, porem ao tentar atualizar o Browser, a pagina nao carrega e retorna o erro:
"Uncaught TypeError: fs.existsSync is not a function"
Pesquisei na internet, porem não estou conseguindo entender o erro e evoluir o projeto.
Que top, muito bom msm.
Seria uma boa ideia criar também um projeto usando React e Electron.
Vocês tem curso de eléctron JS ?
Muito bom mesmo Leo... Parabéns
Estou seriamente inclinado a criar uma aplicação desktop, Usando Electron :) Tem curso completo, encarando uso de dll's e distribuição da aplicação ?
Parabéns Cod3r, conteúdo excelente!
Show de bola, pena que não tem como curtir mais de uma vez, vídeo top!!!
Qual a possibilidade de conseguir utilizar o Electron e React, possibilitando comunicação via portas "COM" - Serial e USB?
Show esse vídeo Leo, será se na próxima segunda poderia trazer conteúdo ensinando aquela parada do Login com o Angular que você mencionou anteriormente. Abraços
Léo, tudo bem? se possível teria como passar um breve introdução em como usar o C++ com o Electron?
Quem tá usando a versão 11.0.0 do Electron dá um like :D
Tem nem como não assistir e dar like. Valeu.
Electron com Angular! Sai um curso?
Olá devs, estou estudando Electron e fiz o build da minha aplicação de teste.
Mas um problema que vejo, é que o packager não oculta o código fonte, em todas as plataformas ele gera uma pasta chamada "resources", mesmo na versão MacOS está embutido mas mesmo assim é de fácil acesso o fonte da aplicação.
Minha dúvida é, existe uma forma viável de realmente empacotar, para que o acesso ao fonte seja pelo menos difícil?
ótima aula Leo.
Tenho um questionamento quando você fez
const notNumber = !ParseInt(row.trim()); se for 0 isso vai dar true, o que não é verdade visto que o nome da variável é notNumber.
uma dica, não precisa fechar o servidor sempre que tiver uma alteração grande é só dar control s no arquivo background que ele restarta a aplicação.
Um upgrade pra aplicação seria remover a stopwords.
Tinha percebido isso no desenvolvimento, mas no formato STR a primeira legenda sempre inicia com 1... Sem dúvida não é bom confiar... 😁
Dae Léo!? O que vc acha do Quasar Framework pra Vue?
Só eu tive problemas com o ipcRenderer ? de qualquer forma se alguém teve problelmas achei a soljção no github, obs: estou usando a versão 9
please forgive if my English is poor.
There is a temporary solution here:
1.Set createWindow->win->webPreferences->nodeIntegration: true in background.js
2. Use const {ipcRenderer} = window.require('electron') in the rendering process.
Olá, eu to seguindo o curso lá pela UDEMY, e travei exatamente em 48:11, pois to tendo problema com ipcRenderer.send('process-subtitles',this.files), pois eu to usando o Electron 9.0.0. Como resultado, ele dá o erro : "error in v-on handler: "Error: An object could not be cloned."". Qual seria a solução pra resolver isso? E caso haja uma alternativa (extra ipcRenderer, pois eu pesquisei e vi que ficou depreciado no Electron 9.0.0), qual seria?? Perguntei pelo Canal da Udemy também, mas até agora nenhuma resposta T_T. Obrigado, aguardo uma resposta =D
Manda email pra suporte@cod3r.com.br lá fica melhor
@@cod3r ok, vou mandar agora mesmo. Não to querendo fazer um downgrade no electron, ai quero tentar resolver já usando a versão 9 mesmo
@@Lauyagami Olá, você conseguiu a solução? Pois estou com o mesmo problema
Os videos sempre muito bons !!! #sempreindico
Quando eu fui instalar o electron-builder, mostrou 3 versões: 7, 8, 9 [escolhi esta ultima]
Na parte de usar o "import { ipcRender } from 'electron" sempre dá erro que "_dirname is not defined" dentro do index.js do electron. Tentei as 3 versões acima e até a do 5 (que esta mencionada no video). Usei node v9, v10, v12 e nada. Se não fosse isso, estaria 100%
Muito obrigado de qualquer jeito!
crie um arquivo vue.config.js na raiz do projeto com o seguinte conteúdo: module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
}
Ótimo conteudo. Parabens.
Melhor tutorial! Obrigado!
Maravilha , conteúdo de qualidade !
Muito bom!
52:34 poderia ser feito com async await ao invés de Promise?
Poderia sim
Dica do @Francis lay lima: pra quem ficou preso no erro de upload "Consegui fazer funcionar da seguinte maneira:
ipcRenderer.send('process-subtitles', this.files.map(v => v.path))"
processSubtitle(){ // ipcRenderer.send('process-subtitles', this.files) ipcRenderer.send('process-subtitles', this.files.map(v => v.path)) ipcRenderer.on('process-subtitles', (event, resp)=>{ this.groupedWords = resp }) }
Prof. Léo, estou assistindo esse vídeo agora em 08/2020.
Na época que foi gravado você utilizou o ElectronJS v5, mas atualmente ao instalar o Electron ele oferece a versão 7 até a 9.
Eu fiz a minha instalação pela versão 9, estava tudo funcionando até chegar a parte que importou o ipcRenderer. A partir daí a tela não é mais renderizada, o servidor abre e só aparece uma tela em branco. Se eu removo a importação do ipcRenderer a tela volta a aparecer.
Também aparece uma mensagem no console assim que o servidor é executado:
"(node:20652) ExtensionLoadWarning: Warnings loading extension at C:\Users\francis.silva\AppData\Roaming\most-used-words\extensions
hdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system."
Você tem alguma ideia de como resolver isso? Não tenho mais como prosseguir no vídeo, fiquei travado aqui.
Eu encontrei na internet uma solução paliativa para o problema, ela resolve o problema de execução mas dizem que abre brechas de segurança e que também só funciona dentro do ambiente do node.js, fora ela não funciona.
A solução é incluir no arquivo "vue.config.js" as seguintes linhas:
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
Se você rodar pelo próprio VS Code, utilizando o node.js, ele funciona... mas se você tentar executar localhost:8080 no navegador aí não funciona, só vem a página em branco.
kkkkkk Resolveu o problema da página em branco, mas quando chegou na parte do arquivo "Home.vue" na linha:
ipcRenderer.send('process-subtitles', this.files)
Dá um erro no browser: "Error: An object could not be cloned." exatamente nesta linha. Tentei usar o operador "...this.files" mas também não funcionou.
Se eu passar '123', ou 123, ou [123] como parâmetro, funciona, mas se eu passar a variável this.files dá esse erro. Consegui fazer funcionar da seguinte maneira:
ipcRenderer.send('process-subtitles', this.files.map(v => v.path))
Por algum motivo o ElectroJS v9 não conseguiu processar o array de objetos retornado pelo foi preciso mapear esse array de objetos para um array simples, apenas com os nomes dos arquivos, pulando uma etapa do vídeo feito na época.
Show! Saindo na frente!!! A documentação, tutoriais, etc, em português é bastante escassa.
Parabéns muito bom , parabéns mesmo
Como eu queria que o php tivesse algo como o electron!
Top, parabéns!!! Fiz também seu curso de JS da udemy e é bom de mais. É válido fazer um sistema ERP utilizando electron?
Pode fazer pra web e usar o mesmo código e colocar dentro de uma APP com Electron
mto bom parabéns!!!
Muito boa a aula, vlw.
Olá professor,
´ O que significa esse erro ?
"
INFO Launching Electron...
(node:8564) ExtensionLoadWarning: Warnings loading extension at C:\Users\andre\AppData\Roaming\most-used-words\extensions
hdogjmejiglipccpnnnanhbledajbpd:
Unrecognized manifest key 'browser_action'.
Unrecognized manifest key 'update_url'.
Permission 'contextMenus' is unknown or URL pattern is malformed.
Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
(Use `electron --trace-warnings ...` to show where the warning was created)
"
tbm to com esse problema nao sei resolve, pesquisei ja tudo que lugar nada resolve
58:27 erro
(node:16734) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be one of type string, Buffer, or URL. Received type object
at Object.openSync (fs.js:432:10)
at Object.func [as openSync] (electron/js2c/asar.js:140:31)
at Object.readFileSync (fs.js:342:35)
at Object.fs.readFileSync (electron/js2c/asar.js:542:40)
at eval (webpack:///./src/backend/pathsToRows.js?:11:32)
at new Promise ()
at module.exports (webpack:///./src/backend/pathsToRows.js?:7:12)
at IpcMainImpl.eval (webpack:///./src/backend/index.js?:9:5)
at IpcMainImpl.emit (events.js:223:5)
at WebContents. (electron/js2c/browser_init.js:173:8161)
(node:16734) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:16734) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
TOP TOP TOP TOP TOP TOP.
faz electron + react
Pode criar um app com ReactJS + Electron? Pretende fazer um curso?
Eu quero fazer um curso de CSS e Java Script avançado. Você dá esse curso ?
www.udemy.com/course/curso-web/
Aqui o Curso dele, aborda o que há de mais moderno hoje inclusive as verões mais novas do JS
Uncaught ReferenceError: __dirname is not defined
Alguém pode me ajudar? Está dando esse erro ao tentar importar o IpcRenderer na Home.vue
tbm to com esse problema, acho que dentro de background.js deveria fazer a ligação com o ipcRenderer dentro de Home.vue, só aquele import em background.js não ta fazendo sentido pra mim...
@@hmorra Acho que o problema é a versão do Electron, baixei a 9.0 sem querer, consegui "resolver" colocando o import dentro de uma const
Mas não funciona corretamente
@@heavensgames eu estava com o mesmo problema, segui a documentação nesses link e funcionou perfeito:
Node Integration:
nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration
Preload Files
nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#preload-files
@@oriovaldofialho Amigo, eu segui as recomendações e consegui resolver em partes. Ele não aponta mais erro no __dirname mas quando tento usar window.ipcRenderer.send ele da erro e diz que o send não existe. Você conseguiu resolver isso?
React também funciona com electron?
Funciona sim.
Mestre, sinto que você tem uma preferência por vue js em relação ao React, estou correto?
Sim... 😁
quem está recebendo o erro: "Uncaught ReferenceError: __dirname is not defined when rendering (compile is fine)." após importar o ipc adicione essas linhas no seu (vue.config.js) na raiz do projeto:
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
}
Toda vez que eu leio "NESSA" app, me lembro de "NESSA" logo e perco o interesse em assistir. Me lembra da época que eu trabalhava na USP onde tinha muita teoria e pouca prática.
depois de muito vacilo da minha parte aqui está:
github.com/fotofacil/palavrasMaisUtilizadas
usem ai se travar em alguma parte. Ta ai o codigo fonte.
Porra leo animal!!! Podia mostrar com o react e eletron como seria
IMPOSSÍVEL me inscrever aceitando contratos EM BRANCO, e links INEXISTENTES...
MUITO ESTRANHO isso, nunca vi um site pedir aceitação obrigatória de link que não funciona e de termos de uso com página em branco...
Fizemos uma migração há pouco tempo, mas vc tem razão... Vamos resolver isso.
Primeiro
Faz um curso de Vue.js
Ele já tem, excelente inclusive!
CURSO DE ELECTRON COM MÓDULO DE ATUALIZAÇÂO DE SOFTWARE PELAMOR DE DEUS
B99 kkkkk só pelo "rosa" e "holt"
projetão da porra
Two and a Half Men
Nope... 😁
Brooklyn 99
Yep. 😁
@@cod3r palavras chaves -> Jake, Rosa, Charles. estou no começo da série, muito top sua aula, principalmente a didática. Parabéns
Poderia ser Electron com React
Muito bom!