• Sobre
  • FAQ
  • Enviar artigo
  • Anuncie aqui
quinta-feira, outubro 8, 2020
Linux Descomplicado
  • Iniciante
  • Dicas
  • Saiba Como
  • Notícias
  • Contato
No Result
View All Result
  • Iniciante
  • Dicas
  • Saiba Como
  • Notícias
  • Contato
No Result
View All Result
Linux Descomplicado
No Result
View All Result
Home Destaques

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

Ricardo Ferreira CostabyRicardo Ferreira Costa
13 de setembro de 2016
7 min read
0 0
2
283
SHARES
2.4k
VIEWS
Compartilhar no FacebookCompartilhar no Twitter

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.

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.

LeituraRecomendada

8 dicas para você aumentar sua produtividade enquanto usa o shell Bash

8 dicas para você aumentar sua produtividade enquanto usa o shell Bash

19 de setembro de 2019
Oracle cria o primeiro sistema operacional autônomo do mundo, o Autonomous Linux

Oracle cria o primeiro sistema operacional autônomo do mundo, o Autonomous Linux

18 de setembro de 2019

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 Electron – framework 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.

RECOMENDO QUE LEIA:
Atom – alternativa open source ao Sublime Text
Quais são as distribuições Linux recomendadas para desenvolvedores frontend e backend?
Rambox – ferramenta open source que reúne mais de 30 serviços de mensagens em um único local

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

{
  "name": "electron-olamundo",
  "version": "0.1.0",
  "main": "main.js",
  "description": "Um aplicativo simples para demonstração no blog Linux Descomplicado",
  "author": "linuxdescomplicado",
  "scripts": {
    "start": "electron main.js"
  }
}

Index.html

index-html

Main.js

const electron = require('electron');
 
// Módulo utilizado para controlar o ciclo de vida da aplicação
const app = electron.app;
 
// Módulo para criar uma janela nativa do seu sistema operacional 
const BrowserWindow = electron.BrowserWindow;
 
// ATENÇÃO: Se não existir uma referência global para a janela da aplicação,
// ela será fechada automaticamente quando o objeto for pego pelo Garbage Collector
let mainWindow;

app.on('ready', function() {
 
    // Uma das opções que é possível definir ao criar uma janela, é o seu tamanho
    mainWindow = new BrowserWindow({width: 800, height: 600});
 
    // Depois apontamos a janela para o HTML que criamos anteriormente
    mainWindow.loadURL('file://' + __dirname + '/index.html');
 
    // Escutamos para quando a janela for fechada
    mainWindow.on('closed', function() {
        // Remove a referência que criamos no começo do arquivo
        mainWindow = null
    });
});

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

electron main.js

primeira-aplicacao_electron

MAIS INFORMAÇÕES
Artigo: Desenvolvendo aplicações desktop com Electron
Introdução ao 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
/usr/local/bin/nativefier -> /usr/local/lib/node_modules/nativefier/lib/cli.js
/usr/local/lib
└─┬ [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 

[
...
]

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

MAIS INFORMAÇÕES
Site Oficial – Electron
GitHub Oficial – Electron
Documentação Oficial Electron – PT_BR

Gosta de Linux?! Receba materiais exclusivos!

Inscreva-se gratuitamente e receba, com exclusividade, postagens e materiais ocultos para o público em geral. Inclusive, promoções e novidades em primeira mão!

Entrar na lista de e-mails
Ricardo Ferreira Costa

Ricardo Ferreira Costa

Fundador do Linux Descomplicado. Há mais de 8 anos trabalha com sistemas Linux, desde desktops a servidores. Aprecia temas voltados para novas tecnologias, internet, Linux, redes de computadores; informática em geral. Sempre em busca de novos conhecimentos. Preza por conteúdo de qualidade e autoexplicativo.

Related Posts

8 dicas para você aumentar sua produtividade enquanto usa o shell Bash
Dicas

8 dicas para você aumentar sua produtividade enquanto usa o shell Bash

19 de setembro de 2019
Oracle cria o primeiro sistema operacional autônomo do mundo, o Autonomous Linux
Noticias

Oracle cria o primeiro sistema operacional autônomo do mundo, o Autonomous Linux

18 de setembro de 2019
Em 2020, uma conferência sobre Linux ocorrerá em Redmond – sede da Microsoft
Noticias

Em 2020, uma conferência sobre Linux ocorrerá em Redmond – sede da Microsoft

9 de setembro de 2019
Projeto Manjaro em processo de mudanças
Noticias

Projeto Manjaro em processo de mudanças

8 de setembro de 2019
Pesquisadores identificam novo ransomware direcionado a servidores Linux
Noticias

Pesquisadores identificam novo ransomware direcionado a servidores Linux

7 de setembro de 2019
Desenvolvedores do LibreOffice se unem para melhorar o suporte a arquivos PPT / PPTX
Noticias

Desenvolvedores do LibreOffice se unem para melhorar o suporte a arquivos PPT / PPTX

4 de setembro de 2019

Últimas novidades

Oracle cria o primeiro sistema operacional autônomo do mundo, o Autonomous Linux

Oracle cria o primeiro sistema operacional autônomo do mundo, o Autonomous Linux

by Ricardo Ferreira Costa
18 de setembro de 2019
0

A Oracle proporcionou um grande marco na estratégia autônoma da empresa com a disponibilidade do Oracle Autonomous Linux. Ele, juntamente...

Em 2020, uma conferência sobre Linux ocorrerá em Redmond – sede da Microsoft

Em 2020, uma conferência sobre Linux ocorrerá em Redmond – sede da Microsoft

by Ricardo Ferreira Costa
9 de setembro de 2019
0

Uma conferência sobre Linux na sede da Microsoft não está muito longe de acontecer... Hayden Barnes, CEO e fundador da...

Projeto Manjaro em processo de mudanças

Projeto Manjaro em processo de mudanças

by Ricardo Ferreira Costa
8 de setembro de 2019
0

Iniciado como um projeto apaixonado, por 3 caras ambiciosos, em 2011, o Manjaro evoluiu rapidamente para se estabelecer como uma...

Pesquisadores identificam novo ransomware direcionado a servidores Linux

Pesquisadores identificam novo ransomware direcionado a servidores Linux

by Ricardo Ferreira Costa
7 de setembro de 2019
0

Um novo tipo de Ransomware está sendo divulgado por hackers na web e os pesquisadores deram o nome de "Lilocked...

Desenvolvedores do LibreOffice se unem para melhorar o suporte a arquivos PPT / PPTX

Desenvolvedores do LibreOffice se unem para melhorar o suporte a arquivos PPT / PPTX

by Ricardo Ferreira Costa
4 de setembro de 2019
0

LibreOffice é uma suíte office completa e uma excelente opção para os “concorrentes” diretos, bem como o MS Office. Pois,...

Load More

Publicaçõesmais recentes

8 dicas para você aumentar sua produtividade enquanto usa o shell Bash
Dicas

8 dicas para você aumentar sua produtividade enquanto usa o shell Bash

by Ricardo Ferreira Costa
19 de setembro de 2019
2

Se sua rotina no Linux é definida por executar comandos para agilizar suas operações, essas dicas podem ser muito úteis...

Read more
Oracle cria o primeiro sistema operacional autônomo do mundo, o Autonomous Linux
Noticias

Oracle cria o primeiro sistema operacional autônomo do mundo, o Autonomous Linux

by Ricardo Ferreira Costa
18 de setembro de 2019
0

A Oracle proporcionou um grande marco na estratégia autônoma da empresa com a disponibilidade do Oracle Autonomous Linux. Ele, juntamente...

Read more
Em 2020, uma conferência sobre Linux ocorrerá em Redmond – sede da Microsoft
Noticias

Em 2020, uma conferência sobre Linux ocorrerá em Redmond – sede da Microsoft

by Ricardo Ferreira Costa
9 de setembro de 2019
0

Uma conferência sobre Linux na sede da Microsoft não está muito longe de acontecer... Hayden Barnes, CEO e fundador da...

Read more
Projeto Manjaro em processo de mudanças
Noticias

Projeto Manjaro em processo de mudanças

by Ricardo Ferreira Costa
8 de setembro de 2019
0

Iniciado como um projeto apaixonado, por 3 caras ambiciosos, em 2011, o Manjaro evoluiu rapidamente para se estabelecer como uma...

Read more
Pesquisadores identificam novo ransomware direcionado a servidores Linux
Noticias

Pesquisadores identificam novo ransomware direcionado a servidores Linux

by Ricardo Ferreira Costa
7 de setembro de 2019
0

Um novo tipo de Ransomware está sendo divulgado por hackers na web e os pesquisadores deram o nome de "Lilocked...

Read more
Desenvolvedores do LibreOffice se unem para melhorar o suporte a arquivos PPT / PPTX
Noticias

Desenvolvedores do LibreOffice se unem para melhorar o suporte a arquivos PPT / PPTX

by Ricardo Ferreira Costa
4 de setembro de 2019
0

LibreOffice é uma suíte office completa e uma excelente opção para os “concorrentes” diretos, bem como o MS Office. Pois,...

Read more
Load More

Mantenha-se conectado

  • Área Exclusiva 200 Membros
  • 23k Fãs
  • 8k Seguidores
  • 500 Leitores
  • 100 Seguidores
  • 1k Inscritos
  • 2k Leitores

Quer receber as novidades mais recentes no seu e-mail? Informe-o no campo de e-mail e clique em Assinar! Mais de 2000 já se inscreveram

*Sem spam, eu prometo :).

ATENÇÃO
Os comentários abaixo são de inteira responsabilidade de seus respectivos autores e não representam, necessariamente, a opinião do Linux Descomplicado.

Discussion about this post

O Linux Descomplicado nasceu, em 2011, com o intuito de trazer informações relevantes e promover fácil acesso a todos usuários interessados em aprender a usar o sistema Linux, independentemente se está iniciando ou tem certa experiência com Linux.

Participe

  • Publique seu artigo
  • Login como articulista
  • Pesquisa – sobre os leitores

Editorial

  • Contato
  • Anuncie aqui
  • Política de privacidade

Newsletter

Quer receber as novidades mais recentes no seu e-mail? Informe-o no campo de e-mail e clique em Assinar! Mais de 2000 já se inscreveram

*Sem spam, eu prometo :).

Promoções e materiais exclusivos!

Cadastre-se gratuitamente
  • Sobre
  • FAQ
  • Anuncie aqui
  • Enviar artigo
  • Política de privacidade
  • Termos de uso

CC BY-NC-SA 4.0 Copyleft | Compartilhe livremente! Você só precisa informar o autor e criar conteúdo com a mesma licença para poder usá-lo. 2011-2019 Linux Descomplicado

  • Login
No Result
View All Result
  • Iniciante
  • Dicas
  • Saiba Como
  • Noticias

CC BY-NC-SA 4.0 Copyleft | Compartilhe livremente! Você só precisa informar o autor e criar conteúdo com a mesma licença para poder usá-lo. 2011-2019 Linux Descomplicado

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

* Ao cadastrar-se, você estará automaticamente ciente e concordando com Política de Privacidade e Termos de uso do site.
All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In