Skonfiguruj elektron i utwórz aplikację Hello World w Linux

W tym artykule obejmie przewodnik o instalacji elektronów i tworzeniu prostej aplikacji elektronowej „Hello World” w Linux.

O elektron

Electron to struktura rozwoju aplikacji używana do tworzenia komplatformowych aplikacji komputerowych za pomocą technologii internetowych w samodzielnej przeglądarce internetowej. Zapewnia również interfejsy API specyficzne dla systemu operacyjnego i solidny system opakowań do łatwiejszego dystrybucji aplikacji. Typowa aplikacja elektronowa wymaga trzech rzeczy do działania: węzeł.JS Runtime, samodzielna przeglądarka na bazie chromu, która jest wyposażona w interfejsy API specyficzne dla elektronów i systemu.

Zainstaluj węzeł.JS

Możesz zainstalować węzeł.JS i Menedżer pakietu „NPM”, uruchamiając następujące polecenie w Ubuntu:

$ sudo apt instal nodejs nodejs

Możesz zainstalować te pakiety w innych dystrybucjach Linux z menedżera pakietów. Alternatywnie, pobierz oficjalne pliki binarne dostępne w węźle.Strona internetowa JS.

Utwórz nowy węzeł.Projekt JS

Po zainstalowaniu węzła.JS i „NPM”, utwórz nowy projekt o nazwie „Helloworld”, uruchamiając kolejne polecenia:

$ mkdir helloworld
$ CD Helloworld

Następnie zwolnij terminal w katalogu „Helloworld” i uruchom poniższe polecenie, aby zainicjować nowy pakiet:

$ npm init

Przejdź przez interaktywny kreator w terminalu i wprowadź nazwy i wartości w razie potrzeby.

Poczekaj, aż instalacja się skończy. Powinieneś teraz mieć „pakiet.plik JSON ”w katalogu„ Helloworld ”. Posiadanie „pakietu.plik JSON ”w katalogu projektu ułatwia konfigurowanie parametrów projektu i sprawia, że ​​projekt jest przenośny dla łatwiejszej udostępniania.

Paczka.plik JSON ”powinien mieć taki wpis:

indeks „główny”: „.JS "

"Indeks.JS ”to miejsce, w którym znajdowałaby się cała logika twojego głównego programu. Możesz utworzyć dodatkowe „.JS ”,„.html ”i„.Pliki CSS ”zgodnie z Twoimi potrzebami. Do celów programu „Helloworld” wyjaśnionego w tym przewodniku, poniższe polecenie utworzy trzy wymagane pliki:

indeks $ Touch.Indeks JS.Indeks HTML.CSS

Zainstaluj elektron

Możesz zainstalować Electron w swoim katalogu projektu, uruchamiając poniższe polecenie:

$ npm instaluj elektron-save-dev

Poczekaj, aż instalacja się skończy. Electron zostanie teraz dodany do twojego projektu jako zależność i powinieneś zobaczyć folder „Node_modules” w katalogu projektu. Instalowanie Electron jako zależności od projektu jest zalecanym sposobem instalacji elektronów zgodnie z oficjalną dokumentacją elektronów. Jeśli jednak chcesz zainstalować elektron globalnie w swoim systemie, możesz użyć poniższego polecenia:

$ npm instaluj elektron -g

Dodaj następujący wiersz do sekcji „Skrypty” w „Pakiecie.plik JSON ”, aby zakończyć konfigurację elektronów:

„Start”: „Electron ."

Utwórz główną aplikację

Otwórz „indeks.plik js ”w wybranym edytorze tekstowym i dodaj do niego następujący kod:

const App, BrowserWindow = wymaga („electron”);
funkcja CreateWindow ()
const Window = nowy BrowserWindow (
Szerokość: 1600,
Wysokość: 900,
Webpreferences:
NodeIntegracja: prawda

);
okno.Loadfile („indeks.html ');

App.kiedy gotowy().Następnie (CreateWindow);

Otwórz „indeks.plik html ”w swoim ulubionym edytorze tekstu i umieść w nim następujący kod:

Witaj świecie !!

Kod JavaScript jest dość wyjaśniający. Pierwsza linia importuje niezbędne moduły elektronowe potrzebne do pracy aplikacji. Następnie tworzysz nowe okno samodzielnej przeglądarki, która jest wyposażona w elektron i ładuj „indeks.plik html ”w nim. Znacznik w „indeksie.plik html ”tworzy nowy akapit„ Hello World !!„Owinięte w„

”Tag. Zawiera również link referencyjny do „indeksu.Plik stylów CSS ”używany później w artykule.

Uruchom aplikację elektronową

Uruchom poniższe polecenie, aby uruchomić aplikację Electron:

$ npm start

Jeśli do tej pory poprawnie przestrzegałeś instrukcji, powinieneś uzyskać nowe okno podobne do tego:

Otwórz „indeks.plik CSS ”i dodaj poniższy kod, aby zmienić kolor„ Hello World !!" strunowy.

#hworld
kolor czerwony;

Uruchom ponownie następujące polecenie, aby zobaczyć styl CSS zastosowany do „Hello World !!" strunowy.

$ npm start

Masz teraz absolutne minimalne zestaw wymaganych plików do uruchomienia podstawowej aplikacji elektronowej. Masz „indeks.js ”, aby napisać logikę programu,„ indeks.html ”do dodania znaczników HTML i„ indeks.CSS ”do stylizacji różnych elementów. Masz również „pakiet.plik JSON ”i folder„ Node_modules ”zawierający wymagane zależności i moduły.

Pakiet aplikacji elektronów

Możesz użyć Electron Forge do pakowania aplikacji, zgodnie z zaleceniami oficjalnej dokumentacji elektronów.

Uruchom poniższe polecenie, aby dodać Electron Forge do swojego projektu:

$ npx @electron-forge/cli @najnowszy import

Powinieneś zobaczyć takie dane wyjściowe:

✔ Sprawdzanie systemu
✔ Inicjowanie repozytorium GIT
✔ Pisanie zmodyfikowanego pakietu.plik JSON
✔ Instalowanie zależności
✔ Pisanie zmodyfikowanego pakietu.plik JSON
✔ Naprawienie .Gitignore
Próbowaliśmy przekonwertować Twoją aplikację, aby był w formacie, który rozumie Electron-Forge.
Dzięki za użycie „electron-forge”!!!

Recenzja „Pakiet.plik JSON ”i edytuj lub usuń wpisy z sekcji„ twórców ”zgodnie z Twoimi potrzebami. Na przykład, jeśli nie chcesz budować plik „RPM”, usuń wpis związany z budowaniem pakietów „RPM”.

Uruchom następujące polecenie, aby zbudować pakiet aplikacji:

$ npm run Make

Powinieneś uzyskać trochę wyjścia podobnego do tego:

> [email protected] Make/Home/NIT/Helloworld
> Make electron-forge
✔ Sprawdzanie systemu
✔ Rozwiązanie Forge Config
Musimy spakować Twoją aplikację, zanim będziemy mogli ją zrobić
✔ Przygotowanie do pakietu aplikacji do Arch: x64
✔ Przygotowanie natywnych zależności
✔ Aplikacja opakowań
Tworzenie następujących celów: Deb
✔ Tworzenie Target: Deb - On Platform: Linux - Dla Arch: x64

Edytowałem „Pakiet.plik JSON ”do zbudowania tylko pakietu„ Deb ”. Zbudowane pakiety można znaleźć w folderze „Out” znajdującym się w katalogu projektu.

Wniosek

Electron doskonale nadaje się do tworzenia aplikacji międzyplatformowych na podstawie pojedynczej bazy kodów z drobnymi zmianami specyficznymi dla systemu operacyjnego. Ma pewne własne problemy, najważniejsze jest zużycie zasobów. Ponieważ wszystko jest renderowane w samodzielnej przeglądarce, a nowe okno przeglądarki jest uruchamiane z każdą aplikacją elektronową, aplikacje te mogą być intensywne zasoby w porównaniu z innymi aplikacjami przy użyciu narzędzi do tworzenia aplikacji specyficznych dla natywnych systemu systemu operacyjnego.