Превращаем генератор паролей в настоящую программу
vk f t

Превращаем генератор паролей в настоящую программу

Наста­ло вре­мя насто­я­ще­го про­грам­ми­ро­ва­ния — соби­ра­ем при­ло­же­ние из исход­ни­ков.

У нас есть веб-страницы, они рабо­та­ют в бра­у­зе­ре. С помо­щью JavaScript и CSS эти веб-страницы могут выгля­деть и рабо­тать так же хоро­шо, как и при­ло­же­ния на ком­пью­те­ре — с интер­фей­сом, интер­ак­тив­но­стью, хра­не­ни­ем дан­ных и так далее. 

И есть сами при­ло­же­ния: они рабо­та­ют на ком­пью­те­рах без бра­у­зе­ра. 

«Поче­му бы их не объ­еди­нить? — поду­ма­ли раз­ра­бот­чи­ки. — Пусть при­ло­же­ния из веба живут на ком­пью­те­рах как деск­топ­ные при­ло­же­ния!» Так появил­ся Electron.

Electron — фрейм­ворк, кото­рый поз­во­ля­ет созда­вать на базе веб-страниц при­ло­же­ния для настоль­ных опе­ра­ци­он­ных систем. В его осно­ве — биб­лио­те­ка отоб­ра­же­ния стра­ниц Chromium Node.js, кото­рая рас­ши­ря­ет воз­мож­но­сти JavaScript. В резуль­та­те из HTML-страницы с помо­щью Элек­тро­на полу­чит­ся гото­вое при­ло­же­ние, кото­рое будет рабо­тать само по себе.

На базе Элек­тро­на постро­ен, напри­мер, VSCode — один из люби­мых инстру­мен­тов мно­гих про­грам­ми­стов. Если вы не зна­е­те, что это — почи­тай­те наш обзор средств раз­ра­бот­ки. Ещё на Элек­троне собра­ли новую вер­сию Скай­па и деск­топ­ный кли­ент Ворд­прес­са.

В этой ста­тье мы собе­рём про­грам­му из наше­го гене­ра­то­ра паро­лей

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

Так­же мы будем пока­зы­вать все при­ме­ры на Windows. Для мака читай­те доку­мен­та­цию — всё будет почти так же, но с неко­то­ры­ми нюан­са­ми.

Устанавливаем Node.js

Пере­хо­дим на nodejs.org/en/download/ и выби­ра­ем свою опе­ра­ци­он­ную систе­му. Ска­чи­ва­ние и уста­нов­ка дис­три­бу­ти­ва зай­мёт око­ло 5 минут. В резуль­та­те у вас на ком­пью­те­ре появит­ся несколь­ко новых про­грамм, сре­ди кото­рых будет команд­ная стро­ка Node.js — Node.js command prompt. В ней мы и будем даль­ше соби­рать наш гене­ра­тор.

Выбор плат­фор­мы для уста­нов­ки

В состав Node.js ещё вхо­дит npm — мене­джер паке­тов, кото­рый помо­жет нам со сбор­кой. Пакет — это малень­кая слу­жеб­ная про­грам­ма, к кото­рой мож­но обра­щать­ся из сво­ей основ­ной про­грам­мы за помо­щью в каких-то делах. Если нам нужен пакет, кото­ро­го ещё нет на ком­пью­те­ре, его мож­но уста­но­вить коман­дой npm install <имя пакета>. Мы будем её исполь­зо­вать несколь­ко раз в нашем про­ек­те.

Что­бы убе­дить­ся, что всё уста­но­ви­лось пра­виль­но, откро­ем команд­ную стро­ку Node.js и выпол­ним такие коман­ды: 

node -v (Эта коман­да долж­ны выве­сти теку­щую вер­сию Node.js)
npm -v (Эта коман­да долж­ны выве­сти теку­щую вер­сию мене­дже­ра паке­тов npm)

Про­сто вво­дим эти коман­ды в про­грам­му и нажи­ма­ем кла­ви­шу вво­да:

Про­вер­ка про­шла успеш­но — все вер­сии на экране

Устанавливаем Электрон

Для это­го запус­ка­ем такую коман­ду:

npm install electron --save-dev

Она уста­но­вит Элек­трон и ска­ча­ет все нуж­ные фай­лы на ком­пью­тер, что­бы не выка­чи­вать их каж­дый раз из сети.

После уста­нов­ки Элек­тро­на на ком­пью­тер доба­ви­лось 145 паке­тов, часть их будет исполь­зо­вать­ся в про­ек­те

Подготавливаем папку проекта

Самое про­стое при­ло­же­ние на Electron будет иметь такую струк­ту­ру папок:

app_name/

├── package.json

├── main.js

└── index.html

Это зна­чит, что у нас долж­на быть пап­ка с назва­ни­ем про­грам­мы, где рас­по­ло­же­ны три фай­ла. Package.json отве­ча­ет за то, как Элек­трон собе­рёт наш про­ект, main.js — скрипт, кото­рый откры­ва­ет окно при­ло­же­ния, опре­де­ля­ет неко­то­рые пара­мет­ры и неко­то­рые обра­бот­чи­ки собы­тий, а index.html — это будет наш файл с гене­ра­то­ром, толь­ко под дру­гим име­нем.

Созда­ём пап­ку gen в корне дис­ка С и напол­ня­ем её пока пусты­ми тре­мя фай­ла­ми. Как напол­нить эти фай­лы — читай­те ниже.

Наполняем package.json

Ско­пи­руй­те этот код, вставь­те в любой тек­сто­вый редак­тор и сохра­ни­те файл как package.json. В содер­жи­мое мож­но пока не вни­кать.

    
language: JSON
{

  "name": "electron-app",

  "version": "1.0.0",

  "description": "",

  "main": "main.js",

  "devDependencies": {

    "browser-window": "^0.4.0",

    "electron": "^5.0.5",

    "electron-packager": "^14.0.0",

    "electron-prebuilt": "^0.35.2",

    "electron-prebuilt-compile": "^4.0.0",

    "os": "^0.1.1",

    "package": "^1.0.1"

  } ,

  "scripts": {

    "start": "electron main.js"

  } ,

  "author": "",

  "license": "ISC"

}


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Наполняем main.js

Дела­ем то же самое — копи­ру­ем код, встав­ля­ем и сохра­ня­ем как файл main.js в пап­ке gen.

    
language: JavaScript
const electron = require('electron');

 

const app = electron.app;

 

const BrowserWindow = electron.BrowserWindow;

 

let mainWindow;

 

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

  

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

    app.quit();

  } 

});

 

app.on('ready', function() { 

 

  mainWindow = new BrowserWindow({width: 1000, height: 625});

 

  mainWindow.loadURL('file://' + __dirname + '/index.html');

 

  mainWindow.on('closed', function() { 

 

  mainWindow = null;

  });

});


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Копируем генератор в папку проекта

Пре­лесть Элек­тро­на в том, что если у вас про­ект — одна HTML-страница, то всё, что вам нуж­но сде­лать, это ско­пи­ро­вать её в пап­ку про­ек­та и пере­име­но­вать в index.html. Так и посту­пим.

В ито­ге у нас в пап­ке лежат все три фай­ла, кото­рые нуж­ны для сбор­ки. Мож­но при­сту­пать к основ­ной части.

Устанавливаем модули

Нам пона­до­бят­ся два моду­ля: один отве­ча­ет за окно бра­у­зе­ра, в кото­ром будет рабо­тать наша про­грам­ма, а вто­рой — за сбор­щик, кото­рый собе­рёт все фай­лы в один испол­ня­е­мый авто­ном­ный файл.

Оба моду­ля уста­нав­ли­ва­ют­ся оди­на­ко­во — в команд­ной стро­ке Node.js выпол­ним по оче­ре­ди сле­ду­ю­щее:

npm install browser-window --save-dev
npm install electron-packager -g

Собираем приложение

Не выхо­дя из команд­ной стро­ки Node.js, пере­хо­дим в пап­ку про­ек­та. Что­бы перей­ти на пап­ку уров­нем выше, исполь­зуй­те коман­ду 

cd ..

А что­бы зай­ти в нуж­ную пап­ку, нуж­на такая коман­да:

cd имя_папки

Если всё сде­ла­но пра­виль­но, то команд­ная стро­ка будет начи­нать­ся так: с:\gen>

Теперь обнов­ля­ем все зави­си­мо­сти в про­ек­те. Это зна­чит, что Элек­трон зай­дёт в пап­ку про­ек­та, загля­нет во все фай­лы и убе­дит­ся, что у нас все­го хва­та­ет. Если не хва­та­ет — под­ска­жет, чего имен­но и где это взять.

npm install

Оста­лось собрать всё в один файл коман­дой:

electron-packager

Вот, что она сде­ла­ет:

Захо­дим в эту пап­ку, нахо­дим файл electron-app.exe, запус­ка­ем — всё рабо­та­ет!

Что дальше

Если вам понра­ви­лось созда­вать свои про­грам­мы таким спо­со­бом, почи­тай­те доку­мен­та­цию про­ек­та: electronjs.org/docs

Элек­трон — не един­ствен­ный фрейм­ворк, кото­рый так уме­ет, ещё есть NW.js. Он немно­го отли­ча­ет­ся от Элек­тро­на, но прин­цип рабо­ты у них похож.

Ещё по теме