Në këtë artikull, ne do të eksplorojmë gjithçka që ju duhet të dini për Electron JS, një platformë zhvillimi që ka revolucionarizuar krijimin e aplikacioneve ndër-platformë. Nga konfigurimi fillestar deri te krijimi i një aplikacioni të thjeshtë, ne do t'ju ecim me bazat e Electron JS. Pra, a jeni gati të zhyteni në botën emocionuese të ndërtimit të aplikacioneve me Electron JS?
Electron JS: Një hyrje
Për të filluar, le të kuptojmë se çfarë është Electron JS. Kjo teknologji me burim të hapur është një kornizë që ju lejon të zhvilloni aplikacione desktopi duke përdorur teknologji web si HTML , CSS dhe JavaScript. Përdoret gjerësisht nga zhvilluesit në të gjithë botën për të krijuar aplikacione me cilësi të lartë për Windows, macOS dhe Linux. Electron JS ka fituar një reputacion të fortë falë fleksibilitetit dhe komunitetit aktiv të zhvilluesve. Pse duhet ta merrni në konsideratë Electron JS për projektin tuaj të ardhshëm të zhvillimit të aplikacioneve? Vazhdoni të lexoni për të zbuluar!
Avantazhet kryesore të Electron JS
Tani që kemi prezantuar Electron JS, le të hedhim një vështrim në disa nga avantazhet kryesore që ofron kjo platformë.
- Zhvillimi MultiplatformMe Electron JS, ju mund të shkruani një bazë të vetme kodesh dhe të vendosni aplikacione nëpër platforma të shumta, duke kursyer kohë dhe burime të konsiderueshme.
- Përdorni Web TechnologiesNëse jeni tashmë të njohur me HTML, CSS dhe JavaScript dhe dobia e tijDo të ndiheni si në shtëpi me Electron JS. Nuk ka nevojë të mësoni gjuhë të reja programimi.
- Komuniteti aktivKomuniteti Electron JS është aktiv dhe mbështetës. Nëse hasni probleme ose pyetje, gjithmonë ka dikush që është i gatshëm t'ju ndihmojë.
- Përditësime të thjeshtuaraMbajtja e aplikacioneve tuaja të përditësuara është e lehtë me Electron JS, falë sistemit të përditësimit automatik.
- Përshtatje e avancuar: Mund të personalizoni ndërfaqen e përdoruesit të aplikacionit tuaj duke përdorur CSS dhe JavaScript, duke ju dhënë kontroll të plotë mbi pamjen dhe funksionalitetin.
- Pajtueshmëria e shtojcaveElectron JS mbështet integrimin e shtojcave dhe moduleve të jashtme, duke ju lejuar të zgjeroni aftësitë e aplikacionit tuaj.
Tani që i dini disa nga përfitimet kryesore, le të shqyrtojmë se si të konfigurojmë Electron JS.
Konfigurimi fillestar i Electron JS
Fillimi me Electron JS mund të duket dërrmues, por ne do t'ju udhëzojmë nëpër hapat kryesorë që të mund të filloni me besim.
Hapi 1: Instalimi i Node.js
Përpara se të filloni, sigurohuni që keni Node.js të instaluar në sistemin tuaj. Mund ta shkarkoni nga faqja zyrtare e Node.js. Node.js është thelbësor për ekzekutimin dhe menaxhimin e aplikacionit tuaj Electron.
Hapi 2: Inicializoni projektin tuaj
Hapi tjetër është të inicializoni projektin tuaj Electron. Hapni terminalin tuaj dhe lundroni te dosja ku dëshironi të krijoni aplikacionin tuaj. Pastaj, ekzekutoni komandën e mëposhtme:
npm init
Kjo komandë do t'ju udhëheqë përmes procesit të konfigurimit të projektit tuaj, duke përfshirë krijimin e një skedari package.json.
Hapi 3: Instalimi i Electron
Pasi të keni inicializuar projektin tuaj, mund të instaloni Electron duke përdorur npm (Menaxheri i Paketave të Nyjeve). Ekzekutoni komandën e mëposhtme:
instaloni elektronin npm
Elektroni do të instalohet në projektin tuaj dhe do të jetë gati për t'u përdorur.
Hapi 4: Struktura e dosjeve
Organizoni projektin tuaj me një strukturë dosjesh që është e lehtë për t'u kuptuar dhe mirëmbajtur. Për shembull:
index.html: Kjo është pika hyrëse e aplikacionit tuaj.main.js: Këtu mund të gjeni kodin kryesor të Electron.renderer.js: Nëse është e nevojshme, mund të përfshini kodin e klientit në këtë skedar.
Hapi 5: skedari main.js
Në Dosje main.js, duhet të krijoni një dritare kryesore për aplikacionin tuaj. Këtu është një shembull bazë:
const { app, BrowserWindow } = require('elektron')
funksioni createWindow() {
const win = dritare e re e shfletuesit ({
gjerësia: 800,
lartësia: 600,
Preferencat e internetit: {
nodeIntegration: e vërtetë
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
Ky kod krijon një dritare të shfletuesit që ngarkon index.html. Nga këtu, ju mund ta personalizoni aplikacionin tuaj sipas nevojave tuaja.
Me konfigurimin fillestar në vend, është koha për të zhvilluar aplikacionin tuaj të parë Electron JS.
Krijimi i një aplikacioni të thjeshtë me Electron JS
Tani që kemi krijuar mjedisin tonë, është koha për të krijuar një aplikacion të thjeshtë për të kuptuar më mirë se si funksionon Electron JS në praktikë.
Hapi 1: Dizajni i ndërfaqes së përdoruesit
Le të fillojmë duke dizajnuar ndërfaqen e përdoruesit të aplikacionit tonë. Krijo një skedar index.html në dosjen rrënjë të projektit tuaj dhe shtoni kodin e mëposhtëm HTML:
Aplikacioni im i elektronit
Mirë se vini në aplikacionin tim Electron
Ky është një aplikacion i thjeshtë i ndërtuar me Electron JS.
Ky është një dizajn shumë bazë, por ju mund ta personalizoni sipas preferencave tuaja.
Hapi 2: Logjika e Aplikimit
Tani, ne duhet të shtojmë logjikën tonë të aplikacionit. Në arkiv main.js, ne mund të ndërmarrim veprime shtesë. Për shembull, shfaqni një mesazh përshëndetjeje kur fillon aplikacioni:
const { app, BrowserWindow } = require('elektron')
funksioni createWindow() {
const win = dritare e re e shfletuesit ({
gjerësia: 800,
lartësia: 600,
Preferencat e internetit: {
nodeIntegration: e vërtetë
}
})
win.loadFile('index.html')
// Shfaq një mesazh përshëndetës
win.webContents.on('ngarkesa-e-përfundoi', () => {
win.webContents.executeJavaScript(`alert('Përshëndetje, Botë!')`)
})
}
app.whenReady().then(createWindow)
Me këtë, kur hapni aplikacionin tuaj Electron, do të shihni një mesazh përshëndetjeje.
Hapi 3: Ekzekutoni aplikacionin
Për të ekzekutuar aplikacionin tuaj, thjesht ekzekutoni komandën e mëposhtme në terminalin tuaj:
npm fillimi
Aplikacioni juaj Electron do të hapet dhe do të shfaqë ndërfaqen e përdoruesit që keni projektuar. urime! Ju keni krijuar me sukses një aplikacion të thjeshtë me Electron JS.
Electron JS në Veprim
Për të ilustruar më tej potencialin e Electron JS, këtu janë disa shembuj të aplikacioneve të njohura që përdorin këtë teknologji:
- Kodi i Visual Studio: Redaktori popullor i kodit burimor i zhvilluar nga Microsoft bazohet në Electron JS, duke e bërë atë një mjet të gjithanshëm dhe shumë të personalizueshëm.
- I plogët:Aplikacioni i komunikimit të biznesit Slack përdor Electron JS për t'u ofruar përdoruesve të tij një përvojë të qetë në desktop.
- Mosmarrëveshje:Kjo platformë komunikimi për lojtarë përdor gjithashtu Electron JS, duke lejuar komunikim me zë dhe tekst me cilësi të lartë në një aplikacion desktop.
- WhatsApp Desktop: Versioni i desktopit WhatsApp përdor Electron JS për të ofruar një përvojë bisede të ngjashme me aplikacionin celular.
- Trello: Aplikacioni popullor i menaxhimit të projektit është ndërtuar në Electron JS, duke e bërë të lehtë organizimin dhe bashkëpunimin si ekip.
Përfundim
Me pak fjalë, Electron JS është një platformë e fuqishme që thjeshton zhvillimin e aplikacioneve desktop ndër-platformë. Mbështetja e tij për teknologjitë e njohura të uebit dhe komuniteti aktiv e bëjnë atë një opsion tërheqës për zhvilluesit në mbarë botën. Nga konfigurimi fillestar deri te ndërtimi i aplikacioneve të thjeshta, ky artikull ka mbuluar bazat e Electron JS.
Nëse jeni të interesuar në zhvillimin e aplikacioneve desktop shumë të personalizueshme dhe të gjithanshme, Electron JS është një zgjedhje e shkëlqyer. Pra, vazhdoni, zhytuni në botën emocionuese të Electron JS dhe filloni të krijoni aplikacionet tuaja mahnitëse!
Nëse ju duk i dobishëm ky udhëzues Electron JS, mos ngurroni ta ndani me zhvilluesit dhe miqtë tuaj! Së bashku, ne mund të vazhdojmë të eksplorojmë mrekullitë e Electron JS dhe të ndërtojmë aplikacione mahnitëse. Ndani njohuritë dhe le të lartësojmë aftësitë tona zhvillimore!
