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

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

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

Цей посібник передбачає, що ви заповнили документ " Інсталяція " і успішно налаштували свої інструменти.

Будь ласка, використовуйте PHP 8.0 або новішу версію. Ви можете знайти повну версію програми на GitHub.

Вітальна сторінка

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

`оболонка 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>Presenters/</b>   ← классы презентеров
│   │   └── <b>templates/</b>← шаблоны
│   ├── <b>Router/</b>       ← конфигурация адресов URL
│   └── <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/Presenters/templates/Home/default.latte` текстом `Hello world!`.


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


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

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

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

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

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

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

```php .{file:app/Bootstrap.php}
...
$configurator->setDebugMode(false);
$configurator->enableTracy(__DIR__ . '/../log');
...

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

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

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

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

Надішліть подяку

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

composer thanks

Спробуйте!