Aprenda Electron JS e Vue JS nessa App IRADA! Projeto DESKTOP com JAVASCRIPT!

[@XxDanmasterxX]

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 } }

[@lucaspassos3384]

Valeuuu salvou meus estudos!

[@robsonrodrigues5953]

Salvou minha pele man

[@PauloOkami]

Valeu!

[@phelliperodrigues2933]

E aí Léo! Cara que top, a tempos venho procurando material de electron, vcs da cod3r poderiam criar um curso completo de electron :)

[@lucianobraga250]

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.

[@Maauroviniciius]

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!

[@dyhalmeida1]

Sensacional, muito bom ver esse canal na ativa com esses conteúdos fantásticos!

[@vinilulu]

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.

[@emys_]

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 } }

[@smartplanilhas1135]

Já chego dando like

[@rodolpho1949]

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.

[@rafaelmonteiro4459]

@Leo o que você sabe sobre jogos com JavaScript?

[@lucianobraga250]

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.

[@gramsdf]

Que isso Prof. Leonardo, Curso Top, grátis, já era fã Cod3r, agora então sem argumentos para quem não é. \o/ ***

[@klauseduardodorte4395]

Muito bom. Sou louco pra criar aplicativos pra smartv, principalmente que exibam as capas e sinopses dos vídeos que baixo em mkv.

[@RafaelMarchesin]

Opa! Fiz esse curso lá na Udemy! Muito bom!

[@nelson.costa.dev2536]

Agora sim vou aprender electronJs, boraaaaaa...

[@Brenno102030]

Ola, qual a possibilidade de uma aula em como assinar aplicativo electron para usar no Windows, codesing em token criptográfico.

[@wagnerfix]

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.

[@heavensgames]

Aqui está dando erro nessa parte =( Mas não funcionou Uncaught ReferenceError: __dirname is not defined

[@alexalannunes]

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

[@joaovicentefranklin]

Olá Léo! Muito obrigado por produzir esse material de excelente qualidade. Que Deus te abençoe sempre meu caro!!

[@marceloguimaraes796]

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.

[@emys_]

Muito Top, consegui seguir certinho aprendi muitas coisas hoje obg mesmo

[@higorsouza3013]

Após concluir um app, como faz para gerar a versão final para instalar e usar no desktop do cliente?

[@AlienCodador]

Que top mano! parabéns pela iniciativa!

[@somaisumfato]

Vou lá fazer com certificado.

[@andremottfernandez1029]

Qual a possibilidade de conseguir utilizar o Electron e React, possibilitando comunicação via portas "COM" - Serial e USB?

[@israelsousa]

Eitaaa a adorei isso aí. Tou inclusive desde a semana passada assistindo seu curso e exatamente o Electronic que estou precisando.

[@tghelere]

*Electron hehe

[@sostenesapollo]

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] ])

[@rodrigotonin78]

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.

[@dffrancisco]

Caracas Léo muito bom, sempre aprendo muito com você, seus videos são tops, didática excelente.

[@mateuschaves8161]

Top! melhor instituição de ensino digital!

[@joaosyrio9461]

Leo parabéns, terminei seu curso de jv. Na UDEMY

[@giovanigenerali]

Parabéns pela didática e pelo empenho em repassar seu conhecimento, muito valioso e importante!

[@rafaelcarvalho2918]

Vai ter video gerando o pacote de instalção para linux ?

[@hexemeister]

52:34 poderia ser feito com async await ao invés de Promise?

[@cod3r]

Poderia sim

[@messiashenrique13]

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.

[@Brenno102030]

Léo, tudo bem? se possível teria como passar um breve introdução em como usar o C++ com o Electron?

[@ress30]

Léo ficou muito show. Parabéns!!!

[@AdeilsonTube]

Muito bom mesmo Leo... Parabéns

[@luisfernando3405]

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 ?

[@leonardoribeiro6941]

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 🤔?

[@edersonsouza6129]

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?

[@bs3331]

Show de bola, pena que não tem como curtir mais de uma vez, vídeo top!!!

[@wandersonsousa1891]

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

[@alanvitorpaixao8417]

muito obrigado mano

[@maclaurinrocha2881]

Vocês tem curso de eléctron JS ?

[@oldmanwars5285]

Parabéns Cod3r, conteúdo excelente!

[@vitorramosrocha9014]

utiliza o vue3 ou o vue2 ?

[@edson9428]

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?

[@jeffersonferreira43]

Que top, muito bom msm. Seria uma boa ideia criar também um projeto usando React e Electron.

[@viniciocoelho3538]

Tem nem como não assistir e dar like. Valeu.

[@Lauyagami]

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

[@cod3r]

Manda email pra [e-mail] lá fica melhor

[@Lauyagami]

@@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

[@IncanusxD]

@@Lauyagami Olá, você conseguiu a solução? Pois estou com o mesmo problema

[@Gennweb]

Dae Léo!? O que vc acha do Quasar Framework pra Vue?

[@FrankHermes]

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!

[@Izidoriojr]

crie um arquivo vue.config.js na raiz do projeto com o seguinte conteúdo: module.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true } } }

[@tiagomachado5127]

Brooklyn 99. Muito bom o video! Electron poderia fazer parte do web moderno, ou criar um curso separado...

[@cod3r]

Exatamente... 😁

[@marceloguimaraes796]

@@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 :)

[@fllsilva1]

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.

[@fllsilva1]

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.

[@fllsilva1]

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.

[@marceloguimaraes796]

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.

[@GuilhermeLima-yh4nt]

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

[@apiculturapousofrio2267]

Maravilha , conteúdo de qualidade !

[@Raulandradestep]

ó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.

[@cod3r]

Tinha percebido isso no desenvolvimento, mas no formato STR a primeira legenda sempre inicia com 1... Sem dúvida não é bom confiar... 😁

[@abraaoleopoldino8399]

Ótimo conteudo. Parabens.

[@WargasTeixeira]

Melhor tutorial! Obrigado!

[@andresilveira2721]

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) "

[@franksilva4432]

tbm to com esse problema nao sei resolve, pesquisei ja tudo que lugar nada resolve

[@MarceloMoreiradeAlmeida]

Electron com Angular! Sai um curso?

[@evandrosouza2618]

Parabéns muito bom , parabéns mesmo

[@heavensgames]

Uncaught ReferenceError: __dirname is not defined Alguém pode me ajudar? Está dando esse erro ao tentar importar o IpcRenderer na Home.vue

[@hmorra]

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...

[@heavensgames]

​@@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

[@heavensgames]

Mas não funciona corretamente

[@oriovaldofialho]

@@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

[@IncanusxD]

@@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?

[@juniormarques3044]

Muito bom!

[@choliveira84]

Show! Saindo na frente!!! A documentação, tutoriais, etc, em português é bastante escassa.

[@Saudavelpro]

mto bom parabéns!!!

[@gabrielrodriguesdossantos877]

Top, parabéns!!! Fiz também seu curso de JS da udemy e é bom de mais. É válido fazer um sistema ERP utilizando electron?

[@cod3r]

Pode fazer pra web e usar o mesmo código e colocar dentro de uma APP com Electron

[@luprinc]

Eu quero fazer um curso de CSS e Java Script avançado. Você dá esse curso ?

[@hmorra]

www.udemy.com/course/curso-web/

[@hmorra]

Aqui o Curso dele, aborda o que há de mais moderno hoje inclusive as verões mais novas do JS

[@phillipeeduardo4087]

Muito boa a aula, vlw.

[@weslleyborges7320]

Quem tá usando a versão 11.0.0 do Electron dá um like :D

[@rodrigofarias9085]

Pode criar um app com ReactJS + Electron? Pretende fazer um curso?

[@marceloguimaraes796]

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 }) }

[@hexemeister]

React também funciona com electron?

[@cod3r]

Funciona sim.

[@lucasoad399]

Como eu queria que o php tivesse algo como o electron!

[@joserubensdeoliveirajunior9945]

Mestre, sinto que você tem uma preferência por vue js em relação ao React, estou correto?

[@cod3r]

Sim... 😁

[@rafaelinacio7148]

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 } } }

[@somaisumfato]

TOP TOP TOP TOP TOP TOP.

[@zum19661]

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...

[@cod3r]

Fizemos uma migração há pouco tempo, mas vc tem razão... Vamos resolver isso.

[@caiofernandes5074]

faz electron + react

[@alexfullbrazil]

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.

[@EdZava]

Porra leo animal!!! Podia mostrar com o react e eletron como seria

[@marceloguimaraes796]

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.

[@josiassalermojunior]

Faz um curso de Vue.js

[@messiashenrique13]

Ele já tem, excelente inclusive!

[@noesislogos]

CURSO DE ELECTRON COM MÓDULO DE ATUALIZAÇÂO DE SOFTWARE PELAMOR DE DEUS

[@squirtle_bebado]

B99 kkkkk só pelo "rosa" e "holt"

[@alexon2010]

Poderia ser Electron com React

[@michelbernardo6883]

Primeiro

[@Gustavo054]

projetão da porra

[@fernandoamaral87]

Two and a Half Men

[@cod3r]

Nope... 😁

[@ronaldojuan1430]

Brooklyn 99

[@cod3r]

Yep. 😁

[@ronaldojuan1430]

@@cod3r palavras chaves -> Jake, Rosa, Charles. estou no começo da série, muito top sua aula, principalmente a didática. Parabéns

[@cezarplanet]

Muito bom!