Saiba como criar aplicações desktop multiplataforma usando JavaScript, HTML e CSS

Aplicações híbridas são conceitos que fazem parte do cotidiano de muitos desenvolvedores mobile/web. Um mesmo fluxo de desenvolvimento pode gerar uma aplicação capaz de rodar em diversas plataformas mobile (IOS, Android). Quando falamos em aplicações desktop multiplataforma nos deparamos com diversas variáveis, bem como: arquitetura do sistema operacional, variáveis de ambiente, peculiaridades do sistema e outras. Assim, saiba como criar aplicações desktop multiplataforma, num único fluxo de desenvolvimento, usando JavaScript, HTML e CSS capazes de rodar normalmente em Linux, Windows e Mac.

AUMENTE SUA PRODUTIVIDADE!
Crie e administre aplicações entre ambientes diferentes. Tenha agilidade e padronização na entrega dos serviços de TI. E, assim, ganhe tempo e seja eficiente na entrega desses serviços. Saiba como

Contextualizando

Desenvolvimento de aplicações desktops requerem o uso de tecnologias muito peculiares que se afastam um pouco das metodologias usadas em tecnologias web (percentual maior de profissionais de programação), tais como: linguagens de marcação, folhas de estilos e server-sides. Na maioria das vezes, tecnologias como C++, C#, VB.NET, JavaFX, Qt, e algumas outras, são exemplos de tecnologias que devem ou podem ser usadas para criação de aplicações desktops.

desktop_blueprint-wallpaper-1024x576-1

Diante dessa situação, imagine o quanto de linguagens de programação que o profissional/estudante da área têm que aprender a usar com destreza para desenvolver, especificamente, para ambientes desktops. Agora, num momento onde os softwares são “vendidos” como serviço através da web com uso massivo de linguagens como JavaScript – onde qualquer programador (ou quase todos) usam, é “nadar”, literalmente, “contra a maré” :/

Então, assim surgiu o Electronframework open source criado para permitir que o desenvolvimento de aplicações desktop fosse facilitado usando tecnologias web amplamente utilizadas, como: JavaScript, HTML e CSS. Tornando o fluxo de desenvolvimento muito mais fácil.

Electron

electron

Criado pela equipe do Github, o Electron, conhecido no começo como Atom Shell, foi criado usando tecnologias como o Node.js (engine JavaScript) e o Chromium (navegador open source). Amplamente aceito pela comunidade de desenvolvedores. Em produção em diversos projetos, bem como: editor Atom e outros, como o Slack, WordPress Desktop e o Visual Studio Code. Veja mais aqui aplicações criadas usando o Electron.

Em outras palavras, se você já desenvolve para a web; agora você, também, poderá desenvolver uma aplicação desktop. Já para você que não desenvolve nenhum tipo de software, mas deseja criar uma aplicação desktop a partir de uma aplicação web; com o Electron também é possível 😉

Entre os diversos motivos que posso mostrar do porquê de usar o Electron, destaco:

  • Multiplataforma – programa desktop criado com o Electron funciona em Windows, Mac e Linux;
  • Uso de tecnologias web – aplicações são desenvolvidas com HTML, JavaScript e CSS;
  • Open source – criado e mantido pelo GitHub;
  • Nativo – menus e notificações nativas;
  • Pacote completo – criação de instaladores para sua aplicação.

Criar aplicações desktop multiplataforma

IMPORTANTE
Para o desenvolvimento de sua própria aplicação desktop, assumo que você já tem conhecimentos básicos prévios em HTML, CSS, JavaScript, Node.js e npm. Caso não os tenha, veja como converter um serviço web, já existente, em uma aplicação desktop nativa – muito interessante para usuários sem conhecimento técnico nessas linguagens.

Para começo de conversa, vou mostrar os primeiros passos para começar a trabalhar com o Electron e desenvolver aplicações desktop. Além do Node.js, é necessário que você também instale o pacote electron-prebuilt:

Meu ambiente de testes foi o OpenSUSE Tumbleweed.

sudo zypper install nodejs npm

No Debian e derivados:

sudo apt-get install nodejs npm
sudo npm install -g electron-prebuilt

Para uma aplicação bem simples, é preciso somente de três arquivos básicos:

1. package.json: arquivo que descreve a aplicação, características e dependências;
2. main.js: arquivo de inicialização da aplicação. Nele vão as configurações do tipo: tamanho da tela, posicionamento, manipular eventos do sistema, etc…
3. index.html: página HTML que será nossa view inicial para o exemplo abaixo.

Pacakge.json

Index.html

index-html

Main.js

Por fim, para executar essa aplicação; execute:

electron main.js

primeira-aplicacao_electron

Converter um serviço web em uma aplicação desktop nativa

Agora, mostrarei como converter um serviço web em uma aplicação desktop nativa. Com o Electron, isso é simples de fazer 😉 Mas, o qual é a necessidade de criar aplicações desktops a partir de serviços web já existentes?!

Para usar uma aplicação web você só precisa de um navegador web. Cada serviço web requisitado é convertido em abas no seu navegador; e isso causa desconforto (diversas abas abertas) e lentidão no navegador/sistema. Criar aplicações desktop a partir de serviços web, já existente, garante uma melhor integração com a área de trabalho do sistema e pode poupar alguns recursos computacionais; pois você poderá acessar sites/serviços web específicos isoladamente.

Em resumo, isso é possível porque o Electron permite encapsular aplicações web para o uso em ambiente desktop.

Mão na massa

Meu ambiente de testes foi o OpenSUSE Tumbleweed.

Primeiramente, instale os pacotes do Node.js:

sudo zypper install nodejs npm

No Debian e derivados:

sudo apt-get install nodejs npm

Agora, você deve instalar o utilitário do Node.js que irá fazer “a mágica” acontecer:

sudo npm install nativefier -g

Pronto!! A seguir você pode começar a criar aplicações desktops a partir de serviços web já existentes. Basta executar:

nativefier linuxdescomplicado.com.br

Onde,

linuxdescomplicado.com.br poderá ser substituído pelo site/serviço web que desejar 😉

Em resumo, esse processo, usando o pacote nativefier, encapsula qualquer site/serviço web de forma independente, mantendo as suas características e atribuindo-lhe um ícone e nome no ambiente desktop do seu sistema. O executável junto com outros arquivos, aparecerão em uma pasta com o mesmo nome do site na pasta “home” do usuário.

O nativefier usa o Electron para criar os executáveis das aplicações encapsuladas e torná-las multiplataforma – para uso no Windows, OSX e Linux.

walkthrough

Exemplo do encapsulamento do WhatsApp Web – Nativefier


Via | MuyLinux | BlogAlexl

Ricardo Ferreira

Ricardo Ferreira

Fundador do Linux Descomplicado - LD.

Sempre em busca de novos conhecimentos, preza por conteúdo de qualidade e auto-explicativo. Por isso, persiste em criar um site com artigos relevantes para todos os leitores do Linux Descomplicado!
Ricardo Ferreira

Comentários

comentários


VOCÊ TAMBÉM PODERÁ LER...

  • delchibruce

    Excelente, Ricardo! vou tentar natificar uns aqui!
    vlw

  • Samuel Ramos

    Muito bom!