Pré-requisitos:
1. Node.js
2. MySQL
PARTE 01 - Instalação, Configuração e Entendimento do Projeto
Primeiro vamos usar o Quick Start para criar uma aplicação rápida do Electron. Essa aplicação nos fornecerá uma estrutura inicial para o projeto.
Clone o repositório Quick Start:
$ git clone
https://github.com/electron/electron-quick-start
Entre no repositório:
$ cd electron-quick-start
Instale as dependências e Execute pela primeira vez a aplicação:
$ npm install && npm start
A instalação das dependências vai ser igual ou similar a imagem abaixo:
A execução da aplicação vai ser similar a imagem abaixo:
Se analisarmos, alguns arquivos foram baixados no projeto, dentre
eles estão
main.js
,
index.html
,
package.json
e a pasta
node_modules
. Vamos falar um pouco sobre cada um deles agora.
main.js
Neste arquivo é configurado para nós a maioria dos recursos necessários para o início de um projeto, sendo este simples ou não. Algumas destas configurações são o tamanho da janela da aplicação, o caminho para a primeira tela, dentre outras coisas.
index.html
Este arquivo é a página, ou a tela (uma vez que estamos falando de uma aplicação desktop), inicial da aplicação. Nela você pode criar um design e alguma interação inicial para outras telas usando de recursos como CSS, Bootstrap, dentre outros, como se estivesse criando uma aplicação Web.
package.json
Todas as dependências necessárias que surgirem durante o
desenvolvimento do seu projeto você pode instalar por este arquivo
executando o comando
npm install
. Por exemplo, suponha que você vá trabalhar com MySQL, então você
vem até este arquivo e em “devDependencies” adiciona
"mysql": "*"
, com isto a última versão do MySQL é adicionado na sua pasta
node_modules
e fica disponível para ser usado por você no projeto usando o
comando
require(“mysql”);
.
node_modules
Nesta pasta ficam instalados todas as dependências do projeto, como por exemplo o MySQL que foi falado no tópico anterior.
PARTE 02 - Criando uma aplicação simples
Agora chegou o momento de brincar um pouco com Electron. Vamos criar um visual mais bonito para a tela inicial da aplicação e criar um cadastro simples usando o banco MySQL. No meu exemplo vou fazer o uso de Bootstrap e JQuery mas os mesmos não são obrigatórios.
Primeiro vamos criar duas pastas para que o projeto fique mais
organizado e modularizado. As pastas são
public
, onde ficarão os arquivos de CSS e JavaScript, e
views
, onde ficarão as demais telas da aplicação.
Também é necessário instalar o MySQL para que a conexão com o
banco de dados seja possível.
Para instalar o MySQL
adicione no arquivo
package.json
a dependência
"mysql": "*"
. O mesmo irá ficar como a imagem abaixo. Posteriormente execute o
comando
npm install
para que a dependência enfim seja instalada.
No arquivo
index.html
vamos criar um formulario de cadastro.
Repare que no fim do formulário, mais precisamente no
button
tem uma chamada à função
realizarCadastro()
quando o botão é clicado. Vai ser essa função que vai realizar
alguns procedimentos necessários para que aqueles dados digitados
na tela sejam salvos no banco de dados.
OBSERVAÇÃO: O Bootstrap está sendo utilizado neste formulário.
O próximo passo então é criar um arquivo JavaScript onde iremos implementar a função de cadastro.
Antes de criar o arquivo em si vamos criar as pastas de
CSS
e
JS
(JavaScript) assim como a imagem abaixo.
Dentro da pasta
js
vamos criar mais duas pastas, são elas
bd
, onde vão ficar os futuros arquivos de configuração do banco, e
controllers
, onde ficará os arquivos de controle da aplicação.
Finalmente, dentro de
controllers
vamos criar o arquivo
controller.js
onde irá ser implementado a função de cadastro.
Na imagem abaixo mostro como a função vai ficar.
Agora vou mostrar o passo-a-passo necessário para que seja possível o cadastro de um usuário.
Primeiro criamos o arquivo de conexão com o banco dentro da pasta
bd
chamado
ConexaoBanco.js
.
O próximo arquivo irá se chamar
UsuarioDAO.js
. É nele que irá ser implementado todas as funções que irão se
comunicar com o banco. Exemplos: Salvar, Deletar, Atualizar,
Dentre outros. No nosso exemplo vamos fazer somente o Salvar.
Para complementar o passo anterior vamos criar o arquivo
Usuario.js
que irá ser o objeto usuário do projeto (Similar ao model do MVC).
Por último vamos fazer o arquivo e a respectiva função que é chamada na tela inicial (index.html).
Vamos agora criar a base e uma tabela no banco MySQL.
No arquivo
index.html
é necessário importar os scripts criados por nós para que todas as
funções necessárias funcionem corretamente.
Vamos agora executar nossa aplicação. Para isso execute o comando
npm start
.
Fazendo um cadastro.
Olhando se deu certo no banco de dados.
FIM!
Bom, espero que esse tutorial ajude á você a iniciar com seus primeiros projetos com Electron e respectivamente Node.js. Quaisquer dúvidas pode entrar em contato comigo pelo meu email que está na página inicial do meu GitHub. Obrigado e até mais!