MENU

Node.js – Desenvolvendo Aplicações Desktop com node-webkit

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title>Minha Aplicação</title>
	</head>
	<body>
		<header>
			<h1>Olá mundo</h1>
		</header>
		<div>
			<p>Este é meu primeiro App com Node.js</p>
		</div>
 
	</body>
</html>

package.json

No arquivo package.json nós colocaremos as configurações básicas de nossa aplicação, veja:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "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:
node1.fw

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.

Leave a Comment!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *