У овом чланку ћемо истражити све што треба да знате о Елецтрон ЈС, развојној платформи која је направила револуцију у креирању вишеплатформских апликација. Од почетног подешавања до креирања једноставне апликације, провест ћемо вас кроз основе Елецтрон ЈС-а. Дакле, да ли сте спремни да зароните у узбудљив свет прављења апликација са Елецтрон ЈС?
Елецтрон ЈС: Увод
За почетак, хајде да разумемо шта је Electron JS. Ова технологија отвореног кода је фрејмворк који вам омогућава да развијате десктоп апликације користећи веб технологије као што су HTML , CSS и JavaScript. Широко га користе програмери широм света за креирање висококвалитетних апликација за Windows, macOS и Linux. Electron JS је стекао солидну репутацију захваљујући својој флексибилности и активној заједници програмера. Зашто би требало да размотрите Electron JS за ваш следећи пројекат развоја апликација? Наставите да читате да бисте сазнали!
Кључне предности Елецтрон ЈС
Сада када смо представили Елецтрон ЈС, хајде да погледамо неке од кључних предности које ова платформа нуди.
- Мултиплатформ ДевелопментСа Елецтрон ЈС, можете написати једну базу кода и применити апликације на више платформи, штедећи значајно време и ресурсе.
- Користите веб технологијеАко сте већ упознати са HTML-ом, CSS-ом и Јаваскрипт и његова корисностБићете као код куће са Electron JS-ом. Нема потребе да учите нове програмске језике.
- Активна заједницаЕлецтрон ЈС заједница је активна и подржава. Ако наиђете на проблеме или питања, увек постоји неко вољан да вам помогне.
- Поједностављена ажурирањаОдржавање ваших апликација ажурним је лако са Елецтрон ЈС, захваљујући његовом систему за аутоматско ажурирање.
- Напредна персонализација: Можете да прилагодите кориснички интерфејс своје апликације користећи ЦСС и ЈаваСцрипт, дајући вам потпуну контролу над изгледом и функционалношћу.
- Компатибилност додатакаЕлецтрон ЈС подржава интеграцију екстерних додатака и модула, омогућавајући вам да проширите могућности ваше апликације.
Сада када знате неке од кључних предности, хајде да заронимо у то како да подесите Елецтрон ЈС.
Почетно подешавање Елецтрон ЈС
Почетак рада са Елецтрон ЈС може изгледати неодољиво, али ми ћемо вас провести кроз кључне кораке како бисте могли да почнете са самопоуздањем.
Корак 1: Инсталирање Ноде.јс
Пре него што почнете, уверите се да је Ноде.јс инсталиран на вашем систему. Можете га преузети са званичне веб странице Ноде.јс. Ноде.јс је од суштинског значаја за покретање и управљање вашом Елецтрон апликацијом.
Корак 2: Покрените свој пројекат
Следећи корак је иницијализација вашег Елецтрон пројекта. Отворите свој терминал и идите до фасцикле у којој желите да креирате своју апликацију. Затим покрените следећу команду:
нпм инит
Ова команда ће вас водити кроз процес подешавања вашег пројекта, укључујући креирање датотеке package.json.
Корак 3: Инсталирање Елецтрон-а
Када иницијализујете свој пројекат, можете инсталирати Елецтрон користећи нпм (Ноде Пацкаге Манагер). Покрените следећу команду:
npm инсталација електрона
Елецтрон ће бити инсталиран у ваш пројекат и спреман за употребу.
Корак 4: Структура фасцикле
Организујте свој пројекат са структуром фасцикли која је лака за разумевање и одржавање. на пример:
index.html: Ово је улазна тачка ваше апликације.main.js: Овде можете пронаћи главни код Елецтрон-а.renderer.js: Ако је потребно, можете укључити код на страни клијента у ову датотеку.
Корак 5: датотека маин.јс
У досијеу main.js, морате креирати главни прозор за своју апликацију. Ево основног примера:
const { апликација, BrowserWindow } = require('електрон')
функција createWindow() {
const win = new BrowserWindow({
ширина: 800,
висина: 600,
вебПодешавања: {
Интеграција чвора: тачно
}
})
win.loadFile('index.html')
}
апликација.whenReady().then(createWindow)
Овај код креира прозор претраживача који се учитава index.html. Одавде можете прилагодити своју апликацију својим потребама.
Са почетном поставком на месту, време је да развијете своју прву Елецтрон ЈС апликацију.
Креирање једноставне апликације са Елецтрон ЈС
Сада када смо поставили наше окружење, време је да креирамо једноставну апликацију да боље разумемо како Елецтрон ЈС функционише у пракси.
Корак 1: Дизајн корисничког интерфејса
Почнимо са дизајнирањем корисничког интерфејса наше апликације. Креирајте датотеку index.html у основну фасциклу вашег пројекта и додајте следећи ХТМЛ код:
Моја електронска апликација
Добродошли у моју Electron апликацију
Ово је једноставна апликација направљена помоћу Electron JS-а.
Ово је веома основни дизајн, али га можете прилагодити својим жељама.
Корак 2: Логика апликације
Сада морамо да додамо логику наше апликације. У архиву main.js, можемо предузети додатне радње. На пример, прикажите поздравну поруку када се апликација покрене:
const { апликација, BrowserWindow } = require('електрон')
функција createWindow() {
const win = new BrowserWindow({
ширина: 800,
висина: 600,
вебПодешавања: {
Интеграција чвора: тачно
}
})
win.loadFile('index.html')
// Прикажи поздравну поруку
win.webContents.on('завршено-учитавање', () => {
вин.вебЦонтентс.executeJavaScript(`alert('Здраво, свете!')`)
})
}
апликација.whenReady().then(createWindow)
Са овим, када отворите своју Елецтрон апликацију, видећете поздравну поруку.
Корак 3: Покрените апликацију
Да бисте покренули своју апликацију, једноставно покрените следећу команду у свом терминалу:
нпм старт
Ваша Елецтрон апликација ће се отворити и приказати кориснички интерфејс који сте дизајнирали. Честитамо! Успешно сте креирали једноставну апликацију са Елецтрон ЈС.
Електрон ЈС у акцији
Да бисмо додатно илустровали потенцијал Елецтрон ЈС-а, ево неколико примера популарних апликација које користе ову технологију:
- Висуал Студио Цоде: Популарни уређивач изворног кода који је развио Мицрософт заснован је на Елецтрон ЈС-у, што га чини разноврсним и веома прилагодљивим алатом.
- Слацк: Апликација за пословну комуникацију Слацк користи Елецтрон ЈС да својим корисницима пружи беспрекорно искуство радне површине.
- Дискорду:Ова комуникациона платформа за играче такође користи Елецтрон ЈС, омогућавајући висококвалитетну гласовну и текстуалну комуникацију у десктоп апликацији.
- WhatsApp Десктоп: ВхатсАпп десктоп верзија користи Елецтрон ЈС да пружи искуство ћаскања слично мобилној апликацији.
- Трелло: Популарна апликација за управљање пројектима је изграђена на Елецтрон ЈС, што олакшава организацију и сарадњу као тим.
Закључак
Укратко, Елецтрон ЈС је моћна платформа која поједностављује развој десктоп апликација на више платформи. Његова подршка за познате веб технологије и активна заједница чине га атрактивном опцијом за програмере широм света. Од почетног подешавања до изградње једноставних апликација, овај чланак је покрио основе Елецтрон ЈС.
Ако сте заинтересовани за развој веома прилагодљивих и разноврсних десктоп апликација, Елецтрон ЈС је одличан избор. Зато само напред, зароните у узбудљив свет Елецтрон ЈС-а и почните да креирате сопствене запањујуће апликације!
Ако вам је овај Елецтрон ЈС водич био користан, слободно га поделите са својим колегама програмерима и пријатељима! Заједно можемо да наставимо да истражујемо чуда Елецтрон ЈС-а и правимо запањујуће апликације. Поделите знање и унапредимо наше развојне вештине!
