Electron.js – wstęp, co to jest?

Electron.js to platforma programistyczna która pozwala pisać aplikacje desktopowe z użyciem technologii znanych z front-endu. Możemy więc pisać aplikacje desktopowe z użyciem języka JavaScript, wykorzystując technologie takie jak: React, Vue, Node.js oraz wielu innych.  Zacytuje fragment z dokumentacji:

„Electron jest otwartoźródłową biblioteką, stworzoną przez GitHub, aby umożliwić tworzenie multiplatformowych aplikacji z użyciem języków HTML, CSS oraz JavaScript. Electron osiąga to łącząc Chromium oraz Node.js w jednolite środowisko uruchomieniowe, którego aplikacje mogą być wydawane na MacOS, Windows oraz Linux.”

Z technologii tej korzystają takie aplikacje jak: Atom (edytor od Githuba), Discord (komunikator), Skype (komunikator), WhatsApp (komunikator), pełną listę możecie znaleźć tutaj.


Początek – jak zacząć?

Rozpoczynając projekt electron.js najlepiej użyć gotowego starter packa (lista boilerplate’ów). Wybór jest naprawdę duży – to tylko oficjalne templatki, na githubie znajdziecie dużo więcej przykładów stworzonych przez społeczność.  Wybór jest naprawdę szeroki od bardzo rozbudowanych przykładowych aplikacji zawierających React, Redux, React-Router i Webpacka (electron-react-boilerplate) po podstawowe i czyste projekty zawierające niezbędne minimum.

Na początek zacznijmy od czystego projektu. Ściągamy git clone https://github.com/electron/electron-quick-start

Wchodzimy do katalogu i instalujemy zależności yarn install lub npm install następnie uruchamiamy projekt yarn start.

Projekt składa się z 3 głównych plików:

  • package.json – Zbiór potrzebnych zależności do projektu i skryptów NPM/YARN.
  • index.html – Electron.js serwuje ten plik jako główne okno naszej aplikacji. Jest to punkt podłączenia naszych skryptów JS
  • main.js – Plik konfiguracyjny dla Electron.js. To tutaj serwowany jest statyczny plik html. Tutaj możemy modyfikować główne elementy aplikacji Electon np. wyswietlanie konsoli debugowania, poczatkowy rozmiar okna itp.

Pierwszy program

Utwórzmy katalog src/ – tutaj będziemy trzymać nasz kod źródłowy.  W pliku html natomiast utwórzmy element o id=”root” do niego podepniemy naszą aplikacje. Poniżej kod z index.html

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Game in marbles</title>
</head>
<body>
<div id="root"></div>
<script>
require('./src/app.js')
</script>
</body>
</html>

Teraz utwórzmy plik app.js w src/ i napiszmy proste „Hello World”.

document.getElementById('root').innerHTML = "Hello World";
Gdy odświeżymy (ctrl+R) naszą aplikacje (uruchomienie komendą yarn run) powinien pojawić się napis „Hello World”.
Świetnie! Jeśli wszystko działa możemy przejść do napisania prawdziwej aplikacji desktopowej w JS.

Piszemy grę w kulki

Czas żeby zacząć poważniejszy projekt. Spróbujemy wykonać grę w kulki, podobną możecie znaleźć na kurniku. Na początek nie będziemy korzystać z żadnych bibliotek typu React czy Vue, spróbujemy całą aplikację wykonać w czystym JavaScripcie korzystając ze składni ES6+.

Konfiguracja projektu pod ES6

Niestety rozwój języka wyprzedza obecne możliwości przeglądarek i środowiska  Node.js. Żeby używać najnowszej składni ES6+ powinniśmy użyć narzędzia które przetranspiluje nam kod w ES6 do starszej wersji języka. W tym celu wykorzystamy Webpacka.

Obecnie zaleca sie korzystanie z modułu babel-preset-env my jednak wykorzystamy trochę starszy sposób. Miałem problemy z konfiguracją Webpacka i preset-env – jedna paczka usuwała drugą.  Dlatego zainstalujmy sobie potrzebne zależności. Do pliku package.json dodajcie poniższe zależności:

"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"electron": "^2.0.0",
"webpack": "^3.5.5",
"webpack-node-externals": "^1.6.0"
}
oraz w module skryptów dodajcie poniższe komendy:
"scripts": {
"start": "electron .",
"build-client": "webpack --config webpack.config.js",
"build:watch": ".\\node_modules\\.bin\\webpack --config webpack.config.js --watch"
},

Została nam jeszcze konfiguracja webpacka, w katalogu projektu utwórz plik webpack.config.js z poniższym kodem:

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const config = {
entry:'./src/app.js',
output: {
path:path.resolve(__dirname, 'dist'),
filename:'app.bundle.js'
},
devtool:'#source-map',
module: {
rules: [
{
test: /\.js$/,
include:path.resolve(__dirname, 'src/'),
exclude:'/node_modules/',
loader:'babel-loader',
query: {
presets: ['es2015', 'es2016', 'es2017']
}
}
]
}
};
module.exports = config;

 

Teraz tylko w pliku index.html zmień lokalizacje skryptu na ./dist/app.bundle.js
Webpack korzystając z babela przetranspiluje nam kod ES6 do ES5 i utworzy plik wynikowy w katalogu dist/
Teraz mając przygotowane środowisko pracy możemy przystąpić do pisania gry w kulki. Powyższy kod dostępny jest w repozytorium na branchu init/

 

Dalszy ciąg w kolejnym wpisie…

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *