Створіть свій перший додаток!
*****************************

.[perex]
Познайомтеся з фреймворком Nette, створивши простий блог із коментарями. Давайте почнемо!

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

.[tip]
Цей посібник припускає, що ви заповнили [інсталяційний |nette:installation] документ і успішно налаштували ваш інструментарій. Також передбачається, що ви розумієте [об'єктно-орієнтоване програмування на PHP |nette:introduction-to-object-oriented-programming].

Будь ласка, використовуйте PHP 8.1 або новішу версію. Ви можете знайти повну версію програми [на GitHub |https://github.com/nette-examples/quickstart/tree/v4.0].


Вітальна сторінка .[#toc-the-welcome-page]
==========================================

Почнемо зі створення нового проекту у каталозі `nette-blog`:

```shell
composer create-project nette/web-project nette-blog
```

У цей момент має бути запущена вітальна сторінка веб-проекту. Спробуйте відкрити її, відкривши браузер і перейшовши за наступною URL-адресою:

```
http://localhost/nette-blog/www/
```

і ви побачите сторінку вітання фреймворку:

[* qs-welcome.webp .{url: http://localhost/nette-blog/www/} *]

Додаток працює, і тепер можна почати вносити в нього зміни.

.[note]
Якщо у вас виникли проблеми, [спробуйте скористатися кількома порадами |nette:troubleshooting#Nette-Is-Not-Working-White-Page-Is-Displayed].


Зміст веб-проекту .[#toc-web-project-s-content]
===============================================

Наш проект має таку структуру:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← каталог приложения
│   ├── <b>Core/</b>         ← основні необхідні класи
│   ├── <b>UI/</b>           ← доповідачі, шаблони та ін.
│   │   └── <b>Home/</b>     ← головний каталог доповідачів
│   └── <b>Bootstrap.php</b> ← загрузочный класс Bootstrap
├── <b>bin/</b>              ← скрипты для командной строки
├── <b>config/</b>           ← конфигурационные файлы
├── <b>log/</b>              ← журналы ошибок
├── <b>temp/</b>             ← временные файлы, кэш, …
├── <b>vendor/</b>           ← библиотеки, установленные через Composer
│   └── <b>autoload.php</b>  ← автозагрузка библиотек, установленных Composer
└── <b>www/</b>              ← общая папка — единственное место, доступное из браузера
    └── <b>index.php</b>     ← начальный файл, запускающий приложение
\--

Каталог `www` призначений для зберігання зображень, JavaScript, CSS та інших загальнодоступних файлів. Це єдиний каталог, доступний безпосередньо з браузера, тому ви можете вказати тут кореневий каталог вашого веб-сервера (можна налаштувати його в Apache, але давайте зробимо це пізніше, оскільки зараз це не важливо).

Найбільш важливим каталогом для вас є `app/`. Там можна знайти файл `Bootstrap.php`, усередині якого міститься клас, що завантажує фреймворк і конфігурує додаток. Він активує [автозавантаження |robot-loader:] та встановлює [налагоджувач |tracy:] і [маршрути |application:routing].


Очищення .[#toc-cleanup]
========================

Веб-проект містить сторінку привітання, яку ми можемо видалити - сміливо замініть вміст файлу `app/UI/Home/default.latte` текстом `Hello world!`.


[* qs-hello.webp .{url:-} *]


Tracy (відладчик) .[#toc-tracy-debugger]
========================================

Надзвичайно важливим інструментом для розробки є [відладчик під назвою Tracy |tracy:]. Спробуйте зробити кілька помилок у вашому файлі `app/UI/Home/HomePresenter.php` (наприклад, видаліть фігурну дужку з визначення класу HomePresenter) і подивіться, що станеться. З'явиться сторінка з червоним екраном і зрозумілим описом помилки.

[* qs-tracy.avif .{url:-}(debugger screen) *]

Tracy суттєво допоможе вам у пошуку помилок. Також зверніть увагу на плаваючу панель Tracy Bar у правому нижньому кутку, яка інформує вас про важливі дані під час виконання.

[* qs-tracybar.webp .{url:-} *]

У виробничому режимі Tracy, зрозуміло, вимкнена і не розкриває жодної конфіденційної інформації. Усі помилки зберігаються в директорії `log/`. Просто спробуйте. У файлі `app/Bootstrap.php` знайдіть наступний шматок коду, відкоментуйте рядок і змініть параметр виклику методу на `false`, щоб він мав такий вигляд:

```php .{file:app/Bootstrap.php}
...
$this->configurator->setDebugMode(false);
...
```

Після оновлення веб-сторінки сторінка з червоним екраном зміниться зручним для користувача повідомленням:

[* qs-fatal.webp .{url:-}(error screen) *]

Тепер загляньте в каталог `log/`. Ви можете знайти там журнал помилок (у файлі exception.log), а також сторінку з повідомленням про помилку (збережену в HTML-файлі з ім'ям, що починається з `exception`).

Прокоментуйте рядок `// $configurator->setDebugMode(false);` ще раз. Tracy автоматично вмикає режим розробки в оточенні `localhost` і вимикає його в інших місцях.

Тепер ми можемо виправити помилку і продовжити розробку нашого додатка.


Надішліть подяку .[#toc-send-thanks]
====================================

Ми покажемо вам трюк, який порадує авторів відкритих вихідних кодів. Ви можете легко присвоїти зірку на GitHub бібліотекам, які використовує ваш проект. Просто наберіть у консолі:

```shell
composer thanks
```

Спробуйте!

{{priority: -1}}
{{sitename: Быстрый старт с Nette}}