Primeiras aulas do curso Electron: Crie aplicativos Desktop com as tecnologias da Web

Electron: Crie aplicativos Desktop com as tecnologias da Web

Introdução - Apresentação

Introdução - Introdução ao Electron

O que é o Electron ?

O Electron é um framework para criação de aplicações nativas para Desktop que utiliza as tecnologias Web, como o Javascript, HTML e CSS. O Electron traz diversas funções e facilidades para que você não se preocupe com as partes difíceis de interagir com o sistema operacional e permite que você foque na construção da sua aplicação!

Ele foi desenvolvido pela equipe do GitHub, pois eles queriam criar um editor de textos próprio utilizando as tecnologias da Web, que é o Atom. Mas apesar de ter um grande apoio da equipe de desenvolvedores do GitHub, ele é um projeto opensource que recebe commits de diversos desenvolvedores de todo o mundo.

Para trabalhar com as tecnologias Web o Electron utiliza por debaixo dos panos o navegador Chromium, que é o projeto Open Source em que o Google Chrome se baseia, e também usa o NodeJS como plataforma para dar acesso a todo o ecossistemas de pacotes e API's ao desenvolvedor.

Aplicativos Desktop

Apesar de hoje em dia a Web ser dominante, você e qualquer usuário comum do computador ainda passa muito tempo em aplicativos Desktop. Com toda certeza você depende de um editor de textos ou uma IDE para desenvolver seus projetos, utiliza players de música ou vídeo, ou até clientes Desktop de plataformas Web que facilitam sua vida, como é o caso da aplicação Desktop do Spotify ou do Slack.

Mesmo que para tudo citado acima a sua versão em uma página Web, as aplicações Desktop trazem vantagens de poderem interagir diretamente com o sistema operacional, ou seja podemos trocar para as aplicações utilizando ALT/CMD+TAB, podemos utilizar as notificações nativas de cada sistema, acessar o sistema de arquivos, verificar o status da rede, status da bateria/energia em casos de notebooks e utilizar atalhos globais específicos de sua aplicação. Todas essas vantagens de usabilidade trazem excelentes benefícios para o usuário quando criamos um aplicativo Desktop Nativo.

Mas por quê utilizar tecnologias Web ?

Vimos as vantagens de ter uma aplicativo Desktop, mas por que escolher tecnologias Web para criação de um é uma boa escolha? Se você parar para pensar, na maioria das empresas é bastante fácil encontrar um desenvolvedor que dominem HTML, CSS e Javascript, agora ter desenvolvedores que dominem Objective C ou Swift para desenvolver para o MacOS, C# para Windows e mais alguma específica para os sistemas Linux é bastante raro.

O fato das tecnologias Web serem mais populares e terem bastante desenvolvedores hoje em dia faz com que encontrar a mão de obra seja mais fácil, e com a ajuda do Electron conseguimos utilizar estas tecnologias para desenvolver App's Nativos para os três grandes sistemas operacionais.

Introdução - Baixando e configurando o Electron

Pré-Requisitos

Para dar ínicio ao nosso projeto com o Electron precisamos antes garantir que temos todos os pré requisitos para construir nossa aplicação. Como vimos, o Electron depende do NodeJs para funcionar, então precisamos ter o Node em nossa máquina, pelo menos na versão 6.10.

Se você ainda não tem o NodeJs instalado, basta seguir o exercício de instalação do mesmo.

Se você já tem o NodeJs instalado, você consegue ver a versão do mesmo utilizando o comando:

node -v

em seu terminal.

Versão do Node

Também precisaremos de um editor de textos, e já que o tema deste curso é o Electron, nada mais justo do que utilizar um editor de textos que foi feito com essa tecnologia, por isto neste curso o editor escolhido é o Atom.

Começando o projeto: Instalando as dependências

Crie uma pasta chamada alura-timer que será a pasta responsável por conter nossa aplicação e lá dentro vamos começar o processo de importar as dependências com o NodeJs.

Como todo bom projeto em NodeJs, precisamos primeiro iniciá-lo com o comando:

npm init

Responda as questões com um simples ENTER e o comando criará o arquivo package.json para nós.

Com o package.json criado podemos começar a importar as nossas dependências e obviamente a principal delas é o próprio Electron. Use o comando abaixo para instalar o Electron:

npm install electron@1.6.1 --save

Você verá que agora o Electron aparece como uma dependencies em seu package.json.

Utilizando o Electron

Como o Electron foi instalado como um módulo do Node podemos executá-lo de um modo fácil pelo terminal, basta adicionar um novo script no package.json para isto.

Em seu package.json, no campo scripts adicione:

//Restante do `package.json`
...
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "electron ."
},
...

Se você tentar rodar o comando npm start neste você receberá um erro dizendo: Erro lançando app sem Main

Isto acontece por que ainda não criamos um arquivo que será o ponto de partida de nossa aplicação. Crie um arquivo chamado main.js na raiz de seu projeto e altere o seu package.json para que a entrada "main" aponte para o arquivo recém criado:

//Restante do `package.json`
...
  "main": "main.js",
 ...

Agora execute novamente o comando npm start e veja que o terminal ficará travado:

Electron travando terminal

Isso significa que o Electron conseguiu achar nosso arquivo main.js e executou-o com sucesso, porém como ele não tem nada dentro dele, o terminal nada exibe.

Altere o main.js e coloque uma pequena mensagem de Olá Mundo:

//main.js
console.log("Olá Mundo");

E execute novamente o npm start:

Olá mundo com Electron

Veja que agora nossa mensagem é exibida. O setup inicial está completo, agora vamos mergulhar de cabeça em tudo que o Electron pode nos oferecer!

Sobre o curso Electron: Crie aplicativos Desktop com as tecnologias da Web

O curso Electron: Crie aplicativos Desktop com as tecnologias da Web possui 297 minutos de vídeos, em um total de 102 atividades. Gostou? Conheça nossos outros cursos de Frameworks MVC em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Frameworks MVC acessando integralmente esse e outros cursos, comece hoje!

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas