Electron – piękne aplikacje desktopowe

Wygląd aplikacji desktopowych nie musi kojarzyć się z latami dziewięćdziesiątymi. Poniżej pokazuję jak stworzyć piękną aplikację przy pomocy Electron.

Tworzenie aplikacji desktopowych przez wiele lat kojarzyć się mogło z widokami podobnymi do tych poniżej:

Funkcjonalność jest spełniona, klient jest zadowolony a kompleksowe, złożone operacje wykonują się pod spodem. Problem w tym, że wygląd takich aplikacji przywołuje w pamięci lata dziewięćdziesiąte. Czy desktop już zawsze będzie wyglądał źle? A co jeśli…

Gdyby dziś przyszedł do Ciebie klient i chciał aplikację na desktop, która musi wyglądać pięknie i przyciągać wzrok, to zaproponowałbyś coś takiego? Raczej nie. Raczej myślałbyś co zrobić, żeby uatrakcyjnić jakoś produkt – o tym jest ten wpis.

To może WPF’a albo Windows 10 App?

Sam miałem okazję pisać zarówno aplikacje WPF, jak i różne rozwiązania na Windows Phone i Windows dla wersji 8/8.1. Wyliczanie wad mogłoby zająć dość długo, pokuszę się o kilka kluczowych spraw: nieczytelna i niezbyt wygodna składnia XAML, ograniczenia języka i biblioteki, skomplikowany binding i trudności z przełożeniem projektu graficznego na efekt końcowy.

Aplikacja w jednej z tych technologii zmarnuje wiele godzin pracy programisty, bo nie są one stworzone do tworzenia projektów żywych i atrakcyjnych graficznie (co najwyżej czytelnych i przejrzystych). W tym wypadku to kwestia wyboru narzędzi, a te wspomniane wyżej zdają się nie spełniać do końca wymagań. Dodatkowo obie wspomniane wcześniej technologie obsługują tylko systemy Windows – to zawęża możliwości…

Do rzeczy

Zastanówmy się co chcemy osiągnąć:

Chcemy żeby aplikacja była atrakcyjna wizualnie
Chcemy łatwości przeniesienia projektu graficznego wykonanego na przykład w Photoshopie na kod
Chcemy szerokiego wsparcia społeczności i komfortu programowania aplikacji
Chcemy dostępnych i działających bibliotek najróżniejszego rodzaju, które przyśpieszą pracę nad aplikacją

Zatrzymajmy się nad pierwszym punktem – jeśli chcesz mieć coś interaktywnego i ładnego jako aplikację, to bez wątpienia wybierasz aplikację sieci web. Szablon wykona grafik, koder przerobi to na HTML i CSS oraz animacje, programista doda niezbędną logikę. Czemu nie pójść w tym kierunku? Gdybym tylko miał jakiś prosty sposób na hostowanie strony internetowej i trzymanie jej w okienku – klient byłby zachwycony.

Electron

Będziesz potrzebował zainstalowane node.js. Jeśli znasz już trochę node’a oraz npm, to załapiesz błyskawicznie w czym rzecz.

Na początku napisz swoją stronę internetową tak, jakbyś pisał normalnie aplikację: utwórz jakiś index.html, style CSS i inne potrzebne rzeczy. Jeśli do czegoś potrzebujesz jQuery lub zewnętrznych bibliotek, to powstrzymaj się na chwilę z ich dodawaniem.

Jeśli twoja aplikacja potrzebuje jQuery lub innych bibliotek języka JavaScript, spróbuj znaleźć i dodać je przez npm. Otwórz konsolę/terminal w folderze z twoją stroną i wpisz:


npm install jquery 
npm install --save-dev electron 
npm install electron 
npm install electron-log

Jeśli nie znasz npm, to na pewno znajdziesz coś ciekawego w sieci na ten temat – polecam sprawdzić, jeśli chcesz być na czasie z technologiami web.

Do Twojego folderu musimy dodać teraz dwa ważne pliki. Pierwszy z nich to package.json (mógł się utworzyć automatycznie) – możesz wzorować się na tym:


{ 
 "name": "myApp", 
 "version": "0.0.1", 
 "main": "electronStart.js", 
 "dependencies": { 
 "electron-remote": "^1.1.2", 
 "electron-storage": "^1.0.7", 
 "electron-log":"^2.2.4", 
 "jquery": "^3.2.1" 
 } 
 }

W przypadku, kiedy zainstalowałeś biblioteki inne niż jQuery, pamiętaj dopisać je i ich wersje w sekcji dependencies. W takim przypadku za wpisem z jquery dodajemy przecinek i kolejną linię, w której piszemy według wzorca:


"nazwa-paczki": "^1.2.3"

Gdzie oczywiście “1.2.3” to numer wersji pobranej z npm paczki. W przypadku, gdy nie znasz numeru wersji, zawsze możesz wywołać jedną z metod pokazujących zainstalowane paczki i ich wersje:


npm list

lub dla paczek zainstalowanych globalnie:


npm list -g

Drugim plikiem będzie wspomniany electronStart.js – na razie możesz go spokojnie skopiować stąd (jeśli twój główny html nazywa się inaczej niż “index.html” – podmień tę wartość!).

Teraz we wcześniej uruchomionej konsoli możemy wpisać:


electron .\

…i już nasza strona internetowa zagościła w okienkach!

Co właściwie się stało?

Electron wziął stronę internetową, którą mu podaliśmy, zahostował ją lokalnie i wrzucił w okienko. Co ciekawe, teraz z poziomu aplikacji jesteśmy w stanie np. uruchamiać pliki .bat i wykonywać instrukcje w konsoli (ale to już temat na osobny post).

Z czym to się je?

A co jeśli chcielibyśmy teraz dodawać nowe pliki JavaScript do naszej aplikacji? Dodajemy je zwyczajnie za pomocą elementu script.

Rzućmy jeszcze okiem na electronStart.js. Plik ten odpowiada za załadowanie odpowiednich zależności, ustawienia okna (lub okien) oraz zachowanie w przypadku różnych zdarzeń. Ciekawsze fragmenty:


win = new BrowserWindow({ 
   width: 1000, 
   height: 600, 
   webPreferences: { 
      nodeIntegration: true 
   } 
 })

Odpowiada za utworzenie nowego okna, mamy tu rozmiary, ten konstruktor pozwala też na przemycenie większej liczby szczegółów dotyczących okna.


win.loadURL(url.format({ 
   pathname: path.join(__dirname, 'index.html'), 
   protocol: 'file:', 
   slashes: true 
 }))

Wskazuje który plik ma być załadowany do okna”.


win.webContents.openDevTools()

Uruchamia w oknie narzędzia developerskie chromium (identyczne jak np. w Google Chrome). Jeśli nie chcesz ich uruchamiać, zwyczajnie usuń tę linię.


win.setMenu(null);

Pozwala na ustawienie górnego menu okna. Aby stworzyć własne menu i jego obsługę warto udać się tutaj.

Deploy

Kiedy skończysz aplikację, deploy okazuje się zaskakująco prosty:


npm install electron-packager -g 

electron-packager ./ --all --overwrite

W efekcie uzyskamy gotowe paczki z plikami .exe dla Windowsa 32 i 64 bitowego oraz odpowiedniki dla Linuxa.

Teraz wystarczy zrobić ładny instalator i aplikacja jest już gotowa!

Przykłady wykorzystania

Przedstawiona w artykule technika jest wykorzystywana przez wiele aplikacji, z których korzystamy na co dzień. Są to między innymi Visual Studio Code, Slack, GitHub Desktop, PhoneGap czy GitKraken.