Electron - podstawowy projekt i uruchamianie

Stronę tą wyświetlono już: 214 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:

Listing 1
  1. /** importowanie instanji aplikacji i klasy BrowserWindow umożliwiającej
  2. * tworzenie nowego okna programu
  3. */
  4. const { app, BrowserWindow } = require('electron')
  5. /**
  6. * Funkcja tworząca okno programu
  7. */
  8. function createWindow () {
  9. const win = new BrowserWindow({
  10. width: 800,
  11. height: 600,
  12. webPreferences: {
  13. nodeIntegration: true
  14. }
  15. })
  16. /**
  17. * Tutaj wskazywany jest plik widoku okna
  18. */
  19. win.loadFile('index.html')
  20. }
  21. /**
  22. * Gdy aplikacja jest gotowa można utworzyć okno programu
  23. */
  24. app.whenReady().then(createWindow)
  25. /**
  26. * Na zdarzenie zamknięcia wszystkich okien programu należy zakończyć
  27. * żywot programu
  28. */
  29. app.on('window-all-closed', () => {
  30. if (process.platform !== 'darwin') {
  31. app.quit()
  32. }
  33. })
  34. /**
  35. * Gdy program jest aktywowany a liczba okien jest równa 0 to utwórz okno programu
  36. */
  37. app.on('activate', () => {
  38. if (BrowserWindow.getAllWindows().length === 0) {
  39. createWindow()
  40. }
  41. })

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

Listing 2
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Hello World!</title>
  6. <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body style="background: white;">
  9. <h1>Hello World!</h1>
  10. <p>
  11. We are using node <script>document.write(process.versions.node)</script>,
  12. Chrome <script>document.write(process.versions.chrome)</script>,
  13. and Electron <script>document.write(process.versions.electron)</script>.
  14. </p>
  15. </body>
  16. </html>

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

Listing 3
  1. "scripts": {
  2. "start:electron": "electron ."
  3. },

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

Komentarze