{"id":1,"date":"2018-05-26T10:48:20","date_gmt":"2018-05-26T13:48:20","guid":{"rendered":"http:\/\/fabiobrandao.net.br\/blog\/?p=1"},"modified":"2023-03-12T18:39:05","modified_gmt":"2023-03-12T21:39:05","slug":"apresentando-o-electron","status":"publish","type":"post","link":"https:\/\/fabiobrandao.net.br\/blog\/novidades-e-curiosidades\/apresentando-o-electron\/","title":{"rendered":"Apresentando o Electron"},"content":{"rendered":"<p>Sabe aquele app desktop multiplataforma que voc\u00ea precisa desenvolver e ainda n\u00e3o decidiu que tecnologia utilizar? Pois \u00e9, talvez seja o caso de conhecer o <a href=\"https:\/\/electronjs.org\/\">Electron<\/a>.<\/p>\n<p><a href=\"https:\/\/electronjs.org\/\">Electron<\/a> \u00e9 uma biblioteca que permite o desenvolvimento de aplica\u00e7\u00f5es desktop multiplataforma utilizando <strong>JavaScript<\/strong>, <strong>HTML<\/strong> e <strong>CSS<\/strong>. Os aplicativos criados com Electron podem ser empacotados para Mac, Windows e Linux.<\/p>\n<p>Criado pela equipe do Github, ficou conhecido inicialmente como Atom Shell. O Electron foi criado utilizando tecnologias como o <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a> e o <a href=\"https:\/\/www.chromium.org\/\">Chromium<\/a>.<\/p>\n<p><iframe loading=\"lazy\" width=\"760\" height=\"428\" src=\"https:\/\/www.youtube.com\/embed\/8YP_nOCO-4Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"What is Electron: The Hard Parts Made Easy\"><\/iframe><\/p>\n<h3>Primeira aplica\u00e7\u00e3o<\/h3>\n<p>Construir sua primeira aplica\u00e7\u00e3o com Electron \u00e9 uma tarefa bem simples.Voc\u00ea precisa ter o Node.js instalado e adicionar globalmente o pacote\u00a0electron-prebuilt.<\/p>\n<p><em><strong>npm install -g electron-prebuilt<\/strong><\/em><\/p>\n<p>Voc\u00ea pode organizar a estrutura de pastas do projeto como desejar. Neste primeiro exemplo serei bem simplista. Crie uma pasta para seu projeto, por exemplo &#8220;appdemo&#8221;. Dentro desta pasta voc\u00ea precisa criar o arquivo package.json, para isso execute o comando:<\/p>\n<p><em><strong>npm init<\/strong><\/em><\/p>\n<p>Ap\u00f3s configurar seu package.json ser\u00e1 necess\u00e1rio criar dois novos arquivos, um HTML e outro JS. Note que o nome do arquivo JS de ser configurado em seu package.json.<\/p>\n<p><strong>Arquivo HTML (index.html):<\/strong><\/p>\n<p><code>&lt;!DOCTYPE html&gt;<br \/>\n&lt;html lang=\"en\"&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta charset=\"UTF-8\"&gt;<br \/>\n&lt;title&gt;Electron&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;p&gt;Ol\u00e1, Electron!&lt;\/p&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p>Nada de mais neste arquivo. Um HTML simples contendo um t\u00edtulo.<\/p>\n<p><strong>Arquivo JS (main.js):<\/strong><\/p>\n<p><code>const {app, BrowserWindow} = require('electron');<br \/>\nconst url = require('url');<\/code><\/p>\n<p><code>function boot() {<br \/>\nwin = new BrowserWindow()<br \/>\nwin.loadURL(url.format({<br \/>\npathname: 'index.html',<br \/>\nslashes: true<br \/>\n}))<br \/>\n}<br \/>\n<\/code><code><br \/>\napp.on('ready', boot);<br \/>\n<\/code><\/p>\n<p>Bem tranquilo por aqui tamb\u00e9m, as primeiras linhas carregam os m\u00f3dulos necess\u00e1rios. A fun\u00e7\u00e3o boot se encarregar\u00e1 de montar uma janela e carregar um arquivo. A \u00faltima linha chama a fun\u00e7\u00e3o boot quando o electron estiver pronto.<\/p>\n<p>Com os arquivos criados podemos testar nossa aplica\u00e7\u00e3o. Dentro da pasta execute o seguinte comando:<\/p>\n<p><em><strong>electron .<\/strong><\/em><\/p>\n<p>A aplica\u00e7\u00e3o ser\u00e1 apresentada:<\/p>\n<figure id=\"attachment_26\" aria-describedby=\"caption-attachment-26\" style=\"width: 740px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26 size-full\" src=\"http:\/\/fabiobrandao.net.br\/blog\/wp-content\/uploads\/2018\/05\/ola-electron.png\" alt=\"Exemplo Electron\" width=\"740\" height=\"414\" srcset=\"https:\/\/fabiobrandao.net.br\/blog\/wp-content\/uploads\/2018\/05\/ola-electron.png 740w, https:\/\/fabiobrandao.net.br\/blog\/wp-content\/uploads\/2018\/05\/ola-electron-300x168.png 300w, https:\/\/fabiobrandao.net.br\/blog\/wp-content\/uploads\/2018\/05\/ola-electron-355x199.png 355w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><figcaption id=\"caption-attachment-26\" class=\"wp-caption-text\">Exemplo Electron<\/figcaption><\/figure>\n<p>F\u00e1cil hein!<\/p>\n<p>Breve escreverei mais sobre o Electron. Voc\u00ea pode ver toda a <a href=\"https:\/\/electronjs.org\/docs\">documenta\u00e7\u00e3o<\/a> dispon\u00edvel tamb\u00e9m em portugu\u00eas.<\/p>\n<p>At\u00e9!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sabe aquele app desktop multiplataforma que voc\u00ea precisa desenvolver e ainda n\u00e3o decidiu que tecnologia utilizar? Pois \u00e9, talvez seja o caso de conhecer o Electron. Electron \u00e9 uma biblioteca&#8230; <\/p>\n","protected":false},"author":1,"featured_media":392,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[17],"tags":[6,3,5,4,7],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-novidades-e-curiosidades","tag-css","tag-electron","tag-html5","tag-javascript","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":18,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions\/50"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media\/392"}],"wp:attachment":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}