«То о бэнтли я мечтал, то о мазерати,
То рыбалка, то футбол, то с друзьями пати…»
Группа Жуки

​Захотелось мне что-то провокационной статьи, так сказать, взбодрить чем-то наше профессиональное сообщество. Хватит заумных статей и философских рассуждений. Итак, делимся на две команды: «любители Соса-Cola – горнолыжники – виндсерферы» против «любители Pepsi – сноубордисты – кайтеры». Счет на табло 0-0, начинаем!

Правила игры и критерии оценок

Сначала давайте определимся, что же будем считать десктопным приложением, а что – веб-клиентом:

• Десктопное приложение – клиентское программное обеспечение, реализующее Windows Forms интерфейс. Приложение инсталлируется на рабочую станцию пользователя и запускается локально. Или запускается удаленно. Допускается вариант запуска такого приложения с использованием ввода URL адреса в браузере, но от этого веб-клиентом не становится, также как и благодаря запуску с помощью различного рода эмуляторов;
• Веб-клиент – клиентское программное обеспечение, представляющее собой браузер и использующее http/https протоколы. Приложение не требует инсталляцию или загрузку программных модулей на рабочую станцию пользователя. Допускается установка дополнительных общесистемных библиотек и использование защищенных сетевых протоколов, и от этого десктопным приложением не становится.

При использовании любого из перечисленных клиентских приложений может применяться трехзвенная архитектура. Аллилуйя! Термины «толстый» и «тонкий» клиент сюда не вплетаем. Веб-клиент можно создать совсем не «тонким», ровно также как и с десктопного приложения по максимуму снять обработку бизнес-логики.

Что каждый из пользователей, владельцев системы, архитекторов и сотрудников служб безопасности ждет от программного продукта и клиентского приложения:

• функциональность, простота использования и быстродействие;
• возможность кастомизации и стилизации;
• мобильность и легкость обновления;
• масштабируемость и кроссплатформенность;
• безопасность и надежность.

Для простоты будем считать, что каждое удачное попадание – 1 очко, так как бессмысленно сравнивать, что важнее – мобильность или безопасность.

Надеюсь, разобрались, и можно начинать «играть». Звучат гимны команд, понеслась…

Первый период

В каждой второй конкурсной документации (если не чаще) в разделе технических требований можно заметить требования к наличию веб-клиента или веб-доступа. Возникает резонный вопрос «Вам вот это зачем, помимо того, что это модно?»

Как правило, обоснования такие:

• мобильность (можно войти в систему с любого компьютера подключенного к интернету);
• легкость развертывания и обновления (не требуется переустановка программных модулей на рабочих станциях пользователей);
• простота создания тестовой и продуктивной среды (на сервере приложений развернуто два веб-приложения к одной БД, таким образом, тестирование новых версий программного обеспечения отдельными группами пользователей становится удобным и сравнительно «безопасным», так как всегда можно вернуться к действующей версии системы обратившись к ней по другому адресу);

Часть этих преимуществ можно достичь и в варианте с десктопным приложением используя RDP доступы, доменные политики и прочее. Но в целом, удар из штрафной площади и 1-0 в пользу веб-клиента. Свисток, центр поля.

Безопасность и надежность – очень серьезный вопрос. Некоторые организации принципиально не хотят и не предоставляют возможность работы в корпоративных системах за пределами своего домена. Необходимость применения средств криптографической защиты информации (СКЗИ) и электронной подписи (ЭП) уже давно никому доказывать не надо, за нас это делают регуляторы. Для использования данных технологий необходимо обращаться к сторонним библиотекам, не все веб-приложения это «любят» и имеют ограничения. Стабильность работы самих браузеров также является потенциально узким местом, причем повлиять на это разработчик бизнес-приложения может не всегда. Оффлайн работа, объективно, чаще и проще реализуются с использованием десктопных приложений. В принципе отдельных организаций пока еще пугает работа в браузере (да-да в том самом, в котором сотрудники просиживают часами в социальных сетях, выкладывая туда всю свою подноготную). Это прорыв по флангу и счет 1-1. Звучит свисток, первая половина игры закончена, команды уходят в свои СЭД закрывать накопившиеся поручения.

Второй период

Все покупатели хотят видеть «свой» продукт, отличный от множества других. Конечно, сложно на это надеяться, покупая массовый коробочный продукт. А сделать его «под заказ» значительно дороже и рисково. Но только не в IT области.

Повальная мода на скины, по-моему, уже прошла, или я постарел, и иметь не классическую «морду» аудио-проигрывателя мне уже не принципиально. Тем не менее, возможность изменить цветовую раскраску, логотипы, иконки, шрифты базовых интерфейсов – хороший бонус для клиента. Десктопные приложения могут предоставлять возможность применения цветовой темы, настройки отдельных интерфейсных элементов, но веб-приложения, применяя каскадные таблицы стилей, с этим справляются явно лучше. Возможность кастомизации определяется степенью развития самого программного продукта и тип клиентского приложения тут не должно иметь особой роли. Счет 2-1 и «браузерники» вырываются вперед.

Функциональность – важнейшее требование к любому программному продукту. Исторически считается, что десктопные приложения более функциональны и эргономичны. Если пытаться разрабатывать веб-клиент с нуля, то так оно и будет. Но с годами были разработаны целые интерфейсные библиотеки, позволяющие творить «чудеса»:

• иерархические списки с возможностью перемещения колонок и наложения фильтров;
• функции drag&drop к любым элементам с любыми визуальными эффектами;
• интерактивные панели и деловая графика;
• встраивание аудио и видео проигрывателей (хотя кому-то больше нравится слово «выигрыватель»);
• обработка всевозможных событий;
• и многое многое другое.

Про визуальную красоту реализации я и говорить не буду – там все очень достойно. Подозреваю, что компании больше и охотнее разрабатывают новые интерфейсные элементы под браузеры, чем для традиционных win32-приложений.

Современный пользователь компьютера не меньше времени проводит в браузере, чем тратит его на работу с десктопным приложением. И первый вариант работы сложнее ему не кажется. Зато возможность масштабирования в браузере, отдельным категориям пользователей, приносит ощутимую пользу. Опасность у ворот команды веб-клиента была устранена. Счет по-прежнему 2-1.

Корпоративная информационная система растет вместе с компанией. А значит, количество рабочих мест увеличивается, расширяется линейка клиентских устройств для работы в системах. Мировые лидеры разрабатывают новые операционные системы и платформы, и угнаться за ним не так просто. А надо ли? Может быть, доверим им обеспечить совместимость распространенного программного обеспечения, а если такая совместимость не возможна, в их же интересах предоставить альтернативу. Вот такими финтами и перепасовками в центре поля одна из команд пробирается к воротам соперника.

Разрабатывая веб-приложения с соблюдением стандартов можно надеяться, что программное обеспечение будет корректно работать во всех браузерах, по крайней мере, в первой пятерке. Чуда тут не происходит, и существует масса нюансов связанных с различной интерпретацией одной и той же разметки. Разработчики каждый день видят в системах баг-трекинга заявки из разряда «функция А не корректно работает в браузере Б, а в остальных браузерах все ОК». Но эти труды стоят получаемых бонусов.

Когда пользователь заходит на рядовой публичный сайт в Интернете он надеется увидеть корректное представление страниц с сохранением всей заложенной функциональности. Причем, посетитель сайта не хочет знать «под какие устройства» сайт создавался (стационарный компьютер или ноутбук, планшет или смартфон), это его вообще не должно беспокоить. Почему же ровно также не рассуждать пользователю корпоративной информационной системы. Зачем пользователю, находящемуся вне офиса и имеющему на руках планшет за 1000$ переживать, что он не сможет исполнить поручение, выданное ему в СЭД. Надо ли сотруднику при выборе планшета изучать вопрос, а сможет ли он конкретно с этого планшета (с его операционной системой), корректно работать в десятках корпоративных систем своей организации. А если завтра он купит другой планшет (с другой программной платформой), система на нем будет ровно такой же, к которой он привык или уже другой, а придется что-то заново скачивать и устанавливать?

В идеале, я бы хотел, что бы разработчики бизнес-приложений сосредоточились на самих продуктах, а не тратили время на разработку одного и того же под разные платформы (те же яйца только в профиль). И одним из путей вижу применение в качестве клиентских приложений полнофункциональных веб-клиентов с адаптивным веб-дизайном. Это красивая комбинация заканчивается неберущимся ударом, и счет становится 3-1. Веб-клиент заслуженно побеждает десктопное приложение. Крики радости, брызги шампанского, смазливые девицы окружают победителей.

Как вы уже поняли из заглавия – сейчас будет очередная дуэль. Но, полноценной дуэлью битва настольного компьютера и ноутбука быть не может, так как, в принципе, несмотря на свою функциональную схожесть, данные устройства немного из разных областей применения, каждая из которых имеет свою специфику.

Но, к сожалению, некоторые не видят этой довольно чёткой грани и окончательно «похоронили» для себя вариант сборки или приобретения системного блока. Именно таким, слепо отдавшимся «силе ноутбука», и посвящается данная статья. Отдельно, будет затронуто одно из «чудес света» — игровой ноутбук, и некоторые парадоксальные нюансы, связанные с его выбором. В конце будут итоги, которые должны доказать, что десктоп жив и будет жить.

Производительность. Платим больше – получаем меньше

Начнём с внутренностей. Здесь явным лидером будет десктоп и только он. По соотношению цена/производительность, он уверенно отрываетcя от своего портативного, но более дорогостоящего оппонента.

Если брать во внимание настольные процессоры и мобильные модели, то мы опять же, получаем большую производительность за меньшую цену у настольных систем. Тот же самый i5 – 3570 К, в процессорных тестах 3DMark немного обходит Intel Core i7-3615QM, но как вы понимаете, цены явно не в пользу i7-3615QM.

Тоже самое можно сказать и про видеокарты. В ноутбуках, которые позиционируются как замена домашнему ПК, установлены видеокарты, которые только морально могут поддержать современные требовательные игры и приложения. А о комфортной игре, не может быть и речи.

Конечно же, это всё компенсировано намного меньшим TDP у комплектующих ноутбука, но по-моему это не полноценное оправдание, когда речь заходит о производительности.

Вот мы потихоньку и подошли к очень интересной и актуальной теме.

Восьмое «чудо света» или игровой ноутбук. Особенности выбора

Очень часто сталкиваюсь с просьбами подобрать ноутбук на котором любые приложения летают, а fps зашкаливает во всех, без исключения, играх, но бюджет при этом составляет довольно скромную сумму. Большинство прекрасно понимают, что это невозможно. Но всё равно пытаются подобрать ноутбук в качестве игровой системы или для работы в требовательных к ресурсам системы приложениях.

Но удивиться можно и тогда, когда речь заходит о явно нескромных бюджетах. Посмотрим на довольно производительный ноутбук Asus N76VM, в среднестатистической комплектации которого, установлен подобный, рассмотренному выше, процессор Intel Core i7-3610QM. Цена вопроса (ноутбука) – 1300-1400$, немало, согласитесь?

Но хочу, чтобы вы обратили внимание на видеокарту. В данном девайсе установлена «могучая» GT630M, пусть я из злорадства выбрал комплектацию на GT630M, а не на 650M, но это ситуацию кардинально не изменило бы. Итак, GT630M оснащена шириной шины памяти в 128 бит, пусть даже и с GDDR5-памятью. Видеопамять работает на частоте 800 МГц, а по производительности эта видеокарта сравнима с настольной моделью HD 6570. После этих слов должна идти солидная порция «фырканья» от заядлых геймеров. Теперь ответьте на вопрос: в настольную систему за 1400$ вы поставили бы HD 6570? Нет, конечно! С таким бюджетом можно поставить HD 7950 или 7970, а потом прыгать от счастья и глотать радугу излучающейся игровой производительности.

Хотите по-настоящему игровой ноутбук? – Alienware M18x за 3500$, с двумя видеокартами 7970M, к вашим услугам.
А для тех, у кого нет лишних «тысяч долларов», а играть хочется во всё и сразу, предлагаю смотреть в сторону настольных систем, а на ноутбуки даже не оглядываться.

Но не всё так ужасно, как может показаться, выше мы говорили о максимуме производительности в требовательнейших играх. А ведь игры тоже бывают разные, поэтому за скромную сумму можно подобрать неплохую пародию игрового ноутбука, на которой худо-нехудо пойдёт множество игр. К примеру, сейчас солидно и дешёво смотрится связка «процессор АMD A10 + видеокарта HD 7670M». Также, можно подобрать чуть более «весёлый», но дорогой вариант на Intel i5/i7 + GT650M. Но основная концепция остается той же – ноутбук не для игр.

Простые преимущества и недостатки десктопа и ноутбука

Несмотря на столь агрессивное вступление по отношению к ноутбукам, глупо еще раз констатировать тот факт, что данное устройство имеет массу преимуществ. Все прекрасно понимают, что компактные ноутбуки в большинстве случаев гораздо удобнее (в плане портативности), нежели отдельный монитор и системный блок с кучей проводов, который занимает множество места. Несомненно, портативность так же добавляет жару, и некоторые пользователи, осознав лишь два этих фактора, готовы броситься покупать ноутбук. Возможно, для некоторых это будет резонным, но явно не для многих.

Один из передовых плюсов десктопа, который вытекает из его габаритности,- это удобство работы. Как ни крути, но гораздо удобнее работать за отдельной полногабаритной и, к примеру, эргономичной клавиатурой, положение которой можно удобно подстроить под себя, нежели за клавиатурой ноутбука, со смещенными кнопками и без дополнительного цифрового блока (зачастую). Также, очень часто заметна минимизация самих кнопок и уменьшение расстояния между ними, что также явно снижает удобство.

То есть, к основным плюсам, которые можно явно «пощупать» у ноутбуков, смело отнесем портативность и компактность, а у десктопов – это, несомненно, удобство работы.

Несмотря на то, что для некоторых фактор удобства, будет сомнительным, то в противоположность для людей, которым по «долгу службы» не приходится таскать с собой вычислительную машинку, это будет очень не сомнительно.

Апгрейд, перегрев и другие отличительные особенности ноутбука и настольного ПК

Сейчас, мы немного поговорим относительно оставшихся особенностей десктопов и ноутбуков. Конечно же, всё в нюансах охватить невозможно, но хотя бы основное.

Апгрейд ноутбука и настольного ПК

С апгрейдом у нотбуков тоже проблемы. В принципе, здесь он заканчивается на замене/добавлении жёсткого диска и оперативной памяти. Заменить процессор или графическую подсистему, гораздо проблематично, если вообще возможно. Из этого вытекают проблемы с ремонтом ноутбуков, который в домашних условиях выполнить тяжелее, нежели в случае с настольным ПК.

Перегрев ноутбука

Известная проблема перегрева у ноутбуков, частично остается и по сей день, особенно у производительных моделей. Разработчики постоянно находятся на грани, ведь нужно разместить в небольшом корпусе ноутбука те же комплектующие, что и в системном блоке, но так, чтобы они не перегревались. Для производительных моделей рекомендуют охлаждающие подставки, которые явно не добавляют удобства.

Монитор десктопа и ноутбука

У настольного компьютера монитор — это отдельная субстанция, которая, опять же, с легкостью поддается замене. Но главное преимущество здесь заключается в диагонали. Зачастую, ноутбуки ограничены в этом. Диагональ в 20” для ноутбука –просто «мега». В десктопном варианте, можно преспокойно приобрести монитор с диагональю 27” и радоваться жизни.

Но и тут не всё. Для работы с графикой подойдут лишь дорогостоящие ноутбуки с высококачественными дисплеями. У большинства моделей ноутбуков дешевого и среднего диапазона стоимости, качество изображения и цветопередача, по профессиональными меркам – оставляет желать лучшего. Поэтому, здесь подойдут только десктопные мониторы, которые будут больше, дешевле и качественнее.

Выводы. Что же всё-таки выбрать?

В данном случае каждый должен сделать собственный выбор, впрочем, как и во всем в жизни.

Ноутбук – это хороший портативный помощник в любом месте и в любое время. Но только для тех, кому это портативность действительно нужна. Ноутбук, зачастую, должен быть либо среднего, либо низкого уровня производительности (в разумной концепции). От портативного устройства требуется сёрфинг в интернет, работа в офисных приложениях, просмотр фильмов и другие, подобные не ресурсоемкие действия, в правильном понимании. Не нужно пытаться сделать из ноутбука универсальное устройство под все задачи.

Если вы хотите себе игровой ноутбук, то выше были указаны варианты развития событий. Но прежде чем подбирать себе пародию игрового ноутбука, подумайте о десктопе.

Большинство доводов относительно не резонности ноутбуков, относится к игровым, и пародиям мобильных высокопроизводительных систем. Если же, для вас универсальность в задачах заключается в том же самом доступе в интернет, офисных приложениях и мультимедиа, но при этом желательно иногда брать устройство с собой, то недорогой ноутбук, будет для вас прекрасным выбором.

Увесистый и габаритный десктоп уступает ноутбуку только в портативности и компактности, в остальном же – одни сплошные плюсы. Большая производительность, удобство работы за меньшие деньги, не могут не быть аргументами при выборе.

Конечно же, производительность ноутбуков будет расти, а цена – падать, но и десктопы не будут «спать», также наращивая производительность и темпы падения цен. Поэтому для тех, кому нужно от системы всё и даже больше, в плане производительности, использовали, и будут использовать настольные ПК в будущем.

Итак, хорошо подумайте и взвесьте все за и против, при выборе вам нужно отталкиваться только от своих потребностей и поставленных задач для системы.

Всё что было сказано в данной статье, не может учитывать специфику каждого отдельного случая. Поэтому, был бы очень рад услышать доводы, почему для вас был лучшим тот, или иной выбор. Буду признателен за подобные дополнения, а также, уточнения нюансов и разбор спорных моментов. Спасибо за внимание!

Описание

Персональный компьютер для учителя

Комплектация согласно Типового перечня (Приказ 704)

Характеристики для кабинета инклюзивного обучения присылаем на запрос. (разница в платформе и более мощном графическом адаптере).

Технические характеристики (изменим на ваш запрос при необходимости):

• Процессор Intel Pentium G4560 3.5GHz 3M LGA1151 box (BX80677G4560)
• Материнская плата ECS H110M4-C43, s1151, H110, 2xDDR4, HDMI-DVI-VGA, PCI, USB 3.0, mATX +COM/LPT
• Память DDR4 2133MHz/4Gb
• HDD 500 Gb Toshiba
• Оптическое устройство LG SuperMulti GH24NSD1 SATA черн
• Корпус PRZ-17 / 2*USB 3.0/2*USB 2.0 з БЖ CHIEFTEC PPS-500S
• Монитор 21.5″
• Клавиатура + Мышь
• Колонки
• Вариативно: программное обеспечение, Wi-Fi модуль

Не обращая внимание на рекомендации для учебных заведений по обеспечению ученических рабочих мест ноутбуками или планшетами (с клавиатурой), часто интересуют стационарными ПК для учащихся. Предлагаем учащуюся комплектацию (характеристики можно другие):

• Процессор Intel Pentium G4560 3.5GHz 3M LGA1151 box (BX80677G4560)
• Материнская плата ECS H110M4-C43, s1151, H110, 2xDDR4, HDMI-DVI-VGA, PCI, USB 3.0, mATX +COM/LPT
• Память DDR4 2133MHz/4Gb (або 2Gb на ваш запит)
• HDD 500 Gb Toshiba Оптическое устройство LG SuperMulti GH24NSD1 SATA черн
• Корпус PRZ-17 / 2*USB 3.0/2*USB 2.0 з БЖ CHIEFTEC PPS-500S
• ПО Microsoft® Windows® 10 PRO UKR + Office 2016
• Монитор 18,5″
• Клавиатура + Мышь
• Наушники

Workafrolic (±∞)Follow Feb 4, 2019 · 6 min read

Перевод «How to Easily Build Desktop Apps with HTML, CSS and JS» Адитьи Шридхары.

Фотография Робина Пьерра.

Можно ли использовать HTML, CSS и JavaScript для создания десктопных приложений?

Ответ — да 😄

В этой статье мы сосредоточимся в основном на том, как Electron можно использовать для создания десктопных приложений с использованием веб-технологий.

Electron

Electron может быть использован для создания десктопных приложений, также эти приложения будут мультиплатформенными — Windows, Mac, Linux и другие.

Electron объединяет Chromium и Node.js в одну среду исполнения. Это позволяет нам запускать код HTML, CSS и JavaScript в виде десктопного приложения.

Electron Forge

Если Electron используется напрямую, то перед сборкой приложения потребуется определённая ручная настройка. Также, если вы хотите использовать Angular, React, Vue или любой другой фреймворк или библиотеку, вам нужна будет ручная настройка.

Electron Forge значительно упрощает все вышеперечисленное.

Он предоставляет шаблонные приложения с Angular, React, Vue и другими фреймворками, что позволяет избежать дополнительных танцев с бубном.

Также он обеспечивает простоту сборки и упаковки приложения. В нём есть множество других функций, которые можно найти в документации.

Предварительная подготовка

Убедитесь, что у вас установлен Node.js. Если нет, то его можно скачать отсюда. Установите Electron Forge глобально, используя следующую команду:

npm install -g electron-forge

Начнём с приложения

Используйте следующую команду для создания вашего приложения:

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronicjs — это название приложения.

Потребуется некоторое время, чтобы команда, указанная выше, отработала. После завершения предыдущего процесса запустите приложение с помощью следующих команд:

cd simple-desktop-app-electronjs
npm i
npm start

Это должно открыть окно как на скрине ниже:

Разберёмся в структуре и коде

Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.

package.json

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

Путь config.forge содержит все конфигурации конкретно для Electron. Например, make-target используется для указания целевых файлов для различных платформ, таких как Windows, Mac или Linux.

Также в package.json есть «main»: «src/index.js», который указывает, что src/index.js является входной точкой приложения.

src/index.js

Согласно package.json, index.js является основным скриптом. Процесс, который запускает основной скрипт, называется главным процессом. Таким образом, основной процесс запускает скрипт index.js.

Основной процесс нужен для отображения элементов интерфейса. Это делается путем создания страниц. Каждая созданная страница выполняется в процессе, называемом процессом отрисовки.

Главный процесс и процесс отрисовки

Основное предназначение главного процесса — создание страниц с помощью экземпляра BrowserWindow. Экземпляр BrowserWindow использует процесс отрисовки для запуска каждой страницы.

Любое приложение может иметь только один главный процесс, но много процессов визуализации.

Также возможно взаимодействие между главным процессом и процессом отрисовки. Однако, я не буду останавливаться на этом в текущей статье.

Архитектура Electron, показывающая главный процесс и процессы отрисовки. Названия файлов могут быть другими.

abcd.html показан в качестве второй веб-страницы в приведенной выше архитектуре. Но в нашем коде у нас не будет второй веб-страницы.

src/index.html

index.js загружает файл index.html в новый экземпляр BrowserWindow.

Это означает, что index.js создает новое окно GUI и загружает его со страницей index.html. Страница index.html запускается в своем собственном процессе отрисовки.

Код в index.js с пояснениями

Большая часть кода, созданного в index.js, содержит хорошие комментарии, объясняющие, что происходит. Здесь я упомяну несколько ключевых моментов, которые следует отметить в index.js:

mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
// и загрузи index.html из app.
mainWindow.loadURL(`file://${__dirname}/index.html`);

Приведенный выше фрагмент кода просто создает экземпляр BrowserWindow и загружает index.html в BrowserWindow. Вы увидите, что app часто используется в коде. Например, возьмите приведенный ниже фрагмент:

app.on(‘ready’, createWindow);

app используется для управления жизненным циклом событий приложения. Приведенный выше фрагмент кода говорит, что, когда приложение будет готово, нужно загрузить первое окно.

Точно так же app может использоваться для выполнения других действий с различными событиями. Например, его можно использовать для выполнения некоторых действий непосредственно перед закрытием приложения и так далее.

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

Давайте воспользуемся тем же приложением, которое мы создали ранее, и немного изменим его, чтобы создать приложение конвертера температуры.

Сначала давайте установим Bootstrap с помощью следующей команды:

npm install bootstrap —save

Скопируйте следующий код в src/index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Конвертер температур</title>
<link rel=»stylesheet» href=»../node_modules/bootstrap/dist/css/bootstrap.min.css»>
</head>
<body>
<h1>Конвертер температур</h1>
<div class=»form-group col-md-3″>
<label for=»celcius»>По Цельсию:</label>
<input type=»text» class=»form-control» id=»celcius» onkeyup=»celciusToFahrenheit()»>
</div>
<div class=»form-group col-md-3″>
<label for=»fahrenheit»>По Фаренгейту:</label>
<input type=»text» class=»form-control» id=»fahrenheit» onkeyup=»fahrenheitToCelcius()»>
</div>
<script src=»renderer.js»></script>
</body>
</html>

Приведенный выше код выполняет следующие действия:

1. Создаёт поле ввода текста с id=»celcius». Всякий раз, когда в это поле что-то вводится, вызывается функция celciusToFahrenheit().
2. Создаёт поле ввода текста с id=»fahrenheit». Всякий раз, когда в это поле что-то вводится, вызывается функция fahrenheitToCelcius().
3. Когда в поле ввода «По Цельсию» вводится значение, в поле «По Фаренгейту» показывается та же температура, но в Фаренгейтах.
4. Когда в поле ввода «По Фаренгейту» вводится значение, в поле «По Цельсию» показывается та же температура, но в Цельсиях.

2 функции, которые выполняют преобразование температуры, будут храниться в renderer.js.

Создайте файл с именем renderer.js внутри src. Скопируйте в него следующий код:

function celciusToFahrenheit(){
let celcius = document.getElementById(‘celcius’).value;
let fahrenheit = (celcius * 9 / 5) + 32;
document.getElementById(‘fahrenheit’).value = fahrenheit;
}
function fahrenheitToCelcius(){
let fahrenheit = document.getElementById(‘fahrenheit’).value;
let celcius = (fahrenheit — 32) * 5 / 9;
document.getElementById(‘celcius’).value = celcius;
}

Функция celciusToFahrenheit() считывает значение в текстовом поле «По Цельсию», преобразует его в градусы Фаренгейта и записывает новую температуру в текстовое поле «По Фаренгейту».

Функция fahrenheitToCelcius() делает ровно наоборот.

Запускаем приложение

Запустите приложение, используя следующую команду:

npm start

Должно открыться следующее окно. Попробуйте ввести разные значения в инпуты.

Упаковываем приложение

Команда для упаковки приложения:

npm run package

Выполнение этой команды потребует некоторого времени. Как только выполнение закончится, проверьте папку out в папке проекта.

Я проверил это на машине c Windows. Была создана папка с именем simple-desktop-app-Electronjs-win32-x64 внутри папки out.

Таким образом, в папке out/simple-desktop-app-Electronjs-win32-x64 команда создала файл .exe для этого приложения. Нажатие на исполняемый файл автоматически запускает десктопное приложение.

При создании приложения на macOS, папка внутри out называется simple-desktop-app-Electronjs-darwin-x64 и создаётся файл .app, который работает точно так же, прим. переводчика.

Имя папки simple-desktop-app-electronicjs-win32-x64 может быть разделено на имя-платформа-архетиктура, где

• имя — simple-desktop-app-electronjs
• платформа — win32 (darwin на macOS)
• архетиктура — x64

Когда вы запускаете команду без каких-либо параметров, по умолчанию она упаковывает пакеты для платформы, на которой вы разрабатываете.

Допустим, мы хотим пакет для другой платформы и архитектуры. Тогда вы можете использовать следующий синтаксис:

npm run package — —platform=<платформа> arch=<архитектура>

Например, чтобы упаковать приложение для Linux, вы можете использовать следующую команду:

npm run package — —platform=linux —arch=x64

Это создаст папку с именем simple-desktop-app-electronicjs-linux-x64 внутри папки out.

Создание файла make

Чтобы создать файл make или установщик для приложения, используйте следующую команду:

npm run make

Потребуется некоторое время на выполнение этой команды. Как только процесс закончится, проверьте папку out в папке проекта.

В папке out/make будет создан установщик Windows для десктопного приложения (или ZIP-архив на macOS).

Когда вы запускаете эту команду без каких-либо параметров, по умолчанию она создает установщик для платформы, которую вы используете для разработки.

Код

Код для этого приложения доступен в моем репозитории GitHub:

Форк репозитория на русском: solarrust/simple-desktop-app-electronjs.

Поздравляю 😄

Теперь вы знаете, как создавать десктопные приложения с использованием HTML, CSS и JavaScript. В этой статье были рассмотрены основные понятия об Electron и Electron-Forge. Почитайте документацию чтобы узнать больше.

Об авторе

Я люблю технологии и слежу за новинками. Мне также нравится помогать другим, делясь своими технологическими знаниями.

Не стесняйтесь связаться со мной через LinkedIn, вы также можете подписаться на меня в Твитере или зайти на мой сайт.