Criando aplicativo com Electron – Gerando executável

Olá, há alguns dias vimos aqui no Clube dos Geeks como desenvolver um Aplicativo Desktop com NWjs, AngularJS, Bootstrap e Sqlite. Hoje ao invés de NWjs usaremos Electron, que é uma ferramenta semelhante desenvolvida pela Atom.

Se você só precisa saber como gerar o executável Clique aqui!

Também já desenvolvemos um pequeno aplicativo com Electron aqui no Clube dos Geeks, um Mecanismo de busca personalizada do Google com Electron.

Imagino que se você veio a este tutorial não está interessado em saber a história do Eletron, ou quem desenvolveu, blá, blá. Se estiver veja aqui. Vamos ao que interessa:

Downloads

Para iniciar faça download das tecnologias necessárias:

Estrutura de pastas e arquivos

Os arquivos e pastas de nossa aplicação serão organizadas da seguinte maneira:

Sem título-2.fw

Banco de dados

Abra o SQLiteStudio, crie um banco de dados salvando o arquivo na pasta model da sua aplicação com o nome database.db.

Conectado ao banco de dados crie a seguinte tabela:

Usaremos o campo ativo para informar se a pessoa está ativa ou não, se não está ativa está excluída.

A aplicação

package.json

Para iniciar, criaremos o arquivo package.json da seguinte maneira:

Note que no campo script estão os comandos para gerar o executável do nosso programa em diversas plataformas e arquiteturas. Mais a frente falaremos mais um pouco sobre isso.

Instalando dependências

Para instalar as dependências abra seu terminal navegue até a pasta da sua aplicação usando o comando cd /pasta/da/sua/aplicacao, (exemplo c:/app) e execute o comando npm install. 

A instalação pode demorar um pouco dependendo de sua conexão com a internet.

main.js

O arquivo main.js é o arquivo principal de uma aplicação electron, pois ele quem cria a aplicação no sistema e controla seu ciclo de vida. Veja a estrutura do arquivo:

Note que a linha 23 está comentada, mas se você quiser pode tirar o comentário. O comando irá mostrar o devTools com console, inspecionar elemento, etc.

index.html

Este arquivo será o principal da nossa aplicação, e deve ter o seguinte conteúdo:

Observe que na linha 1, usamos o atributo ng-app, que serve para instanciar a aplicação, para que o angular possa trabalhar.

app.js

Criaremos agora o arquivo responsável por iniciar e direcionar as rotas do angular, veja:

services/dbService.js

Este arquivo será responsável pela conexão com o banco de dados, busca e consolidação das informações.

Como a biblioteca para SQLite – desenvolvida por nós – já tem funções de inserção e edição que facilita as querys, este service irá retornar apenas a instância da biblioteca. Veja:

controllers/pessoaControllers.js

Este arquivo, como o nome sugere, faz o controle da view, trata as informações, busca e salva no banco de dados.

Como você provavelmente vai querer criar outros CRUD’s, deve tomar esse controller como base para os outros, assim como a view, que falaremos mais abaixo.

Veja o arquivo:

views/pessoa.html

Agora, na pasta views criaremos nosso arquivo de visão, onde os dados serão mostrados.

Aqui nos usamos a diretiva dirPagination para fazer e a paginação dos dados na tabela. Veja:

Executando

Se você voltar ao arquivo package.json, verá que entre os scripts está o start, que é o que usaremos para executar nossa aplicação.Então volte ao terminal e execute:

Gerando executável

Também nos scripts do arquivo package.json estão os comandos para gerar os executáveis. Para isso usamos o módulo electron-packager. Veja como empacotar:

Windows

Para gerar o executável para Windows com arquitetura ia32, execute:

*Neste caso deve se considerar a estrutura do nosso arquivo package.json

ou

Neste caso altere myApp para o nome de sua aplicação.

x64

*Neste caso deve se considerar a estrutura do nosso arquivo package.json

ou

Linux

Para empacotar o seu programa para ser executado em sistemas operacionais Linux execute um dos os comandos a seguir no seu terminal usando linux32 ou ia32 para arquitetura 32 bits e linux64 ou x64 para arquitetura 64 bits.

*Neste caso deve se considerar a estrutura do nosso arquivo package.json

ou

Mac OS

Para empacotar sua aplicação para rodar em OSX execute um dos comandos a seguir no seu terminal:

*Neste caso deve se considerar a estrutura do nosso arquivo package.json

ou

GitHub

Este exemplo também está disponível no GitHub, veja aqui!

Prévia

Veja como nossa aplicação ficou!

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

12 respostas

  1. Dani

    Ao executar o aplicativo não carrega nada ? , fiz varias alterações no packager.json e nada, cara vc executou esse sisteminha que vc fez.

    Responder
  2. Daniel Carvalho

    Boa Tarde. Primeiramente meus parabéns não só pelo artigo mas sim por sua dedicação com o site Clube dos geeks. Já fiz e refiz e infelizmente não consigo concluir. Instalei todos pacotes e mesmo assim da erro. Segue abaixo:

    Error: Bootstrap’s JavaScript requires jQuery bootstrap.js:8:9
    ReferenceError: require is not defined[Learn More] app.js:1:34
    TypeError: app is undefined[Learn More] pessoaController.js:2:1
    TypeError: app is undefined[Learn More]

    Responder
  3. Pablo

    Hi Jayr, I was testing this example. It works perfectly with “npm start” but when I run it once packaged as executable, it gives an error in the console: no such file or directory, open: ‘model/database.db’

    The path to the db in dbService.js : var db = sqlite.connect(‘model/database.db’);
    Has to be modified to something else?

    Thanks in advance!

    Pablo

    Responder

Deixe uma resposta

Seu e-mail não será publicado.