Rozpoczęcie pracy z Electron.js wymaga zrozumienia podstawowych komponentów oraz struktury aplikacji, którą zamierzamy zbudować. Electron pozwala na tworzenie rozbudowanych aplikacji desktopowych przy użyciu technologii internetowych, takich jak HTML, CSS i JavaScript. Aby zacząć, warto zainstalować Node.js, ponieważ Electron jest oparty na tej platformie.

Czyżby to nie było proste?

Pierwszym krokiem jest stworzenie nowego projektu. Możesz to zrobić za pomocą polecenia:

npm init -y

Później dodaj Electron do swojego projektu za pomocą poniższego polecenia:

npm install electron --save-dev

Struktura projektu

Oto podstawowa struktura folderów, którą powinieneś utworzyć:

  • src/ – folder na pliki aplikacji
  • src/index.html – plik HTML, który będzie wyświetlany w aplikacji
  • src/main.js – plik główny, który uruchamia aplikację

Tworzenie pliku main.js

W pliku main.js zdefiniuj główną logikę aplikacji. Oto prosty przykład:


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

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    win.loadFile('index.html');
}

app.whenReady().then(createWindow);
    

Uruchamianie aplikacji

Aby uruchomić aplikację, dodaj skrypt do sekcji scripts w pliku package.json:

"start": "electron ."

następnie uruchom aplikację poleceniem:

npm start

Debugowanie i rozwijanie aplikacji

Za pomocą narzędzi deweloperskich, które są dostępne w Electron, możesz łatwo debugować aplikacje. Wystarczy otworzyć konsolę w aplikacji, a następnie korzystać z narzędzi takich jak Elementy, Console czy Network. pamiętaj, aby regularnie testować i wprowadzać zmiany, aby tworzenie aplikacji przebiegało sprawnie.