🤶🏿 🙇🏿 📀 Escribir una aplicación gráfica en Electron JS (Inicio: Crear una ventana) 👩🏼‍🔧 🐲 👕

¡Saludos! Si fue a este artículo, lo más probable es que sea extremadamente reacio a entrar en la documentación oficial (y muy en vano. Está escrito en detalle y tiene una traducción al ruso) y vino a buscar una solución simple a su problema: escribir una aplicación multiplataforma para una computadora. utilizando solo tecnologías web. Sugiero que no se demore y comience de inmediato. Pero como este es el primer artículo, creo que vale la pena contarlo en pocas palabras sobre qué es Electron JS y para qué sirve.

imagen

La documentación oficial dice:

Si puede crear un sitio web, puede crear una aplicación de escritorio. Electron es un marco para crear aplicaciones nativas con tecnologías web como JavaScript, HTML y CSS. Se encarga de las partes difíciles, para que pueda concentrarse en los elementos principales de su aplicación.

Las aplicaciones creadas con Electron son sitios web habituales que se inician con el navegador web Chromium preinstalado. Además de los estándares API de HTML5 clásicos, es posible aplicar la lista completa de módulos Node.js y características únicas de Electron. Los módulos de servicio proporcionan acceso al sistema operativo.

Sí, al principio sería bueno que se familiarizara con cómo se crean los sitios web. No me centraré en los detalles del código HTML y 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. . . :

imagen

, . , , , Web , .

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

Escribir una aplicación gráfica en Electron JS (Inicio: Crear una ventana)

More articles: