• Sobre
  • FAQ
  • Enviar artigo
  • Anuncie aqui
segunda-feira, maio 23, 2022
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

13 de setembro de 2016
7 min read
0 0
2
283
SHARES
3.6k
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

Metaverso: o que precisamos entender sobre esse conceito

Metaverso: o que precisamos entender sobre esse conceito

23 de maio de 2022
Curso Programador Full Stack JavaScript Profissional vale pena?  Devo comprar?

Curso Programador Full Stack JavaScript Profissional vale pena? Devo comprar?

13 de maio de 2022

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

Related Posts

Metaverso: o que precisamos entender sobre esse conceito
Noticias

Metaverso: o que precisamos entender sobre esse conceito

23 de maio de 2022
Curso Programador Full Stack JavaScript Profissional vale pena?  Devo comprar?
Destaques

Curso Programador Full Stack JavaScript Profissional vale pena? Devo comprar?

13 de maio de 2022
Ainda vale a pena aprender Docker ?!
Programadores

Ainda vale a pena aprender Docker ?!

13 de março de 2022
Mods ganham espaço em GTA V, mas ainda não chegam aos usuários de Linux
Noticias

Mods ganham espaço em GTA V, mas ainda não chegam aos usuários de Linux

28 de fevereiro de 2022
Conheça a Vagrant e ganhe tempo nos seus estudos
Administradores de Rede

Conheça a Vagrant e ganhe tempo nos seus estudos

17 de fevereiro de 2022
Marketing Digital: o que é SEO e qual sua importância para sua empresa?
Dicas

Marketing Digital: o que é SEO e qual sua importância para sua empresa?

10 de março de 2022

Últimas novidades

Metaverso: o que precisamos entender sobre esse conceito

Metaverso: o que precisamos entender sobre esse conceito

by Linux Descomplicado
23 de maio de 2022
0

Se um dia alguém dissesse ser possível combinar realidade virtual imersiva, MMORPG e web, isso seria chamado insanidade. No entanto,...

Mods ganham espaço em GTA V, mas ainda não chegam aos usuários de Linux

Mods ganham espaço em GTA V, mas ainda não chegam aos usuários de Linux

by Linux Descomplicado
28 de fevereiro de 2022
0

O jogo Grand Theft Auto V é um dos mais populares entre os usuários de Linux. O desempenho na plataforma...

Samsung Galaxy M52 5G: Design elegante e bateria gigante

Samsung Galaxy M52 5G: Design elegante e bateria gigante

by Linux Descomplicado
20 de outubro de 2021
0

A Samsung lançou recentemente um novo modelo na categoria intermediário premium nomercado Indiano: o Galaxy M52 5G. Ele pode ser...

O avanço da tecnologia 5G na vida dos brasileiros

O avanço da tecnologia 5G na vida dos brasileiros

by Linux Descomplicado
17 de agosto de 2021
0

O que é o 5G e como anda esta tecnologia no Brasil?

Linux se mantém estável entre os gamers que usam o sistema na Steam

Linux se mantém estável entre os gamers que usam o sistema na Steam

by Linux Descomplicado
5 de maio de 2021
0

O sistema Linux nunca foi um projeto que chamou a atenção dos fãs de games, principalmente para os usuários da...

Load More

Publicaçõesmais recentes

Metaverso: o que precisamos entender sobre esse conceito
Noticias

Metaverso: o que precisamos entender sobre esse conceito

by Linux Descomplicado
23 de maio de 2022
0

Se um dia alguém dissesse ser possível combinar realidade virtual imersiva, MMORPG e web, isso seria chamado insanidade. No entanto,...

Read more
Curso Programador Full Stack JavaScript Profissional vale pena?  Devo comprar?
Destaques

Curso Programador Full Stack JavaScript Profissional vale pena? Devo comprar?

by Linux Descomplicado
13 de maio de 2022
0

Muitas pessoas vêm me perguntando sobre o curso Programador Full Stack JavaScript Profissional. Por isso, decidi escrever sobre e falar...

Read more
Ainda vale a pena aprender Docker ?!
Programadores

Ainda vale a pena aprender Docker ?!

by Linux Descomplicado
13 de março de 2022
0

Em 2020, quando a Google decidiu definir o suporte ao Docker como 'deprecated', a partir da versão 1.20 do Kubernetes,...

Read more
Mods ganham espaço em GTA V, mas ainda não chegam aos usuários de Linux
Noticias

Mods ganham espaço em GTA V, mas ainda não chegam aos usuários de Linux

by Linux Descomplicado
28 de fevereiro de 2022
0

O jogo Grand Theft Auto V é um dos mais populares entre os usuários de Linux. O desempenho na plataforma...

Read more
Conheça a Vagrant e ganhe tempo nos seus estudos
Administradores de Rede

Conheça a Vagrant e ganhe tempo nos seus estudos

by Linux Descomplicado
17 de fevereiro de 2022
0

Vagrant é uma ferramenta open source de automação escrita em Ruby e mantida pela HashiCorp que padroniza seu trabalho e...

Read more
Marketing Digital: o que é SEO e qual sua importância para sua empresa?
Dicas

Marketing Digital: o que é SEO e qual sua importância para sua empresa?

by Linux Descomplicado
10 de março de 2022
0

Com o passar do tempo e o consequente avanço da tecnologia, que se reflete em praticamente todos os setores da...

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