Tableless

Busca Menu

Aplicativos Desktop com NW.js – Node Webkit – Introdução

Seja o primeiro a comentar por

Este é o primeiro artigo de uma série que vou escrever sobre aplicações desktop usando tecnologias web. (HTML, CSS, Javascript e WebGL)

O NW.js é uma aplicação em tempo de execução baseado em Chromium e Node.js, com ele é possível desenvolver aplicativos nativos para Windows, Linux e Mac, usando tecnologias web e usufruindo dos pacotes do Node.js.

Para ter uma ideia do que é possível fazer, visite este link e veja alguns aplicativos desenvolvidos com NW.js -> http://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition

O NW.js é um projeto criado pela Intel. Outro projeto muito bom e conhecido para desenvolver aplicativos desktop usando tecnologias web é o Electron, criado pelo GitHub. Segue um link comparativo entre os dois -> http://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition

Nessa série de artigos, vou explicar como criar um aplicativo desktop, com ícone personalizado e empacotado em um único executável. No último artigo, vou explicar como fazer uma integração com base de dados local, em tempo real e sem a necessidade de abrir portas ou fazer configurações de firewall.

A versão mais atual do NW.js no momento em que eu escrevo este artigo é a nwjs-v0.15.3, é esta que estou usando. Além disso, estou usando Windows como sistema operacional.

Vamos começar com um “Olá Mundo”, porém, vou explicar alguns recursos de “Window” e as configurações para iniciar o projeto.

Primeiro faça o download do NW.js no site http://nwjs.io/ – Para desenvolvimento, baixe a versão SDK – descompacte os arquivos em uma pasta que seja fácil para acessar pelo prompt de comando – eu costumo descompactar na pasta c:\nwjs\

Para uma aplicação básica funcionar, precisamos apenas de dois arquivos, o package.json, que contém as configurações da nossa aplicação e o index.html, que contém o código da nossa aplicação. Depois vamos adicionar arquivos .js e .css. Neste primeiro artigo, vamos brincar um pouco com o package.json.

Crie um novo arquivo index.html – vamos adicionar uma estrutura básica de HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Meu Primeiro Projeto</title>
</head>
<body>
<h1>Olá Mundo.</h1>
</body>
</html>

Crie um novo arquivo package.json, com o código abaixo e salve na mesma pasta do HTML:

{
 "name": "ola-mundo",
 "main": "index.html"
}

Somente com essas informações no package.json você já pode testar seu “Olá Mundo”. “name” é o nome do projeto, e “main” é o arquivo inicial da aplicação, sua “página inicial”.

Para executar nosso aplicativo, abra o prompt de comando e vá até a pasta do seu projeto, no meu caso “c:\projetos\olamundo”, depois vamos executar o comando para o NW.js executar nosso projeto. Como estou usando o Windows, vou apontar para o nw.exe. No Linux ou no Mac é diferente, você pode olhar na documentação. Então nosso comando ficaria assim:

cd /path/to/your/app
/path/to/nw .

No meu caso:

cd c:\projetos\olamundo
c:\nwjs\nw.exe .

Tela Olá Mundo NW.js

Mais sobre o package.json

O nosso package.json está muito simples, tem apenas um nome e o caminho do arquivo index. Vou explicar um pouco sobre as configurações “window”, que servem para controlar os botões de fechar, minimizar, informar os tamanhos mínimos e máximos, se a janela pode ser dimensionada e outras configurações.

Abra o seu arquivo package.json e deixe ele como o exemplo abaixo:

{
 "name": "ola-mundo",
 "main": "index.html",
 "version": "1.0",
 "description": "Olá Mundo",
 "window": {
 "width": 400,
 "height": 300,
 "resizable": false,
 "frame": true,
 "title": "Olá Mundo",
 "show": true,
 "fullscreen": false,
 "kiosk": false,
 "icon": "icon.png"
 }
}

Execute novamente o aplicativo e veja como ficou. Abaixo, explico cada uma das configurações usadas.

name -> Nome do projeto
main -> Arquivo inicial
version -> Versão
description -> Descrição do projeto
window:
 width -> Largura da janela
 height -> Altura da janela
 resizable -> Se o tamanho da janela pode ser alterado ou não
 frame -> Quadro que envolve a aplicação com o título, ícone, botões de fechar, minimizar e maximizar
 title -> Título da janela
 show -> Se estiver como false você executa o aplicativo e ele fica em modo silencioso, 
  está rodando, mas não aparece. Fica apenas como um processo no Windows.
 fullscreen -> executa em tela cheia
 kiosk -> Executa em tela cheia e dificulta a saída da aplicação, normalmente é usado para exposições.
 icon -> Caminho para o ícone (deve estar na mesma pasta do projeto)

Você pode ver mais opções e detalhes na documentação: http://docs.nwjs.io/en/latest/References/Manifest%20Format/#window-subfields

Repositório com os fontes do primeiro artigo: https://bitbucket.org/jzonta/artigos_nwjs

Próximos artigos – Aplicativos Desktop com NW.js – Node Webkit

1º – Introdução
Uma breve introdução, fazer um “Olá Mundo” e aprender um pouco sobre as configurações iniciais.

2º – Menus
Fazer um menu nativo da aplicação e um menu HTML, capturar as ações do botão de minimizar e alterar para minimizar o aplicativo para o System Try (Aqueles ícones pequenos ao lado do relógio) e vamos adicionar menu de opções no System Try.

3º – Pacotes Node e Persistência de dados
Vamos aprender como usar os pacotes do Node.js, vamos instalar um pacote para persistir informações em um banco de dados MySql e também em um arquivo local.

4º – Preparando para produção
Como empacotar sua aplicação em um executável e adicionar um ícone para o Windows.

5º – Integração web com base de dados local
Como fazer uma integração de uma aplicação web com um banco de dados local, através de uma api REST, sem a necessidade de abertura de portas ou configurações de firewall.

Poste suas dúvidas e sugestões nos comentários!

Publicado no dia