JavaScript

Iestatiet Electron un izveidojiet Hello World lietojumprogrammu Linux

Iestatiet Electron un izveidojiet Hello World lietojumprogrammu Linux

Šis raksts aptvers rokasgrāmatu par Electron instalēšanu un vienkāršas “Hello World” Electron lietojumprogrammas izveidi Linux.

Par Electron

Electron ir lietojumprogrammu izstrādes ietvars, ko izmanto, lai izveidotu starpplatformu darbvirsmas lietojumprogrammas, izmantojot tīmekļa tehnoloģijas atsevišķā tīmekļa pārlūkprogrammā. Tas nodrošina arī operētājsistēmas API un stabilu iepakošanas sistēmu, lai vieglāk izplatītu lietojumprogrammas. Tipiskai Electron lietošanai ir nepieciešamas trīs lietas: mezgls.js runtime, atsevišķs pārlūks, kas balstīts uz hromu, kas nāk ar Electron un OS specifiskām API.

Instalējiet mezglu.js

Jūs varat instalēt Node.js un “npm” pakotņu pārvaldnieks, palaižot šādu komandu Ubuntu:

$ sudo apt instalējiet nodejs npm

Varat instalēt šīs paketes citos Linux izplatījumos no pakešu pārvaldnieka. Varat arī lejupielādēt oficiālos bināros failus, kas pieejami mezglā.js vietne.

Izveidojiet jaunu mezglu.js Projekts

Kad esat instalējis Node.js un “npm”, izveidojiet jaunu projektu ar nosaukumu “HelloWorld”, pēc kārtas izpildot šādas komandas:

$ mkdir HelloWorld
$ cd HelloWorld

Pēc tam aktivizējiet terminālu direktorijā “HelloWorld” un palaidiet zemāk esošo komandu, lai inicializētu jaunu pakotni:

$ npm inic

Iet caur interaktīvo vedni terminālā un pēc vajadzības ievadiet nosaukumus un vērtības.

Pagaidiet, līdz instalēšana ir pabeigta. Tagad jums vajadzētu būt “iepakojumam.json ”fails“ HelloWorld ”direktorijā. Kam ir “pakete.json ”fails jūsu projekta direktorijā atvieglo projekta parametru konfigurēšanu un padara projektu pārnēsājamu, lai būtu vieglāk koplietot.

Sūtījums.json ”failā jābūt šādam ierakstam:

indekss "main": ".js "

“Indekss.js ”ir vieta, kur atradīsies visa jūsu galvenās programmas loģika. Jūs varat izveidot papildu “.js ”,“.html ”un“.css ”faili atbilstoši jūsu vajadzībām. Šajā rokasgrāmatā izskaidrotās programmas “HelloWorld” vajadzībām zemāk esošā komanda izveidos trīs nepieciešamos failus:

$ touch indekss.js indekss.HTML indekss.css

Instalējiet Electron

Jūs varat instalēt Electron projekta direktorijā, izpildot zemāk esošo komandu:

$ npm instalējiet elektronu --save-dev

Pagaidiet, līdz instalēšana ir pabeigta. Elektrons tagad tiks pievienots jūsu projektam kā atkarība, un jūsu projekta direktorijā jums vajadzētu redzēt mapi “mezglu_moduļi”. Electron instalēšana kā atkarība no projekta ir ieteicamais Electron instalēšanas veids saskaņā ar oficiālo Electron dokumentāciju. Tomēr, ja vēlaties sistēmā Electron instalēt globāli, varat izmantot tālāk minēto komandu:

$ npm instalēt elektronu -g

Pievienojiet šo rindiņu “pakotnes” sadaļai “skripti”.json ”fails, lai pabeigtu Electron iestatīšanu:

"start": "elektrons ."

Izveidot galveno lietojumprogrammu

Atvērt “indeksu.js ”failu izvēlētajā teksta redaktorā un pievienojiet tam šādu kodu:

const lietotne, BrowserWindow = pieprasīt ('elektrons');
funkcija createWindow ()
const logs = new BrowserWindow (
platums: 1600,
augstums: 900,
webPreferences:
nodeIntegrācija: taisnība

);
logs.loadFile ('indekss.html ');

lietotne.whenReady ().pēc tam (createWindow);

Atvērt indeksu.html ”savā iecienītajā teksta redaktorā un ievietojiet tajā šādu kodu:







Sveika pasaule !!



Javascript kods ir diezgan pašsaprotams. Pirmā līnija importē nepieciešamos Electron moduļus, kas nepieciešami, lai lietotne darbotos. Pēc tam jūs izveidojat jaunu atsevišķā pārlūkprogrammas logu, kas tiek piegādāts kopā ar Electron, un ielādējat indeksu.html ”tajā. Iezīmējums “rādītājā.html ”fails izveido jaunu rindkopu“ Hello World !!”Ietīts“

”Tagu. Tas ietver arī atsauces saiti uz “indeksu.css ”stila lapas fails, kas vēlāk izmantots rakstā.

Palaidiet savu elektronu lietojumprogrammu

Palaidiet zemāk esošo komandu, lai palaistu savu Electron lietotni:

Sākums: $ npm

Ja līdz šim esat pareizi izpildījis norādījumus, jums vajadzētu iegūt jaunu līdzīgu logu:


Atvērt indeksu.css ”failu un pievienojiet zemāk esošo kodu, lai mainītu“ Hello World !!”Virkne.

#hworld
krāsa: sarkana;

Vēlreiz izpildiet šo komandu, lai redzētu CSS stilu, kas piemērots “Hello World !!”Virkne.

Sākums: $ npm


Tagad jums ir minimālais nepieciešamo failu kopums, lai palaistu pamata Electron lietojumprogrammu. Jums ir “indekss.js ”, lai rakstītu programmas loģiku,“ indekss.html ”HTML iezīmēšanas un“ index.css ”dažādu elementu veidošanai. Jums ir arī “pakete.json ”fails un“ node_modules ”mape ar nepieciešamajām atkarībām un moduļiem.

Iepakojuma elektronu lietošana

Lietojumprogrammas iepakošanai varat izmantot Electron Forge, kā to iesaka oficiālā Electron dokumentācija.

Lai projektam pievienotu Electron Forge, izpildiet zemāk esošo komandu:

$ npx @ electron-forge / cli @ jaunākais imports

Jums vajadzētu redzēt šādu izvadi:

✔ Sistēmas pārbaude
✔ Inicializē Git repozitoriju
✔ Modificētas paketes rakstīšana.json fails
✔ Atkarību instalēšana
✔ Modificētas paketes rakstīšana.json fails
✔ Fiksēšana .gitignore
Mums ir UZMANĪJUMS pārveidot jūsu lietotni formātā, kuru saprot elektronu kalējs.
Paldies, ka izmantojāt "electron-forge"!!!

Pārskatīt “paketi.json ”failu un rediģējiet vai noņemiet ierakstus“ veidotāju ”sadaļās atbilstoši savām vajadzībām. Piemēram, ja nevēlaties izveidot “RPM” failu, noņemiet ierakstu, kas saistīts ar “RPM” pakotņu izveidi.

Lai izveidotu lietojumprogrammas pakotni, palaidiet šo komandu:

$ npm skrējiena marka

Jums vajadzētu iegūt kādu līdzīgu produkciju:

> helloworld @ 1.0.0 make / home / nit / HelloWorld
> elektronu-kalumu izgatavošana
✔ Sistēmas pārbaude
✔ Forge Config atrisināšana
Mums ir jāiesaiņo jūsu pieteikums, pirms mēs to varam sagatavot
✔ Sagatavošanās arkas iesaiņošanas lietojumprogrammai: x64
✔ Vietējo atkarību sagatavošana
✔ Iepakojuma lietojumprogramma
Šādu mērķu sasniegšana: deb
✔ Veidošana mērķim: deb - Uz platformas: linux - Arhai: x64

Es rediģēju “paketi.json ”failu, lai izveidotu tikai“ DEB ”pakotni. Izveidotās pakotnes varat atrast mapē “out”, kas atrodas jūsu projekta direktorijā.

Secinājums

Electron ir lieliski piemērots, lai izveidotu starpplatformu lietojumprogrammas, kuru pamatā ir viena koda bāze ar nelielām OS specifiskām izmaiņām. Tam patiešām ir atsevišķi jautājumi, no kuriem vissvarīgākais ir resursu patēriņš. Tā kā viss tiek atveidots atsevišķā pārlūkprogrammā un ar katru Electron lietotni tiek palaists jauns pārlūka logs, šīs lietojumprogrammas var būt resursu ietilpīgas salīdzinājumā ar citām lietojumprogrammām, kurās tiek izmantoti vietējo OS specifisko lietojumprogrammu izstrādes rīku komplekti.

Instalējiet jaunāko Dolphin emulatoru Gamecube un Wii operētājsistēmai Linux
Delfīnu emulators ļauj jums spēlēt izvēlētās Gamecube un Wii spēles Linux personālajos datoros (PC). Tā kā Dolphin Emulator ir brīvi pieejams un atvē...
Kā lietot GameConqueror Cheat Engine Linux
Rakstā ir sniegts ceļvedis par GameConqueror apkrāptu dzinēja izmantošanu Linux. Daudzi lietotāji, kas spēlē spēles operētājsistēmā Windows, bieži izm...
Labākie Linux spēļu konsoles emulatori
Šajā rakstā tiks uzskaitīta populārā Linux spēļu konsoles atdarināšanas programmatūra. Emulācija ir programmatūras saderības slānis, kas atdarina spēļ...