/Electron-Documentation-One

Read documentation Electron create application desktop com html css javascript

Primary LanguageShell

Link Top de Pesquisa de Markdown Link da Documentação do Electron

Logo

Documentando a Aplicação

O que é Electron? O Electron é um framework de código aberto para desenvolvimento de aplicações desktop utilizando tecnologias web (HTML, CSS e JS). Originalmente criado por Cheng Zhao, é atualmente mantido pela equipe de desenvolvimento do Github e por toda a comunidade.

Atualmente na versão 4.0, e mantido sob a licença MIT, o Electron permite a criação de aplicações multiplataforma (Windows, macOS e Linux) utilizando uma mesma tecnologia e com interfaces nativas. Por utilizar JavaScript, possui diversos adeptos pelo mundo, já que esta linguagem é amplamente utilizada.

Da Criação do Aplicativo

  1. Aplicativos Electron seguem a mesma estrutura geral que outros projetos Node.js. Comece criando uma pasta e inicializando um pacote npm.
  • PONTO DE ATENÇÃO: Para esssa aplicação implementei algumas melhorias no script shell passando algumas responsabilidades criacionais para o próprio script resolver.
  • O script Sheel que contem essas melhorias é o 1-Passo-1-Global.sh que terá a codificação criacional. Segue abaixo a forma de executar o arquivo 1-Passo-1-Global.sh:

1.1. Vale apenas ressaltar que dentro da pasta root (principal) do projeto, inicialmente terá os seguintes arquivos conforme ilustração abaixo:

Estrutura Inicial do Projeto

Electron-Marcador
      |1-Passo-1-Global.sh
      |e.png
      |estruturaInicialProjeto.png
      |iApp.sh
      |README.md

No terminal dentro da pasta root (principal) do projeto, onde se encontram os arquivos já mencionado e ilustrado acima. Execute o Script shell que irá efetuar os procedimentos necessário para criar a estrutura inicial do projeto electron.

Digite o código abaixo e precione ENTER.

bash 1-Passo-1-Global.sh

1.2. Na execução do script, em uma das rotinas de execução, o mesmo irá solicitar para que configuremos o arquivo package.json responsável pelas configuraões e dependência do App. O comando que o script vai executar de forma automática por meio de uma função shell é o abaixo ilustrado :

npm init

PONTO DE ATENÇÃO:O comando interativo init solicitará que você defina alguns campos em sua configuração. Existem algumas regras a seguir para os propósitos deste tutorial:

entry point deve ser main.js. author e description podem ser de qualquer valor, mas são necessários para o pacote do aplicativos.

Seu arquivo package.json deve ser parecido com isto:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

Abaixo teremos a ilustração em formato de imagem elucidando a forma de preenchimento das perguntas geradas pelo comando criação do arquivo package.json:

Perguntas

1.3. Abaixo teremos uma ilustração de como irá ficar a estrutura de pastas e arquivos após a a realização de todos os passos acima relacionados:

Ilustração

1.4. Estrutura inicial pronta agora pegamos o arquivo iApp.sh (shell) e copiamos para dentro da pasta App e efetuamos sua execução conforme ilustramos logo abaixo:

Ilustração

bash iApp.sh
  • Serão executadas funções shell que irá criar arquivos e pastas e instalação de dependências do projeto.

Dentro da Pasta App no arquivo package.json iremos fazer a seguinte alteração na chave script.

INICIALMENTE A CHAVE SE ENCONTRA DA SEGUINTE FORMA:
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

MODIFICAR PARA:

  "scripts": {
    "start": "electron ."
  },