Electron e Vue (Parte-1)

Antes de começar sobre os Frameworks Electron e Vue, gostaria de dizer que as postagens foram divididas. Fiz isso para que não ficasse grande de ler. Espero que goste do material. Qualquer dúvida me mande uma mensagem em meu Facebook.

Você já imaginou desenvolver aplicações desktop de maneira simples só trabalhando com códigos web CSS, HTML e JavaScript? Se você já pensou nisso, mas nunca viu sobre algo que fale sobre isso, hoje estarei falando sobre o Electron um incrível framework desenvolvido pelo pessoal do GitHub. E para você que já conhece um pouco desse framework irei ensinar como é possível incrementar O VueJS e também listar dados vindos do Mysql. Bom sem mais delongas, vamos ao nosso post.

O Electron

Como já foi dito no parágrafo anterior, o Electron é um framework voltado para aplicações desktop. Ele foi desenvolvido a partir das tecnologias NodeJS e Chromium. Você pode criar este framework projetos para os sistemas Linux, Mac e Windows. Caso queira ler a documentação, o link é este: (link).

Primeiros Passos

Para trabalhar com o Electron é necessário ter em seu computador já instalado o NodeJS e terminal funcionando corretamente. Caso você utilize Windows, eu aconselho que baixe o CMDER e não use CMD, pois, o CMD infelizmente chega a dar uns bugs na hora de baixar pacotes e até mesmo compilar. Feito as instalações abra o seu terminal e digite os seguintes comandos: npm -i –g electron-prebuilt, aguarde até que todos os pacotes estejam baixados.

Estrutura de diretórios

No Electron temos algumas pastas que são essenciais para que nosso projeto rode 100%. São elas: node_modules onde irão conter nossos pacotes que baixaremos pelo npm como Vue e Mysql, pasta assets que criaremos para armazenar nosso CSS, JavaScript e imagens e uma chamada views que irá ter nossas páginas.

Arquivos

Index.html

O arquivo index.html irá exibir a tela inicial da aplicação. Por padrão o Electron disponibiliza um “Hello World”, para mostrar o funcionamento do Framework. Se você abrir o index.html em um editor verá que não tem nada de tão complicado. São simples chamadas de JavaScript, CSS e alguns HTML.

Package.json

O arquivo index.html irá exibir a tela inicial da aplicação. Por padrão o Electron disponibiliza um “Hello World”, para mostrar o funcionamento do Framework. Se você abrir o index.html em um editor verá que não tem nada de tão complicado. São simples chamadas de JavaScript, CSS e alguns HTML.

Exemplo do package.json

                                    {
                                        "name": "Nome-projeto",
                                        "version": "versao-gerada-automaticamente",
                                        "description": "Descricao-projeto",
                                        "main": "index.js",
                                        "scripts": {
                                          "test": "echo \"Error: no test specified\" && exit 1"
                                        },
                                        "repository": {
                                          "type": "git",
                                          "url": "Link-Github"
                                        },
                                        "keywords": [
                                          "Palavra-chave-um",
                                          "Palavra-chave-dois",
                                          "Palavra-chave-tres",
                                          "Palavra-chave-quatro",
                                          "Palavra-chave-cinco"
                                        ],
                                        "author": "Nome-Autor",
                                        "license": "ISC",
                                        "bugs": {
                                          "url": "Links-para-Issues"
                                        },
                                        "homepage": "Link-readme-Github",
                                        "dependencies": {
                                          "pacote-baixado": "Versao-usada"
                                        }
                                      }
                                

Main.js

Este arquivo em JavaScript é onde se encontra o coração de nossa aplicação. Nele são definidas larguras da janela, altura, nome da aplicação e também podemos também adicionar um ícone e retirar a barra de menu padrão que vem com Electron.