Mas resolvi inovar: criei meu pr\u00f3prio padr\u00e3o arquitetural e vou cham\u00e1-lo de “three-tier on disguise architecture<\/em>” por raz\u00f5es que voc\u00eas v\u00e3o entender mais a frente.<\/p>\n\n\n\n Ent\u00e3o tenho uma infraestrutura que deseja ser “two-tier” inicialmente (banco de dados e cliente apenas) mas que futuramente ser\u00e1 “three-tier”. Para os mais novos, o que \u00e9 uma arquitetura “three tier<\/a>“: \u00e9 aquela composta por tr\u00eas m\u00f3dulos:<\/p>\n\n\n\n Em um primeiro momento, no entanto, na vis\u00e3o macro para o cliente, haver\u00e1 apenas dois m\u00f3dulos na solu\u00e7\u00e3o proposta:<\/p>\n\n\n\n (“Cliente desktop que acessa o banco de dados diretamente” – estranho para voc\u00ea que \u00e9 novato (menos de 10 anos de experi\u00eancia), mas muito comum para o pessoal que desenvolve aplica\u00e7\u00f5es desktop neste modelo de dois n\u00edveis. \u00c9 o que chamam de “cliente rico” (rich client<\/em> se quiser falar “bonito”) muitas vezes.)<\/p>\n\n\n\n Muitas vezes o cliente desktop no padr\u00e3o two-tier executa na pr\u00e1tica stored procedures<\/strong> presentes no pr\u00f3prio SGBD (Sistema Gerenciador de Banco de Dados), fazendo com que assim a l\u00f3gica de neg\u00f3cios fique centralizada, o que \u00e9 uma boa ideia. <\/p>\n\n\n\n Na maioria das vezes, entretanto, os fornecedores optam por incluir todas as regras de neg\u00f3cio no cliente visando com isto maior portabilidade entre diferentes tipos de SGBD. Pro nosso exemplo vamos imaginar que toda a regra de neg\u00f3cio fica no cliente, ok?<\/p>\n\n\n\n No futuro o cliente gostaria de ter uma API, por que ir\u00e1 existir um servidor dedicado pra tal. A\u00ed sim ter\u00edamos um modelo mais convencional (de acordo com os padr\u00f5es de 2020) e poder\u00edamos passar a um modelo web que do ponto de vista de implanta\u00e7\u00e3o \u00e9 muito mais interessante. <\/p>\n\n\n\n O problema \u00e9 que se implementamos um cliente rico<\/em> ter\u00edamos de futuramente reescrever todas estas regras de neg\u00f3cio na API se usarmos uma abordagem convencional, o que n\u00e3o \u00e9 o caso desta solu\u00e7\u00e3o.<\/strong><\/em><\/p>\n\n\n\n Nosso cliente desktop usa tr\u00eas tecnologias, duas das quais voc\u00ea ter\u00e1 absoluta liberdade pra trocar, desde que sejam baseadas em Node (uma variante do “seu carro pode ter qualquer cor desde que seja preto<\/em>” (Ford)).<\/p>\n\n\n\n O Electron foi criado pela equipe do Github para a escrita do editor Atom<\/a> e depois foi a base usada para criar o Visual Studio Code<\/a>. Ele nos permite criar aplica\u00e7\u00f5es desktop<\/strong> baseadas em JavaScript. Mais especificamente, aplica\u00e7\u00f5es que sejam baseadas em Node, que \u00e9 tamb\u00e9m a base do Electron.<\/p>\n\n\n\n Com isto comecei a pensar. Aplica\u00e7\u00f5es web baseadas em Node… Ok, eu j\u00e1 vi aplica\u00e7\u00f5es renderizadas do lado servidor… aplica\u00e7\u00f5es renderizadas do lado servidor… Angular, Vue e React podem ser renderizados do lado servidor… Hmm… eu poderia colocar o acesso ao banco de dados ali, hein, no pr\u00f3prio componente… Ou ent\u00e3o eu poderia fazer algo melhor… por que n\u00e3o iniciar um segundo projeto dentro do pr\u00f3prio Electron que carregasse a API e esta API fosse usada pela minha interface web embarcada no Electron?….<\/em><\/p>\n\n\n\n Ser\u00e1 que consigo embarcar meu front-end escrito em React e tamb\u00e9m uma API escrita em Express em um projeto Electron? A resposta \u00e9 SIM, e isto \u00e9 o que vou lhe ensinar neste post.<\/strong><\/p>\n\n\n\n Nosso cliente desktop \u00e9 portanto o Electron encapsulando dois componentes:<\/p>\n\n\n\n Ao final nosso projeto ser\u00e1 essencialmente o que ilustro no diagrama a seguir:<\/p>\n\n\n\n O projeto Electron ir\u00e1 encapsular nossa aplica\u00e7\u00e3o Express.js que, por sua vez, ir\u00e1 servir como conte\u00fado est\u00e1tico o front-end escrito em React, j\u00e1 empacotado para o ambiente de produ\u00e7\u00e3o.<\/p>\n\n\n\n No momento em que a aplica\u00e7\u00e3o Electron \u00e9 carregada, inicia-se automaticamente o processo Node respons\u00e1vel por iniciar o Express.js que, por sua vez, ir\u00e1 servir o nosso front-end para os usu\u00e1rios finais. Esta solu\u00e7\u00e3o tr\u00e1s os seguintes benef\u00edcios:<\/p>\n\n\n\n Antes de pormos a m\u00e3o na massa, vou expor aqui uma prova de conceito bem simples. Ela basicamente acessa uma base de dados MySQL externa que cont\u00e9m os posts, tal como no diagrama a seguir:<\/p>\n\n\n\n Para este exemplo estou usando como base de dados uma lista de posts do \/dev\/All. A API que implementei apenas lista os \u00faltimos posts, que s\u00e3o apresentados ao usu\u00e1rio de uma forma bem tosca em nossa prova de conceito tal como no print a seguir:<\/p>\n\n\n\n A parte mais simples consiste na cria\u00e7\u00e3o desta parte do projeto. Voc\u00ea s\u00f3 precisa ter o Node.js (preferencialmente em sua \u00faltima vers\u00e3o) instalado em seu computador. Este passo a passo que irei expor aqui \u00e9 essencialmente o que voc\u00ea encontra no site oficial neste link<\/a>.<\/p>\n\n\n\n Crie um novo projeto com o nome que quiser usando o comando “npm init -y”.<\/p>\n\n\n\n Logo na sequ\u00eancia, crie um arquivo chamado “index.js” na ra\u00edz do projeto (voltaremos a ele mais tarde) e, na sequ\u00eancia, instale o electron com o seguinte comando:<\/p>\n\n\n\n No arquivo package.json vamos realizar pequenas modifica\u00e7\u00f5es: aten\u00e7\u00e3o para o atributo “scripts” e “main”.<\/p>\n\n\n\n O script “start” ir\u00e1 instruir o Electron a iniciar o projeto para voc\u00ea j\u00e1 em uma janela. N\u00e2o execute o comando “npm start” ainda, pois voc\u00ea n\u00e3o colocou o conte\u00fado necess\u00e1rio no index.js, que \u00e9 o ponto de partida do projeto. Por falar nele, segue seu conte\u00fado:<\/p>\n\n\n\n O script apenas ir\u00e1 criar uma janela para n\u00f3s. Mas \u00e9 importante uma breve explica\u00e7\u00e3o apesar deste post n\u00e3o ser um aprofundamento no Electron. A fun\u00e7\u00e3o createWindow<\/em> \u00e9 que faz boa parte da m\u00e1gica acontecer aqui. Nela criamos um objeto do tipo BrowserWindow<\/em> que equivale a uma janela desktop (um navegador embutido pra ser bem franco). Ali definimos sua largura e altura e tamb\u00e9m se ter\u00e1 integra\u00e7\u00e3o com o Node. Neste caso tem de ter, por que iremos embarcar uma aplica\u00e7\u00e3o Express.js neste projeto.<\/p>\n\n\n\n Quando a aplica\u00e7\u00e3o estiver pronta (app.whenReady<\/em>) esta fun\u00e7\u00e3o \u00e9 chamada. Notou que ela manda a janela carregar o endere\u00e7o “http:\/\/localhost:3000”? Mais a respeito disto l\u00e1 na frente.<\/p>\n\n\n\n Crie o projeto Express com a ferramenta de linha de comando do framework (ou ent\u00e3o use o c\u00f3digo fonte que voc\u00ea j\u00e1 tenha). No interior do diret\u00f3rio que cont\u00e9m seu projeto crie um diret\u00f3rio qualquer (chamarei de “api” aqui no nosso exemplo) e copie para seu interior o c\u00f3digo fonte do seu projeto React.<\/p>\n\n\n\n Voc\u00ea est\u00e1 com 90% do caminho pronto agora. Vamos ao pequeno detalhe: o modo como iremos servir o conte\u00fado est\u00e1tico da aplica\u00e7\u00e3o.<\/strong> Dado que seu projeto Express ser\u00e1 executado no contexto do Electron<\/strong>, o modo como conte\u00fado est\u00e1tico \u00e9 carregado deve ser levemente modificado.<\/p>\n\n\n\n O modo padr\u00e3o como o Express configura conte\u00fado est\u00e1tico \u00e9 tal como no exemplo a seguir, certo?<\/p>\n\n\n\n Mude para que fique tal como no exemplo a seguir:<\/p>\n\n\n\n Voc\u00ea precisar\u00e1 servir a partir do diret\u00f3rio do Electron \u00e9 executado. Esta \u00e9 a grande diferen\u00e7a!<\/p>\n\n\n\n Feito isto seu projeto Express.js est\u00e1 pronto. Implemente seus endpoints nele, conecte-se ao banco de dados, fa\u00e7a o que quiser. <\/p>\n\n\n\n Sabe o que voc\u00ea precisa fazer com seu c\u00f3digo fonte aqui? Praticamente nada! Apenas realize todas as suas requisi\u00e7\u00f5es REST contra o endere\u00e7o “localhost:3000” (ou qualquer outra porta que tenha configurado no seu projeto API).<\/p>\n\n\n\n E como voc\u00ea faz para implantar o projeto no Electron? Simples demais: apenas dois passos.<\/p>\n\n\n\n H\u00e1 mais um detalhe: inclua a propriedade “homepage” com o valor “.\/” no arquivo package.json do seu projeto. Isto garante que o carregamento do front-end ser\u00e1 a partir deste caminho relativo pra frente quando for construir a solu\u00e7\u00e3o.<\/p>\n\n\n\n Com os tr\u00eas projetos prontos, tudo o que voc\u00ea precisa fazer \u00e9 executar o “npm install” dentro do diret\u00f3rio que cont\u00e9m o c\u00f3digo fonte da sua API. Fa\u00e7a o mesmo no diret\u00f3rio externo, isto \u00e9, o diret\u00f3rio do projeto “Electron”.<\/p>\n\n\n\n Execute “npm start”. Olha l\u00e1 seu projeto em execu\u00e7\u00e3o!<\/p>\n\n\n\n E agora, vamos ao grand finalle: como empacotar o projeto? Voc\u00ea vai precisar gerar um .exe se for Windows ou o equivalente pro Linux e MacOS. Use este projeto aqui: Electron Build<\/a>.<\/p>\n\n\n\n Se voc\u00ea seguiu at\u00e9 agora este guia e foi construindo o projeto, talvez no momento em que iniciou a aplica\u00e7\u00e3o tenha visto uma janela com uma tela em branco, certo? Isto ocorre por que n\u00e3o realizamos a integra\u00e7\u00e3o de fato<\/strong> com o Express. \u00c9 preciso iniciar a aplica\u00e7\u00e3o. <\/p>\n\n\n\n H\u00e1 diversas maneiras de se fazer isto. Se voc\u00ea criou seu projeto com a ferramenta de linha de comando<\/a> do framework basta executar o arquivo www<\/em> que fica na pasta bin<\/em> do seu projeto Express. Ent\u00e3o, voltando ao arquivo index.js<\/em> que criamos no projeto ELectron, seu in\u00edcio dever\u00e1 ser tal como no exemplo a seguir:<\/p>\n\n\n\n Com isto a aplica\u00e7\u00e3o Express ser\u00e1 carregada antes da janela ser exposta. E notou outra coisa? Como o front-end feito em React \u00e9 carregado pelo Express, este ao ser exposto ao usu\u00e1rio obrigat\u00f3riamente <\/strong>estar\u00e1 j\u00e1 acessando a API j\u00e1 carregada. Resolvemos dois problemas com um \u00fanico golpe. <\/p>\n\n\n\n O guia at\u00e9 aqui te deu o b\u00e1sico pra que voc\u00ea consiga construir uma aplica\u00e7\u00e3o desktop usando React e Node.js. Mas voc\u00ea pode melhorar bastante isto: como a aplica\u00e7\u00e3o usa Node, \u00e9 poss\u00edvel acessar arquivos no computador do usu\u00e1rio, portanto criar configura\u00e7\u00f5es fica muito mais f\u00e1cil.<\/p>\n\n\n\nA solu\u00e7\u00e3o<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.itexto.com.br\/devkico\/wp-content\/uploads\/2020\/02\/image.png\")
<\/figure><\/div>\n\n\n\nA solu\u00e7\u00e3o t\u00e1 no cliente Desktop<\/h3>\n\n\n\n
Precisamos falar sobre Electron<\/a><\/h4>\n\n\n\n
![\"Resultado](\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/91\/Electron_Software_Framework_Logo.svg\"){kind=logo}
<\/figcaption><\/figure><\/div>\n\n\n\nVoltando ao cliente e apresentando a solu\u00e7\u00e3o<\/h3>\n\n\n\n
![\"\"](\"https:\/\/www.itexto.com.br\/devkico\/wp-content\/uploads\/2020\/02\/image-1.png\")
<\/figure><\/div>\n\n\n\nNossa prova de conceito – quase pondo a m\u00e3o na massa<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.itexto.com.br\/devkico\/wp-content\/uploads\/2020\/02\/image-3.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/www.itexto.com.br\/devkico\/wp-content\/uploads\/2020\/02\/image-4.png\")
<\/figure>\n\n\n\nPondo a m\u00e3o na massa<\/h2>\n\n\n\n
Criando a aplica\u00e7\u00e3o Electron<\/h3>\n\n\n\n
npm install --save-dev electron<\/pre>\n\n\n\n
{\n \"name\": \"devall\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"electron .\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"electron\": \"^8.0.1\",\n \"electron-builder\": \"^22.3.2\"\n }\n}<\/pre>\n\n\n\nconst {app, BrowserWindow} = require('electron')\n\nfunction createWindow() {\n\n let win = new BrowserWindow(\n {width:1200, \n height:600, \n webPreferences:{nodeIntegration:true}}\n )\n \/\/ win.webContents.openDevTools()\n win.loadURL('http:\/\/localhost:3000\/')\n \n win.focus();\n\n \n}\n\napp.whenReady().then(createWindow)<\/pre>\n\n\n\nPreparando o projeto Express.js<\/h3>\n\n\n\n
app.use(express.static(path.join(__dirname, 'public')));<\/pre>\n\n\n\n
app.use(express.static(__dirname + '\/public'))<\/pre>\n\n\n\n
Preparando o projeto React.js<\/h3>\n\n\n\n
Empacotando tudo agora<\/h3>\n\n\n\n
Ainda n\u00e3o acabou: O<\/strong> detalhe<\/strong> crucial!<\/h4>\n\n\n\n
const {app, BrowserWindow} = require('electron')\n\n\/\/ esta \u00e9 a linha que faz toda a diferen\u00e7a!\nconst express = require('.\/api\/bin\/www');\n\nfunction createWindow() {\n console.log(express)\n let win = new BrowserWindow(\n {width:1200, \n height:600, \n webPreferences:{nodeIntegration:true}}\n )\n \/\/ win.webContents.openDevTools()\n win.loadURL('http:\/\/localhost:3000\/')\n \n win.focus();\n\n \n}\n\napp.whenReady().then(createWindow)<\/pre>\n\n\n\nMelhorando o projeto<\/h2>\n\n\n\n