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 -> https://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 -> https://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 https://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:
Crie um novo arquivo package.json, com o código abaixo e salve na mesma pasta do 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:projetosolamundo”, 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:
No meu caso:
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:
Execute novamente o aplicativo e veja como ficou. Abaixo, explico cada uma das configurações usadas.
Você pode ver mais opções e detalhes na documentação: https://docs.nwjs.io/en/latest/References/Manifest%20Format/#window-subfields
Repositório com os fontes do primeiro artigo: https://bitbucket.org/jzonta/artigos_nwjs
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!