NW.js , anteriormente conhecido como node-webkit, está entre os favoritos da comunidade Alternativas eletrônicas para desenvolvimento de aplicativos nativos. Como seu concorrente, o NW.js também permite a configuração fácil de aplicativos de plataforma cruzada para desktop simplesmente usando o trio principal de HTML, CSS e JavaScript.
Você codifica como se estivesse criando qualquer aplicativo da web comum com suas ferramentas favoritas (React, Angular, Less, webpack etc.) e, no final, o NW.js se encarrega de traduzir tudo, desde os técnicos da web até os nativos.
Muitos aplicativos já adotaram o NW.js como sua estrutura de desenvolvimento híbrida. E tudo isso é possível devido ao Chromium, o mesmo navegador de código aberto de propriedade do Google que alimenta não apenas o navegador da empresa, mas também dezenas de outros projetos dependentes por aí.
Além disso, o NW.js oferece uma variedade de grandes integrações, incluindo hardware baseado em sistema operacional nativo e acesso ao sistema de arquivos, integração com o shell e muito mais.
Neste artigo, vou orientá-lo nas primeiras etapas para a implementação de um pequeno aplicativo da web executado em NW.js. Vamos direto ao assunto!
Configuração do projeto
Conforme mencionado antes, uma vez que não há necessidade de nenhuma instalação específica ou configuração especial, o NW.js oferece a flexibilidade de escolher qualquer ambiente e tecnologia de sua preferência. Você pode ter quase qualquer tipo de aplicativo da web construído em cima de sua estrutura ou biblioteca favorita em execução junto com o NW.js.
Além disso, como o projeto não fornece nenhum tipo de ferramenta de scaffolding (exceto para algumas regras específicas para formatos de manifesto, por exemplo), este tutorial explora como você criaria o projeto do zero usando a configuração mais básica: HTML, CSS e JavaScript apenas .
Portanto, como primeiro passo, certifique-se de reproduzir a mesma estrutura de pastas e arquivos demonstrada abaixo:
A pasta mais importante aqui é src , como você deve ter adivinhado. É onde você separa os arquivos principais do NW.js. Na verdade, tudo relacionado ao NW.js pertence a este arquivo.
Para alguns dos arquivos auxiliares, como imagens e favicons, você pode adicionar o que quiser.
Observe também que existem dois arquivos package.json . Isso acontece porque um src/package.json separado pode ser criado para armazenar as configurações do manifesto, conforme declarado aqui . O outro é apenas o package.json comum para lidar com as dependências do projeto e comandos de compilação.
Falando no arquivo package.json , seu conteúdo está abaixo:
{ "nome":"logrocket_nwjs_example", "versão":"1.0.0", "descrição":"Um aplicativo de demonstração para mostrar como o NW.js funciona", "main":"index.html", "janela": { "icon":"assets/icon.png", "altura": 500, "largura": 400, "redimensionável": verdadeiro, "title":"Hello World, NW.js" }, "dependências": { "bootstrap":"^ 4.6.0", "jquery":"^ 3.6.0" }
}
Você pode alterar algumas das informações como desejar, mas certifique-se de sempre ter os atributos name e version , pois eles são obrigatórios.
Em seguida, execute o seguinte comando na pasta src para baixar as dependências necessárias:
yarn install
Este comando fará o download das dependências Bootstrap e jQuery, pois você precisará delas para criar uma aparência melhor.
A largura e a altura correspondem às dimensões da tela do seu aplicativo quando ele é inicializado pela primeira vez, enquanto a propriedade resizable é importante para configurar se você permitir que os usuários redimensionem a janela do aplicativo.
A próxima parada é o conteúdo index.html . Ddd o seguinte código HTML nele:
Exemplo NW.js | principal
Essa é uma estrutura básica de Bootstrap para um componente de formulário, com os dois campos de temperatura para converter de Fahrenheit para Celsius e vice-versa.
Preste atenção à importação de CSS no início do arquivo e ao JavaScript correspondente ao Bootstrap, jQuery e ao arquivo JS principal do aplicativo, respectivamente.
O seguinte código pertence ao arquivo js/app.js :
const celsius=document.getElementById ("celsius");
const fahrenheit=document.getElementById ("fahrenheit"); fahrenheit.addEventListener ("alterar", (e)=> { convertToCelsius (e.target.value);
}); celsius.addEventListener ("alterar", (e)=> { convertToFahrenheit (e.target.value);
}); function convertToCelsius (valNum) { valNum=parseFloat (valNum); celsius.value=(valNum-32)/1,8;
} function convertToFahrenheit (valNum) { valNum=parseFloat (valNum); fahrenheit.value=valNum * 1.8 + 32;
}
Eles correspondem a cada um dos ouvintes de evento para quando os campos mudam de valor. Eles irão então acionar a conversão adequada e atualizar o campo no final.
Os estilos também são importantes para o exemplo. Além daquelas importadas do Bootstrap, você precisa de algumas regras CSS básicas para exibir o conteúdo de forma centralizada. O seguinte corresponde ao conteúdo que você deve adicionar ao arquivo style.css :
@import url ("../node_modules/bootstrap/dist/css/bootstrap.min.css"); html,
corpo { altura: 100%;
} corpo { display: flex; alinhar-itens: centro;
} Formato { preenchimento: 15px; margem: 0 automático;
}
Teste
Antes de testar esta implementação como um aplicativo de desktop NW.js real, vale a pena executar o aplicativo como um aplicativo da web comum em seu navegador. Você pode fazer isso facilmente adicionando o seguinte conteúdo ao seu arquivo index.js :
const express=require ("express");
const path=require ("path"); const app=express (); const PORT=process.env.PORT || 3000;
app.use (express.static (path.join (__ dirname,"src"))); app.listen (PORTA, ()=> { console.log ("Servidor ouvindo na porta:% d", PORTA);
});
Como ele está localizado na pasta raiz do seu projeto, você pode iniciar um servidor Express.js e servir os arquivos estáticos naturalmente.
Finalmente, vamos dar uma olhada no outro arquivo package.json , que também está localizado na pasta raiz do projeto. Este é o conteúdo que você deve adicionar a ele:
{ "nome":"logrocket_nwjs_example", "versão":"1.0.0", "descrição":"Um aplicativo de demonstração para mostrar como o NW.js funciona", "privado": verdadeiro, "scripts": { "start":"node index.js", "start-nw":"nw src/", "build-nw":"nwbuild--platforms win64, osx64, linux64--buildDir dist/src/" }, "dependências": { "expresso":"^ 4.17.1", "nw": "^ 0,52,0", "nw-builder":"^ 3.5.7" }
}
Aqui, você pode ver as dependências relacionadas ao próprio NW.js e ao nw-builder , que é um plug-in poderoso para ajudar na geração de instaladores específicos do sistema operacional.
Certifique-se de executar também o comando yarn install na pasta raiz para baixar esses pacotes npm.
Depois disso, execute o seguinte comando para iniciar o aplicativo por meio do servidor Express:
início do fio
O aplicativo estará disponível em http://localhost: 3000/ . Você verá a seguinte tela ao acessá-lo:
Vá em frente e teste os dois campos para verificar se eles estão convertendo e atualizando as temperaturas corretamente.
Para executar o aplicativo no modo NW.js, basta executar o seguinte comando:
yarn start-nw
Isso acionará a biblioteca NW.js para gerar tudo o que é necessário para que a tela a seguir seja exibida:
E, finalmente, para gerar qualquer instalador específico do sistema operacional, você pode executar o seguinte comando:
yarn build-nw
Este comando pode demorar um pouco porque fará o download e instalará todas as dependências necessárias.
Observe que com base nas configurações deste comando-que configuramos no arquivo package.json -ele irá gerar instaladores para Windows, Linux e macOS (64 bits) e armazená-los na pasta dist/ do seu projeto.
Você não deve alterar nenhum dos arquivos do projeto durante a execução deste comando; isso pode levar a outras inconsistências.
Dê uma olhada na saída na imagem abaixo:
Se você acessar a pasta por meio do Finder (no macOS) e executar o arquivo logrocket_nwjs_example.app , verá o mesmo aplicativo inicializando.
Conclusão
O NW.js oferece a flexibilidade de escolher livremente as ferramentas com as quais deseja trabalhar. É realmente ótimo poder criar aplicativos híbridos focando apenas na implementação da Web com a qual você já está familiarizado.
Claro, NW.js é não a única alternativa do Electron por aí , mas é uma poderoso se você deseja extrair os recursos da web em um aplicativo de desktop. Não posso terminar sem enfatizar a importância de ler os documentos oficiais para saber mais sobre o que o NW.js é capaz de.
A postagem Criando aplicativos multiplataforma com NW.js apareceu primeiro no LogRocket Blog .
