Как да изградите първия си десктоп приложение с JavaScript, използвайки Electron

Замисляли ли сте се дали можете да създавате кросплатформени настолни приложения с HTML, CSS и JavaScript?

Възможно е с Electron.

Тази статия ще ви помогне да разберете някои основни понятия на Electron.

В края на тази публикация ще знаете процеса на създаване на кросплатформени настолни приложения с Electron, HTML и CSS.

Преди да започнем, можете да проверите предварително приложението, което ще изградим в този урок.

Hear Me Type ще има проста, но ясна функционалност. Всеки натиснат клавиш на клавиатурата ще възпроизвежда специфичен звук. Така че, ако натисна бутона „A“, приложението ще възпроизведе специфичния звук за буквата А.

Има две версии за изтегляне. Изходният код за този урок и разширена версия на приложението, препоръчан за по-опитни потребители на Electron.

Кодът ще се промени, тъй като добавям нови функции и подобрения. Не забравяйте да проверите отново, за да видите какво е новото.

Без допълнително обобщение, нека разберем повече за Electron и да създадем първото ни приложение!

Какво е Electron?

Electron е рамка за многоплатформени настолни приложения, използващи Chromium и Node.js.

Лесно е да създавате приложения за много платформи с помощта на HTML, CSS и JavaScript. Вашето приложение ще бъде съвместимо с операционни системи Mac, Windows и Linux веднага.

Други вградени функции са:

  • Автоматични актуализации - позволяват на приложенията автоматично да се актуализират
  • Native менюта и известия - създава естествени менюта за приложения и контекстни менюта
  • Отчитане на сривовете в приложението - можете да изпращате отчети за сривове на отдалечен сървър
  • Отстраняване на грешки и профилиране - модулът за съдържание на Chromium намира затруднения в производителността и бавни операции. Можете също да използвате любимите си инструменти за програмисти за Chrome в приложението си.
  • Инсталатор на Windows - можете да създадете инсталационни пакети. Бързо и просто.

Ако сте доволни от това, което предлага Electron, нека се потопим по-дълбоко и създайте просто приложение за Electron.

Преди да си изцапаме ръцете, ще трябва да инсталирате Node.js. Вие също трябва да имате GitHub акаунт, за да съхранявате и актуализирате приложението си. Въпреки че акаунтът не е необходим, силно се препоръчва. GitHub е индустриален стандарт и е важно да знаете как да го използвате.

Ще използваме GitHub в този урок.

Приготвяме се да започнем

Когато сте настроили, отворете прозорец на терминала за вашата операционна система.

Следвайте инструкциите по-долу, за да клонирате хранилището на Electron Quick Start Git на вашия компютър.

Ще изградим нашия софтуер при Electron Quick Start.

# Клонирайте хранилището за бърз старт
git clone https://github.com/electron/electron-quick-start
# Влезте в хранилището
cd електронен бърз старт
# Инсталирайте зависимостите и стартирайте
npm инсталиране && npm старт

Когато стъпките, изброени по-горе, са завършени, трябва да видите приложението отворено в прозореца на браузъра. И наистина е прозорец на браузъра!

Стилът на прозореца се променя в зависимост от операционната система. Избрах да използвам класическия вид на Windows. Groovy!

Основният прозорец на нашето приложение за бърз старт Electron.

Както казах по-рано, можете да използвате инструментите за програмисти на Chrome вътре в приложението си. Какво можете да направите с Инструментите за разработчици на браузъра си, можете да направите и вътре в приложението. Изключителен!

Архитектура на приложението на електроните

Нека да разгледаме изходния код и файловата структура на нашето приложение. Отворете проекта в любимия си текстов редактор или IDE. Ще използвам Atom, който е изграден върху ... познахте ... Електрон!

Структура на папки и файлове на новосъздаденото ни приложение.

Имаме основна файлова структура:

електрон-бърз старт

- index.html
 - main.js
 - package.json
 - render.js

Файловата структура е подобна на тази, която използваме при създаването на уеб страници.

Ние имаме:

  • index.html, която е уебсайт HTML5, обслужващ една голяма цел: нашето платно
  • main.js създава прозорци и обработва системни събития
  • package.json е стартовият скрипт за нашето приложение. Той ще се изпълнява в основния процес и съдържа информация за нашето приложение
  • render.js обработва процесите на изобразяване на приложението

Възможно е да имате няколко въпроса относно основния процес и да направите решите. Какво по дяволите са те и как мога да се справя с тях?

Радвам се, че попитахте. Изчакайте шапката си, защото това може да е нова територия, ако идвате от царството на JavaScript в браузъра!

Какво е процес?

Когато видите „процес“, помислете за процес на ниво операционна система. Това е екземпляр на компютърна програма, която работи в системата.

Ако стартирам приложението си Electron и проверя Windows Task Manager или Monitor Monitor за macOS, мога да видя процесите, свързани с моето приложение.

Всеки от тези процеси протича паралелно. Но паметта и ресурсите, отделени за всеки процес, са изолирани от останалите.

Кажете, че искам да създам цикъл, който увеличава нещо в процеса на изобразяване.

var a = 1;
за (a = 1; a <10; a ++) {
 console.log („Това е за цикъл“);
}

Нарастването е достъпно само в процеса на изобразяване. Това изобщо не засяга основния процес. Съобщението Това е за цикъл ще се появи само на рендерирания модул.

Основен процес

Основният процес контролира живота на приложението. Той има вградения пълен API на Node.js и отваря диалози и създава процеси на изобразяване. Той също така обработва други взаимодействия на операционната система и стартира и затваря приложението.

По конвенция този процес е във файл с име main.js. Но може да има каквото име искате.

Можете също да промените основния процесен файл, като го промените във файла package.json.

За целите на тестване отворете package.json и променете:

„Main“: „main.js“,

да се

„Main“: „mainTest.js“,

Стартирайте приложението си и вижте дали все още работи.

Имайте предвид, че може да има само един основен процес.

Процес на изобразяване

Процесът на изобразяване е прозорец на браузъра в приложението ви. За разлика от основния процес, може да има много процеси на изобразяване и всеки е независим.

Тъй като всеки процес на изобразяване е отделен, срив в един няма да засегне друг. Това е благодарение на многопроцесовата архитектура на Chromium.

Тези прозорци на браузъра също могат да бъдат скрити и персонализирани, защото приличат на HTML файлове.
 
Но в Electron имаме и пълния API на Node.js. Това означава, че можем да отваряме диалози и други взаимодействия на операционната система.

Мислете за това така:

[Източник: Кристиан Послек]

Остава един въпрос. Могат ли да бъдат свързани по някакъв начин?

Тези процеси протичат едновременно и независимо. Но те все още трябва да общуват по някакъв начин. Особено, тъй като те са отговорни за различни задачи.

За целта има междупроцесова комуникационна система или IPC. Можете да използвате IPC, за да предавате съобщения между основните и процесите на изобразяване. За по-задълбочено обяснение на тази система прочетете статията на Christian Engvall.

Това са основите на процесите за разработване на приложение на Electron.

Сега да се върнем към нашия код!

Направете го лично

Нека дадем правилното име на папката на нашето приложение.

Променете името на папката от електронно бързо стартиране, за да чуете мен-тип-урок.

Отворете папката с любимия си текстов редактор или IDE. Нека допълнително да персонализираме идентичността на нашето приложение, като отворим файла package.json.

package.json съдържа жизненоважна информация за нашето приложение. Тук определяте името, версията, основния файл, автора, лиценза и много други.

Нека се почувстваме малко горди и да ви поставим като автор на приложението.

Намерете параметъра „автор“ и променете стойността на вашето име. Тя трябва да изглежда така:

„Автор“: „Карол Пелу“,

Също така трябва да променим останалите параметри. Намерете името и описанието по-долу и ги променете във файла package.json:

Страхотно! Сега нашето приложение има ново име и кратко, но направо към описанието на точка.

Не забравяйте, че винаги можете да стартирате npm start във вашия терминал, за да изпълните приложението и да видите промените, които сте направили.

Нека продължим напред и добавим очакваната функционалност на нашето приложение. Искаме да възпроизведем специфичен звук за всеки клавишен клавиш, който натискаме.

О, Fun-ctionaitee!

Какво е приложение без забавна функционалност? Нищо повече…

Сега трябва да се погрижим за това и да дадем на приложението си функционалността, която желае.

За да накараме приложението да реагира на нашия принос, първо трябва да определим елемент, който да закачим и след това да задействаме желаното действие.

За целта ще създадем аудио елементи със специфични идентификатори за клавишите, които желаем. След това ще създадем команда за превключване, за да разберем кой клавиш е бил натиснат. След това ще пуснем специфичен звук, присвоен на този клавиш.

Ако това сега ви се струва малко сложно, не се страхувайте. Ще ви насоча през всяка стъпка.

Изтеглете този архив, съдържащ всички звукови файлове, които ще използваме. Скоро ще ги използваме!

Отворете файла index.html и нека създадем

Вътре в елемента създайте елемент div с тага на аудиокласа.

Вътре в създадения елемент div създайте

Ще използваме preload = "auto", за да кажем на приложението, че трябва да зареди целия аудио файл, когато страницата се зареди. index.html е основният файл на приложението и всички наши звукови файлове ще се заредят, когато приложението се изпълни.

Кодът трябва да изглежда така:

Вашият файл index.html трябва да изглежда така.

Сега

Страхотен! Единственото важно нещо, което в момента липсва, е JavaScript кодът.

Създайте нов файл, наречен функции.js. Нека го изискаме във файла index.html, така че JS кодът да е готов за използване, когато приложението работи.

Следвайки примера за изискване (./ renderer.js '), добавете този ред код точно под него:

изискват ( "./ functions.js")

Вашият проект трябва да изглежда така:

Изключителен! Сега, когато всичко е зашито, е време за момента на истината.

Отворете файла function.js и добавете следния JavaScript код във файла. Ще обясня как става само за миг.

document.onkeydown = функция (e) {
    превключвател (e.keyCode) {
        случай 65:
            . Document.getElementById ( 'A') играе ();
            прекъсване;
        по подразбиране:
            console.log ("Ключът не е намерен!");
    }
};

Кодът трябва да изглежда така:

Отворете прозореца си bash или Terminal. Уверете се, че сте в папката на вашия проект и въведете npm, за да стартирате приложението.

Настройте силата на звука на високоговорителите си и натиснете бутона A на клавиатурата си.

#MindBlown

JS кодът е доста прост и лесен.

Използваме събитието onkeydown в документа на обекта, за да разберем кой HTML елемент се осъществява. Не забравяйте, че обектът с документ е основният прозорец на нашето приложение.

В рамките на анонимната функция използваме оператор за превключване. Целта му е да идентифицира стойността на Unicode на натиснатия клавишен клавиш.

Ако стойността на Unicode на натиснатия клавиатурен клавиш е правилна, звукът се възпроизвежда. В противен случай се хвърля грешка „не е намерено“. Потърсете съобщението в конзолата.

Какво каране!

Може би сте забелязали, че имаме звукови файлове за покриване на клавиши A-Z и 0–9. Нека ги използваме и за да не усещат горчивия вкус на самотата.

Преминете към index.html и създайте

Кодът трябва да изглежда така:

Да, разбира се, можете да копирате и поставите:



































Страхотно! Сега нека направим същото за JS кода в функции.js.

Можете да намерите char кодовете (ключови кодове) на този уебсайт.

Но да, можете и да копирате и поставите това:

document.onkeydown = функция (e) {
    превключвател (e.keyCode) {
        случай 48:
            . Document.getElementById ( '0') играе ();
            прекъсване;
        случай 49:
            . Document.getElementById ( '1') играе ();
            прекъсване;
        случай 50:
            . Document.getElementById ( '2') играе ();
            прекъсване;
        случай 51:
            . Document.getElementById ( '3') играе ();
            прекъсване;
        случай 52:
            . Document.getElementById ( '4') играе ();
            прекъсване;
        случай 53:
            . Document.getElementById ( '5') играе ();
            прекъсване;
        случай 54:
            . Document.getElementById ( '6') играе ();
            прекъсване;
        случай 55:
            . Document.getElementById ( "7") играе ();
            прекъсване;
        случай 56:
            . Document.getElementById ( '8') играе ();
            прекъсване;
        случай 57:
            . Document.getElementById ( '9') играе ();
            прекъсване;
        случай 65:
            . Document.getElementById ( 'A') играе ();
            прекъсване;
        случай 66:
            document.getElementById ( "В") играе ().
            прекъсване;
        случай 67:
            document.getElementById ( "С") играе ().
            прекъсване;
        случай 68:
            . Document.getElementById ( "D") играе ();
            прекъсване;
        дело 69:
            document.getElementById ( "E") играе (.);
            прекъсване;
        случай 70:
            document.getElementById ( "F") играе (.);
            прекъсване;
        случай 71:
            document.getElementById ( "G") играе (.);
            прекъсване;
        случай 72:
            document.getElementById ( "Н") играе ().
            прекъсване;
        случай 73:
            . Document.getElementById ( "аз") играе ();
            прекъсване;
        случай 74:
            document.getElementById ( "J") играе ().
            прекъсване;
        случай 75:
            document.getElementById ( "К") играе (.);
            прекъсване;
        случай 76:
            document.getElementById ( "L") играе (.);
            прекъсване;
        случай 77:
            document.getElementById ( "М") играе ().
            прекъсване;
        случай 78:
            document.getElementById ( "N") играе ().
            прекъсване;
        случай 79:
            . Document.getElementById ( "О") играе ();
            прекъсване;
        случай 80:
            document.getElementById ( "P") играе (.);
            прекъсване;
        случай 81:
            . Document.getElementById ( "Q") играе ();
            прекъсване;
        случай 82:
            document.getElementById ( "R") играе ().
            прекъсване;
        случай 83:
            document.getElementById ( "S") играе ().
            прекъсване;
        случай 84:
            document.getElementById ( "Т") играе ().
            прекъсване;
        случай 85:
            document.getElementById ( "U") играе (.);
            прекъсване;
        случай 86:
            . Document.getElementById ( "V") играе ();
            прекъсване;
        случай 87:
            . Document.getElementById ( "W") играе ();
            прекъсване;
        случай 88:
            . Document.getElementById ( "Х") играе ();
            прекъсване;
        случай 89:
            document.getElementById ( 'Y') играе ().
            прекъсване;
        случай 90:
            . Document.getElementById ( "Z") играе ();
            прекъсване;
        по подразбиране:
            console.log ("Ключът не е намерен!");
    }
};

Нашето приложение вече е пълно! Поздравления!

Основната функционалност на приложението е завършена, но все още има работа!

Polska ja! (Полски ме!)

Въпреки че приложението е функционално, все още липсват някои неща тук-там.

Например във файла theindex.html можете да промените заглавието на приложението и съдържанието за главния прозорец.

Освен това приложението няма дизайн, няма красиви цветове и няма снимки нито на котки, нито на кучета.

Освободете въображението си и намерете начини да подобрите дизайна на приложението.

Кодът също не е перфектен. Имаме много идентичен код, който може да бъде оптимизиран и подобрен. Това ще доведе до по-малко редове код и ще бъде по-малко болезнено за очите.

Дублиращият код е лоша практика!

Тествайте го! Просто го тествайте!

Добрият софтуер трябва да бъде внимателно тестван.

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

Най-добрият сценарий е, че ще чуете звука за всеки клавишен клавиш, който сте посочили в кода. Но какво ще се случи, когато натиснете много клавиши в един ред толкова бързо, колкото можете? Какво ще кажете за клавишите, които дори не трябва да се натискат като бутоните Home и NumLock?

Ами ако сведете до минимум приложението и се опитате да натиснете клавиш? Чуваш ли звук? И какво се случва, когато нямате избран прозорец на приложението и натиснете клавишен клавиш, чувате ли все още някакви звуци?

Отговорът е за съжаление не.

Това поведение се дължи на архитектурата, върху която е изграден Electron. Тя ви позволява да получите глобални ключове, както можете да правите с езика C #, но не можете да регистрирате отделни натискания на клавиши. Това е извън сферата на нормалните случаи на използване за електронно приложение.

Прокарайте кодовия ред по ред и се опитайте да го разбиете. Вижте какво се случва и какви грешки хвърля Electron. Това упражнение ще ви помогне да станете по-добри при отстраняване на грешки. Ако знаете недостатъците на приложението си, тогава знаете как да ги поправите и да направите приложението по-добро.

Във файла function.js умишлено съм използвал остаряло JavaScript събитие. Можете ли да го забележите?

След като го намерите, бих искал да помислите как можете да го замените без да променяте функционалността на приложението.

Използването на остарял код е лоша практика и може да доведе до сериозни грешки, за които може би дори не знаете, че съществуват. Бъдете в течение с документацията на езика, за да видите какво може да се е променило. Винаги бъдете в течение.

заключение

Бих искал да благодаря и да ви поздравя за достигането до този момент!

Вече имате знанията да създадете просто приложение за електронни крос-платформи.

Ако искате да се потопите по-дълбоко в Electron и да видите какво работя, вижте Hear Me Type и моя профил в GitHub.

Чувствайте се свободни да клонирате, да разклонявате, да звездата и да допринасяте за всеки мой публичен проект.

Моля, върнете се и прочетете отново тази статия от време на време. Ще го модифицирам, за да поддържам актуална актуализацията на Electron.

Благодаря ви много, че отделихте време от деня си, за да прочетете моята статия.

Тази статия е първоначално публикувана на NeutronDev.com.

Ако се радвате на по-подробни статии / уроци за Electron, щракнете върху по-долу. Чувствайте се свободни да оставите коментар.