2. Налаштування робочого середовища

Ми будемо використовувати такі інструменти (у Windows 10, 64-бітна версія):

[Laragon] для запуску веб-сервера PHP;
[Netbeans] для редагування коду PHP;
[Visual Studio Code] — для написання коду JavaScript;
[node.js] — для їх виконання;
[npm] для завантаження та встановлення бібліотек JavaScript, які нам знадобляться;

2.1. Робоче середовище для веб-сервера

Скрипти PHP були написані та протестовані в такому середовищі:

середовище веб-сервера Apache / SGBD MySQL / PHP 7.3 під назвою Laragon;
середовище розробки NetBeans 10.0;

2.1.1. Встановлення Laragon

Laragon — це пакет, що об’єднує кілька програм:

веб-сервер Apache. Ми будемо використовувати його для написання веб-скриптів у PHP;
SGBD MySQL;
скриптова мова PHP;
сервер Redis, що реалізує кеш для веб-додатків:

Laragon можна завантажити (березень 2019 року) за наступною адресою:

https://laragon.org/download/

Встановлення [1-5] створює таку структуру каталогів:

у [6] — папку інсталяції PHP;

При запуску [Laragon] з’являється таке вікно:

[1]: головне меню Laragon;
[2]: кнопка [Start All] запускає веб-сервер Apache, а SGBD — MySQL;
[3]: кнопка [WEB] відображає веб-сторінку [http://localhost], яка відповідає файлу PHP [<laragon>/www/index.php], де <laragon> — це папка, в якій встановлено Laragon;
[4]: кнопка [Database] дозволяє керувати SGBD та MySQL за допомогою інструменту [phpMyAdmin]. Перед цим його потрібно встановити;
[5]: кнопка [Terminal] відкриває командний рядок;
[6]: кнопка [Root] відкриває провідник Windows, налаштований на папку [<laragon>/www], яка є кореневою папкою веб-сайту [http://localhost]. Саме туди потрібно розмістити всі веб-додатки, що обслуговуються сервером Apache в Laragon;

Відкриємо термінал Laragon [5]:

у [1] вказано тип терміналу. У [6] доступні три типи терміналів;
у [2, 3]: поточна папка;
у [4] вводиться команда [echo %PATH%], яка відображає список папок, переглянутих під час пошуку виконуваного файлу. Усі основні папки Laragon включені до цього шляху до виконуваних файлів, чого не було б, якби ми відкрили командне вікно [cmd] у Windows. У цьому документі, коли доводиться вводити команди для встановлення того чи іншого програмного забезпечення, зазвичай ці команди вводяться у терміналі Laragon;

2.1.2. Встановлення IDE NetBeans 10.0

IDE NetBeans 10.0 можна завантажити за наступною адресою (березень 2019 року):

https://netbeans.apache.org/download/index.HTML

Завантажений файл має формат zip, який потрібно просто розпакувати. Після встановлення та запуску NetBeans можна створити перший проєкт PHP.

у [1], виберіть опцію «File / New Project»;
у [2] виберіть категорію [PHP];
у [3] виберіть тип проєкту [PHP Application];

у [4] вкажіть назву проекту;
у [5] виберіть папку для проекту;
у [6] виберіть версію завантаженого PHP;
у [7] виберіть кодування UTF-8 для файлів PHP;
У [8] виберіть режим [Script] для виконання скриптів PHP у режимі командного рядка. Виберіть [Local WEB Server], щоб виконати скрипт PHP у веб-середовищі;
у [9,10] вкажіть каталог встановлення інтерпретатора PHP з пакета Laragon:

виберіть [Finish], щоб завершити роботу майстра створення проєкту PHP;

у [11] проект створюється зі скриптом [index.php];
у [12] записується мінімальний скрипт PHP;
у [13] виконується [index.php];

у [14] результати відображаються у вікні [output] у NetBeans;
у [15] створюється новий скрипт;
у [16] — новий скрипт;

Читач може створити всі наступні скрипти в різних папках того самого проєкту PHP. Вихідні коди скриптів цього документа доступні у вигляді такої структури NetBeans:

Скрипти цього документа розміщені в структурі проекту [scripts-console] [1]. Ми також будемо використовувати бібліотеки PHP, які будуть розміщені в папці [<laragon-lite>/www/vendor] [2], де <laragon-lite> — це папка інсталяції програмного забезпечення Laragon. Щоб NetBeans розпізнав бібліотеки з папки [2] як частину проєкту [scripts-console], нам потрібно включити папку [vendor] [2] у гілку [Include Path] [3] проекту. Ми налаштуємо NetBeans так, щоб папка [<laragon-lite>/www/vendor] [2] включалася в кожен новий проект PHP, а не лише в проект [scripts-console]:

у [1-2] перейдіть до налаштувань NetBeans;
у [3-4] налаштовуємо параметри PHP;
у [5-7] налаштовуємо [Global Include Path] для PHP: папки, вказані у файлі [7], автоматично включаються до файлу [Include Path] у будь-якому проєкті PHP;

у [9] можна отримати доступ до властивостей гілки [Include Path];
у [10-11] — нові бібліотеки, проаналізовані NetBeans. NetBeans аналізує код PHP цих бібліотек і запам’ятовує їхні класи, інтерфейси, функції тощо, щоб надавати допомогу розробнику;

у [12] код використовує клас [PhpMimeMailParser\Parser] із бібліотеки [vendor/php-mime-mail-parser];
у [13] NetBeans пропонує методи цього класу;
у [14-15] NetBeans відображає документацію до вибраного методу;

Поняття [Include Path] тут є специфічним для NetBeans. PHP також має це поняття, але, судячи з усього, це два різних поняття.

Тепер, коли робоче середовище встановлено, ми можемо перейти до вивчення основ PHP.

2.2. Робоче середовище для JavaScript

Ці інструменти можна встановити за допомогою Laragon (див. розділ «Посилання»):

У [4] встановлюємо [node.js]. Після завершення встановлення відкрийте термінал Laragon (див. розділ «Посилання») і перевірте версію встановленого [node.js] (1), а також версію [npm] (2):

Далі встановлюємо Visual Studio Code, який часто називають [code], [VSCode] або [3-6]. Після цього можна запустити цей інструмент розробки:

2.2.1. Налаштування Visual Studio Code

Тепер ми покажемо, як ми налаштували [VSCode], щоб читач міг зрозуміти скріншоти, які час від часу з’являтимуться. Читач може на власний розсуд налаштувати [VSCode]. Він навіть може встановити своє улюблене робоче середовище. Це не має значення для того, що ми будемо робити далі.

Спочатку ми змінимо зовнішній вигляд вікна [VSCode], щоб фон був світлим, а не чорним:

Потім приховуємо ліву панель [1-2], елементи якої також доступні в меню. У [3-6] ми налаштовуємо форматування коду при кожному збереженні файлу та при кожному копіюванні/вставленні.

Після збереження налаштувань [Ctrl-S] можна закрити вікно [Settings] [7]. У будь-який момент можна повернутися до конфігурації [VSCode] [8-10]:

Ці налаштування зберігаються у файлі [settings.json], який можна редагувати безпосередньо. Відкриємо вікно налаштувань [Settings], як це було показано раніше:

У [4] можна безпосередньо редагувати файл [settings.json]:

у [1] — шлях до файлу [settings.json]. Один із способів повернутися до конфігурації за замовчуванням — видалити цей файл;
у [2] — налаштування, які ми щойно зробили;

Тепер відкриємо термінал усередині [VSCode] [1-2]:

у [3] — тип відкритого терміналу, у даному випадку PowerShell;
у [4] можна вводити команди Windows;
у [6] можна відкривати інші термінали;
у [5] — список відкритих терміналів;
у [7] — закрити активний термінал;

Ми будемо використовувати термінал [VSCode] для встановлення пакетів (бібліотек) JavaScript за допомогою інструменту [npm] (Node Package Manager). Як ми вже робили раніше в терміналі Laragon, перевіримо версію встановленого [npm]:

Бачимо, що команда [npm] не була розпізнана. Це означає, що вона не належить до PATH (список папок, які слід обшукати для пошуку виконуваного файлу, у даному випадку [npm]) терміналу. Можна дізнатися, який PATH використовує термінал:

Виконуваний файл [npm] відсутній у цих папках. Як і інші інструменти, встановлені Laragon, він знаходиться в папці [<laragon>\bin] програми Laragon, а точніше — у папці [nodejs] [4-6].

Щоб запустити [VSCode] і отримати доступ до [npm], ми запустимо [VSCode] з терміналу Laragon. Запущений таким чином, [VSCode] успадкує PATH з терміналу Laragon, який, у свою чергу, містить папку з виконуваними файлами [node] та [npm]:

у [1]: вводимо команду [path];
у [2]: список папок у PATH. Там видно папку [node-v10] [2], що гарантує нам, що виконувані файли [node] та [npm] будуть знайдені;

[VSCode] запускається з терміналу Laragon за допомогою команди [code]:

у [2] відкривається термінал PowerShell у [VSCode];
у [3-4] видно, що виконувані файли [node] та [npm] доступні;

Примітка: не слід закривати термінал Laragon, який запустив середовище розробки [VSCode], інакше VSCode закриється самостійно.

Здійснимо останнє налаштування: змінимо термінал за замовчуванням для [VSCode]:

Файл [settings.json] одразу оновлюється:

Тепер відкриємо новий термінал [VSCode] [1]:

у [2] — термінал [cmd] (а не PowerShell);
у [3] команда [path] видає PATH терміналу;
у [4] чітко видно папку з виконуваними файлами [node] та [npm]

2.2.2. Додавання розширень до Visual Studio Code

Створимо файл JavaScript за допомогою [VSCode]:

у [3-4] створюємо папку;
у [5] робимо його поточним каталогом для [VSCode];
у [6] відкриваємо термінал;
у [7] бачимо, що ми перебуваємо у вибраній папці. Наступні операції будуть виконуватися саме в ній;

у [1-3]: створюється нова папка;
у [4]: додаємо файл у цю папку;

у [5-7]: створюємо нашу першу програму на JavaScript;

у [8-9]: запускаємо програму на JavaScript;
результат з’являється у консолі виконання [10]. У [11] ми бачимо команду, яка була виконана: саме додаток [node] виконав скрипт [test-01.js]. Це стало можливим завдяки тому, що цей виконуваний файл знаходиться у PATH з [VSCode]; інакше з’явилася б помилка про те, що команда [node] невідома;

Діємо таким самим чином, щоб запустити другий скрипт [test-02.js]:

у [1-3] ми визначаємо новий скрипт. Інструкція [use strict] у рядку 1 вимагає суворої перевірки синтаксису. У цьому контексті кожна змінна має бути оголошена за допомогою одного з ключових слів [let, const, var]. Це не стосується змінної [x] у рядку 2;
під час виконання цього коду за допомогою [Ctrl-F5] виникає помилка [5]. Про такі помилки можна отримати попередження ще до виконання коду. Це кращий варіант. Ми зробимо дві речі:
- встановимо за допомогою [npm] бібліотеку під назвою [eslint], яка перевіряє відповідність синтаксису скрипта стандарту ECMAScript 6;
- встановити розширення для Visual Studio Code, яке також називається ESLINT і полегшує використання бібліотеки [eslint] у [VSCode];

Спочатку встановимо бібліотеку JavaScript [eslint] за допомогою інструменту [npm]. Щоб встановити бібліотеку (яку називають пакетом) [npm], потрібно знати її точну назву. Якщо його немає, можна перейти на сайт [npm] за посиланням URL (2019) [https://www.npmjs.com/]:

у [3] — пакети, що починаються з [esl];
у [4-6] міститься пакет [eslint];

у [7] — команда [npm] для встановлення пакета [eslint];
у [8] — конфігурація пакета;
у [9] — його використання для перевірки синтаксису скрипта JavaScript;

Ми встановлюємо пакет [eslint] у вікні [Terminal] програми [VSCode]. Спочатку нам потрібно створити файл [package.json] у кореневій папці робочого каталогу [VSCode]. Цей файл міститиме перелік пакетів jS, що використовуються проектом [VSCode]:

у [1] клацніть правою кнопкою миші в провіднику проєкту (не на папці tests);
у [3-4], створюється файл [package.json] у кореневому каталозі проєкту [javascript], на тому самому рівні, що й папка [tests] (але не в [tests]);
у [4-6] додаємо до файлу [package.json] порожній об’єкт jSON;

Потім відкриваємо термінал [VSCode] для встановлення [eslint]:

у [2] ми знаходимося в кореневому каталозі проєкту [javascript];
у [3] — команда, що встановлює пакет [eslint];
після виконання,
- у [4-5] файл [package.json] було змінено. У рядку 3 вказано версію встановленого [eslint]. У рядку 2 [devDependencies] відповідає аргументу [--save-dev] інсталяції. Цей аргумент означає, що встановлену залежність потрібно внести до файлу [package.json] як елемент властивості [devDependencies]. Ця властивість містить перелік залежностей проєкту, які потрібні в режимі розробки, але не в режимі виробництва. Дійсно, залежність [eslint] потрібна лише під час розробки для перевірки того, чи написаний код відповідає стандарту ECMAScript;
- у [6] у проекті з’явилася папка [node_modules]. Це папка, в якій встановлені залежності проекту;

у [7] — частина встановлених пакетів. Їх дуже багато. Адже було встановлено не лише пакет [eslint], а й усі пакети, на яких він базується;

[1-2], у терміналі [VSCode] виконується команда налаштування пакета [eslint]. Програма задасть низку запитань [3], щоб з’ясувати, як саме ви бажаєте використовувати [eslint]. У разі сумнівів залиште опції, запропоновані за замовчуванням. Щоб вибрати опцію, скористайтеся стрілками вгору та вниз на клавіатурі, а потім підтвердіть вибір;
у [4] у кореневому каталозі проєкту було створено файл [.eslintrc.js];
у [6] — вміст файлу. Ви можете скопіювати цей вміст у свій власний файл;


module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};

Цього недостатньо для виявлення помилок у файлі [test-02.js]:

необхідно ввести команду [2-3], щоб файл [tests/test-02.js] був проаналізований;
у файлі [4] виявлено помилку щодо неоголошеної змінної;

Ми додамо до [VSCode] розширення, яке дозволить бачити помилки JavaScript у режимі реального часу. Це розширення базується на пакеті [eslint], який ми вже встановили:

у [3-5] ми встановлюємо розширення під назвою [ESLint];

на [1] — сторінка з інформацією про щойно встановлений модуль;
у [2], бачимо, що режим перевірки для [ESLint] — це [type], що означає, що синтаксис скриптів jS перевірятиметься одночасно з набором тексту;

ESLint можна налаштувати за допомогою загального файлу конфігурації [VSCode]:

у [6-7] — налаштування [ESLint]. Саме тут ви зможете їх змінити;

Тепер повернемося до файлу [test-02.js]:

у [3-4] тепер повідомляються помилки щодо змінної [x];
у [5]: кількість помилок ESLint у файлі;
у [6] вказується, що в папці [tests] є файли з помилками;

Якщо виправити помилку, попередження ESLint зникнуть:

Тепер встановимо розширення під назвою [Code Runner]:

Після встановлення розширення [Code-Runner] [1-5] його можна налаштувати за допомогою [6-7] (вище);

у [1-2] — елементи налаштування [Code-Runner];
у [3] задається вимога очищення терміналу виводу перед кожним виконанням;
у [4] знаходять елемент [Executor Map], який містить перелік засобів виконання різних мов;
у файлі [5-6] копіюється конфігурація у буфер обміну;
у [7-8] змінюємо файл [settings.json];

у [2] додаємо кому після останнього елемента файлу [settings.json] [1];
у файл [3] вставляємо те, що раніше скопіювали у файл [5-6]: це список команд, що дозволяють виконувати різні мови, які підтримує [VSCode];
у [4] — команда, що дозволяє виконувати файли JavaScript. Вона працює лише в тому випадку, якщо [node] знаходиться у PATH з [VSCode]. Якщо це не так, можна вказати повний шлях до виконуваного файлу [5];

Отже, збережемо конфігурацію (Ctrl-S). З розширенням [Code Runner] файли JavaScript можна запускати, клацнувши правою кнопкою миші на коді [6] (вище):

2.2.3. Кілька корисних команд [VSCode]

щоб відформатувати код, клацніть на ньому правою кнопкою миші [1];
щоб закрити відкриті вікна, клацніть правою кнопкою миші на їхніх заголовках [2-3];

щоб відкрити певне вікно — [4-5];
щоб зберегти ваш проєкт (Workspace) — [6-9];
щоб зберегти проект [10-11];

щоб відкрити проект [11-16]:

переглянути встановлені розширення [19-20]:

Зараз ми маємо хороші інструменти для розробки на JavaScript. Далі ми ознайомимо вас із цією мовою за допомогою коротких фрагментів коду. Оскільки цей огляд є продовженням курсу PHP, ми іноді будемо порівнювати ці дві мови, щоб підкреслити їхні відмінності.