🚯 👨🏾‍🔧 👩🏽 Escrevendo um aplicativo gráfico em Electron JS (Iniciar: Criando uma janela) 🙌🏻 🔟 👇🏾

Saudações! Se você leu este artigo, provavelmente está extremamente relutante em consultar a documentação oficial (e em vão. Está escrito em detalhes e tem uma tradução para o russo) e você veio em busca de uma solução simples para o seu problema - escrever um aplicativo multiplataforma para um computador usando apenas tecnologias da web. Eu sugiro não atrasar e começar imediatamente. Mas, como este é o primeiro artigo, acho que vale a pena dizer em poucas palavras o que é Electron JS e para que serve.

imagem

A documentação oficial diz:

Se você pode fazer um site, você pode fazer um aplicativo de desktop. Electron é uma estrutura para construção de aplicativos nativos com tecnologias da web como JavaScript, HTML e CSS. Ele cuida das partes difíceis, para que você possa se concentrar nos principais elementos de seu aplicativo.

Os aplicativos desenvolvidos com o Electron são sites regulares executados por meio do navegador da web Chromium pré-instalado. Além dos padrões clássicos da API HTML5, é possível aplicar toda a lista de módulos Node.js e recursos exclusivos do Electron. Módulos de serviço fornecem acesso ao sistema operacional.

Sim, a princípio seria bom que você se familiarizasse com a forma como os sites são criados. Não vou me concentrar nos detalhes do código HTML e CSS.

- , Electron JS. : Skype, Visual Studio Code, Slack .

.

. Visual Studio Code.

,

npm init

( , ).

npm Node.JS

Node.JS npm init , Node.JS . Node.JS . LTS . MacOS Windows , "

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

"start": "electron ."

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

, . . Electron JS. Electron :

npm install -g electron

npm install electron -save

— package-lock.json — node_modules. . , . package.json :

  "main": "index.js"

, "index.js". :

const path = require('path');
const url = require('url');
const {app, BrowserWindow} = require('electron');

let win;

function createWindow() {
    win = new BrowserWindow({
        width: 700,
        height: 500,
    });

    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    app.quit();
});

, , :

"width" "height" . 700 500 .
pathname: path.join(__dirname, 'index.html') , "index.js" , "index.html"
- Chromium win.webContents.openDevTools(); Chrome DevTools.

( c ).

index.html <body> , -, Hello world:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

- . :

npm start

, start package.json. . . :

imagem

, . , , , Web , .

P.S. , , , Electron, "" Electron`, ( ) , .

Escrevendo um aplicativo gráfico em Electron JS (Iniciar: Criando uma janela)

More articles: