Electron - podstawowy projekt i uruchamianie

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1148 razy

Electron wymaga obecności w systemie Node.js toteż jeżeli nie jest on zainstalowany w systemie czym prędzej go zainstaluj jeżeli chcesz utworzyć swój pierwszy projekt Electron-a. Po tej jakże nużącej czynności należy stworzyć folder nowego projektu i zainstalować w nim Electron-a. Zanim jednak warto wykonać polecenie

npm init

I uzupełnić podstawowe informacje (część z nich można zostawić jako domyślne).

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (elecrton-basic-project)
version: (1.0.0)
description: Basic electron project
entry point: (index.js)
test command:
git repository:
keywords: Electron
author: Krzysztof Zajączkowski
license: (ISC)
About to write to ...Elecrton-basic-projectpackage.json:

{
  "name": "elecrton-basic-project",
  "version": "1.0.0",
  "description": "Basic electron project",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "Electron"
  ],
  "author": "Author",
  "license": "ISC"
}


Is this OK? (yes)

Teraz można przejść do żmudnego procesu instalacji Electron-a co też i z najdzikszą rozkoszą czynię:

npm i --save-dev electron

Teraz można oddać rozkoszy utworzenia pliku index.js, w którym to należy zamieścić następujący kod:

/** importowanie instanji aplikacji i klasy BrowserWindow umożliwiającej * tworzenie nowego okna programu */ const { app, BrowserWindow } = require('electron') /** * Funkcja tworząca okno programu */ function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) /** * Tutaj wskazywany jest plik widoku okna */ win.loadFile('index.html') } /** * Gdy aplikacja jest gotowa można utworzyć okno programu */ app.whenReady().then(createWindow) /** * Na zdarzenie zamknięcia wszystkich okien programu należy zakończyć * żywot programu */ app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) /** * Gdy program jest aktywowany a liczba okien jest równa 0 to utwórz okno programu */ app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } })

Pozostało już tylko utworzenie pliku widoku index.html, co też i z najdzikszą rozkoszą czynię:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body style="background: white;"> <h1>Hello World!</h1> <p> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </p> </body> </html>

Jeszcze tylko w pliku package.json dodać należy polecenie w sekcji scripts w następujacy sposób:

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

No i odpalamy pierwszą aplikację desktopową!

npm run start:electron
Electron - pierwsze uruchomienie podstawowego widoku
Rys. 1
Electron - pierwsze uruchomienie podstawowego widoku

Jak widać już na starcie Electron dodaje do okna własne domyślne menu i uruchamia program w oknie tak jak typowe aplikacje desktopowe.

Powyższy przykład w zasadzie został opisany na stronach twórców Electron-a czyli tutaj.

Strony powiązane
strony powiązane
  1. electron.org - strona opisująca w zasadzie to co tutaj zostało opisane
  2. github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium z podstawowym projektem elektron-a