Комплетан водич и ресурси за учење

ЈаваСцрипт је један од најчешћих програмских језика. Чињеница да се може користити и за бацкенд и фронтенд развој учинила га је омиљеним за многе људе.

ЈаваСцрипт има много библиотека и оквира који проширују његове случајеве употребе изван ванили (обичног) ЈаваСцрипта.

Елецтрон.јс је моћан оквир отвореног кода који веб програмерима даје могућност да развијају изворне апликације са својим постојећим вештинама. Овај чланак ће вас научити о Елецтрон.јс и како се може користити за покретање ваше следеће невероватне идеје.

Елецтрон ЈС

Елецтрон ЈС је оквир који програмери могу да користе за креирање десктоп апликација користећи ХТМЛ, ЦСС и ЈаваСцрипт. Елецтрон ЈС је креирао и одржава ГитХуб.

Оквир је мешавина Ноде.ЈС-а и Цхромиум-а, омогућавајући корисницима да одржавају једну ЈаваСцрипт базу кода и развију вишеплатформске десктоп апликације које могу да раде на Виндовс-у, мацОС-у и Линук-у.

Прича о Елецтрон.јс-у почела је у јануару 2013. Првобитна идеја је била да се направи мулти-платформски уређивач текста који би могао да ради са ЈаваСцрипт-ом, ХТМЛ-ом и ЦСС-ом.

Елецтрон.јс је првобитно назван Атом Схелл и отворен је код 2014. Пројекат је касније преименован у Елецтрон у априлу 2015, а његов први АПИ је објављен 2016.

Карактеристике Елецтрон ЈС

  • Компатибилан са свим ЈаваСцрипт библиотекама и оквирима. Вуе.јс, Ангулар и Реацт.јс су само примери ЈаваСцрипт оквира које програмери могу да користе заједно са Елецтрон ЈС. Ова компатибилност олакшава коришћење карактеристика/функционалности ових библиотека и оквира приликом креирања Елецтрон апликације.
  • Оквир за вишекратну употребу. Услуживање потреба различитих купаца може бити скупо. Добра ствар са Елецтрон ЈС је што се може користити и за веб и за десктоп апликације. Јединствена кодна база значи да се може користити и на различитим оперативним системима.
  • Има приступ изворним АПИ-јима. Програмери који раде на Елецтрон ЈС-у имају приступ изворним АПИ-јима оперативних система на којима раде. Програмери тако могу да креирају десктоп апликације које имају сличан приступ функционалности ниског нивоа, као што је приказивање обавештења.
  • Подржава веб технологију. Елецтрон ЈС је прилагодљив, јер програмери не морају да уче нови програмски језик да би развили апликације. То значи да ако разумете одређени језички пакет који већ користите за креирање веб апликација, можете га користити и за креирање десктоп апликације.
  • Управљање кодом и апликацијама. Не морате да одржавате различите тимове да бисте одржавали апликације и код за различите оперативне системе. Елецтрон ЈС вам омогућава да задржите исту кодну базу за Линук, Виндовс и Мац оперативне системе.
  • Једноставна израда/уградња. Елецтрон пакет менаџер помаже програмерима да се пакују у своје одговарајуће пакете. Тако можете да објавите апликацију за десктоп рачунаре за Линук, Мац и Виндовс из исте базе кода користећи овај менаџер пакета.
  Мапа метал емисија жанрова кроз деценије са плејлистама

Архитектура Електрон ЈС

Архитектура Елецтрона је веома слична оној модерног веб претраживача јер наслеђује своју вишепроцесну архитектуру од Цхромиум-а.

Архитектура Елецтрона обухвата В8 ЈаваСцрипт Енгине, Ноде.ЈС и Либцхромиумцонтент.

  • Ноде.ЈС – ЈаваСцрипт рунтиме отвореног кода који ради на В8 ЈаваСцрипт машини. Ноде.ЈС омогућава програмерима да покрећу ЈаваСцрипт ван прозора претраживача. Ноде.ЈС такође омогућава корисницима да извршавају сирови ЈаваСцрипт код преко његове интерактивне љуске.
  • Либцхромиумцонтент- Цхромиум библиотека за приказивање која је отвореног кода и одржава је од стране Гоогле Цхроме-а. Цхроме има минималистички кориснички интерфејс и користи блинк као механизам за распоред и В8 као ЈаваСцрипт механизам.
  • В8 ЈаваСцрипт Енгине – ЈаваСцрипт мотор отвореног кода написан у Ц++ и ЈаваСцрипт-у и који је развио Гоогле.

#1. Ноде.јс

Да бисте започели са Елецтрон ЈС, потребно је да имате инсталиран Ноде.јс на вашој локалној машини.

Изаберите праву верзију чвора у зависности од оперативног система који користите на рачунару.

Проверите да ли је Ноде.јс исправно инсталиран тако што ћете покренути ове команде;

node -v
npm -v

Ако су исправно инсталиране, ове команде ће приказати верзију чвора и нпм.

#2. Командна линија

Начин на који приступате командној линији зависиће од вашег оперативног система.

  • Линук ће зависити од дистрибуције.
  • Виндовс: ПоверСхелл или командна линија.
  • мацОС: Терминал.

Неки уређивачи кода, као што је Висуал Студио Цоде, долазе са интегрисаним терминалом.

#3. Цоде Едитор

Потребан вам је уређивач кода да бисте написали свој Елецтрон ЈС код. Висуал Студио Цоде је међу најбољима које можете испробати.

Како инсталирати Елецтрон ЈС

Корак 1: Креирајте пројекат ноде.јс.

Користите ове команде да бисте започели;

mkdir my-electron-app && cd my-electron-app
npm init

Команда нпм инит ће од вас затражити да попуните нека поља, као што су назив апликације, улазна тачка и опис.

  Добијте препоруке за храну и ресторане у Фацебоок Мессенгер-у

Можете одабрати подразумевано име своје фасцикле као име апликације. Међутим, не заборавите да поставите улазну тачку своје апликације као маин.јс.

Поља као што су аутор и опис могу имати било коју вредност. Ваш пацкаге.јсон ће изгледати отприлике овако када завршите са овим корацима:

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

Корак 2: Инсталирајте електрон

Користите ову команду;

npm install --save-dev electron

Корак 3: Додајте команду ‘старт’ у свој пацкаге.јсон

{

  "scripts": {

    "start": "electron ."

  }

}

Корак 4: Покрените апликацију

Користите ову команду да покренете своју апликацију у развојном режиму

npm start

Електрон ЈС радни процес

Наставићемо да градимо апликацију из подешавања које смо управо направили изнад. Електронска апликација има две врсте процеса; главни и рендерер.

Главни процес

Главна скрипта је улазна тачка било које електронске апликације. Апликација ће радити у пуном Ноде.јс окружењу. Елецтрон ће тражити главну скрипту у датотеци пацкаге.јсон коју сте већ конфигурисали током постављања апликације.

Креирајте маин.јс у основној фасцикли да бисте иницијализовали главну скрипту. Можете то учинити ручно или користити ову команду;

touch main.js

Можете додати следећи код у маин.јс

const { app, BrowserWindow } = require('electron');

const createWindow = () => {

 const win = new BrowserWindow({

   width: 800,

   height: 600,

 });

 win.loadFile('index.html');

};

app.whenReady().then(() => {

 createWindow();

 app.on('activate', () => {

   if (BrowserWindow.getAllWindows().length === 0) {

     createWindow();

   }

 });

});

app.on('window-all-closed', () => {

 if (process.platform !== 'darwin') {

   app.quit();

 }

});

Веб странице у Елецтрон-у могу се учитати или са удаљене веб адресе или локалне ХТМЛ датотеке. Користићемо локалну ХТМЛ датотеку у сврху демонстрације.

Направите датотеку индек.хтмл у свом основном директоријуму. Код за индек.хтмл је увек обезбеђен, али ово можете имати као почетни код;

<!DOCTYPE html>

<html>

 <head>

   <meta charset="UTF-8" />

   <meta

     http-equiv="Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <meta

     http-equiv="X-Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <title>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from Electron renderer!</h1>

   <p>👋</p>

   <p id="info"></p>

 </body>

 <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script>

</html>

Рендерер процес

Рендерер приказује веб садржај. Предучитане скрипте долазе са кодом који се извршава у процесу приказивања пре него што је потребан веб садржај.

Креирајте прелоад.јс у свом основном директоријуму и додајте овај код;

window.addEventListener('DOMContentLoaded', () => {

  const replaceText = (selector, text) => {

    const element = document.getElementById(selector)

    if (element) element.innerText = text

  }

  for (const type of ['chrome', 'node', 'electron']) {

    replaceText(`${type}-version`, process.versions[type])

  }

})

Покрените развојни сервер користећи нпм старт и ово ће бити приказано

Примери апликација: Елецтрон ЈС

#1. Слацк десктоп апликација

Слацк је један од најпопуларнијих алата за даљинску сарадњу. Корисници могу да шаљу и примају поруке, упућују позиве и деле датотеке помоћу ове апликације. Слацк има и веб-базиране и десктоп апликације на Мац, Линук и Виндовс оперативним системима. Слацк-ова апликација за рачунаре користи Цхромиум мотор и Ноде.јс за приказивање висококвалитетног кода.

  Како користити Ревиве анд Потион у Покемон Го

#2. ВордПресс десктоп апликација

ВордПресс је највећи систем за управљање садржајем. Чињеница да можете покренути веб локацију чак и без основних вештина кодирања привукла је многе кориснике. ВордПресс-у се може приступити преко претраживача и преко десктоп апликација на Мац-у, Линук-у и Виндовс-у. Реновирана ВордПресс радна површина користи Елецтрон ЈС.

#3. ВхатсАпп десктоп апликација

ВхатсАпп је међу најпопуларнијим апликацијама за размену порука у савременом свету, јер га користи преко 2 милијарде људи. ВхатсАпп је првобитно дизајниран као мобилна апликација, али је сада прешао у платформу за више уређаја. ВхатсАпп десктоп користи Елецтрон ЈС и доступан је на главним оперативним системима.

#4. Висуал Студио Цоде

Висуал Студио Цоде, у власништву Мицрософта, је међу најпопуларнијим уређивачима кода. Висуал Студио Цоде подржава ХТМЛ, ЦСС и код написан у различитим програмским језицима као што су ЈаваСцрипт, Питхон, ПХП, Јава и Руби, да поменемо неке. Апликација за десктоп рачунаре, креирана помоћу Елецтрон ЈС, доступна је за Виндовс, Мац и Линук оперативне системе.

Ресурси за учење: Елецтрон ЈС

#1. Елецтроњс Оффициал Доцументатион

Елецтроњс документацију креира и одржава Елецтроњс.орг. Научићете шта је Елецтрон ЈС, како да подесите своју прву Елецтрон апликацију и како да направите апликације за више платформи користећи различите технологије. Документација се увек ажурира кад год се уведе побољшање или нова функција.

#2. Мастер Елецтрон: Десктоп апликације са ХТМЛ, ЈаваСцрипт и ЦСС

Мастер Елецтрон је плаћени курс на Удеми-у који вас упознаје са Елецтрон ЈС. Научићете како да креирате десктоп апликације за различите оперативне системе, као што су Мац, Линук и Виндовс. Мастер Елецтрон је такође савршен ресурс ако желите да разумете цео Елецтрон АПИ процес.

#3. Елецтрон Реацт Туториал

Елецтрон Реацт је плаћени курс на Удеми-у који подучава програмере како да креирају Елецтрон апликације користећи Реацт.јс. Реацт је једна од најпознатијих ЈаваСцрипт библиотека и креирала ју је Мета (раније Фацебоок).

Окончање

Елецтрон ЈС је сјајна ЈаваСцрипт библиотека за креирање десктоп апликација у савременом свету где апликације на више платформи морају бити прихваћене. Чињеница да можете да користите ХТМЛ, ЦСС и ЈаваСцрипт значи да програмери не морају да уче нове технолошке групе да би креирали такве апликације. Присуство велике заједнице која пружа подршку је такође плус, јер вам је подршка увек загарантована.

Такође можете истражити неке најбоље ЈаваСцрипт оквире да бисте направили модерну апликацију за мање времена.