Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Вступ до створення десктопних HTML5-застосунків за допомогою Node-Webkit

by
Difficulty:BeginnerLength:MediumLanguages:

Ukrainian (українська мова) translation by Nadia Gonzales (you can also view the original English article)

За допомогою Node.js ми можемо легко створювати веб-додатки. Тепер завдяки бібліотеці node-webkit ми також можемо створювати за допомогою Node.js десктопні застосування, використовуючи унікальну комбінацію HTML5 та Node.


Вступ

У цій бібліотеці движок WebKit та Node.js поєднуються унікальним чином.  WebKit і Node використовують той же самий контекст (* середовище виконання програми. Тут і надалі примітка перекладача),  завдяки чому ви можете писати код таким чином, неначе його писали для браузера, але з можливістю використовувати весь функціонал Node.

Список варіантів використання необмежений.  Ви можете створювати бізнес-додатки, текстові та графічні редактори, ігри, презентації, панелі керування для адміністраторів тощо.  Просто назвіть ім'я десктопного додатка, яке би ви хотіли створити, і я вам гарантую, що його можна буде створити за допомогою node-webkit.

У цьому посібнику я покажу вам, як почати використовувати бібліотеку на прикладі створення простого текстового редактора.


Приготування

Для початку вам необхідно отримати бібліотеку.  Для початку вам необхідно отримати бібліотеку. Завантажте відповідну до вашої операційної системи версію (сам же додаток буде запускатися на всіх платформах) з github та розпакуйте її, де забажаєте.  Тепер давайте створимо базову структуру папок.  У нас будуть папки для файлів HTML (.html) та для файлів JavaScript (.js).  Також створіть файл package.json у тій же папці, в якій знаходиться виконуваний файл nw, та папку node_modules для розташування модулів, що створимо.


Package.json

Спочатку необхідно заповнити необхідні поля в файлі package.json.  У випадку використання node-webkit це name і main (на Github ви можете ознайомитися з повним списком доступних опцій для package.json).  Перше поле те ж саме, що й для простих додатків Node.js.  У другому полі повинно бут вказано шлях (відносний чи абсолютний) до головного файлу HTML, що буде показано при запуску застосунку.  Ваш файл package.json повинен виглядати наступним чином:

Тепер при запуску додатка за допомогою виконваниго файлу nw ви повинні будете побачити порожній екран на зразок цього:

blank_app

Головний файл 

Створення користувацького інтерфейсу за допомогою node-webkit не відрізняється від створення веб-сторінки (окрім того, що вам відомий движок рендерингу (візуалізації), завдяки чому вам нема необхідності надавати які-небудь альтернативи для більш старих браузерів чи використовувати бібліотеки (jQuery тощо) – і, власне, не варто, оскільки вони містять код запасних варіантів, що може уповільнити ваш додаток).  Давайте створимо файл index.html, що будемо використовувати:

Давайте також підключимо (та створимо) головний файл JavaScript, що будемо використовувати, у тілі документа таким чином, що він буде виконуватися вісля завантаження DOM (* Document Object Model – Об'єктна модель документа).

Зараз при запуску додатка єдиним, що змінилося, буде заголовок.


Давайте скористаємося деякими можливостями Node

Для демонстрації простоти використання можливостей Node.js за допомогою node-webkit, давайте прочитаємо вміст package.json та виведемо його на екран.  Створіть js/main.js та напишіть у ньому наступний код:

Як ви бачите, код виглядає так само, неначе ви би писали його для Node.  Але потім ми використовуємо document.write для виведення вмісту файлу на сторінку.  Нема необхідності встановлювати який-небудь локальний сервер.

Тепер відкрийте додаток і ви повинні будете побачити дещо подібне.

file_contents_printed

Модулі

У node-webkit є ще одна перевага: нема необхідності писати теги <script> у нашому HTML, якщо ви хочете поділити ваш код на модулі. у нашому HTML, якщо ви хочете поділити ваш код на модулі.  Ви можете це зробити таким же чином, як і у Node.js – за допомогою require (* функція Node для імпорту модулів).  Давайте створимо простий модуль для виведення вмісту файлу до текстового поля або для запису його до файлу. Створіть файл file.js та помістіть його до папки node_modules.  Тепер напишіть у ньому наступний код:

Як ви бачите, це буде один клас зі статичними властивостями (* належать безпосередньо класу) – двома публічними методами: один – для відкриття файлів, а інший – для їх зберігання.

Метод open повинен виглядати наступним чином:

Доволі просто, так?  Функція приймає в якості першого параметра шлях до файлу та розташовує вміст файлу до елементу із id= "editor".  Нам також необхідно передати об'єкт document до функції, оскільки скрипт викликається за допомогою функції Node require та не має доступу до об'єктів WebKit безпосередньо.

Метод save такий же простий, як і попередній:

Тепер давайте перевыримо, чи все працює. Замініть вміст js/main.js на наступний:

Якщо ви тепер перейдете до консолі інструментів розробника та клацнете кнопку developer refresh у правому куті вікна, то повинні будете побачити визначення двох функцій із цього модуля.  Це ще одна перевага node-webkit – виклики сonsole.log відображуються в консолі інструментів розробника, завдяки чому полегшується процес налагодження вашого додатка.

dev_tools_log

Реалізація полів для відправки файлів у Node-Webkit

Давайте додамо два поля для відправки файлів, які знадобляться нам пізніше:

Зверніть увагу на атрибут nwsaveas у другому полі.  Це – спеціальний тип поля для вводу в node-webkit, який дозволяє користувачеві вибирати неіснуючий файл. Обоє поля приховано, оскільки нам необхіден доступ до них тільки через JavaScript.  В node-webkit поля для відправлення файлів модифіковано таким чином, що ви можете згенерувати подію click на них, завдяки чому є можливість відкрити діалогове вікно для виконання операцій без участі користувача, що клацає по полю (без необхідності використання обхідних шляхів, наприклад, прихованих полів вище кнопки). Тепер ми можемо перейти до JavaScript.

Для початку видаліть виклик console.log із файлу js/main.js.  Тепер напишіть у ньому наступний код:

Завдяки цьому коду реалізується можливість показу діалогових вікон для відкриття (Open) та зберігання (Save) файлу. Основну роботу виконує функція clickInput – вона симулює подію click по елементу для вводу; на відміну від node-webkit у звичайному браузері це було б  неможливо через загрозу небезпеки. Далі йде звичайний обробник подій для keyup, у якому перевіряється, чи була нажата правильна комбінація клавіш (Ctrl+O або Ctrl+S), та відбувається «клацання» по полям для вводу. Зверніть увагу, що вищезазначений функціонал неможливо реалізувати в браузері, оскільки комбінації клавіш такі як Ctrl+O та Ctrl+S зарезервовано браузером для внутрішнього використання та ніяких подій не генерується при їх натисканні (окрім Firefox).

Тепер натисніть кнопку developer refresh, і ви повинні будете побачити відповідне діалогове вікно при натисканні Ctrl+S чи Ctrl+O. Вони, звісно ж, поки що нічого не виконують.


Створення редактора

Тепер, оскільки ми будемо створювати текстовий редактор, нам необхідно створити щось, на чому можна писати. Додайте текстове поле до HTML:

Далі нам необхідно завершити код для відркриття/зберігання файлу. Давайте створимо обробник подій для події onchange для полів open и save:

Завдяки раніше створеному модуля код дуже простий. Створення редактора можливо завдяки ще одній особливості node-webkit: на відміну від браузерів (знову через загрозу небезпеки), де значенням елемента поля для відправлення файлів є несправжній шлях, у нас значенням є вибраний шлях. Тепер відкрийте додаток (або натисніть кнопку developer refresh, якщо ви його не закрили), і вас повинен бути відмінно працюючий текстовий редактор.


Подальше покращення

Ми також можемо зробити ще дещо, щоб покращити  редактор та зробити його більш корисним. Наприклад, давайте додамо можливість відкривати нове вікно, коли користувач натискає Ctrl+N. Для початку додайте require до верхньої частини скрипту:

Модуль nw.gui – це бібліотека node-webkit, за допомогою якої реалізується інтерфейс користувача (ви можете почитати про нього на Node-webkit Github). Далі додайте цю конструкцію else if до обробника події keyup у документі:

І viola! Якщо ви оновите додаток, то тепер можете натиснути Ctrl+N для відкриття нового вікна. Проте, ця функція дійсно відрізняється від звичайної window.open. Ви можете передавати різноманітні опції для вікна в якості другого параметра. Зі списком можливих налаштувань можна ознайомитися в документації.

Ще одна штука, що може бути корисна для текстового редактора, – це меню застосування (те, що розташовано під рядком заголовка у Windows/Linux та знаходиться у верхній частині екрана в Macintosh). В node-webkit реалізувати меню доволі просто. Для початку давайте створимо його:

Тип menubar зарезервовано для меню додатка. Тепер ми можемо додати до нього пункти (* які в свою чергу можуть бути підменю). Нехай це буде File:

Тепер давайте додамо до нього деякі пункти:

menu.items[0] – це перший пункт меню нашого додатка (ви також можете при бажанні присвоїти його значення змінній при його створенні). Ми додаємо нові пункти до його submenu і для кожного визначаємо функцію зворотного виклику для обробки події click при клацанні по пункту. Метод gui.Window.get приймає поточне вікно таким чином, що ми можемо його закрити, коли користувач вибирає опцію Close у File.

Нарешті, ми можемо присвоїти меню вікну:

Знов-таки, ми використовуємо gui.Window.get для отримання поточного вікна; потім ми присвоюємо наше меню властивості menu вікна. Будь ласка, зверніть увагу, що хоча ми і можемо присвоювати кожному вікну різноманітні меню, в OS X (Macintosh) один застосунок може мати тільки одне меню (спільне для всіх вікон), так що якщо ви хочете, щоб ваш застосунок використовувався на Macintosh, вам необхідно уникати використання різних меню для різних вікон.

Якщо ви тепер відкриєте та оновите ваш додаток, то ви повинні будете побачити системне ( *головне) меню під рядком заголовка.

system_menu

Пакування додатка

Якщо тепер ви забажаєте поділитися вашим додатком із іншими користувачами, то ви можете упакувати його до одного файлу так, що користувачі зможуть завантажувати виконуваний файл node-webkit, відповідний їх платформі, та запустити ваш додаток з його допомогою. Для початку давайте видалимо панель інструментів, через яку вікно виглядає подібно браузеру, – воно може знадобитися при розробці, проте ваші користувачі, скоріш за все, не захотять його бачити. Ми можемо це здійснити, задавши значенням window.toolbar false у package.json, і тепер файл виглядає таким чином:

Якщо ви тепер відкриєте додаток (нічого не зміниться, якщо ви просто оновите його, оскільки package.json завантажується тільки при запуску), то повинні будете побачити кінцевий результат:

final_result

Упакувати додаток дуже просто. Потрібно тільки створити zip-архів з усіма своїми ресурсами (усіма створеними вами файлами та без файлів, що постачаються з node-webkit) та змінити його розширення на .nw. От і все. Якщо користувач завантажить node-webkit та ваш модуль, то потрібно буде всього-на-всього помістити його до папки node-webkit та запустити виконуваний файл nw. Детальна інформація з додатковими рекомендаціями є на node-webkit GitHub.

Тепер ваш редактор можна віддавати користувачам.


Завершення

Як ви бачите,  node-webkit – це дуже перспективна та потужна бібліотека. Оскільки часто відбувається оновлення та виправлення багів, то малоймовірно, що розвиток цього проекту буде припинено, що іноді відбувається з проектами з відкритим початковим кодом.

Поділіться своїми думками про проект нижче в коментарях. Особисто я вважаю, що це найкраще рішення для створення десктопних застосунків за допомогою Node.js та HTML.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.