Każdy kto studiował Informatykę miał okazje spłodzić paskudę podobną do tych poniżej:

Niby spoko – mamy funkcjonalność, profesor jest zadowolony a jakieś kosmiczne operacje wykonują się pod spodem. Problem w tym, że wygląd takich aplikacji to lata 90 pełną parą i może czas  na lekką zmianę. Uważasz, że nie? A co jeśli…

Gdyby dziś przyszedł do Ciebie klient i chciał aplikację na desktop to oddałbyś coś takiego i podpisał swoim nazwiskiem? Raczej nie. Raczej myślałbyś co zrobić, żeby uatrakcyjnić jakoś produkt.

Jeśli szukasz instrukcji w bardziej profesjonalnej, ugrzecznionej formie przeczytaj ten wpis na oficjalnym blogu firmy APN Promise.

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

Sam miałem okazję pisać zarówno aplikacje WPF jak i różne koszmarki na Windows Phone i Windows (wtedy jeszcze) 8/8.1. Wyliczanie wad mogłoby zająć dość długo, pokuszę się o kilka kluczowych spraw: kompletnie nieczytelna i niezbyt wygodna składnia XAML, ogarniczenia języka i biblioteki, wymysły z Bindingiem.

Aplikacja w tych technologiach wymaga od programisty naprawdę anielskiej cierpliwości żeby ożywić ładny projekt graficzny. Jestem cierpliwy, ale tak długo jak nie wbijam gwoździa za pomocą śrubokręta. 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 ŁADNA
  • Chcemy sensownego supportu i komfortu programowania aplikacji
  • Chcemy dostępnych i działających bibliotek najróżniejszego rodzaju, które przyśpieszą nam pracę

Zatrzymajmy się nad pierwszym punktem – jeśli chcesz mieć coś interaktywnego i ładnego jako aplikację to bez wątpienia wybierasz aplikację 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 jest 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
a potem

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

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

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 dependency.

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!

electron

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

Electron wziął stronę internetową którą mu podaliśmy, następnie 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 .js 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 ilości 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 w 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 skonczysz aplikację, deploy okazuje się prosty jak konstrukcja cepa. Nie ma wielkiej filozofii:

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 gotowe :)!

 

Advertisements