No último post falamos sobre Node.js, uma plataforma desenvolvida sobre o motor JavaScript do Google Chrome. Ela é usada normalmente para o desenvolvimento de aplicações WEB, mas também se aplica para softwares executáveis em computadores desktop. Hoje mostrarei de forma introdutória (talvez seja só o que você precisa saber) como se dá tal desenvolvimento.
Obs: Sou usuário Windows, portanto os exemplos aqui mostrados foram testados unicamente nesta plataforma.Mas para os exemplos em Linux ou para Mac OS não foram testados.
O que preciso para começar?
Primeiramente você precisa ter o Node.js instalado em sua máquina, obviamente.
Eu particularmente gosto de emular um terminal Linux em minha máquina Windows com o CMDER, você pode usar um outro de sua preferência, ou o própria terminal do Windows. Se for usuário Linux ou Mac Os desconsidere.
Tenha um editor de texto ou IDE, de sua preferência é claro. Eu uso o Aptana Studio 3, mas também gosto do Sublime Text.
O que é node-webkit?
Boa pergunta! Node-webkit, agora também chamada de NW.js é aplicativo runtime baseado no Chromium e em Node.js, este último dá parte do nome do runtime. A outra parte vem de WebKit, que é um projeto de browser engine open source muito poderoso que já foi utilizado em navegadores como Google Chrome e Opera, e ainda é utilizado no Safari. O objetivo de node-webkit é proporcionar o desenvolvimento de Aplicações Desktop usando de linguagens e tecnologias WEB como HTML, CSS e, é claro JavaScript.
Por onde começar?
Para começar você deve instalar o Node.js em sua máquina caso não tenha. Veja aqui como se faz.
Depois efetue o download de node-webkit:
Windows | 32bits | 64bits |
Linux | 32bits | 64bits |
Mac Os | 32bits |
Depois do download completo, extraia os arquivos e os coloque em uma pasta de fácil acesso. Eu coloquei na pasta C:/webkit (Os arquivos soltos dentro da pasta).
A aplicação
Para começar crie seu projeto, ou a pasta dele, e dentro dois arquivos:
index.html
O arquivo index.html será o arquivo principal da nossa aplicação.
Minha Aplicação
Olá mundo
Este é meu primeiro App com Node.js
package.json
No arquivo package.json nós colocaremos as configurações básicas de nossa aplicação, veja:
{
"name": "Aplicação",
"version": "0.0.0",
"main": "index.html",
"window": {
"width": 800,
"height": 600,
"toolbar": false
},
"author": "",
"description": ""
}
Executando a aplicação
Para executar a aplicação vá até o terminal e faça:
$ C:/webkit/nw C:/aplicacao/ .
Você pode substituir C:/webkit pelo endereço onde você salvou os arquivos do webkit. E C:/aplicacao pelo endereço de sua aplicação.
Se tudo ocorrer bem, algo parecido com a imagem a seguir irá aparecer em sua tela:
E, pronto!
Gerando executável
Agora vamos gerar o arquivo executável. Isso requer alguns passos, que são distintos em cada plataforma é claro.
Passo 1 – Criando um pacote
Primeiro precisamos criar um pacote .zip da nossa aplicação, para depois transforma-lo em um .nw, e ai sim em um arquivo executável.
Windows
1. Crie um arquivo .zip dentro da pasta onde está o webkit, no mesmo nível do nw.exe;
2. Copie todos os arquivos do seu projeto para dentro desse .zip (Se no seu arquivo zip existir uma pasta com suas coisas nela, este não é o caminho correto).
3. Renomeie a extensão do arquivo .zip para .nw. No windows por padrão as extensões dos arquivos estão ocultas, portanto pressione alt vá em Ferramentas >> Opções de pasta, na aba Modo de Exibição procure pela opção Ocultar as extensões dos tipos de arquivos, e desmarque ela.
Linux / OS X
1. Vá até a pasta do seu projeto pelo terminal, com:
cd ~/pasta_do_seu_projeto
2. Execute, ainda no terminal:
zip -r ../${PWD##*/}.nw *
3. Copie o arquivo .nw para a pasta do webkit.
Passo 2 – Gerando executável
Agora vamos gerar o arquivo executável pelo terminal.
Windows
Lembrando que os arquivos seuprojeto.nw e nw.exe devem estar na mesma pasta.
1. Acesse a pasta pelo terminal
cd c:/webkit
2 – Execute:
copy /b nw.exe+seuprojeto.nw seuprojeto.exe
3 – Pronto o arquivo seuprojeto.exe será gerado na pasta do webkit.
Linux
No Linux é bem semelhante.
cat /usr/bin/nw seuprojeto.nw > app && chmod +x app
Pronto pessoal, espero que tenha dado certo, se não deu deixe um comentário. Até a próxima.
Olá fiz os passos e tudo funciona , mas percebi que o “meuprojeto.exe ” gerado, só funciona se estiver na mesma pasta do nw.exe. Não funciona fora dele, sabe como resolver
Só funciona assim!
Crie um atalho para área de trabalho
Me ajuda, não estou conseguindo abri a pagina de pessoas quando executo o nw.exe, só aparece o rodape e o header
Abre o devtools pra ver se apareceu algum erro. No ícone de menu na parte esquerda superior da janela. Depois vai em Console